Vue指令 (四)

谁借莪１个温暖的怀抱￠ 2022-11-29 11:56 175阅读 0赞

指令是带有 v- 前缀的特殊属性。  
指令属性的值预期是单个 JavaScript 表达式 (v-for 是例外情况)。  
指令的职责是，当表达式的值改变时，将其产生的连带影响，响应式地作用于 DOM。

### 目录 ###

*  1. v-text
 *  2. v-html
 *  3. v-show
 *  4. v-if
 *  5. v-else
 *  6. v-else-if
 *  7. v-for
 *   *  7.1 数组
     *  7.2 对象
     *  7.3 数字
     *  7.4 字符串
 *  8. v-on
 *  9. v-bind
 *  10. v-model
 *  11. v-pre
 *  12. v-cloak
 *  13. v-once
 *  14. v-slot

# 1. v-text #

更新元素的文本内容，也就是元素对象的textContent。

<div v-text="a"></div>
    // 跟数据绑定的文本插值效果一样
    <div>{
       { a }}</div>

# 2. v-html #

用户更新元素的innerHTML。

> 注意，这个指令只用在可信任的的内容上，永远不用在提交的内容上，否则容易导致XSS攻击。  
> 单文件组件如果你的样式添加了scoped，那么样式不会应用在插入的html中。

# 3. v-show #

根据表达式的真假值来**显示和隐藏元素**，他是通过css来显示隐藏，比v-if性能更好。

# 4. v-if #

根据表达式的真假值来**渲染元素**，为假的时候销毁元素，在切换的时候里面的数据和组件会销毁及重建。

> 当和 v-if 一起使用时，v-for 的优先级比 v-if 更高

# 5. v-else #

使用这个指令前面的同级元素必须要有v-if或者v-else-if。

# 6. v-else-if #

使用这个指令前面的同级元素必须要有v-if或者v-else-if。

# 7. v-for #

值必须为数组、对象、数字、字符串。  
为了给 Vue 一个提示，以便它能跟踪每个节点的身份，从而重用和重新排序现有元素，你需要为每项提供一个唯一 key。

## 7.1 数组 ##

<div v-for="(item, index) in [1, 2, 3, 4]" :key="index">{
       {item}}|{
       {index}}</div>

结果:

## 7.2 对象 ##

<div v-for="(val, name, index) in { name: '小明', age: 18, }" :key="name">
    {
       {val}}|{
       {name}}|{
       {index}}
    </div>

结果:

## 7.3 数字 ##

<div v-for="(val, index) in 2" :key="index">{
       {val}}|{
       {index}}</div>

结果:

## 7.4 字符串 ##

<div v-for="(val, index) in '小明'" :key="index">{
       {val}}|{
       {index}}</div>

结果:

# 8. v-on #

它的简写是@。  
v-on用于绑定事件监听器，在普通元素上，它只能监听原生dom事件，如click、change这些。在自定义元素组件上，他可以监听子组件触发的自定义事件。  
如果使用内联语句，语句可以访问一个 $event property：v-on:click=“handle(‘ok’, $event)”。  
**修饰符：**  
.stop - 调用 event.stopPropagation()。  
.prevent - 调用 event.preventDefault()。  
.capture - 添加事件侦听器时使用 capture 模式。  
.self - 只当事件是从侦听器绑定的元素本身触发时才触发回调。  
.\{keyCode | keyAlias\} - 只当事件是从特定键触发时才触发回调。  
.native - 监听组件根元素的原生事件。  
.once - 只触发一次回调。  
.left - (2.2.0) 只当点击鼠标左键时触发。  
.right - (2.2.0) 只当点击鼠标右键时触发。  
.middle - (2.2.0) 只当点击鼠标中键时触发。  
.passive - (2.3.0) 以 \{ passive: true \} 模式添加侦听器

<div v-on:click="fun"></div>
    
    <div v-on:click="fun('hellp', $event)"></div>
    
    <div @click="fun"></div>
    
    <div @click.stop="fun"></div>
    
    <div @click.stop.prevent="fun"></div>
    
    <input @keyup.enter="onEnter">
    
    <input @keyup.13="onEnter">
    
    <button v-on:click.once="doThis"></button>

# 9. v-bind #

v-bind用于绑定动态的属性。  
它的简写是：。  
**修饰符：**  
.prop - 作为一个 DOM property 绑定而不是作为 attribute 绑定。  
.camel - (2.1.0+) 将 kebab-case attribute 名转换为 camelCase。(从 2.1.0 开始支持)  
.sync (2.3.0+) 语法糖，会扩展成一个更新父组件绑定值的 v-on 侦听器。

<img v-bind:src="a" />
    
    <img :src="a" />
    
    <div :style="{ fontSize: size + 'px' }">小明</div>
    
    <div :class="[classA, classB]"></div>

# 10. v-model #

用于在表单控件上双向绑定  
**修饰符：**  
.lazy - 取代 input 监听 change 事件  
.number - 输入字符串转为有效的数字  
.trim - 输入首尾空格过滤

# 11. v-pre #

不编译这个元素和它的子元素

结果

{
       { a }}

# 12. v-cloak #

用于控制元素在编译之后再显示，解决屏幕会闪一下的问题。  
在vue-router中是空的div，然后通过元素挂载来实现所以不需要这个指令。

# 13. v-once #

只渲染元素或者组件一次，以后再也不会渲染，用来优化性能。

# 14. v-slot #

用于提供具名插槽或接受prop的插槽。  
它的简写是 \#。  
只能用在template标签上。  
默认值是default。  
可以理解为拼积木，这个指令告诉你哪块积木拼在哪个地方。