当一个 Vue 实例被创建时，它将 data 对象中的所有的属性加入到 Vue 的响应式系统中。当这些属性的值发生改变时，视图将会产生“响应”，即匹配更新为新的值。

生命周期

  1. new vue():新建vue实例=>初始化（事件，生命周期函数）
  2. beforeCreate():=>初始化（注入，检验）
  3. created():=>template编译
  4. beforeMount():=>el挂载
  5. mounted():=>挂载完毕=>data被修改时=>beforeUpdate=>虚拟DOM更新渲染并应用更新=>updated
  6. vm.$destory()=>beforeDestory解除绑定，销毁子组件和事件监听器=>销毁完毕destoryed

lifecycle.png

模板语法

在底层实现上，Vue将模板编译成虚拟DOM渲染函数。结合响应系统，计算出最少需要渲染的组件，并把DOM操作次数降低到最少。也可以直接使用JSX语法。

插值

数据绑定最常见的形式是“Mustache”语法（双大括号）的文本插值。mustache官方给出的是Logic-less templates.翻译过来就是逻辑很少的模板。

通过使用v-once指令可以只执行一次插值，数据改变时插值不再更新。
这个将不会改变: {{ msg }}。
原始html:

指令动态参数

…

计算属性和侦听器

  • 计算属性：computed通过计算属性的 getter 函数进行计算，计算属性是基于他的响应式依赖进行缓存的，只有在相关依赖发生变化时才会重新计算。计算属性默认只有 getter ，不过在需要时你也可以提供一个 setter 。
  • 侦听器：watch当需要在数据变化时执行异步或开销较大的操作时，这个方式是最有用的。

    Class 与 Style 绑定

    对象语法：
  1. <div v-bind:class="{ active: isActive }"></div>
  1. <div
  2.   class="static"
  3.   v-bind:class="{ active: isActive, 'text-danger': hasError }"
  4. ></div>
  1. <div v-bind:class="classObject"></div>
  2. data: {
  3.   classObject: {
  4.     active: true,
  5.     'text-danger': false
  6.   }
  7. }

数组语法

  1. <div v-bind:class="[activeClass, errorClass]"></div>
  2. data: {
  3.   activeClass: 'active',
  4.   errorClass: 'text-danger'
  5. }
  1. <div v-bind:class="[isActive ? activeClass : '', errorClass]"></div>
  1. <div v-bind:class="[{ active: isActive }, errorClass]"></div>

绑定内联样式

对象语法：

  1. <div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }"></div>
  2. data: {
  3.   activeColor: 'red',
  4.   fontSize: 30
  5. }
  1. <div v-bind:style="styleObject"></div>
  2. data: {
  3.   styleObject: {
  4.     color: 'red',
  5.     fontSize: '13px'
  6.   }
  7. }

数组语法：

  1. v-bind:style 的数组语法可以将多个样式对象应用到同一个元素上
  2. <div v-bind:style="[baseStyles, overridingStyles]"></div>
  3. vue.js会自动添加浏览器前缀。
  4. <div :style="{ display: ['-webkit-box', '-ms-flexbox', 'flex'] }"></div>

条件渲染

v-if指令用于条件性渲染一块内容。这块内容只会在指令的表达式返回truthy值得时候被渲染。

在 <template> 元素上使用 v-if 条件渲染分组

用 key 管理可复用的元素

列表渲染

  1. <div v-for="(value, name, index) in object">
  2.   {{ index }}. {{ name }}: {{ value }}
  3. </div>

数组更新检测

变异方法 (mutation method)

Vue 将被侦听的数组的变异方法进行了包裹，所以它们也将会触发视图更新。这些被包裹过的方法包括：

  • push()
  • pop()
  • shift()
  • unshift()
  • splice()
  • sort()
  • reverse()

你可以打开控制台，然后对前面例子的 items 数组尝试调用变异方法。比如 example1.items.push({ message: 'Baz' })。

替换数组

变异方法，顾名思义，会改变调用了这些方法的原始数组。相比之下，也有非变异 (non-mutating method) 方法，例如 filter()、concat() 和 slice() 。它们不会改变原始数组，而总是返回一个新数组。当使用非变异方法时，可以用新数组替换旧数组：

  1. example1.items = example1.items.filter(function (item) {
  2.   return item.message.match(/Foo/)
  3. })

你可能认为这将导致 Vue 丢弃现有 DOM 并重新渲染整个列表。幸运的是，事实并非如此。Vue 为了使得 DOM 元素得到最大范围的重用而实现了一些智能的启发式方法，所以用一个含有相同元素的数组去替换原来的数组是非常高效的操作。

  1. // Vue.set
  2. Vue.set(vm.items, indexOfItem, newValue)
  1. // Array.prototype.splice
  2. vm.items.splice(indexOfItem, 1, newValue)

重置数组长度
vm.items.splice(newLength)

禁用特性继承

  1. 父子组件双向数据传递
  2. :val.sync="name"
  4. $emit('update:val',$event.target.value)

html属性继承特性：

$attrs

如果你不希望组件的根元素继承特性，你可以在组件的选项中设置 inheritAttrs: ``false
配合实例的 $``attrs 属性使用，该属性包含了传递给一个组件的属性名和属性值

$listener

同上面$attrs属性一样，这个属性也是为了在自定义组件中使用原生事件而产生的。