Vue的强大之处在一个小例子上都能体现出来,实现一个Todo的看例子仅需短短二三十行代码。
# html 模板代码
<div id="app">
<input v-model="newTodo" v-on:keyup.enter="addTodo">
<ul>
<li v-for="todo in todos">
<span>{{ todo.text }}</span>
<button v-on:click="removeTodo($index)">X</button>
</li>
</ul>
</div>
# Vue源码
new Vue({
el: '#app',
data: {
newTodo: '',
todos: [
{ text: 'Add some todos' }
]
},
methods: {
addTodo: function () {
var text = this.newTodo.trim()
if (text) {
this.todos.push({ text: text })
this.newTodo = ''
}
},
removeTodo: function (index) {
this.todos.splice(index, 1)
}
}
})
v-model
用于在表单控件上创建双向绑定,类型随表单控件类型不同而不同。
参考资料 – 表单控件绑定
绑定事件侦听器,事件类型由参数传入。普通元素只能侦听原生DOM事件,自定义元素可以侦听自定义事件。
v-on
指令可以缩写为@
参考资料 – 方法与事件处理器
类似于原生的for循环
,基于数据源重复数次。
参考资料 – 列表渲染
用于创建一个Vue实例
为Vue实例提供挂载元素,可以是CSS选择符,或者实际的HTML元素,或者返回HTML元素的函数。
Vue实例的数据对象,这个对象必须是普通对象。
定义组件时,data
必须是一个函数,每次创建一个实例,都会调用这个函数,返回一个新的原始数据对象的副本。
不能使用_
或者$
开头的属性。
参考资料 – 深入响应式原理
实例的方法,实例可以直接访问这些方法。方法的this
自动绑定到实例。也可以直接在模板上直接调用本实例的方法。
var vm = new Vue({
data: { a: 1 },
methods: {
plus: function () {
this.a++
}
}
})
vm.plus()
vm.a // 2
参考资料 – 方法与事件处理器