一、指令
1. 什么是指令？
什么是自定义属性
指令的本质就是自定义属性
指令的格式：以v-开始（比如：v-cloak）
2. v-cloak指令用法
插值表达式存在的问题：“闪动”
如何解决该问题：使用v-cloak指令
解决该问题的原理：先隐藏，替换好值之后再显示最终的值
3. 数据绑定指令
v-text 填充纯文本
① 相比插值表达式更加简洁
v-html 填充HTML片段
① 存在安全问题
② 本网站内部数据可以使用，来自第三方的数据不可以用
v-pre 填充原始信息
① 显示原始信息，跳过编译过程（分析编译过程）
4. 数据响应式
如何理解响应式
① html5中的响应式（屏幕尺寸的变化导致样式的变化）
② 数据的响应式（数据的变化导致页面内容的变化）
什么是数据绑定
① 数据绑定：将数据填充到标签中
v-once 只编译一次
① 显示内容之后不再具有响应式功能
二、双向数据绑定指令
1. 什么是双向数据绑定？
2. 双向数据绑定分析
v-model指令用法
3. MVVM设计思想
① M(model)
② V(view)
③ VM(View-Model)
三、事件绑定
1. Vue如何处理事件？
v-on指令用法
v-on简写形式
<input type=‘button' v-on:click='num++'/>
<input type=‘button' @click='num++'/>
2. 事件函数的调用方式
直接绑定函数名称
调用函数
<button v-on:click='say'>Hello</button> <button v-on:click='say()'>Say hi</button>
3. 事件函数参数传递
普通参数和事件对象
<button v-on:click='say("hi",$event)'>Say hi</button>
4. 事件修饰符
.stop 阻止冒泡
.prevent 阻止默认行为
<a v-on:click.stop="handle">跳转</a> <a v-on:click.prevent="handle">跳转</a>
5. 按键修饰符
.enter 回车键
.esc 退出键
<input v-on:keyup.enter='submit'>
<input v-on:keyup.delete='handle'>
6. 自定义按键修饰符
全局 config.keyCodes 对象
Vue.config.keyCodes.f1 = 112
四、属性绑定
1. Vue如何动态处理属性？
v-bind指令用法
缩写形式
<a v-bind:href='url'>跳转</a> <a :href='url'>跳转</a>
2. v-model的低层实现原理分析
<input v-bind:value="msg" v-on:input="msg=$event.target.value">
五、 样式绑定
1. class样式处理
对象语法
<div v-bind:class="{ active: isActive }"></div>
数组语法
<div v-bind:class="[activeClass, errorClass]"></div>
2. style样式处理
对象语法
<div v-bind:style="{ color: activeColor, fontSize: fontSize }"></div>
数组语法
<div v-bind:style="[baseStyles, overridingStyles]"></div>
六、 分支循环结构
2. v-if与v-show的区别
v-if控制元素是否渲染到页面
v-show控制元素是否显示（已经渲染到了页面）
3. 循环结构
v-for遍历数组
key的作用：帮助Vue区分不同的元素，从而提高性能
<li v-for='(item,index) in list'>{{item}} + '---' +{{index}}</li> <li :key='item.id' v-for='(item,index) in list'>{{item}} + '---' {{index}}</li>
4. 循环结构
v-for遍历对象
v-if和v-for结合使用
<div v-for='(value, key, index) in object'></div> <div v-if='value==12' v-for='(value, key, index) in object'></div>