Vue入门中。。。

数据改变时，视图会重渲染，但只有实例被创建时的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 。你不应该在模板表达式中试图访问用户定义的全局变量。

Vue入门中。。。

浏览过的版块