vue结构：
var vm = new Vue({
data:{ // 数据
},
methods{ //方法区
ss() {
}
},
beforeCreate() { //这是我们遇到的第一个生命周期函数，实例完全被创建出来之前，会执行它
},
created() { // 页面开始载入
},
beforeMount() { // 页面模板已在内存中编译完成，但是尚未渲染，Vue中的数据还未与界面绑定
},
mounted() { // 这是vue最后一个生命周期函数，Vue已绑定界面元素，需要操作dom元素，也需要在此函数中
},
beforeUpdate() { //==运行中事件==，页面中显示数据还是旧的，此时data中数据是新的，页面尚未和最新的数据保持同步
},
update() { // ==运行中事件==，先根据data中最新的数据，在内存中，重新渲染出一份最新的内存DOM，当最新的内存DOM被更新之后，会把最新的内存DOM树，更新渲染到真实的页面中去，这时候就完成了数据从data(Model层)->view（视图层）的更新
},
beforeDestory() { // 页面销毁时执行生命周期
},
destroyed() {
},
filters: { //添加局部过滤器
dateFormat: funcation() {
}
}
})
vue常用标签
v-cloak 去除页面闪烁问题
v-text 会覆盖元素中原本的内容，但是 插值表达式{{}} 只会替换自己的占位符
v-html 展示html文本
v-bind Vue中提供用于绑定属性的指令，只能实现数据的单项绑定
1. :class v-bind绑定class属性
- :class="['class1', 'class2', true ? 'class3':'']"）可插入三元表达式，并且用数组
- :class="['class1', 'class2', {'class3': isImprot}]"）可嵌入data中对象
- :class="{class1: true, class2: true}"）直接写入对象（可在data中写），用v-bind绑定对象时，对象的属性名是类名，对象的属性可带引号，也可不带引号
2. :style v-bind绑定style，styleObj1:{color: 'red', 'font-weight': 200}
- :style="{color: 'red', 'font-weight': 200}" 直接写入对象
- :style="[styleObj1, styleObj2]" 内联样式绑定，可定义数组
- :style="{fontsize:(isDD ? 14:16)}" 可写表达式
v-model 实现数据的双向绑定（只能运用在表单元素中）。栗子：输入框更改value，更新model中data值
v-on 对事件进行绑定 （简写栗子@click:）
v-for 循环事件 (栗子：v-for="(val, key, index) in list")在遍历对象身上的键值对的时候，除了有val、key还有位置的索引。list可以为{}数组、对象数组、对象、数字（从1开始循环）
v-if 每次都会重新删除或创建元素，有较高切换性能消耗
v-show 只是切换元素的display样式，有较高的初始渲染消耗
事件
@click.stop .stop 阻止事件冒泡
@click.capture 使用.capture 实现捕获触发事件的机制
@click.self .self 实现只有点击当前元素的时候，才会触发事件处理函数。（和stop不一样的是，只会阻止自己身上冒泡行为的触发）
@click.self .once 事件只触发一次
@click.prevent .prevent默认事件
@keyup.按键名 自定义按键事件修饰符
函数
some、findIndex 查找需要删除的元素
Vue.filter 全局过滤器
Vue.config.keycodes 全局按键声明
Vue.directive 定义全局的指令（自定义标签）
看Vue的钩子函数
Vue.directive('color', {
bind: function (e1, binding) { //自定义事件，使用binding获取事件传参
}
})
