Vue总结
1.vue的组成
模板（指令：将控制和html来联系在一起=》html内容）；样式以及
控制(data数据；el指定模板；methods方法)
2.指令
（1）.文本渲染指令：{{js表达式} } v-text x-html(可以渲染数据中的html标签)
（2）.条件渲染指令：v-if="表达式的值"（通过移除dom元素来隐藏） v-else
v-show(通过css display:none方法隐藏)
(3).属性绑定：v-bind：属性名="值" 简写： ：属性名="值"
特别强调：所有的指令都只能在el指定的html标签内才有用。
v-指令='值' 值不能看成字符串 而应该理解为js的表达式运算结果，或者数据data中的值
(4)事件绑定：v-on:事件名=“执行内容” 简写：@事件名=“执行内容”
@click=“methods中的方法名”=> 1.@click=“say”(会默认自动传递一个事件参数) 2.@click=“say(参数1,参数2) ”($event是一个特殊写法，代表事件参数)
(5.)列表渲染：v-for=“(item,index) in list”
解释（item 是自定义的 代表每一项数据；index 代表数据的渲染下标）
:key="index" key的值要是唯一的 作用：方便vue识别，排序动画等操作
（6）this在类中指向的是类的实例
（7.）表单绑定：v-model=“”
值有：text ; radio; select;
checkbox: 1.单一时：选中为true 反之为false
2.多选时：绑定的数据时数组类型；每个多选项绑定的是同一个数组；
默认值可以填入数组中。
表单修饰符：
.lazy当change事件触发视图更新（默认是input事件会触发视图更新）
.number把表单的值转换为数据数值
（7）.事件修饰
事件修饰符：
.stop停止事件冒泡；
.prevent阻止默认事件 ；
.once只执行一 次 @click.once="say"
按键修饰符：
.enter
.tab
.delete (捕获“删除”和“退格”键)
.esc
.space
.up
.down
.left
.right
（8）watch监听一个数据变化
watch:{
"obj":{
handler:function(val){
// 当obj发生任何变化时候，都会触发handler函数
}，
deep:true,
// 深层次监听（obj的属性发生变化也会触发handler）
}
}
（9）computed 从现有数据，计算出来新的的数据
computed:{
rmg:function(){
return this.msg.split('').reverse().join('')
}
}
（10）directives vue 自定义指令
directives:{
img:{
inserted(el,binding){
// el 当前指令所在的html节点
// binding.value 指令的值
}
}
}用法：<div v-img="xxxx">
作用：要操作dom时； 使用集成第三方插件时候
（11）class绑定
1.属性绑定
:class="'red blue'"
2.动态绑定
:class="{'red':flag}"
:class="{'active':index==current}"
3.数组绑定
:class="['red','em','small']"
（12）style绑定
1.对象
:style="{fontSize:‘14px’,color:'blue'}"
2.:style="obj"
data:{
obj:{'font-size':"48px",fontStyle:'italic',color:red}
}
（13）vue动画
1. vue它不能直接实现动画，它提供动画各阶段需要的class
2. <transition> 组件提供class
3. 在vue中，动画是在元素显示与隐藏的过程中，添加 class实现的
4. transition组件提供：
1.v-enter-active元素进入的过程（v-enter元素进入的初始状态）
（v-enter-to元素进入的初始状态）
2.v-leave-active元素整个离开的过程(v-leave元素进入的初始状态）
（v-leave-to元素进入的初始状态）
自定义动画名：enter-active-class=“xxx”；leave-active-class=“xxx”
要引入第三方css animate.css
动画模式 mode
in-out 先执行进入动画，再执行离开动画
out-in 先执行离开动画，再执行进入动画
（5） transition-group组件
tag 指定标签
move-class 给正在移动中的元素添加class
name 动画名称
enter-active-class leave-active-class 指定进入离开class
