Special attributes provided by Vue, which applies reactive behavior to the rendered DOM.
Each directive is prefixed with a v-
. Here a list of all directives:
v-show
v-if
v-else-if
v-else
v-on
v-bind
For properties such asdisabled
combined withv-bind
(v-bind:disabled
), the behavior changes iffalse
,null
orundefined
are the values passed. In this case,disabled
property won't even be rendered.v-model
v-once
v-for
Equivalente to React's methods componentDidMount
. componentDidUpdate
, etc. The Lifecyle Hooks are:
beforeCreate
created
beforeMount
mounted
beforeUpdate
updated
activated
deactivated
beforeDestroy
destroyed
errorCaptured
{{}}
a.k.a mustache syntax, to render plain textv-html
: to render rawHTMLYou can't use
v-html
to compose template partials
Limited to expressions only. The only globals allowed are: Math
and Date
// Valid
{{ 1 + 1 }}
// Not valid
{{ var a = 1 }}
{{ if (a) { return 'a' } }}
Postfixes denoted by a dot indicating a directive should be bound in a special way.
<form v-on:submit.prevent="onSubmit">...</form>
The example above will call event.preventDefault()
when the event is triggered.
v-bind
:<a :href="url">...</a>
v-on
:<button @click="doSomething">...</button>
Computed works exactly as a cache to your operations. Even if you have multiple calls on the same computed property, your function will be executed only once.
The thing is: The Computed Property will "create" a dependency over the data you are willing to compute.
const app = new Vue({
data: {
message: 'I love memes!'
},
computed: {
reversedMessage() {
return this.message.split('').reverse().join('')
}
}
})
In the example above, the dependency is message
. Everytime message
changes, it will reflect the change on reversedMessage()
. Note: reversedMessage()
is a getter. The example below shows it:
app.reversedMessage = 'I love orange juice'
app.reversedMessage //=> "!semem evol I"
A better explanation of this behavior is by comprehending that computed properties open up breaches to interpret it as a combination of get
and set
methods. The example below is valid!
const app = new Vue({
data: {
firstName: 'Jailson',
lastName: 'Mendes'
},
computed: {
fullName: {
get() {
return [this.firstName, this.lastName].join(' ')
},
set(newValue) {
const [firstName, lastName] = newValue.split(' ')
this.firstName = firstName
this.lastName = lastName
}
}
}
})
app.lastName = 'Mercury'
app.fullName //=> Jailson Mercury