Vue基本结构
一个vue页面主要包括3个部分：
1.<template>界面展示代码</template>
2.<script>业务实现代码</script>
3.<style>界面布局代码</style>
Vue 生命周期函数
beforeCreate 实例创建前：这个阶段实例的data、methods是读不到的
created 实例创建后：这个阶段已经完成了数据观测(data observer)，属性和方法的运算， watch/event 事件回调。mount挂载阶段还没开始，$el 属性目前不可见，数据并没有在DOM元素上进行渲染
beforeMount：在挂载开始之前被调用：相关的 render 函数首次被调用。
mounted：el选项的DOM节点 被新创建的 vm.$el 替换，并挂载到实例上去之后调用此生命周期函数。此时实例的数据在DOM节点上进行渲染
beforeUpdate：数据更新时调用，但不进行DOM重新渲染，在数据更新时DOM没渲染前可以在这个生命函数里进行状态处理
updated：这个状态下数据更新并且DOM重新渲染，当这个生命周期函数被调用时，组件 DOM 已经更新，所以你现在可以执行依赖于 DOM 的操作。当实例每次进行数据更新时updated都会执行
beforeDestory：实例销毁之前调用。
destroyed：Vue 实例销毁后调用。调用后，Vue 实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。
MVVM模式
已经了解到vue是通过数据劫持的方式来做数据绑定的，其中最核心的方法便是通过Object.defineProperty()来实现对属性的劫持，达到监听数据变动的目的。
整理了一下，要实现mvvm的双向绑定，就必须要实现以下几点：
1、实现一个数据监听器Observer，能够对数据对象的所有属性进行监听，如有变动可拿到最新值并通知订阅者
2、实现一个指令解析器Compile，对每个元素节点的指令进行扫描和解析，根据指令模板替换数据，以及绑定相应的更新函数
3、实现一个Watcher，作为连接Observer和Compile的桥梁，能够订阅并收到每个属性变动的通知，执行指令绑定的相应回调函数，从而更新视图
4、mvvm入口函数，整合以上三者
Vue指令总结
- v-if数据真假判断方法：v-if常用语判断表达式的真假，并根据真假结果决定显示或者隐藏该html元素，同时该隐藏是html元素将从代码中直接删除。 v-if有较高的切换消耗。
- v-show与v-if用法类似，都根据判断结果决定html元素是否显示，不过v-show为假时，不是将元素完全删除，而是通过display:none将元素隐藏。 v-show有较高的渲染消耗。
- v-for数据循序遍历方法：v-for在日常工作使用中及其广泛，如常见的列表数据获取。最好加上：key值。
- v-text与v-html数据替换方法：v-text及v-html方法同为对html元素及标签内容进行覆盖，不过v-text只覆盖文本内容，而v-html可以直接写入html标签。
- v-bind属性绑定方法：为html标签绑定新的属性，类名方法，url地址信息等(注：常用“：”简写)；
- v-on标签事件绑定方法：如点击事件，鼠标滑动事件等（注：常用“@”简写）。v-on可以绑定任何属性，包括鼠标点击，鼠标滑动，键盘按下及擡起等任何操作方法，同时v-on还可以添加事件修饰符，用来实现组合按键的效果。
- v-cloak消除闪烁问题：需要自己定义一个样式例如：
display ：none； - 事件修饰符：
stop:阻止冒泡
prevent：阻止默认事件
self：只有点击自己才会触发事件。并不会真正阻止冒泡行为。
once：只触发一次事件 - v-model：数据双向绑定
过滤器
全局过滤器
定义：Vue.fliter(“过滤器的名称”,function(){});
过滤器的function中第一个参数永远是管道符前面传来的参数
调用方法: { { name | 过滤器的名称 }}
私有过滤器
在vm实例上定义一个
filters{ 过滤器名称，处理函数}
自定义全局案件修饰符
Vue.config.keyCodes.enter= 113
自定义全局指令
Vue.directive(“focus”,{ //function第一个参数都为el，用来操作DOM,第二个参数为binding，
binding有很多属性：name；value；
bind: function (el) { } //每当指令绑定到元素上时，就会执行这个bind函数，只执行一次
inserted： function (el) { } //inserted表示元素插入到DOM中时，会执行inserted函数
updated： function (el) { } //当VNode更新的时候会执行这个函数，有可能执行多次
})