Vue 常用指令详解
在本文中，我将详细的介绍 Vue.js 中常用的指令，并提供了相关实例代码来帮助更好地理解它们的用法。
文章目录
- [Vue 常用指令详解](#Vue 常用指令详解)
-
- [1. v-bind 指令](#1. v-bind 指令)
-
- [1.1 概述](#1.1 概述)
- [1.2 语法](#1.2 语法)
- [1.3 参数说明](#1.3 参数说明)
- [1.4 完整示例代码](#1.4 完整示例代码)
- 解释
- [2. v-model 指令](#2. v-model 指令)
-
- [2.1 概述](#2.1 概述)
- [2.2 语法](#2.2 语法)
- [2.3 参数说明](#2.3 参数说明)
- [2.4 完整示例代码](#2.4 完整示例代码)
- 解释
- [3. v-if, v-else-if, v-else 指令](#3. v-if, v-else-if, v-else 指令)
-
- [3.1 概述](#3.1 概述)
- [3.2 语法](#3.2 语法)
- [3.3 参数说明](#3.3 参数说明)
- [3.4 完整示例代码](#3.4 完整示例代码)
- 解释
- [4. v-for 指令](#4. v-for 指令)
-
- [4.1 概述](#4.1 概述)
- [4.2 语法](#4.2 语法)
- [4.3 参数说明](#4.3 参数说明)
- [4.4 完整示例代码](#4.4 完整示例代码)
- 解释
- [5. v-show 指令](#5. v-show 指令)
-
- [5.1 概述](#5.1 概述)
- [5.2 语法](#5.2 语法)
- [5.3 参数说明](#5.3 参数说明)
- [5.4 完整示例代](#5.4 完整示例代)
- 解释
1. v-bind 指令
1.1 概述
v-bind 指令用于在 Vue.js 应用中动态绑定 HTML 属性。它可以通过 JavaScript 数据模型来改变元素的属性值。
1.2 语法
v-bind:attributeName="dataProperty"
1.3 参数说明
- attributeName : 例如
src、href、class等 HTML 属性。 - dataProperty: 在 Vue 实例中定义的数据属性，可以是字符串、数字或对象。
1.4 完整示例代码
html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>v-bind 示例</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
</head>
<body>
<div id="app">
<img v-bind:src="imageSrc" alt="Vue Logo">
<h1 v-bind:class="headerClass">欢迎使用 Vue!</h1>
</div>
<script>
new Vue({
el: '#app', // 绑定 Vue 实例到 id 为 'app' 的 div 元素
data: {
imageSrc: 'https://vuejs.org/images/logo.png', // 设置要显示的图片地址
headerClass: 'header' // 设置要使用的 CSS 类
}
});
</script>
<style>
.header {
color: blue; // 设置 header 类的文本颜色为蓝色
}
</style>
</body>
</html>解释
- HTML 结构 : 使用
img标签动态绑定src属性显示 Vue 的 logo，并绑定h1标签的class属性以应用 CSS 样式。 - Vue 实例: Vue 实例绑定到 DOM 元素并提供数据来源。
- 样式 : 自定义
header类的样式，使文本呈现蓝色。
2. v-model 指令
2.1 概述
v-model 指令用于在表单元素（如 input、textarea 或 select）和 Vue 实例之间建立双向数据绑定。
2.2 语法
v-model="dataProperty"
2.3 参数说明
- dataProperty: 绑定到输入元素的值的 Vue 实例中的数据属性。
2.4 完整示例代码
html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>v-model 示例</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
</head>
<body>
<div id="app">
<input v-model="username" placeholder="请输入用户名">
<p>你的用户名是: {{ username }}</p>
</div>
<script>
new Vue({
el: '#app',
data: {
username: '' // 定义一个用户名的初始值为空
}
});
</script>
</body>
</html>解释
- HTML 部分 : 一个输入框用于接受用户的输入，绑定变量
username，同时展示输入的用户名。 - 双向绑定 : 当用户在输入框中输入内容时，
username的值也会实时更新，反之亦然。
3. v-if, v-else-if, v-else 指令
3.1 概述
通过 v-if、v-else-if 和 v-else，可以根据条件渲染不同的 DOM 元素。
3.2 语法
v-if="condition"
v-else-if="condition"
v-else
3.3 参数说明
- condition: 一个布尔值的 JavaScript 表达式，用于判断是否渲染特定内容。
3.4 完整示例代码
html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>v-if 示例</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
</head>
<body>
<div id="app">
<p v-if="isLoggedIn">欢迎回来, {{ username }}!</p>
<p v-else-if="isGuest">你好, 游客!</p>
<p v-else>请登录!</p>
<button @click="toggleLogin">切换登录状态</button>
</div>
<script>
new Vue({
el: '#app',
data: {
isLoggedIn: false, // 用户初始状态为未登录
isGuest: true, // 用户初始状态为游客
username: '小明' // 用户名
},
methods: {
toggleLogin() {
this.isLoggedIn = !this.isLoggedIn; // 切换登录状态
this.isGuest = !this.isGuest; // 切换游客状态
}
}
});
</script>
</body>
</html>解释
- HTML 部分: 根据用户的登录状态显示不同的信息。若用户已登录则显示欢迎信息；若为游客则显示访客信息；否则提醒用户登录。
- Vue 实例 : 定义了用户的登录状态和用户名。通过一个按钮可以切换登录状态，按钮的点击会触发
toggleLogin方法，更新界面内容。
4. v-for 指令
4.1 概述
v-for 指令用于在数组或对象上渲染动态列表，能够生成多个相同类型的 DOM 元素。
4.2 语法
v-for="(item, index) in items"
4.3 参数说明
- item: 当前循环迭代的元素名称，可以自定义。
- index: 当前元素的索引（可选）。
- items: 需要遍历的数组或对象。
4.4 完整示例代码
html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>v-for 示例</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
</head>
<body>
<div id="app">
<ul>
<li v-for="(item, index) in items" :key="item.id">{{ index + 1 }}. {{ item.name }}</li>
</ul>
</div>
<script>
new Vue({
el: '#app',
data: {
items: [ // 定义一个数组包含多个水果信息
{ id: 1, name: '苹果' },
{ id: 2, name: '香蕉' },
{ id: 3, name: '橘子' }
]
}
});
</script>
</body>
</html>解释
- HTML 结构 : 使用
ul和li标签来渲染出一个水果的列表。v-for循环迭代items数组，为每个水果生成一个列表项。 - :key 属性 : 为每个
li提供一个key属性，使 Vue 能够更高效地更新和渲染列表。
5. v-show 指令
5.1 概述
v-show 指令通过修改元素的 CSS display 属性来控制元素的显示或隐藏。与 v-if 不同，v-show 在切换显示状态时不会销毁和重建 DOM 元素。
5.2 语法
v-show="condition"
5.3 参数说明
- condition: 返回布尔值的 JavaScript 表达式，用于决定元素是否显示。
5.4 完整示例代
html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>v-show 示例</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
</head>
<body>
<div id="app">
<button @click="toggle">切换显示</button>
<p v-show="isVisible">这个文本可以显示或隐藏</p>
</div>
<script>
new Vue({
el: '#app',
data: {
isVisible: true // 初始状态为可见
},
methods: {
toggle() {
this.isVisible = !this.isVisible; // 切换可见状态
}
}
});
</script>
</body>
</html>解释
- HTML 部分 : 一个按钮用于切换文本的显示状态。在按下按钮后，使用
v-show指令决定p标签是否可见。 - Vue 实例 : 初始状态下，文本是可见的，点击按钮时会切换
isVisible的值，从而影响文本的显隐程度。