Vue的学习 —— ＜vue指令＞

前言

正文

内容渲染指令

内容渲染指令的使用方法

前言

在完成Vue开发环境的搭建后，若想将Vue应用于实际项目，首要任务是学习Vue的基础知识。只有掌握了Vue框架的核心知识，我们才能依据实际需求，游刃有余地进行项目开发。接下来详细Vue开发的基础知识。

正文

内容渲染指令

内容渲染指令用于渲染DOM元素的内容。常见的内容渲染指令如下：

v-text：v-text用于渲染DOM元素的文本内容，如果文本内容中包含HTML标签，那么浏览器不会对其进行解析。v-text的语法格式如下：
```
<标签名 v-text="数据名"></标签名>
```
v-html：在使用Vue进行内容渲染时，如果内容中包含HTML标签并且希望这些标签被浏览器解析，则可以使用v-html。v-html用于渲染DOM元素的HTML内容，其用法与v-text相似。v-html的语法格式如下：
```
<标签名 v-html="数据名"></标签名>
```

内容渲染指令的使用方法

下面演示内容渲染指令的使用方法：

v-text

创建src\components\VTextDemo.vue文件用于存放演示代码，写入如下代码：

<template>
    <div v-text="message"></div>
</template>
<script setup>
    const message = '<span>盛年不重来，一日难再晨</span>'
</script>

修改src\main.js文件，切换页面中显示的组件
```
import App from './components/VTextDemo.vue'
```
保存代码，使用浏览器访问http://127.0.0.1:5173/，页面打开后效果如下图所示：

v-html

创建src\components\VHtmlDemo.vue文件用于存放演示代码，写入如下代码：

<template>
    <div v-html="message"></div>
  </template>
  <script setup>
  const message = '<strong>盛年不重来，一日难再晨</strong>'
  </script>

修改src\main.js文件，切换页面中显示的组件
```
import App from './components/VHtmlDemo.vue'
```
保存代码，使用浏览器访问http://127.0.0.1:5173/，页面打开后效果如下图所示

属性绑定指令

在Vue开发中，有时需要绑定DOM元素的属性，从而更好地控制属性的值，此时可以使用属性绑定指令v-bind来实现。v-bind的语法格式如下：

<标签名 v-bind:属性名="数据名"></标签名>
<!-- v-bind还支持将属性与字符串拼接表达式绑定，示例代码如下。-->
<div :id="'list' + index"></div>

下面演示v-bind的使用方法：

创建src\components\VBindDemo.vue文件用于存放演示代码，写入如下代码：

<template>
  <p><input type="text" v-bind:placeholder="username"></p>
  <p><input type="password" v-bind:placeholder="password"></p>
</template>
<script setup>
  const username = '请输入您的用户名'
  const password = '请输入您的密码'
</script>

修改src\main.js文件，切换页面中显示的组件
```
import App from './components/VBindDemo.vue'
```
保存代码，使用浏览器访问http://127.0.0.1:5173/，页面打开后效果如下图所示：

双向数据绑定指令

Vue为开发者提供了v-model指令来实现双向数据绑定，使用它可以在input、textarea和select元素上创建双向数据绑定，它会根据使用的元素自动选取对应的属性和事件组合，负责监听用户的输入事件并更新数据。

v-model内部会为不同的元素绑定不同的属性和事件，具体如下：

textarea元素和text类型的input元素绑定value属性和input事件，意味着用户输入的内容将实时反映在元素的value属性上，同时input事件也会被触发
checkbox类型的input元素和radio类型的input元素与checked属性和change事件绑定，当用户选择或取消选择这些元素时，checked属性将更新，并触发change事件。
select元素绑定value属性和change事，当用户从下拉列表中选择一个选项时，该选项的值将更新元素的value属性，并触发change事件

v-model的语法格式如下：

<标签名 v-model="数据名"></标签名>

下面演示v-modell实现输入框的值与变量保持同步：

创建src\components\VModelDemo.vue文件用于存放演示代码，写入如下代码：

<template>
  请输入姓名：<input type="text" v-model="username">
  <div>姓名是：{{ username }}</div>
</template>
<script setup>
import { ref } from 'vue'
const username = ref('zhangsan')
</script>

修改src\main.js文件，切换页面中显示的组件
```
import App from './components/VModelDemo.vue'
```
保存代码，使用浏览器访问http://127.0.0.1:5173/，页面打开后初始效果如下图所示：
在输入框中输入“李四”后，页面效果如下图所示：

事件绑定指令

在Vue开发中，有时需要给DOM元素绑定事件，从而利用事件实现交互效果，这时可以利用事件绑定指令v-on来实现。v-on的语法格式如下：

<标签名 v-on:事件名="事件处理器"></标签名>

在上述语法格式中，事件名即DOM中的事件名，例如click、input、keyup等；事件处理器可以是方法名或内联JavaScript语句。如果逻辑复杂，事件处理器建议使用方法名，方法需要在<script>标签中定义；如果逻辑简单，只有一行代码，则可以使用内联JavaScript语句。另外，v-on还有简写形式，可以将“v-on:事件名”简写为“@事件名”。

下面演示v-on指令的使用方法：

创建src\components\VOnDemo.vue文件用于存放演示代码，写入如下代码：

<template>
  <button @click="printInfo">输出信息</button>
</template>
<script setup>
const printInfo = () => {
  console.log('Hello World!!!')
}
</script>

修改src\main.js文件，切换页面中显示的组件
```
import App from './components/VOnDemo.vue'
```
保存代码，使用浏览器访问http://127.0.0.1:5173/，按F12打开调试控制台，打开后初始效果如下图所示：
点击“输出信息”按钮，控制台效果如下图所示：

条件渲染指令

在Vue中，当需要根据不同的判断结果显示不同的DOM元素时，可以通过条件渲染指令来实现。条件渲染指令可以辅助开发者按需控制DOM元素的显示与隐藏。条件渲染指令如下：

v-if：根据布尔值切换元素的显示或隐藏状态，本质是通过操作DOM元素来切换显示状态
- 当给定的值为true时，元素存在于DOM树中
- 当给定的值为false时，元素从DOM树中移除
v-show：v-show与v-if都用来决定某一个元素是否在页面上显示出来。v-show的原理是通过为元素添加或移除display: none样式来实现元素的显示或隐藏。当需要频繁切换某个元素的显示或隐藏时，使用v-show会更节省性能开销；而当只需要切换一次显示或隐藏时，使用v-if更合理。

下面演示条件渲染指令的用法：

创建src\components\ConditionDemo.vue文件用于存放演示代码，写入如下代码：

<template>
 小明的学习评定等级为：
  <p v-if="type === 'A'">优秀</p>
  <p v-else-if="type === 'B'">良好</p>
  <p v-else>差</p>
  <button @click="type = 'A'">切换成优秀</button>
  <button @click="type = 'B'">切换成良好</button>
  <button @click="type = 'C'">切换成差</button>
  <p v-if="flag">通过v-if控制的元素</p>
  <p v-show="flag">通过v-show控制的元素</p>
  <button @click="flag = !flag">显示/隐藏</button>
</template>
<script setup>
import { ref } from 'vue'
const type = ref('B')
const flag = ref(true)
</script>

修改src\main.js文件，切换页面中显示的组件
```
import App from './components/ConditionDemo.vue'
```
保存代码，使用浏览器访问http://127.0.0.1:5173/，点击页面中的按钮，观察页面变化情况，如下图所示：

循环列表渲染指令

例如在开发购物应用时，为了方便用户查找商品信息，通常会以商品列表的形式展示商品信息。在商品列表中，每件商品的结构都是相同的，如果每件商品的结构都要手动定义，会非常麻烦。为此，Vue提供了列表渲染指令v-for。开发者只需在模板中定义一件商品的结构，v-for便会根据开发者提供的数据自动渲染商品列表中所有的商品。

使用v-for（根据list数组中的元素）渲染列表后，当在list数组中删除一个元素后，index会发生变化，v-for会重新渲染列表，导致性能下降。为了给v-for一个提示，以便它能跟踪每个节点的身份，从而对现有元素进行重用和重新排序，建议通过key属性为列表中的每一项提供具有唯一性的值，示例代码如下：

<div v-for="item in items" :key="item.id"></div>

下面演示v-for指令用法：

创建src\components\VForDemo.vue文件用于存放演示代码，写入如下代码：

<template>
    <div v-for="(item, index) in list" :key="index">
      索引：{{ index }} --- 元素的内容是：{{ item }}
    </div>
  </template>
  <script setup>
  import { reactive } from 'vue'
  const list = reactive(['HTML', 'CSS', 'JavaScript'])
  </script>

修改src\main.js文件，切换页面中显示的组件
```
import App from './components/VForDemo.vue'
```
保存代码，使用浏览器访问http://127.0.0.1:5173/，页面效果如下图所示：

侦听器

在Vue中，开发者可以自定义方法来进行数据的更新操作，但是不能自动监听数据的状态。如果想在数据更新后自动进行相应的操作，可以通过侦听器来实现。

侦听器通过watch()函数定义，watch()函数的语法格式如下：

watch(侦听器的来源, 回调函数, 可选参数)

watch()函数有3个参数，下面对这3个参数分别进行讲解：

第1个参数是侦听器的来源，侦听器的来源可以有以下4种。

一个函数，返回一个值
一个响应式数据
一个响应式对象
一个由以上类型的值组成的数组

第2个参数是数据发生变化时要调用的回调函数，这个回调函数的

第1个参数表示新值，即数据发生变化后的值，

第2个参数表示旧值，即数据发生变化前的值。

第3个参数是可选参数，它是一个对象，该对象有以下2个常用选项。

deep：默认情况下，当侦听一个对象时，如果对象中的属性值发生了变化，则无法被监听到。如果想监听到，可以将该选项设为true，表示进行深度监听。该选项的默认值为false，表示不使用该选项。
immediate：默认情况下，组件在初次加载完毕后不会调用侦听器的回调函数，如果想让侦听器的回调函数立即被调用，则需要将选项设为true。该选项的默认值为false，表示不使用该选项。

下面演示watch函数的用法：

创建src\components\WatchDemo.vue文件用于存放演示代码，写入如下代码：

<template>
    <input type="text" v-model="cityName">
</template>
<script setup>
import { watch, ref } from 'vue'
const cityName = ref('beijing')
watch(cityName, (newVal, oldVal) => {
    console.log(newVal, oldVal)
})
</script>

修改src\main.js文件，切换页面中显示的组件
```
import App from './components/WatchDemo.vue'
```
保存代码，使用浏览器访问http://127.0.0.1:5173/，打开开发者控制台，任意输入框内容，观察控制台变化，页面效果如下图所示：