声明式渲染。
数据在 JS 代码中,通过 Vue,这些数据与 DOM 绑定,这就是说,你在 JS 中改变了数据,DOM 就发生改变。
let app = new Vue({
el: '#app',
data: {
message: 'Hello world!',
}
})
上面的例子中,声明了数据 message,你可以将这个变量的值用在 HTML 页面上。一旦你的 JS 代码修改了这个变量,对应 HTML 上绑定的 DOM 也就发生了变化。
我们看几种绑定形式:
-
绑定属性值
<div v-bind:title="message"></div>
-
条件绑定
<div v-if="isvisible">ABC</div>
-
循环绑定数组
<li v-for="todo in todos"> {{ todo.text }} </li>
-
绑定事件处理
<button v-on:click="reverseMessage">反转</button>
-
表达的双向绑定 v-model
<input v-model="message">
这是绑定输入框的输入值,当用户收入时,message 的值也随之改变。