If you have a JavaScript object representing multiple attributes that looks like this:
const objectOfAttrs = { id: 'container', class: 'wrapper'}
You can bind them to a single element by using v-bind without an argument:
<div v-bind="objectOfAttrs"></div>
It is possible to call a component-exposed method inside a binding expression:
<time :title="toTitleDate(date)" :datetime="date"> {{ formatDate(date) }}</time>
<aside> 💡 TIP Functions called inside binding expressions will be called every time the component updates, so they should not have any side effects, such as changing data or triggering asynchronous operations.
</aside>
Modifiers are special postfixes denoted by a dot, which indicate that a directive should be bound in some special way. For example, the .prevent modifier tells the v-on directive to call event.preventDefault() on the triggered event:
<form @submit.prevent="onSubmit">...</form>
import { ref } from 'vue'
const count = ref(0)
function increment() {
count.value++
}
</script>
<template>
<button @click="increment">
{{ count }}
</button>
</template>
Notice that we did not need to append .value when using the ref in the template. For convenience, refs are automatically unwrapped when used inside templates
Instead of a computed property, we can define the same function as a method. For the end result, the two approaches are indeed exactly the same. However, the difference is that computed properties are cached based on their reactive dependencies. A computed property will only re-evaluate when some of its reactive dependencies have changed.
This also means the following computed property will never update, because Date.now() is not a reactive dependency:
const now = computed(() => Date.now())
In comparison, a method invocation will always run the function whenever a re-render happens.