Vue基础指令
Vue的特性
数据驱动视图
优势： 当数据发生变化时，页面也会自动重新渲染
双向数据绑定： 用表单元素时，视图变化影响数据，数据变化影响视图
6大指令
指令概念：是Vue为开发这提供的模板语法，用于辅助开发者渲染页面的基本结构
1、内容渲染指令
v-text： 把值渲染到标签内部
{{ }}插值表达式： 内容占位符，不会覆盖标签内部内容；只能用在元素的内容节点中，不能用在元素的属性节点
v-html()： 把带有标签的字符串，渲染成真正的html内容；跟插值表达式同时使用时，会覆盖插值表达式
2、属性绑定指令
v-bind：对元素的属性进行动态绑定
语法：v-bind:属性=''变量名' ，可简写为:
3、事件绑定指令
v-on
语法：v-on:事件名称=''事件处理函数的名称',可简写为@
事件对象
$event：绑定事件的处理函数名称，不传参，不带小括号，可以获取到元素dom的事件对象e,若是带小括号及传参了，则需要使用$event
提供了内置变量，它就是元素dom的事件对象e
修饰符
事件修饰符
语法： @:事件名称.修饰符=''事件处理函数的名称'
@事件类型.修饰符，可以不绑定事件处理函数，只阻止默认行为
. prevent： 阻止事件跳转，在事件名称后面加prevent，即可阻止跳转；
. stop ： 阻止事件冒泡；
. capture : 以捕获模式触发当前的事件处理函数
. once ： 绑定的事件只会触发1次
. self ： 只有在event.target是当前元素自身时触发事件处理函数
按键修饰符
语法：@键盘事件.修饰符="变量名"
. esc：键盘按下键是esc调用
. enter：键盘按下键是enter调用
4、双向绑定指令
v-model
配合input表单使用此指令，真正实现数据驱动视图，视图驱动数据
修饰符
5、条件渲染指令
v-if
原理：每次动态创建或者移除 元素，从而实现元素的显示与隐藏
性能：若刚进入页面某些元素默认不需要被展示 ，而且后期这个元素很可能不需要被展示出来，此时v-if性能好
v-show
原理：动态为元素添加或者移除display:none样式，来实现元素的显示与隐藏
性能：若频繁切换元素显示状态，用v-show性能更好
总结：实际开发中，不用考虑性能问题，直接使用v-if,性能问题是面试时说给面试官听的
v-if配套指令
v-else-if
v-else
6、列表渲染指令
v-for 循环
语法：v-for="( 值变量，索引变量)in 目标结构"
目标结构：可以遍历数组 / 对象 / 数字 / 字符串 (可遍历结构)
v-for页面更新
1:数组变更方法，会导致v-for更新，页面更新，会改变原数组
数组变更方法有：push() unshift() pop() shift() splice() reverse()
2:数组非变更方法，返回新数组(不会改变原数组)，就不会导致v-for更新，可采用覆盖数组或者this.$set()
数组非变更方法有：filter()、concat()、slice()、map()
注意：更新某个值的时候，v-for是监测不到
// 更改某一个值，无需更改所有数组
// 更新的目标结果、更新的位置、更新的值
this.$set(this.arr, 0, 100);
v-for 中 key 的作用
知识铺垫
虚拟 DOM
是什么： 记录了关键 DOM 节点信息的 JS 对象
为什么： 为什么要用虚拟 DOM
如何用： diff算法对比规则，当数据更新时，将新旧 DOM 树，逐层对比，有 Key 就对比 Key，无 Key 就地更新
v-for 有无key的情况
无 Key： 就地更新策略，尽可能的复用相同的 DOM 元素，减少 DOM 操作
Key 是 index： 和无 Key 一样是就地更新
Key 是 id： 唯一的字符串或数字；新旧 DOM 对比时，使用 Key 进行比较，差异更新
