Vue 中的内置指令，你知道哪些？

在 Vue 中，提供了一系列内置指令 来帮助开发者更加方便地操作和渲染 DOM。这些指令都是以 v- 开头 的特殊属性，它们可以被添加到 HTML 元素上，以实现数据绑定、条件渲染、循环渲染等功能；今天就让我们来学习一下 Vue 中的内置指令吧。

Vue 的内置指令

v-text 和 v-html

在 Vue 中，我们有多种渲染页面的方式；其中 v-text 和 v-html 是 Vue.js 中用于渲染文本和 HTML的两个内置指令。

<template>
    <div>
       {{msg}}
    </div>
    <div v-text="msg2"></div>
    <div v-html="msg3"></div>
</template>

<script setup>
const msg = 'hello'
const msg2 = 'vue'
const msg3 = '<p>窗前明月光</p><p>疑是地上霜</p>'  // html是富文本的一种
</script>

<style lang="scss" scoped>

</style>

当我们要在页面上渲染普通文本 内容时，我们可以用类似于{{msg}}的方法或者直接用v-text指令渲染；而要在页面上渲染HTML这种富文本 时，我们就要用 v-html去解析并渲染 HTML 标签。

v-on

v-on 指令用于在 Vue 组件或模板中绑定 DOM 事件监听器 。它允许你将 JavaScript 函数绑定到特定的 DOM 事件上，例如点击 (click)、鼠标悬停 (mouseover)、键盘事件 (keydown) 等。

v-on 可以通过以下两种方式使用：

1. 完整形式 ：v-on:click="handle"

2. 简写形式 ：@click="handler"

v-if 和 v-else

v-if 和 v-else 是 Vue.js 框架中用于条件渲染 的指令。它们允许你基于表达式的值来动态地显示或隐藏 DOM 元素。

<template>
    <h2 @click="happy">{{count}}</h2>
    <h3 v-if="count < 30">happy</h3>
    <h3 v-else-if="count<40">unhappy</h3>
    <h3 v-else>sad</h3>

<script setup>
import { ref } from 'vue'
let count = ref(1)

const happy = () => {
    count.value++
}
</script>

<style lang="scss" scoped>

</style>

在上面的代码中，当 count > 30，页面上会渲染 unhappy，当 count>40 时，页面则渲染 sad；

v-if 会根据表达式的真假来条件性地渲染一块内容 。如果表达式的结果为假，则该元素及其子元素将被完全移除。

当 v-else 和 v-if 在一起使用时，两者必须是同级的兄弟结构才行 ；而 v-else-if 与 v-if 一起使用时，表示额外的条件分支。

v-show

v-show 同样用于根据表达式的真假来切换元素的可见性 。但与 v-if 不同的是，v-show 不会从 DOM 中移除元素，而是通过改变元素的 display CSS 属性来控制元素的可见性。

<template>
    <h4 v-show="count < 30">happy</h4>
</template>

<script setup>
import { ref } from 'vue'
let count = ref(1)

const happy = () => {
    count.value++
}
</script>

<style lang="scss" scoped>

</style>

当页面上的 count > 30 时，v-show只是把h4标签的display属性设置为了none而已，并未移除其DOM结构。

v-for

v-for 用于循环遍历数组或对象，并为每个元素渲染一个模板块 ，尤其适合用于列表渲染。

<template>
    <ul>
        <!-- 使用 v-for 指令遍历 list 数组 -->
        <li @click="showName(item.name)" v-for="(item,index) in list" :key="item.id">{{index+1}}-{{item.name}}</li>
    </ul>

    <button v-on:click="handle">确认</button>
</template>

<script setup>
const list = [
    {id: 1, name: "庐州月"},
    {id: 2, name: "千百度"},
    {id: 3, name: "雅俗共赏"},
    {id: 4, name: "多余的解释"}
]

const showName = (name) => {
    console.log(name);
    
}
</script>

<style lang="scss" scoped>

</style>

通过 for 循环的方式渲染，item 表示 list 数组中的每一项，index 是每一项的下标；

v-bind 和 v-model

在 Vue 中，v-bind 用于动态地绑定一个或多个 HTML 特性到表达式 。它可以用于绑定各种特性，如 id, class, src, title, style 等。；而v-model 是用于在表单元素（如输入框、复选框、单选按钮等）上创建双向数据绑定的指令。

v-bind

v-bind 可用于动态绑定类名 ，以及绑定 HTML 特性到表达式 ，如 src，href 等。

同 v-on 一样，也有两种语法：

• 完整形式 ：v-bind:attribute="expression"
• 简写形式 ：:attribute="expression"

<template>
    <!-- 绑定 HTML 特性到表达式 -->
    <img v-bind:src="pic" alt="">
    <a :href="url">去百度</a>

    <!-- 动态绑定类名 -->
    <h2 @click="handle" :class="[active ? 'red' : 'green']">kunkun</h2> 

    <!-- 动态绑定值 -->
     <input type="text" @input="onChange" :value="val">
     <h4>{{val}}</h4>
</template>

<script setup>
import {ref} from 'vue'

const pic = 'https://ts4.cn.mm.bing.net/th?id=OIP-C.PobTVuzuQy7tAZtvVEc3VQAAAA&w=250&h=250&c=8&rs=1&qlt=90&o=6&dpr=1.3&pid=3.1&rm=2'
const url = 'https://www.baidu.com/'

let active = ref(false)
const handle = () => {
    active.value = !active.value
}

let val = ref('hello')
const onChange = (e) => {
    console.log(e.target.value);
    val.value = e.target.value
}
</script>

<style lang="css" scoped>
img{
    width: 200px;
}
.red{
    color: red;
}
.green{
    color: green;
}
</style>

v-model

v-model 常用于在表单元素（如输入框、复选框、单选按钮等）上创建双向数据绑定。这意味着当用户更改表单元素时，与之绑定的数据也会更新；反之亦然，当数据改变时，表单元素也会随之更新。

<template>
    <div>
        <h2 @click="handle">{{msg}}</h2>
        <input type="text" v-model="msg">
    </div>
</template>

<script setup>
import { ref } from 'vue';

const msg = ref('hello')
const handle = () => {
    msg.value += 'h'
}
</script>

<style lang="scss" scoped>

</style>

给msg进行双向绑定 之后，不论是哪一边发生的变化，msg的值都会跟着改变。

小结

在上述中，我们可以了解到 v-show 与 v-if 的区别

• DOM 操作 ：v-if 会根据条件的实际变化，真正地删除或重新创建 DOM 节点，而 v-show 仅是改变元素的 CSS display 属性。
• 性能影响 ：如果一个元素经常需要在显示和隐藏之间切换，使用 v-show 通常会比 v-if 更好，因为 v-show 只需要更改 CSS 属性，而 v-if 则需要重新渲染整个 DOM 节点。
• 初始渲染 ：v-if 是惰性的，如果初始值为 false，则什么都不会渲染。而 v-show 无论初始值如何都会渲染元素，只是通过 CSS 控制其可见性。