组件建立以及组件通信:
Vue.component('todo-item', {
props: ['todo'],
template: '<li>{{ todo.text }}</li>'
});
var app = new Vue({
el: 'app',
data: {
groceryList: [{
id: 0, text: '蔬菜'
}, {
id: 1, text: '奶酪'
}, {
id: 2, text: '随便其它什么人吃的东西'
}]
}
});
<div id="app">
<ol>
<todo-item
v-for="item in groceryList"
v-bind:todo="item"
v-bind:key="item.id"
></todo-item>
</ol>
</div>
创建一个实例:每个Vue应用都是通过用Vue函数创建一个新的Vue实例开始的。
var vm = new Vue({
// 选项
});
所有的Vue组件都是Vue实例
数据与方法
当一个Vue实例被创建时,它将data对象中的所有的属性加入到Vue的响应式系统中。
这些属性的值发生改变时,视图将会产生“响应”,即匹配更新为新的值。
将数据对象加入到一个Vue实例中。
var data = { a : 1}
var vm = new Vue({
data: data
});
// 获得这个实例上的属性
// 返回源数据中对应的字段
vm.a == data.a // true
//设置属性也会影响到原始数据
vm.a = 2;
data.a // 2
// 反之亦然
data.a = 3;
vm.a // 3
当数据改变时,视图会重新进行渲染。
只有当实例被创建时data中存在的属性才是响应式的。 比如:vm.b = 'hi'; 对b的改动将不会出发任何视图的更新。代替方案,一开始设置一些初始值。
唯一的例外是使用Object.freeze(),这会阻止修改现有的属性,也意味着响应系统无法再追踪变化。
var obj = {
foo: 'bar'
}
Object.freeze(obj)
new vue({
el: '#app',
data: obj
})
//除了数据属性,Vue实例还暴露了一些有用的实例属性与方法。它们都有前缀$,以便与用户定义属性区分开来。
var data = {a : 1}
var vm = new Vue({
el: '#example',
data: data
})
vm.$data === data // true
vm.$el === document.getElementById('example') // true
vm.$watch('a', function (newValue, oldValue) {
// 这个回调将在`vm.a`改变后调用。
})
实例生命周期钩子
每个Vue实例在被创建时都要经过一系列的初始化过程–例如,需要设置数据监听、编译模板、将实例挂载到DOM并在数据变化时更新DOM等。
同时在这个过程中也会运行一些叫做生命周期钩子的函数,这给了用户在不同阶段添加自己的代码的机会。
created钩子可以用来在一个实例被创建之后执行代码