指令：
文本渲染指令：
v-text
v-html
区别：v-html指令可以渲染数据中的html标签 而v-text不会
条件渲染指令：
v-if
v-else
当v-if的值为true的时候则显示，为false则激活v-else
还有一个特殊的指令v-show 也可以控制元素的显示与隐藏
区别：v-if通过移除元素节点来实现隐藏 而v-show同过控制display:none来实现元素隐藏
属性绑定：
v-bind：属性=属性值
可以简写为：（注意必须是英文冒号）
列表渲染
v-for
用法：
<li v-for="(item,index) in list">{{ item }}</li>
data:list
注释：item 代表的是每一项数据
index代表的是数据的下标
表单的绑定：
v-model
用法：
v-model="flag"
在单一复选框中,如果选中flag为true否则为false
在多个复选框中，绑定的数据是个数组，多个复选框绑定的数据相等，默认子可以填入数组
在表单绑定指令中还有修饰符
v-model.number 把表单输入的数据转化为数字
在vue中可以用v-on来绑定事件
比如v-on:click
也可以简写为@click
在事件绑定中也有修饰符
@click.prevent阻止默认事件
.stop 阻止冒泡事件
.once 事件只执行一次
监听：
watch方法来监听一个数据的变化
用法：
watch:{
"要监听的数据":{
handler:function(val){当要监听的数据发生变化就会触发handler},
deep:true //属于深层监听当要监听的数据的属性发生变化的时候也会触发handle
}
}
computed从现有数据中计算出新的数据
用法：
computed:{
rmsg:function(){
return this.msg.split("").reverse().join('')
}
}
filters过滤
更改现有数据的显示格式
用法
filters:{
fix(val,参数1，参数2){
return xxx
}
}
自定义指令
directives
作用 要操作dom的时候
使用第三方的插件的时候
用法
directives:{
img:{
inserted(el,binding){
el当前指令所在的节点
binding.value指令的值
}
}
}
使用 <div v-img="">
class绑定
属性绑定:class="red"
动态绑定 :class="{'red',flag}"
数组绑定 :class="['red','em']"
style绑定
:style='{fontSize:"14px",color:"blue"}'
也可以把样式写在对象里obj里
:style="obj"
vue动画
vue不能直接实现动画，但是它提供了动画各阶段需要的class
<transition>组件提供class
在vue动画中在元素显示与隐藏的过程中，添加class实现的
transition组件提供的class有
v-enter-active 元素进入的过程
v-enter 元素进入开始的状态
v-enter-to 元素进入结束的状态
v-leave-active 元素离开过程
v-leave 元素离开的开始状态
v-leave-to 元素离开的结束状态
动画模式
in-out 先执行进入动画 再执行离开动画
out-in 先执行离开动画 在执行进入动画
组件
组件就是扩展自定义的标签
自建是一个功能的集合
组件能使一个复杂的系统分割为一些简单的组件
组件使前端的分工协作更加方便
组件在大项目中的优势很明显
组件又分为全局组件和局部组件
全局组件
Vue.compnoent(组件名,{
template:`<div>组件模板里面只能由一个跟组件</div>`
})
使用<组件名></组件名>
局部组件
定义组件
let counter={
template:`<div>只能有一个根节点{{num}}</div>`，
data:function(){return {
num:1
}},
methods:{}
}
注册组件 new Vue({
components:{counter,...}
})
使用组件
<counter></counter>
