v-cloak：用于解决插值表达式的”闪动“问题，原理是先隐藏内容，在内存中进行值的替换，替换好值后再显示最终效果；
用法：
/*1.提供CSS样式*/ [c-cloak]{ display:nonel } /*2.在插值表达式所在标签添加指令*/ <div v-cloak>{{msg}}</div>
v-text：填充纯文本，对比插值表达式来说无”闪动“问题
<div v-text="msg"></div> //msg:Hello Vue //显示：Hello Vue
v-html：填充HTML片段，但存在安全问题、本网站内部数据可以使用，来自第三方的数据不可以
<div v-html="msg"><div> //msg:<h1>Hello Vue</h1> //显示：Hello Vue(h1样式)
v-pre：填充原始信息，显示原始信息，跳过编译过程
<div v-pre>{{msg}}</div> //显示：msg
数据响应式：当数据发生变化时，页面内容也会发生变化；
数据绑定：将数据填充到标签中；
v-once：该数据只编译一次，即显示内容之后不再具有响应式功能；
使用环境：用于不需要再做修改的信息，这样可以提高性能
<div v-once>{{msg}}</div> //msg:Hello //显示：Hello //修改msg值为Vue，显示依旧为Hello
双向数据绑定：让其数据层和视图层的数据同步，视图层数据能够进行实时更新；
v-model：可以实现双向数据绑定
<div >{{msg}}</div> <input type="text" v-model="msg">
MVVM设计思想：Model-View-ViewModel，由MVC模式衍生而来，到View视图层变化时，会自动更新到ViewModel(视图模式)。View和ViewModel之间通过双向绑定(data-binding)建立联系。
- M(model)
- V(view)
- VM(view-model)
v-on：可用于处理事件绑定，可用@来表示简写
<input type="button" v-on:click="num++" /> <!--简写形式--> <input type="button" @click="num++" />
<!--直接绑定行数名称--> <input type="button" @click="say"> <!--调用函数--> <iniput type="button" @click="say()">
<!--事件函数参数传递--> <input type="button" @click="say("msg,$event")">
其中事件绑定函数调用，则事件对象须作为最后一个参数；事件直接绑定函数名称，则默认会传递事件对象作为事件函数的第一个参数；事件对象必须为$event
事件修饰符：事件修饰符可以串联，并且有先后顺序；可查询文档查看更多修饰符
<!--.stop 阻止冒泡--> <a @click.stop="handle">跳转</a> <!--.prevent 阻止默认行为--> <a @click.prevent="handle">跳转</a>
按键修饰符：可以给按键添加执行事件函数，可查询文档查看更多修饰符
<!--.enter 回车键--> <input @keyup.enter="submit"> <!--.delete 删除键--> <input @keyup.delete="handle">
/*自定义按键修饰符*/ //使用全局config.keyCodes对象，Vue.config.keyCodes.名=按键编号 Vue.config.keyCodes.f1 = 112
v-bind：通过v-bind绑定数据，从而实现动态处理属性，缩写可用：表示；
<a v-bind:href="url">跳转</a> //url值可在vue实例中设置 <!--缩写--> <a :href="url">跳转</a>
v-model的底层实现原理分析：
<input :value="msg" @input="msg=$event.targt.value">
样式绑定：
- class样式处理：
<!--对象语法--> <div :class="{active:isActive,error:isError}"></div> <!--数组语法：类名需要添加到实例data中--> <div :class="[activeClass,errorClass]"></div>
//对象绑定和数组绑定可以结合使用："[activeClass,errorClass,{test:isTest}]"
//class绑定的值可以简化操作：可将数组或对象集合放在data中，后将data的数据和标签的数据关联
//data中：数组：arrClass:['active','error'] 对象：objClass={active:true,error:true}
//当有默认class时，默认class不会被覆盖
- style样式处理
<!--对象语法：将值添加到实例data中--> <div :style="{color:activeColor,fontSize:fontSize}"></div> <!--数组语法：将样式集合添加到实例data中--> <div :style="[baseStyles,overridingStyles]"></div>
分支循环结构：v-if、v-else、v-else-if、v-show，可进行简单的判断(包括三元表达式)
v-if：根据表达式中的值的真假来插入/移除元素
v-else：使用该指令来表示v-if的else块，须写在v-if块或v-else-if块后面，否则无法识别
v-else-if：使用该指令来表示else-if块，须写在v-if块或v-else-if块后面，否则无法识别
v-show：根据表达式的真假值，切换元素的display CSS操作
<div v-if="score>=90">a</div> <div v-else-if="score<90&&score>=80">b</div> <div v-else-if="score<80&&score>60">c</div> <div v-else>d</div> <div v-show="flag">0<div> <iniput type="button" @click="handle"> //handle:function(){ this.flag=!this.flag; }
v-show与v-if的区别：v-if控制元素是否渲染到页面，而v-show控制元素是否显示(已经渲染到页面)
循环结构：
v-for：
<!--遍历数组-->
<!--in：关键字、item：值、index：索引(从0开始)、list：数组--> <li v-for="item in list">{{item}}</li> <li v-for="(item,index) in list">{{item+ '----' +index}}</li> <!--key可以帮助Vue区分不同的元素，从而提高性能--> <li :key="item.id" v-for="(item,index) in list">{{item+ '----' +index}}</li>
<!--遍历对象-->
<!--in：关键字、value：对象的值、key：键、index：索引、Obj：对象-->
<div v-for="(value,key,index) in Obj"></div>
<!--v-if和v-for结合使用-->
<div v-if="value==12" v-for="(value,key,index) in Obj"></div>
v-slot：提供具名插槽或需要接收prop的插槽(在插槽的笔记中再写)