概述

Vue 的特点是：

• 响应式编程：保持状态和视图的同步（数据绑定）
• 组件化：一切都是组件

Vue 只关注 data 的变化，使得代码更容易维护

生命周期

每个 Vue 实例在被创建时都要经过一系列的初始化过程，在这个过程中将运行一些 生命周期钩子 函数，从而在不同的阶段代码

this

所有的生命周期钩子函数自动绑定 this 上下文到实例中，因此可以调用实例中的数据，从而对属性和方法进行计算。注意：不能使用箭头函数来定义生命周期函数

beforeCreate

在实例初始化之后，数据观测（data observer）和 event | watcher 事件配置之前被调用

created

在实例创建完成后被立即调用。数据观测（data observer）、属性和方法的运算（watch | event）事件回调已完成配置，但是挂载阶段还没有开始，$el 属性目前不可见

beforeMount

挂载开始之前被调用，相关的 render 函数首次被调用。该钩子在服务器端渲染期间不能被调用

mounted

在编译结束时调用，此时所有指令已经生效，数据变化已经能触发 DOM 更新，但不保证 $el 已插入文档。该钩子在服务器端渲染期间不能被调用

beforeUpdate

数据更新时调用，发生在虚拟 DOM 重新渲染和打补丁之前，可以在这个钩子中进一步的更改状态，不会触发附加的重渲染过程。该钩子在服务器端渲染期间不能被调用

updated

由于数据更改导致的虚拟 DOM 重新渲染和打补丁，在这之后会调用改钩子。该钩子在服务器渲染期间不能被调用

beforeDestory

实例销毁之前调用，在这一步实例仍然完全有用。该钩子在服务器端渲染期间不能被调用

destoryed

Vue 实例销毁之后调用，调用后，Vue 实例指示的所有东西都会解绑定，所有事件监听器会被移除，所有子实例会被销毁

声明周期

指令（Directives）

当表达式的值发生改变时，会有些特殊行为作用到绑定的 DOM 上。带有前缀 v- 的属性指令的值限定为绑定表达式
指令分为

• 参数：在指定名称之后以 : 表示
• 修饰符：以半角句号 . 指明的特殊后缀，指出一个指定应该以特殊的方式绑定

v-bind

动态的绑定一个或多个特性，或者一个组件 prop 到表达式。可以缩写为 :

• 绑定 class 或 style 特性 ==> 表达式的值可以是字符串、对象或者数组

  <div v-bind:class = 'stringClassName'></div>
  <div v-bind:class = { objClassName: isTrue }
  <div v-bind:class = '[ className1, className2 ]'></div>
  

• 绑定 prop 时，prop 必须在子组件中声明

修饰符

• .prop ==> 被用于绑定 DOM 属性（property）
• .sync ==> 语法糖，会扩展成一个更新父组件绑定值的 v-on 侦听器

v-on

绑定事件监听器。表达式是一个方法的名字，如果没有修饰符也可以省略。可以缩写为 @

• 监听事件：用 v-on 指令监听 DOM 事件，并在触发时运行一些 JavaScript 语句

  <div v-on:click = 'alert(1)'
  

• 事件处理方法：v-on 指令可以接收一个需要调用的方法名称

  <div v-on:click = 'clickEventHandler'></div>
  

• 内联处理器中的方法：可以在内联 JavaScript 语句中调用方法。有时需要在内联语句处理器中访问原始的 DOM 事件，可以使用特殊变量 $event 把它传进去

  HTML:
  <button v-on:click = "buttonClickEvent( 'param1', $event )"></button>
  
  JS:
  ...
  method:{
      buttonClickEvent: function( 'Param1', event ){
          if(event){
              event.prevertDefault()   // 可以访问到 event
          }
      }
  }
  ...
  

修饰符

• .stop ==> 调用 event.stopPropagation()
• .prevent ==> 调用 event.preventDefault()
• .self ==> 只有事件是从侦听器绑定的元素本身触发时才触发回调
• .once ==> 只触发一次回调
• .left ==> 只当点击鼠标左键时触发
• .right ==> 只当点击鼠标右键时触发
• .middle ==> 只当点击鼠标中键时触发
• .capture ==> 添加事件监听器时使用事件捕获模式
• 按键修饰符，可以去参考官网

v-on 优点

• 容易定位对应的方法
• 不用在 JavaScript 中绑定事件，所以 ViewModel 代码是纯粹的逻辑，和 DOM 完全解耦，更易于测试
• 当一个 ViewModel 被销毁时，所有的事件处理器都会自动被删除，无需担心如何处理

v-show | v-if | v-else | v-else-if

• v-show ==> 根据表达式的真假值，切换元素的 display CSS 属性。当条件变化时该指令触发过渡效果

• v-if ==> 根据表达式的值的真假条件渲染元素。在切换时元素及它的数据绑定 | 组件被销毁并重建。如果元素是 <template> ，将提出它的内容作为条件块。当条件变化时该指令触发过渡效果

v-show VS v-if

v-show 不管初始条件是什么，元素总是会被渲染。并且只是简单的基于 CSS 进行切换。更高的初始渲染开销，适用于频繁切换
v-if 真正的条件渲染，他会确保在切换过程中条件块内的事件监听器和子组件适当的被销毁和重建。更高的切换开销，适用于运行条件很少改变时

• v-else ==> 与 v-if | v-else-if 连用

• v-else-if ==> 与 v-if | v-else-if 连用

v-for

列表渲染。基于源数据多次渲染元素或模板块，在遍历是必须提供 key 值

<div v-for="(item, index) in items"></div>
<div v-for="(val, key) in object"></div>
<div v-for="(val, key, index) in object"></div>

v-model

表单输入绑定。在表单控件或者组件上创建双向绑定。

• v-model 指定在表单控件元素上创建双向数据绑定，本质是语法糖，负责监听用户的输入事件以更新数据
• v-model 会忽略所有表单元素的 value、checked 和 selected 特性的初始值，因为它会选择 Vue 实例数据来作为具体的值，应该通过 JavaScript 在组件的 data 选项中声明初始值
  只能用于 <input>、<select>、<textarea> 或者 components

修饰符

• .lazy ==> 取代 input 监听 change 事件
• .number ==> 输入字符串转换为数字
• .trim ==> 输入首尾空格过滤

v-once

只渲染元素或者组件一次，随后的重新渲染，元素或者组件及其所有的子节点将被视为静态内容并跳过。主要用于优化更新性能。

v-text | v-html

• v-text ==> 用于更新元素的内容，如果要更新部分内容 ，需要使用 {{ Mustache }} 插值

• v-html ==> 用于更新元素的 HTML，使用 innerHTML 实现。内容按照普通的 HTML 插入，不会作为 Vue 模板进行编译

数据

data

Vue 实例的数据对象，用于存储和调用数据。类型是 Object | Function，组件中 data 类型必须是 Function，不可以对 data 使用箭头函数

props

子组件中用于接收来自父组件的数据。类型是 Array | Object

computed

计算属性。用于数据的复杂逻辑。

methods

方法，用于处理复杂逻辑

computed VS methods

computed 和 methods 可以达到同样的效果，但是 computed 属性是基于它们的依赖进行缓存的，computed 属性只有在它的相关依赖发生改变时才会重新求值，而 methods 属性，每当触发重新渲染时，调用方法总会再次执行函数

watch

侦听属性，观察和响应 Vue 实例上的数据变动。类型是 Object，即键值对，键是需要观察的表达式，值是对应的回调函数、方法名或者包含选项的对象

DOM

el

提供一个在页面上已经存在的 DOM 元素作为 Vue 实例的挂载目标。类型是 String | HTMLElement。在实例挂载之后，元素可以用 vm.$el 访问

template

一个字符串模板作为 Vue 实例的标识使用，模板将会替代挂载的元素，挂载元素的内容将会被忽略，可以使用分发插槽