【Vue2】常见Vue指令=＞速学版

目录

Vue特性

内容渲染指令

条件渲染指令

事件绑定指令

属性绑定指令

 v-bind对样式控制的增强

操作class（不同语法示例）

操作style

列表渲染指令

双向绑定指令

---

Vue特性

响应式特性--->数据变，视图对应变。

内容渲染指令

内容渲染指令用来辅助开发者渲染 DOM 元素的文本内容。

v-text（类似innerText）

• 用于更新元素的文本内容，会覆盖 p 标签原有内容

v-html（类似 innerHTML）

• 用于解析并插入HTML标签，能够将HTML标签的样式呈现出来，会覆盖 p 标签原有内容

//数据name:"<h2>这是一个<strong>非常优秀的代码客</strong>的boy<h2>"
 //页面结果：非常优秀的代码客
<p v-html="name">hello</p>
 //页面结果：<h2>这是一个<strong>非常优秀的代码客</strong>的boy<h2>
<p v-text="name">hello</p>

条件渲染指令

条件判断指令用来辅助开发者按需控制DOM 的显示与隐藏。

 v-show

• 作用： 控制元素显示隐藏
• 语法： v-show = "表达式"  表达式值为 true 显示， false 隐藏
• 原理： 切换 display:none 控制显示隐藏
• 场景：频繁切换显示隐藏的场景

 v-if

• 作用： 控制元素显示隐藏（条件渲染）
• 语法： v-if= "表达式"  表达式值 true显示， false 隐藏
• 原理： 基于条件判断，是否创建 或 移除元素节点
• 场景： 要么显示，要么隐藏，不频繁切换的场景

 v-else 和 v-else-if

• 作用：辅助v-if进行判断渲染
• 语法：v-else-if="表达式"    v-else
• 注意：需要紧接着v-if使用

<!-- v-show 示例 -->
<p v-show="isVisible">这个段落会根据 isVisible 的值显示或隐藏</p>
<!-- v-if 示例 -->
<p v-if="con1">如果 con1 为 true，则显示这段文字</p>
<p v-else-if="con2">如果 con1 为 false，且 con2 为 true，则显示这段文字</p>
<p v-else>如果 con1 和 con2 都为 false，则显示这段文字</p>

事件绑定指令

事件绑定指令用于绑定事件监听器。

 v-on:   简写为 @

• 事件处理函数(fn)应该写到一个跟data同级的配置项（methods）中
• methods中的函数内部的this都指向Vue实例

<!-- v-on 示例 -->
<button v-on:click="fn">完整版</button>
<button @click="fn">简写版</button>
<button @click="fn('Hello')">传参数加括号</button>

属性绑定指令

用于动态设置HTML的标签属性。它可以通过表达式绑定属性值，实现数据的双向绑定。

v-bind:（简写成冒号 ":"）

• 作用：动态设置html的标签属性 比如：src、url、title
• 语法：v-bind:属性名=“表达式”

<!-- v-bind 示例 -->
// linkUrl:链接的URL地址
<a v-bind:href="linkUrl" title="链接标题">完整版</a>
<a :href="linkUrl" title="链接标题">简写版</a>

 v-bind对样式控制的增强

操作class（不同语法示例）

1.语法：
<div> :class = "对象/数组">这是一个div</div>

2.对象语法

• 当class动态绑定的是**对象**时，**键就是类名，值就是布尔值**，如果值是**true**，就有这个类，否则没有这个类
• ​ 适用场景：一个类名，来回切换

<div class="box" :class="{ 类名1: 布尔值, 类名2: 布尔值 }"></div>

3.数组语法

• 当class动态绑定的是**数组**时 → 数组中所有的类，都会添加到盒子上，本质就是一个 class 列表
• 使用场景:批量添加或删除类

<div class="box" :class="[ 类名1, 类名2, 类名3 ]"></div>

<!-- v-bind:class 示例 -->
<div class="box" :class="{ class1: true }">对象语法</div>
<div class="box" :class="[ 'class1', 'class2' ]">数组语法</div>

操作style

语法

<div class="box" :style="{ CSS属性名1: CSS属性值, CSS属性名2: CSS属性值 }"></div>

<div :style="{ color: 'red', fontSize: '20px' }">你爱学习你真棒</div>

列表渲染指令

列表渲染指令用于遍历数组或对象。

v-for

• 语法：v-for="(item, index) in list"
• item 是数组中的每一项
• index 是每一项的索引(可选省略）
• list 是被遍历的数组

v-for中的key

• 语法： key="唯一值"
• 作用：给列表项添加的"唯一标识"。便于Vue进行列表项的"正确排序复用"。
• 为什么加key：Vue 的默认行为会尝试原地修改元素（"就地复用"）
• key 的值只能是字符串 或 数字类型
• key 的值必须具有唯一性
• 推荐使用 id 作为 key（唯一），不推荐使用 index 作为 key（会变化，不对应）

双向绑定指令

双向绑定：数据变，呈现的页面结果会更新；页面结果更新，数据也会随之而变。

v-model

• 作用： 给表单元素（input、radio、select等）使用，双向绑定数据，可以快速 获取 或 设置 表单元素内容
• 语法：v-model="变量"

<!-- v-model 示例 -->
<input type="text" v-model="message">
<p>{{ message }}</p>