Vue指令：内置指令和自定义指令

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可以是字符串、对象、数组

1. 字符串写法：样式的类名不确定，需要动态指定
2. 数组写法：要绑定多个样式，个数不确定、名字也不确定
3. 对象写法：要绑定多个样式，个数确定、名字也确定，但要不确定用不用

绑定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

收集表单数据：

• 文本框：input type='text'，则v-model收集的是value值，用户输入的就是value值。

• 单选框：input type='radio'，则v-model收集的是value值，切要给标签配置value值。

• 多选框：input type='checked'

  • 没有配置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. 定义语法：

   （1）局部指令：new Vue({ directives:{ 指令名:配置对象 } })

   ​ 或new Vue({ directives:{ 指令名:回调函数 } })

   （2）全局指令：Vue.directive( 指令名,配置对象 )或Vue.directive( 指令名,回调函数 )

2. 配置对象中常用的3个回调：

   （1）bind：指令元素成功绑定时调用

   （2）inserted：指令所在元素被插入页面时调用

   （3）update：指令所在模板结构被重新解析时调用

3. 备注：

   （1）指令定义时不加v-，但使用时要加v-

   （2）指令名如果是多个单词，要使用kebab-case(横杆连接，要用引号包着)命名方式，不要用camelCase（驼峰命名）命名

语法书写