当前位置：首页 > news >正文

【vue2基础教程】vue指令

news 2026/4/18 18:09:03

文章目录

前言
一、内容渲染指令
- 1.1 v-text
- 1.2 v-html
- 1.3 v-show
- 1.4 v-if
- 1.5 v-else 与 v-else-if
二、事件绑定指令
三、属性绑定指令
总结

前言

Vue.js 是一款流行的 JavaScript 框架，广泛应用于构建交互性强、响应速度快的现代 Web 应用程序。Vue 指令是 Vue.js 中的一项重要特性，它们允许开发者将特定的行为应用到 HTML 元素上，从而使得 DOM 操作更加便捷和灵活。在本篇文章中，我们将介绍 Vue 指令的基础知识，帮助读者快速入门 Vue.js 开发。

一、内容渲染指令

内容渲染指令有两种：v-text和v-html
内容渲染指令用来辅助开发者渲染 DOM 元素的文本内容

1.1 v-text

v-text（类似innerText）
- 使用语法：<p v-text="uname">hello</p>，意思是将 uame 值渲染到 p 标签中
- 类似 innerText，使用该语法，会覆盖 p 标签原有内容

<template><div class="hello"><p v-text="uname">Hello</p></div>
</template><script>
export default {name: 'HelloWorld',data() {return {count: 0,uname:"张三"};},
}

1.2 v-html

v-html（类似 innerHTML）
- 使用语法：<p v-html="intro">hello</p>，意思是将 intro 值渲染到 p 标签中
- 类似 innerHTML，使用该语法，会覆盖 p 标签原有内容
- 类似 innerHTML，使用该语法，能够将HTML标签的样式呈现出来。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>v-html Example</title><!-- 引入 Vue.js --><script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
</head>
<body><div id="app"><!-- 使用 v-html 指令将 message 的值作为 HTML 渲染 --><div v-html="message"></div>
</div><script>
new Vue({el: '#app',data: {// 假设 message 中包含一些 HTML 标记message: '<h1>Hello, <span style="color: red;">Vue.js</span>!</h1>'}
})
</script></body>
</html>

1.3 v-show

v-show

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

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>v-show Example</title><!-- 引入 Vue.js --><script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
</head>
<body><div id="app"><!-- 使用 v-show 指令根据 isDisplayed 的值来显示或隐藏元素 --><p v-show="isDisplayed">This paragraph is shown using v-show.</p><p v-show="!isDisplayed">This paragraph is hidden using v-show.</p><!-- 使用按钮切换 isDisplayed 的值 --><button @click="toggleDisplay">Toggle Display</button>
</div><script>
new Vue({el: '#app',data: {// 控制显示和隐藏的变量isDisplayed: true},methods: {// 切换 isDisplayed 的值toggleDisplay: function() {this.isDisplayed = !this.isDisplayed;}}
})
</script></body>
</html>

1.4 v-if

v-if

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

<div v-if="flag" class="box">我是v-if控制的盒子</div>

1.5 v-else 与 v-else-if

v-else 和 v-else-if

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

二、事件绑定指令

我们可以使用v-事件进行绑定事件
或者我们可以简写成@事件=xxx
我们既可以写成内联语句，也可以在下面这个图片加上method:{}
，里面写上我们的函数

我们可以进行参数的传递，可以像函数调用一个写小括号，如果没有参数则不需要写任何参数。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.box {border: 3px solid #000000;border-radius: 10px;padding: 20px;margin: 20px;width: 200px;}h3 {margin: 10px 0 20px 0;}p {margin: 20px;}</style>
</head>
<body><div id="app"><div class="box"><h3>小黑自动售货机</h3><button @click="buy(5)">可乐5元</button><button @click="buy(10)">咖啡10元</button><button @click="buy(8)">牛奶8元</button></div><p>银行卡余额：{{ money }}元</p></div><script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script><script>const app = new Vue({el: '#app',data: {money: 100},methods: {buy (price) {this.money -= price}}})</script>
</body>
</html>

三、属性绑定指令

作用：\动态设置html的标签属性比如：src、url、title
语法：**v-bind:**属性名=“表达式”
v-bind:\可以简写成 => ** : **

比如，有一个图片，它的 src 属性值，是一个图片地址。这个地址在数据 data 中存储。

则可以这样设置属性值：

<img v-bind:src="url" />
<img :src="url" /> （v-bind可以省略）

总结

本文介绍了 Vue.js 中的指令，它们是 Vue.js 框架中的重要特性之一。通过指令，我们可以直接操作 DOM，实现数据的双向绑定、条件渲染、循环渲染等功能，极大地提高了开发效率。在 Vue.js 中，指令以 v- 开头，后跟指令名称，如 v-model、v-if、v-for 等。每个指令都有特定的功能和用法，开发者可以根据需求灵活运用。通过学习和掌握 Vue 指令，可以更加高效地构建 Vue.js 应用程序，提升开发体验和用户体验。

在你开始学习和应用 Vue.js 中的指令时，建议先理解指令的基本概念和常用指令的用法，然后通过实践来加深理解。随着对 Vue.js 的熟练程度提升，你会发现指令的强大之处，并能够运用它们解决更复杂的业务需求。希望本文能够对你学习 Vue.js 提供帮助，祝愿你在 Vue.js 的学习和应用过程中取得成功！