Vue.js的意义

• 解耦了视图与数据
• 可复用的组件
• 前端路由
• 状态管理
• 虚拟DOM

Vue提供了很多实例属性与方法，都以$开头

• $el可以访问挂载Vue实例的元素。
• $set可以修改Vue实例的数据内容
• $event可以访问原生DOM事件
• $emit()触发事件
• $on()监听子组件事件
• $parent访问组件的父组件
• $children访问组件的子组件
• $refs可以取得子组件对索引名称
• $nextTick下一个事件循环
• $mount()可以手动挂载一个未挂载对实例，Vue.extend可以创建一个实例

Vue常用的指令

• v-model
• v-html(输出HTML而不是纯文本)
• v-pre（使用 {{}}时跳过编译过程）
• v-if v-else-if v-else(条件渲染)
• v-show(CSS属性切换)
• v-bind(动态更新HTML元素上的属性)
• v-on
• v-cloak(在简单的项目中可以解决初始化慢导致页面闪动的问题)
• v-once(组件只渲染一次)
• v-for(可以遍历数组和对象的属性)

绑定class的几种方式

• 给v-bind:class设置一个对象，这个对象可以有多个属性，当某个属性为true时，元素便拥有该类名。
• 给v-bind:class绑定一个数组，类名为数组元素对应的值。
• 对象语法和数组语法也可以使用在组件上，但该组件的最外层必须是根元素，否则失效。

绑定内联样式的方式和绑定class相似

修饰符

Vue支持在@绑定的事件后加修饰符来达成某种特定功能

• .stop（阻止冒泡）
• .prevent（不再重载页面）
• .capture（使用事件捕获模式）
• .self（只在事件发生在元素自身上才触发事件）
• .once（只触发一次）
• .lazy(用在输入框中，会转变为在change事件中同步)
• .number(用在输入框中,可以将输入变为Number类型)
• .trim(用在输入框中,可以过滤输入的首尾空格)

组件通信

• 父组件向子组件传值：props
• 子组件向父组件传值：自定义事件(v-on监听子组件，在子组件内用$emit(‘事件名’,传递的数据)触发事件)
• 非父子组件传值：*事件总线(bus)，父链和子组件索引(在子组件标签上定义ref的值，父组件中使用this.$refs访问对应子组件)

自定义指令

注册自定义指令分为全局注册和局部注册

//全局注册
Vue.directive(‘command‘,{
    //指令选项
})
//局部注册
var app = new Vue({
    el:‘#app‘,
    derective:{
    command:{
    //指令选项
    }
   }
})

指令选项由几个钩子函数组成

• bind(指令第一次绑定到元素时调用)
• inserted（被绑元素插入父元素时调用）
• update（被绑元素更新时调用）
• componentUpdated（被绑元素所在模版完成更新周期时调用）
• unbind（解绑时调用）

每个钩子函数都有几个可用参数

• el(指令所绑定元素)
• binding(一个对象，包含name(指令名)，value(指令的绑定值)，oldValue(前一个绑定值),expression(绑定值的字符串形式),arg(传给指令的参数)，modifiers(修饰符的对象))
• vnode(虚拟节点)
• oldVnode(上一个虚拟节点)