Vue 常用指令详细介绍

攒了一袋星辰

已于 2024-08-07 16:31:15 修改

阅读量871

点赞数 13

分类专栏：高级编程文章标签： vue.js javascript 前端

于 2024-07-05 13:30:00 首次发布

本文链接：https://blog.csdn.net/xiugtt6141121/article/details/140134820

版权

高级编程专栏收录该内容

15 篇文章 0 订阅

订阅专栏

Vue 常用指令

1.Vue 常用指令介绍

Vue.js是一个用于构建用户界面的渐进式框架，它提供了许多内置指令来帮助开发者更高效地操作DOM和处理数据。Vue中的指令都是以v-为前缀的特殊HTML属性，它们为模板提供了额外的功能，使得开发者能够声明式地将DOM的更新与Vue实例的数据绑定起来。以下是一些Vue中常用的指令及其介绍：

1. 内容渲染指令

v-text：用于更新元素的textContent。它会替换元素的文本内容，但不会解析HTML标签。
```
html复制代码

<span v-text="msg"></span>
```
v-html：用于更新元素的innerHTML。与v-text不同，v-html会解析内容中的HTML结构，允许插入带有标签的HTML内容。但使用时需要谨慎，以避免XSS攻击。
```
html复制代码

<div v-html="rawHtml"></div>
```

2. 条件渲染指令

v-if：根据表达式的真假值来条件性地渲染元素。如果表达式的值为真，则渲染元素及其内容；如果为假，则不渲染该元素。
```
html复制代码

<p v-if="seen">现在你看到我了</p>
```
v-else：必须紧跟在v-if或v-else-if元素之后，用于表示条件不满足时的备选内容。
```
<p v-if="condition">条件为真</p>  
<p v-else>条件为假</p>
```

v-else-if：用于v-if和v-else之间的条件判断，提供多个条件分支。

<p v-if="score >= 90">A级</p>  
<p v-else-if="score >= 60">B级</p>  
<p v-else>C级</p>

v-show：根据表达式的真假值来切换元素的display CSS属性。与v-if不同的是，v-show的元素始终会被渲染到DOM中，只是简单地切换display属性来控制显示与隐藏。
```
html复制代码

<p v-show="isVisible">显示这段文字</p>
```

3. 列表渲染指令

v-for：基于一个数组来渲染一个列表。v-for指令需要使用item in items形式的特殊语法，其中items是源数据数组，而item则是被迭代的数组元素的别名。
```
<ul>  
  <li v-for="item in items" :key="item.id">  
    {{ item.text }}  
  </li>  
</ul>
```

4. 事件处理指令

v-on：用于监听DOM事件，并在触发时执行一些JavaScript代码。v-on可以简写为@。
```
html复制代码

<button @click="handleClick">点击我</button>
```

5. 属性绑定指令

v-bind：用于响应式地更新HTML属性。当表达式的值改变时，相应的属性也会更新。v-bind可以简写为:。
```
html复制代码

<a :href="url">链接</a>
```

6. 双向数据绑定指令

v-model：在表单输入和应用状态之间创建双向数据绑定。这意味着视图层的输入会实时反映到数据层，而数据层的变化也会实时更新到视图层。
```
<input v-model="message" placeholder="编辑我">  
<p>Message is: {{ message }}</p>
```

这些指令是Vue.js开发中非常基础且常用的知识点，它们为开发者提供了强大的工具来构建动态且响应式的Web应用。

2. 文本插值与 v-html 指令

内容讲解
在Vue中，除了基本的插值表达式{{ }}用于输出纯文本内容外，v-html指令被用于输出真正的HTML。这意味着如果你需要将HTML标签作为字符串存储在Vue的数据中，并希望这些HTML标签被浏览器解析为实际的HTML元素，那么v-html就是你需要使用的指令。

重要安全提示：使用v-html可以很方便地插入HTML，但它也容易导致XSS（跨站脚本）攻击，因为它会原样渲染HTML字符串。因此，请确保你完全信任v-html绑定的HTML内容，或者对其进行了适当的清理和转义。

使用格式
html

这里，yourHtmlContent是Vue实例中data对象的一个属性，它应该包含一个HTML字符串。

示例代码
假设我们有一个Vue实例，它包含了一个HTML字符串作为数据的一部分，我们想要在页面上渲染这个HTML字符串。

HTML文件：

html

<!-- 使用插值表达式渲染纯文本 -->  
<p>{{ message }}</p>

在上面的例子中，

会渲染出这是红色的文字作为实际的HTML元素，因此文字会显示为红色。而

则仅仅是输出纯文本字符串。

安全考虑
由于v-html的安全性问题，如果你需要插入的HTML来自不可信的源，你应该避免使用v-html，或者至少先对HTML字符串进行清理，以确保它不会包含恶意脚本。// 导入greeting.js中的默认导出成员
import greet from ‘./greeting.js’;

greet(‘Alice’);## 3.绑定属性 v-bind:属性名或者 :属性名 (重点)






## 5.条件渲染v-show


### 内容讲解

【1】条件渲染v-show格式

```html
<标签名 v-show="data中的key">文本</标签名>
说明：
1.如果data中的key的值是true，则显示标签文本内容，如果是false则不显示标签文本内容

【2】需求：获取Vue中data的布尔类型数据并显示

【3】步骤：

1.在素材中找到条件渲染的代码

2.在html中获取vue中data的数据并判断，显示结果

3.打开浏览器查看结果

【4】代码实现

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>条件渲染</title>
</head>
<body>
<div id="div">
    
    <!--v-show指令-->
    <div v-show="flag">div4</div>

    <!--
       v-if  v-show 他们俩虽然都是控制元素是否显示，但是底层的原理不一样
           v-if 如果条件为false，页面中根本没有这个元素
           v-show如果条件为false，页面中有这个元素只不过它的display属性值为none
   -->
</div>
</body>
<script src="js/vue.js"></script>
<script>
    new Vue({
        el: "#div",
        data: {
            num: 2,
            flag: false
        }
    });
</script>
</html>