目录
一、Vue中的常用指令
概念：指令（Directives）是 Vue 提供的带有 v- 前缀 的 特殊 标签属性。
为啥要学：提高程序员操作 DOM 的效率。
vue 中的指令按照不同的用途可以分为如下 6 大类：
- 内容渲染指令（v-html、v-text）
- 条件渲染指令（v-show、v-if、v-else、v-else-if）
- 事件绑定指令（v-on）
- 属性绑定指令 （v-bind）
- 双向绑定指令（v-model）
- 列表渲染指令（v-for）
指令是 vue 开发中最基础、最常用、最简单的知识点。
二、内容渲染指令
内容渲染指令用来辅助开发者渲染 DOM 元素的文本内容。常用的内容渲染指令有如下2 个：
v-text（类似innerText）
-
- 使用语法：
<p v-text="uname">hello</p>，意思是将 uame 值渲染到 p 标签中 - 类似 innerText，使用该语法，会覆盖 p 标签原有内容
- 使用语法：
v-html（类似 innerHTML）
-
- 使用语法：
<p v-html="intro">hello</p>，意思是将 intro 值渲染到 p 标签中 - 类似 innerHTML，使用该语法，会覆盖 p 标签原有内容
- 类似 innerHTML，使用该语法，能够将HTML标签的样式呈现出来。
- 使用语法：
代码演示：
<div id="app">
<h2>个人信息</h2>
// 既然指令是vue提供的特殊的html属性，所以咱们写的时候就当成属性来用即可
<p v-text="uname">姓名：</p>
<p v-html="intro">简介：</p>
</div>
<script>
const app = new Vue({
el:'#app',
data:{
uname:'张三',
intro:'<h2>这是一个<strong>非常优秀</strong>的boy<h2>'
}
})
</script>
三、条件渲染指令
条件判断指令，用来辅助开发者按需控制 DOM 的显示与隐藏。条件渲染指令有如下两个，分别是：
1. v-show
- 作用： 控制元素显示隐藏
- 语法： v-show = “表达式” 表达式值为 true 显示， false 隐藏
- 原理： 切换 display:none 控制显示隐藏
- 场景：频繁切换显示隐藏的场景
2. v-if
- 作用： 控制元素显示隐藏（条件渲染）
- 语法： v-if= “表达式” 表达式值 true显示， false 隐藏
- 原理： 基于条件判断，是否创建 或 移除元素节点
- 场景： 要么显示，要么隐藏，不频繁切换的场景
示例代码：
<div id="app">
<div class="box">我是v-show控制的盒子</div>
<div class="box">我是v-if控制的盒子</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
flag: false
}
})
</script>
3. v-else 和 v-else-if
- 作用：辅助v-if进行判断渲染
- 语法：v-else v-else-if=“表达式”
- 需要紧接着v-if使用
示例代码：
<div id="app">
<p>性别：♂ 男</p>
<p>性别：♀ 女</p>
<hr>
<p>成绩评定A：奖励电脑一台</p>
<p>成绩评定B：奖励周末郊游</p>
<p>成绩评定C：奖励零食礼包</p>
<p>成绩评定D：惩罚一周不能玩手机</p>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
gender: 2,
score: 95
}
})
</script>
四、总结
Vue中的常用指令及内容渲染指令（v-html、v-text）：
- v-html：用于将数据作为原始 HTML 渲染到页面上，可以防止 XSS 攻击。使用该指令时需要注意潜在的安全风险。
示例：<div v-html="htmlContent"></div>
- v-text：用于将数据作为纯文本渲染到页面上，会自动将 HTML 实体编码，避免 XSS 攻击。
示例：<span v-text="text"></span>
条件渲染指令（v-show、v-if、v-else、v-else-if）：
- v-show：根据表达式的结果来显示或隐藏元素，通过 CSS 的 display 属性来控制元素的显示与隐藏。当条件不满足时，元素会被隐藏但仍然存在于 DOM 中。
示例：<div v-show="isActive">Content</div>
- v-if：根据条件的真假来添加或移除元素，当条件为真时，元素会被添加到 DOM 中，当条件为假时，元素会被从 DOM 中移除。
示例：<div v-if="isShow">Content</div>
- v-else：和 v-if 配合使用，用于添加一个“否定”的条件块，表示在 v-if 条件不成立时渲染。
示例：```
Content
Alternate Content
```
- v-else-if：和 v-if、v-else 配合使用，用于添加一个额外的条件块，表示在 v-if 条件不成立时继续判断该条件块。
示例：```
Excellent
Passed
Failed
```
总结：v-html 和 v-text 用于渲染数据到页面上，v-show 和 v-if 用于根据条件控制元素的显示与隐藏，v-else 和 v-else-if 用于添加额外的条件块。根据具体需求和场景，选择合适的指令来实现渲染逻辑。