《图解Vue3.0》- 第5节 模板语法-指令

指令（Directives）是vue模板中最常用的一项功能，它带有前缀v-。指令的主要职责就是当其表达式的值改变时，相应地将某些行为应用到DOM上。接下来将对每一个指令，一一了解一下。

内置指令

v-pre

编译时跳过当前元素和它的子元素。可以用来显示原始的Mustache标签。跳过大量没有指令的节点会加快编译。

示例

<template>
    <div v-pre>
           {{ count }} 
    </div>
</template>

<script>
export default {
    data() {
        return {
            count: 0
        }
    }
}
</script>

v-cloak

v-cloak指令保持在元素上直到关联实例结束编译。当和CSS规则如[v-cloak] { display: none; }一起使用时，这个指令可以隐藏未编译的Mustache标签直到实例准备完毕，否则在渲染界面时，有可能用户会先看到Mustache标签，然后看到编译后的数据。

v-text

v-text指令可以更新元素的textContent。在内部，{{Mustache}}插值也被编译未textNode的一个v-text指令。

示例

<template>
    <div>
        <div v-text="message"></div>
        <div>{{message}}</div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            message: 'Hello zzh'
        }
    }
}
</script>

v-html

更新元素的innerHtml。内容按照普通的HTML插入，忽略数据绑定，如果想复用模板片段，则应当使用partials。

注意

不建议在网站上直接动态渲染任意HTML片段，很容易导致XSS攻击。

示例

<template>
    <div>
        <div v-html="message"></div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            message: '<div><span>message</span></div>'
        }
    }
}
</script>

v-model

v-model指令用来在input、select、text、checkbox、radio等表单控件元素上创建双向数据绑定。根据控件类型v-model自动选取正确的方法更新元素。
除此之外，v-model后面还可以添加多个参数（number/lazy/debounce）

• number: 输入自动转换成Number类型（如果原值的转换结果为NaN，则返回原值）。
• lazy: 在默认情况下，v-model在input事件中同步输入框的值和数据，我们可以添加一个lazy特性，从而数据改到change事件中发生。
• trim: 去除空格
• debounce: 设置延时同步数据,2.0以上版本中取消了debounce

通过下面的示例中可以看出，貌似参数并不起作用~

示例

<template>
    <div>
        <form>
            姓名： 
            <input type="text" v-model.lazy.trim="name" placeholder="please input name" /> <br/>
            年龄：
            <input type="text" v-model.number="age" placeholder="please input age" number /> <br/>
            性别： 
            <input type="radio" v-model="sex" id="man" value="man" />
            <label for="man">男</label>
            <input type="radio" v-model="sex" id="woman" value="woman" />
            <label for="woman">女</label> <br/>
            爱好：
            <input type="checkbox" v-model="interest" id="book" value="book" />
            <label for="book">阅读</label>
            <input type="checkbox" v-model="interest" id="play" value="play" />
            <label for="play">玩</label>
            <input type="checkbox" v-model="interest" id="program" value="program" />
            <label for="program">编程</label>
        </form>
        <div class="form-info">
            <h3>个人信息</h3>
            <div>姓名： {{ name }}</div>
            <div>年龄： {{ age }}</div>
            <div>性别： {{ sex }}</div>
            <div>爱好： {{ interest }}</div>
        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            name: '',
            age: '',
            sex: '',
            interest: [],
        }
    }
}
</script>

v-bind

v-bind指令用于响应更新HTML特性，将一个或多个attribute，或者一个组件prop动态绑定到表达式。v-bind可以简写用冒号“:”。

在绑定prop时，prop必须在子组件中声明。可以用修饰符指定不同的绑定类型。修饰符有：

• .camel: 将绑定的特性名字转换回驼峰命名。只能用于普通HTML特性的绑定，通常用于绑定驼峰命名的SVG特性，比如viewBox。

以下两种在vue3中已移除：

• .sync: 双向绑定，只能用于prop绑定
• .once: 单次绑定，只能用于prop绑定

示例

<!-- 缩写 -->
<img :src="imageSrc" />

<!-- 动态 attribute 名缩写 -->
<button :[key]="value"></button>

<!-- 内联字符串拼接 -->
<img :src="'/path/to/images/' + fileName" />

<!-- class 绑定 -->
<div :class="{ red: isRed }"></div>
<div :class="[classA, classB]"></div>
<div :class="[classA, { classB: isB, classC: isC }]">
  <!-- style 绑定 -->
  <div :style="{ fontSize: size + 'px' }"></div>
  <div :style="[styleObjectA, styleObjectB]"></div>

  <!-- 绑定一个全是 attribute 的对象 -->
  <div v-bind="{ id: someProp, 'other-attr': otherProp }"></div>

  <!-- prop 绑定。"prop" 必须在 my-component 声明 -->
  <my-component :prop="someThing"></my-component>

  <!-- 通过 $props 将父组件的 props 一起传给子组件 -->
  <child-component v-bind="$props"></child-component>

  <!-- XLink -->
  <svg><a :xlink:special="foo"></a></svg>
</div>

v-on

v-on指令用于绑定事件监听器。事件类型由参数指定；表达式可以是一个方法的名字或一个内联语句；如果没有修饰符，也可以省略。缩写为“@”。

修饰符

• .stop - 调用 event.stopPropagation()。
• .prevent - 调用 event.preventDefault()。
• .capture - 添加事件侦听器时使用 capture 模式。
• .self - 只当事件是从侦听器绑定的元素本身触发时才触发回调。
• .{keyAlias} - 仅当事件是从特定键触发时才触发回调。
• .once - 只触发一次回调。
• .left - 只当点击鼠标左键时触发。
• .right - 只当点击鼠标右键时触发。
• .middle - 只当点击鼠标中键时触发。
• .passive - { passive: true } 模式添加侦听器

示例

<!-- 方法处理器 -->
<button v-on:click="doThis"></button>

<!-- 动态事件 -->
<button v-on:[event]="doThis"></button>

<!-- 内联语句 -->
<button v-on:click="doThat('hello', $event)"></button>

<!-- 缩写 -->
<button @click="doThis"></button>

<!-- 动态事件缩写 -->
<button @[event]="doThis"></button>

<!-- 停止冒泡 -->
<button @click.stop="doThis"></button>

<!-- 阻止默认行为 -->
<button @click.prevent="doThis"></button>

<!-- 阻止默认行为，没有表达式 -->
<form @submit.prevent></form>

<!-- 串联修饰符 -->
<button @click.stop.prevent="doThis"></button>

<!-- 键修饰符，键别名 -->
<input @keyup.enter="onEnter" />

<!-- 点击回调只会触发一次 -->
<button v-on:click.once="doThis"></button>

<!-- 对象语法 -->
<button v-on="{ mousedown: doThis, mouseup: doThat }"></button>

v-for

示例

<div v-for="item in items">
  {{ item.text }}
</div>

v-if/v-else/v-else-if

根据表达式的真假值来有条件地渲染元素。在切换时元素及它的数据绑定 / 组件被销毁并重建。如果元素是 <template>，将提取它的内容作为条件块。
当条件变化时该指令触发过渡效果。

示例

<template>
    <div class="container">
        <div v-if="showName">展示名字</div>
        <div v-else>不展示名字</div>

        <div v-if="sex === '男'">男</div>
        <div v-else-if="sex === '女'">女</div>
        <div v-else>不男不女</div>
    </div>
</template>

<script>
import { defineComponent } from '@vue/composition-api';

export default defineComponent({
    data() {
        return {
            showName:true,
            sex: ''
        }
    },
})
</script>

注意： 不推荐在同一元素上使用 v-if 和 v-for。

当它们处于同一节点，v-if 的优先级比 v-for 更高，这意味着 v-if 将没有权限访问 v-for 里的变量。

<!-- This will throw an error because property "todo" is not defined on instance. -->

<li v-for="todo in todos" v-if="!todo.isComplete">
  {{ todo }}
</li>

可以把 v-for 移动到 <template> 标签中来修正：

<template v-for="todo in todos">
  <li v-if="!todo.isComplete">
    {{ todo }}
  </li>
</template>

v-show

根据表达式的真假值，切换元素的 display CSS property。
当条件变化时该指令触发过渡效果。这个就很简单了，就不演示了。在这里说下v-if和v-show的一个区别，v-if是真正意义上的条件渲染，当if内的条件变化时，会触发组件的重新渲染，而v-show只是修改了css的display属性，所以只是在显示上的一个控制。

v-slot

提供具名插槽或需要接收 prop 的插槽。
注意，v-slot 只能添加在 <template> 上 (只有一种例外情况)

示例：

<!-- 具名插槽 -->
<base-layout>
  <template v-slot:header>
    Header content
  </template>

  <template v-slot:default>
    Default slot content
  </template>

  <template v-slot:footer>
    Footer content
  </template>
</base-layout>

<!-- 接收 prop 的具名插槽 -->
<infinite-scroll>
  <template v-slot:item="slotProps">
    <div class="item">
      {{ slotProps.item.text }}
    </div>
  </template>
</infinite-scroll>

<!-- 接收 prop 的默认插槽，使用了解构 -->
<mouse-position v-slot="{ x, y }">
  Mouse position: {{ x }}, {{ y }}
</mouse-position>

key

key 的特殊 attribute 主要用在 Vue 的虚拟 DOM 算法，在新旧 nodes 对比时辨识 VNodes。如果不使用 key，Vue 会使用一种最大限度减少动态元素并且尽可能的尝试就地修改/复用相同类型元素的算法。而使用 key 时，它会基于 key 的变化重新排列元素顺序，并且会移除/销毁 key 不存在的元素。

有相同父元素的子元素必须有独特的 key。重复的 key 会造成渲染错误。

is

使用动态组件。
<component :is="currentView"></component>

ref

ref 被用来给元素或子组件注册引用信息。引用信息将会注册在父组件的 $refs 对象上。如果在普通的 DOM 元素上使用，引用指向的就是 DOM 元素；如果用在子组件上，引用就指向组件实例。

注意

因为HTML不区分大小写，camelCase风格的名字，比如v-ref:someRef将全部转换为小写。可以用v-ref:some-ref设置this.$refs.someRef。

示例

Parent.vue

<template>
    <div>
        <Child num="8" ref="child"></Child>
    </div>
</template>

<script>
import Child from './VRefChild.vue';

export default {
    components: {
        Child,
    },
    mounted(){
        console.log(this.$refs.child.getNum()); // 8
    }
}
</script>

Child.vue

<template>
    <div>
        我是子组件{{ num }}
    </div>
</template>

<script>
export default {
    props: ['num'],
    methods: {
        getNum() {
            return this.num;
        }
    }
}
</script>

参考网址

https://vue3js.cn/docs/zh/api/directives.html#v-text