Declarative rendering.
JS code data by Vue, data and DOM bindings, that is to say, you change the data in JS, DOM will change.
let app = new Vue({
el: '#app',
data: {
message: 'Hello world!',
}
})
In the above example, the statement of the data message, you can use the value of this variable on the HTML page. Once your JS code to modify this variable, the corresponding binding on the HTML DOM also changed.
We look at several binding forms:
-
Binding property value
<div v-bind:title="message"></div> -
Binding Conditions
<div v-if="isvisible">ABC</div> -
Loop bind array
<li v-for="todo in todos"> {{ todo.text }} </li> -
Binding event handlers
<button v-on:click="reverseMessage">反转</button> -
Two-way binding expression of v-model
<input v-model="message">
This is the input value bindings input box when the user income, the value of the message has changed.
