文章目录
- 前言
- 一、内容渲染指令
- 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 的学习和应用过程中取得成功！
