前言

在前端开发的过程中，Vue.js以其简洁、高效、灵活的特性，迅速成为现代Web开发中不可或缺的框架之一。对于初学者而言，掌握指令的使用是迈入这个框架大门的重要一步。在这篇“指令篇”的引导下，我们将一同揭开Vue指令的神秘面纱，探索它们如何让你的网页活灵活现，充满互动性。

正文

学习一个新的前端开发框架，最好的办法就是去看官方文档(内置指令 | Vue.js)，里面会教我们怎么操作，这里我详细介绍一下各种指令是干什么的。

v-text

v-text是Vue.js中用于文本插值的一个指令，它用于更新元素的文本内容，避免解析HTML特殊字符。例如，<div v-text="rawHtml"></div>直接显示文本内容，不会解析HTML标签。

基本语法

<span v-text="expression"></span>

其中expression是一个Vue实例中的数据属性，其值将会被设置为元素的innerText。

示例代码

<template>
  <div id="app">
        <span v-text="message"></span> | 
        <!-- 等同于 -->
         <span>{{ message1 }}</span>
    </div>

</template>

<script setup>
import {reactive} from 'vue'
var message = reactive('吃炸鸡')
var message1 = reactive('喝可乐')
</script>

在这个例子中，当Vue实例的message属性改变时，<span>元素内的文本内容也会相应更新，显示最新的消息内容。

v-html

v-html用于将动态渲染的HTML插入到页面中。与v-text不同，v-html会将绑定的表达式作为HTML进行解析，允许你插入包含HTML标签的字符串，从而在页面上渲染富文本内容。

基本语法

<div v-html="expression"></div>

其中expression是Vue实例中的数据属性，其值应该是一个包含HTML代码的字符串。

示例代码

<template>
  <div id="app">
        <span v-html="message"></span> 
    </div>

</template>

<script setup>
import {reactive} from 'vue'
var message = reactive('<h1 style="color:#61ce7e;">吃炸鸡，喝可乐</h1>')
</script>

在这个例子中，当Vue实例初始化后，<div>元素内部将会被替换为message所指定的HTML字符串，展示一个绿色的标题。

v-if 和 v-else

v-if用于条件性地渲染一块内容。这意味着Vue会根据v-if后面的表达式的值来决定是否渲染该元素或其内部的模板。如果条件为真，则元素及其内容会被渲染；如果条件为假，则不会渲染任何内容。

v-else与v-if指令一起使用，用于实现条件渲染的“else”部分，即当v-if的条件为假(false)时，紧跟在v-if之后的带有v-else指令的元素或模板将会被渲染。

基本语法

<element v-if="expression"></element>
<element v-else></element>

其中expression是一个返回布尔值的JavaScript表达式，通常依赖于Vue实例的数据属性。

示例代码

<template>
  <div id="app">
        <span v-if="true" v-html="message"></span> 
        <span v-else v-text="message1"></span>
    </div>

</template>

<script setup>
import {reactive} from 'vue'
var message = reactive('<h1 style="color:#61ce7e;">认真学习</h1>')
var message1 = reactive('旅游')
</script>

在这个例子中，Vue实例的v-if="true"，message会被渲染出来，如果将 v-if 改为false，那么message1会被渲染出来。

v-show

v-show类似于v-if，但它控制元素的显示与隐藏是通过修改CSS的display属性来实现的。与v-if不同的是，无论条件是否满足，v-show所绑定的元素始终会被渲染并保留在DOM中，只是简单地切换其可见性。

基本语法

<element v-show="expression"></element>

这里的expression是一个返回布尔值的JavaScript表达式，决定了元素是否可见。

示例代码

<template>
  <div id="app">
        <h2 v-if="isEn">{{title1}}</h2>
        <h2 v-show="isEn">{{title2}}</h2>
        <button @click="change">切换</button>
    </div>

</template>

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

let title1 = '好好学习'
let title2 = '天天向上'
let isEn = ref(false)
const change = () => {
    isEn.value = !isEn.value
}
</script>

在这个例子中，点击按钮会切换isEn的值，从而控制段落的显示与隐藏，但无论段落是否显示，它都存在于DOM中。如下图所示，v-show条件为假，但是元素被渲染到DOM中，只是设置为不可见（display: none;）。

如果关心初始渲染性能和DOM结构的精简，倾向于使用v-if；若频繁切换显示状态且关注切换速度，则v-show是更优选择。

v-for

v-for用于基于数据集合（如数组或对象）来渲染列表或重复元素。它是一种非常强大的迭代器，允许你轻松地展示一系列项目的列表，并且当底层数据发生变化时，Vue会自动更新DOM以反映这些变化。

基本语法

<element v-for="item in items" :key="item.id">{{ item }}</element>

item：在每次迭代中代表当前遍历到的元素。
items：要遍历的数据集合（数组或对象）。
:key：为每个迭代元素提供一个唯一标识，有助于Vue更高效地追踪每个节点的身份，以便于更新和重用。

遍历数组

<template>
  <ul>
  <li v-for="fruit in fruits" :key="fruit.id">{{ fruit.name }}</li>
</ul>
</template>

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

let fruits = reactive([
        { id: 1, name: '苹果' },
        { id: 2, name: '香蕉' },
        { id: 3, name: '橙子' }
      ])
</script>

注意事项

为v-for添加:key属性，以提高性能和辅助Vue跟踪每个节点。
避免在v-for的同一个元素上使用v-if进行过滤，考虑使用计算属性来过滤数据集合。
当遍历对象时，迭代顺序是不确定的，除非对象的键是数字且连续的，这时它们会按照数字顺序排序。

v-on (`@`)

用于绑定事件监听器。比如，v-on:click="doSomething"会在元素被点击时调用doSomething方法。简写为@，如@click="doSomething"。

<template>
  <button v-on:click="add">+</button>
  <span>{{ count }}</span>
  <button @click="minus">-</button>
</template>

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

let count =ref(0)
let add = () => {
  count.value++
}
let minus = () => {
  count.value--
}
</script>

<style lang="css" scoped>
button {
  margin: 0 20px;
}
</style>

这个组件展示了一个简单的计数器，用户可以通过点击加号和减号按钮来增加或减少计数器的值，其中在加号按钮中绑定了add事件，在减号按钮中绑定了minus事件，计数值动态更新并在页面上显示，如下图所示。

动画.gif

v-bind (`:`)

用于动态地绑定数据属性。例如，v-bind:title="message"会将message变量的值绑定到元素的title属性上。简写为:，如:title="message"。

示例代码

<template>
  <div class="app">
    <img v-bind:src="url" alt="" @click="handle" v-bind:class="{ 'bd': active }">
  </div>
</template>

<script setup>
import { ref } from 'vue'
const url = 'https://img.keaitupian.cn/newupload/05/1683621565610736.jpg'
let active = ref(false)
const handle = () => {
  active.value = true
}
</script>

<style lang="css" scoped>
img {
  width: 500px;
  height: 500px;
  object-fit: cover;
}
.bd {
  border: 8px solid #51bbd3;
}
</style>

在这个例子中，定义了一个简单的组件结构，主要用于展示一个图片，通过v-bind绑定了图片的源链接（src）、点击事件处理器以及一个动态的CSS类。

v-bind:src="url": 将图片的src属性绑定到Vue实例的url数据属性上。这意味着图片的来源将根据Vue实例中url的值动态改变。
@click="handle": 它监听图片的点击事件，并在点击时调用Vue实例中名为handle的方法。
v-bind:class="{ 'bd': active }": 这个指令用于动态绑定CSS类。根据Vue实例中active数据属性的真假，决定是否给图片元素添加类名bd。如果active为true，则bd类会被添加到元素上，否则不会。这可以用于根据组件的状态动态改变元素的样式。

动画1.gif

v-model

v-model实现双向数据绑定，常用于表单输入与应用状态之间的同步。例如，在文本输入框中，<input v-model="message">会实时更新message数据属性的值。

基本用法 v-model 将表单元素的值与 Vue 实例中的某个数据属性绑定在一起。

<template>
 <input v-model="message" placeholder="edit me">
 <p>作者是: {{ message }}</p>
</template>

<script setup>
import { ref } from 'vue'
 let message = ref('')
</script>

在这个例子中，当用户在输入框中输入内容时，message 属性的值会实时更新；同样，如果通过其他方式更改了 message 的值，输入框中显示的内容也会自动更新。

动画2.gif

结语

Vue指令不仅是Vue框架的精华所在，也是每一位Vue开发者必须掌握的技能。希望通过这篇文章，可以给你带来帮助。

零基础学习Vue——指令篇

前言

正文

v-text

v-html

v-if 和 v-else

v-show

v-for

v-on (@)

v-bind (:)

v-model

结语

v-on (`@`)

v-bind (`:`)