Vue系列（一） -- 基础知识

概述

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 特性 ==> 表达式的值可以是字符串、对象或者数组

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

修饰符

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

v-on

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

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

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

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

  HTML:
  
  
  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 ==> 根据表达式的值的真假条件渲染元素。在切换时元素及它的数据绑定 | 组件被销毁并重建。如果元素是