YouTip{{ message }}
new Vue({ el: '#app', data: { message: '
Tutorial
' } }) [Try it »](#) ### Attributes HTML attribute values should use the v-bind directive. The following example checks the value of `use`. If it's `true`, the `class1` style is applied; otherwise, it is not: ## v-bind Directive v-bind:class directive
{{5+5}}
{{ ok ? 'YES' : 'NO' }}
{{ message.split('').reverse().join('') }}
new Vue({ el: '#app', data: { ok: true, message: 'TUTORIAL', id : 1 } })
[Try it »](#)
* * *
## Directives
Directives are special attributes with the `v-` prefix.
Directives apply certain behavior to the DOM when the value of their expression changes. For example:
## Example
{{ ok ? 'YES' : 'NO' }}
{{ message.split('').reverse().join('') }}
Tutorial
Now you see me
` element based on the truthiness of the expression `seen` (true or false). ### Parameters Parameters are indicated after a colon following the directive. For example, the `v-bind` directive is used to reactively update HTML attributes: ## Example
new Vue({ el: '#app', data: { url: '' } }) [Try it »](#) Here, `href` is the parameter, telling the `v-bind` directive to bind the element's `href` attribute to the value of the expression `url`. Another example is the `v-on` directive, which is used to listen to DOM events: Here, the parameter is the name of the event to listen for. ### Modifiers Modifiers are special suffixes indicated by a dot `.`, used to specify that a directive should be bound in a special way. For example, the `.prevent` modifier tells the `v-on` directive to call `event.preventDefault()` for the triggered event: * * * ## User Input In an input box, we can use the `v-model` directive to achieve two-way data binding: ## Two-way Data Binding{{ message }}