数据改变时,视图会重渲染,但只有实例被创建时的data中的属性才是响应式的,新添加的属性改动将不会触发更新,所以一些稍后会用到的属性需要在data中设置初始值。
// 我们的数据对象 var data = { a: 1 } // 该对象被加入到一个 Vue 实例中 var vm = new Vue({ data: data }) // 它们引用相同的对象! vm.a === data.a // => true // 设置属性也会影响到原始数据 vm.a = 2 data.a // => 2 // ……反之亦然 data.a = 3 vm.a // => 3
实例生命周期钩子
每个 Vue 实例在被创建时都要经过一系列的初始化过程——例如,需要设置数据监听、编译模板、将实例挂载到 DOM 并在数据变化时更新 DOM 等。同时在这个过程中也会运行一些叫做生命周期钩子的函数,这给了用户在不同阶段添加自己的代码的机会。
create 钩子可以用来在一个实例被创建后执行代码:
new Vue({ data: { a: 1 }, created: function () { // `this` 指向 vm 实例 console.log('a is: ' + this.a) } }) // => "a is: 1"
生命周期钩子的 this 上下文指向调用它的Vue实例(不要在选项属性或者回调上使用箭头函数)
插值
{{msg}} 双大括号语法
v-once:一次性插值,当数据改变,插值处内容不会更新。
v-html:输出真正的 HTML
注:你的站点上动态渲染的任意 HTML 可能会非常危险,因为它很容易导致 XSS 攻击。请只对可信内容使用 HTML 插值,绝不要对用户提供的内容使用插值。
可以使用JavaScript表达式 如:<div v-bind:id=" 'list' +id">{{ok?yes:no}}</div>
注:模板表达式都被放在沙盒中,只能访问全局变量的一个白名单,如 Math
和 Date
。你不应该在模板表达式中试图访问用户定义的全局变量。