文章目录
Vue指令
Vue指令指的是，以v-开头的一组特殊语法
内置指令
v-text
-
v-text指令的作用是：设置标签的内容
-
默认写法会替换全部内容，差值表达式**{ { }}**只会替换指定内容
-
内部支持写表达式，可以在里面加字符串，用单引号括起来包起来即可
v-html
- v-html指令的作用是：设置元素的innerHTML
- 内容中有html结构会被解析为标签
- v-html会替换掉节点中所有的内容，{ { }}则不会
- v-text指令无论内容是什么，只会解析为文本
- 解析文本使用v-text，需要解析html结构使用v-html
严重注意：v-html有安全性问题！！
（1）在网站上动态渲染任意的HTML是非常危险的，容易导致XSS攻击
（2）一定要在可信的内容上使用v-html，永远不要用在用户提交的内容上！！
v-on
- v-on指令的作用是：为元素绑定事件
- 事件名不需要写on，如onclick直接写成click
- 指令可以简写为**@**
- 绑定方法定义在methods属性中
- 方法内部通过this关键字可以访问定义在data中数据，不需要去考虑修改dom元素，重点放在更改数据中，数据更新之后，使用数据的元素会同步更新
- 事件绑定的方法写成函数调用的形式，可以传入自定义参数
- 定义方法时需要定义形参来接收传入的实参
- 事件的后面跟上**.修饰符**可以对事件进行限制
- .enter可以限制触发的按键为回车
v-if
写法:
（1）v-if=“表达式”
（2）v-else-if=“表达式”
（3）v-else=“表达式”
- v-if指令的作用是：根据表达式的真假切换元素的显示状态
- 本质是通过操纵dom元素来切换显示状态
- 表达式的值为true，元素存在于don树中，为false从dom树中移除
- 频繁的切换用v-show，反之使用v-if，前者的切换消耗小
- template模板标签，对元素包裹不影响页面结构，能配合v-if使用，不能配合v-show使用
注：v-if可以和v-else-if、v-else一起使用，也可以分开使用，但是一起使用的情况下要求结构不能被“打断”。
v-show
- v-show指令的作用是：根据真假切换元素的显示状态（切换频率较高的场景）
- 原理是修改元素的display，实现显示隐藏
- 指令后面的内容，最终都会解析为布尔值
- 值为true元素显示，值为false元素隐藏
备注：使用v-if的时候，元素可能无法获取到，而使用v-show一定可以获取到
v-bind
- v-bind指令的作用是：为元素绑定属性（比如：src，title，class）
- 完整写法是v-bind:属性名=表达式
- 简写的话可以直接省略v-bind，只保留**:属性名=表达式**
- 需要动态的增删class建议使用对象的方式
- 与插值语法{ {}}相区分：插值语法往往用于标签体的内容，而v-bind用于标签体的属性
- v-bind是单向绑定，数据只能从data流向页面
绑定class样式
当数据是固定不变时我们可以直接写在DOM元素中。如果是动态的情况下我们将数据绑定好之后通过vue来进行修改
写法——>:class=“xxx” xxx可以是字符串、对象、数组
- 字符串写法：样式的类名不确定，需要动态指定
- 数组写法：要绑定多个样式，个数不确定、名字也不确定
- 对象写法：要绑定多个样式，个数确定、名字也确定，但要不确定用不用
绑定style样式
写法——>:style='{fontSize:xxx}'其中xxx是动态值，当属性为复合属性时要用驼峰命名法
此外还可以写成数组的形式：:style=“[a,b]”，其中a、b是样式对象
v-model
- v-model指令的作用是便捷的设置和获取表单元素的值，一般都应用在表单类元素上
- 绑定的数据会和表单元素值相关联
- v-model：value 可以简写为-model，因为v-model默认收集的就是value值
- v-model是双向绑定，数据不仅能从data流向页面，还可以从页面流向data
收集表单数据：
-
文本框：，则v-model收集的是value值，用户输入的就是value值。
-
单选框：，则v-model收集的是value值，切要给标签配置value值。
-
多选框：
-
没有配置input的value属性，那么收集的就是checked（勾选or未勾选，是布尔值），如果有多个input时一个勾选会全部input勾选，v-model里的值一起发生变化(true/false)
-
配置input的value属性：
（1）v-model的初始值是非数组，那么收集的就是checked（勾选or未勾选，布尔值），情况和没有配 input的value属性一样。
（2）v-model的初始值是数组，那么收集的就是value组成的数组
备注：v-model的三个修饰符：
lazy：失去焦点再收集数据
number：输入字符串转为有效的数字
trim：输入首尾空格过渡
-
v-for
-
数据据生成列表结构
-
数组经常和v-for结合使用，也可以使用对象或者函数
-
语法是**（item，index）in 数据**
-
item和index可以结合其他指令一起使用，也可以单独使用，单独使用不需要括号
-
数组长度的更新会同步到页面上，是响应式的
-
使用v-for的时候记得要使用:key
v-for和数组结合时，v-for=“(a,b) in list”，一般可以写两个参数，参数a代表数组里面的每一项，参数b代表都是每一项的索引值。
v-for和对象结合时，v-for=“(a,b) in list”，一般可以写两个参数，参数a代表对象里面的每一个值，参数b代表的每一对象的键
v-for中的key
使用v-for更新已渲染的元素列表时，Vue默认使用“就地复用”的策略，就是直接对复用已有的元素，不会频繁删除创建DOM元素，所以当数据的顺序被改变，这就将会导致数据更新效率低甚至是DOM错误更新，而key具有唯一标识的作用，避免了这种情况的出现。所以在使用v-for时要养成写key的习惯
面试题：react、vue中的key有什么作用？（key的内部原理）
-
虚拟DOM中key的作用：
key是虚拟DOM对象的标识，当数据发生变化时，Vue会根据新数据生成新的虚拟DOM，随后Vue进行新虚拟DOM与旧虚拟DOM的差异比较，比较规则如下：
-
对比规则：
（1）旧虚拟DOM中找到了与新虚拟DOM相同的key：
若虚拟DOM中内容没变，直接使用之前的真实DOM
若虚拟DOM中内容变了，则生成新的真实DOM，随后替换页面中之前的真实DOM
（2）旧虚拟DOM中未找到与新虚拟DOM相同的key
创建新的真实DOM，随后渲染到页面 -
用index作为key可能会引发的问题：
（1）若对数据进行：逆序添加、逆序删除等破坏顺序操作；会产生没有必要的真实DOM更新 ——>界面效果没问题，但效率低。
（2）如果结构中还包含输入类的DOM：会产生错误DOM更新——>界面有问题 -
在开发中如何选择key？
（1）最好使用每条数据的唯一标识作为key，比如id、手机号、身份证号、学号等唯一值
（2）如果不存在对数据的逆序添加、逆序删除等破坏顺序操作，仅用于渲染列表用于展示，使 用index作为key是没有问题的。
v-clock（没有值）
-
本质是一个特殊的属性，Vue实例创建完毕并接管容器后，会删掉v-cloak属性
-
使用css配合v-cloak可以解决网速慢时页面展示出{ {xxx}}的问题
[v-clock]{ display:none; }：[v-clock]指的是选择属性包含“v-clock”的元素，将其隐藏出来，等Vue实例创建完毕之后在，该元素再显示出来
v-once
- v-once所在节点在初次动态渲染后，就视为静态内容了
- 以后数据的变化不会引起v-once所在结构的更新，可以用于优化性能
v-pre
- 跳过其所在节点的编译过程
- 可利用它跳过：没有使用指令语法、没有使用插值语法的节点，会加快编译
自定义指令
-
定义语法：
（1）局部指令：new Vue({ directives:{ 指令名:配置对象 } })
或new Vue({ directives:{ 指令名:回调函数 } })
（2）全局指令：Vue.directive( 指令名,配置对象 )或Vue.directive( 指令名,回调函数 )
-
配置对象中常用的3个回调：
（1）bind：指令元素成功绑定时调用
（2）inserted：指令所在元素被插入页面时调用
（3）update：指令所在模板结构被重新解析时调用
-
备注：
（1）指令定义时不加v-，但使用时要加v-
（2）指令名如果是多个单词，要使用kebab-case(横杆连接，要用引号包着)命名方式，不要用camelCase（驼峰命名）命名
语法书写
