【vue2基础教程】vue指令
文章目录
- 前言
- 一、内容渲染指令
- 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 的学习和应用过程中取得成功!
相关文章:
【vue2基础教程】vue指令
文章目录 前言一、内容渲染指令1.1 v-text1.2 v-html1.3 v-show1.4 v-if1.5 v-else 与 v-else-if 二、事件绑定指令三、属性绑定指令总结 前言 Vue.js 是一款流行的 JavaScript 框架,广泛应用于构建交互性强、响应速度快的现代 Web 应用程序。Vue 指令是 Vue.js 中…...
P4551 最长异或路径
最长异或路径 题目描述 给定一棵 n n n 个点的带权树,结点下标从 1 1 1 开始到 n n n。寻找树中找两个结点,求最长的异或路径。 异或路径指的是指两个结点之间唯一路径上的所有边权的异或。 输入格式 第一行一个整数 n n n,表示点数…...
鸿蒙OpenHarmony HDF 驱动开发
目录 序一、概述二、HDF驱动框架三、驱动程序四、驱动配置坚持就有收获 序 最近忙于适配OpenHarmonyOS LiteOS-M 平台,已经成功实践适配平台GD32F407、STM32F407、STM32G474板卡,LiteOS适配已经算是有实际经验了。 但是,鸿蒙代码学习进度慢下…...
深度学习:如何面对隐私和安全方面的挑战
深度学习技术的广泛应用推动了人工智能的快速发展,但同时也引发了关于隐私和安全的深层次担忧。如何在保护用户隐私的同时实现高效的模型训练和推理,是深度学习领域亟待解决的问题。差分隐私、联邦学习等技术的出现,为这一挑战提供了可能的解…...
【操作系统概念】第12章:大容量存储阶段
文章目录 0.前言12.1 概述12.2磁盘结构12.3 磁盘调度12.3.1 FCFS调度12.3.2 SSTF调度12.3.3 SCAN调度12.3.4 C-SCAN调度12.3.5 如何选择磁盘调度 0.前言 文件系统从逻辑上来看包括三部分。第10章讨论了文件系统的用户和程序员的接口。第11章描述了操作系统实现这种接口的内部数…...
UE5.1_使用技巧(常更)
UE5.1_使用技巧(常更) 1. 清除所有断点 运行时忘记蓝图中的断点可能会出现运行错误的可能,务必运行是排除一切断点,逐个排查也是办法,但是在事件函数多的情况下会很复杂且慢节奏,学会一次性清除所有很有必…...
rust开发100问?
Rust如何管理内存?Rust的所有权是什么?生命周期在Rust中如何工作?什么是借用在Rust中?如何在Rust中创建枚举类型?Rust中的trait是什么?如何定义并实现一个结构体(struct)的方法&…...
.net6Api后台+uniapp导出Excel
之前的这个是vue3写法,后端是.net6Api.net6Api后台VUE3前端实现上传和下载文件全过程_vue3 下载文件-CSDN博客 在现在看来似乎搞的复杂了,本次记录一下.net6Api后台uniapp导出Excel。 后端和之前的不一样,前端也和之前的不一样,…...
【OD】算法二
开源项目热度榜单 某个开源社区希望将最近热度比较高的开源项目出一个榜单,推荐给社区里面的开发者。对于每个开源项目,开发者可以进行关注(watch)、收藏(star)、fork、提issue、提交合并请求(MR)等。 数据库里面统计了每个开源项目关注、收藏、fork、…...
《深度学习风暴:掀起智能革命的浪潮》
在当今信息时代,深度学习已经成为科技领域的一股强大力量,其应用领域涵盖了从医疗到金融再到智能交互等方方面面。随着技术的不断进步和应用的不断拓展,深度学习的发展势头愈发迅猛,掀起了一股智能革命的浪潮。本文将从基本原理、应用实例、挑战与未来发展方向、与机器学习…...
Arduin ESP32+epaper(电子墨水屏)时钟相册制作教程
Arduin ESP32 epaper(电子墨水屏)时钟相册制作教程 🔖epaper(电子墨水屏)采用的是:合宙1.54“ 电子墨水屏(e-paper)📍相关篇《Arduino框架下ESP32/ESP8266合宙1.54“ 电子墨水屏(e-paper)驱动显…...
Django模型层(附带test环境)
Django模型层(附带test环境) 目录 Django模型层(附带test环境)连接数据库Django ORM在models.py中建表允许为空指定默认值数据库迁移命令 开启测试环境建表语句补充(更改默认表名)数据的增加时间数据的时区 多表数据的增加一对多多对多 数据的删除修改数据查询数据查询所有数据…...
(AliyunAIACP17)知识点:神经网络(深度学习)分析
摘要: 案,详细阐述了神经网络的实现步骤,并提供了相应的代码示例。此外,文章还涵盖了神经网络中的技巧与实践、性能优化与测试,以及常见问题与解答。最后,对神经网络在深度学习中的应用前景进行了展望。 …...
基于 HBase Phoenix 构建实时数仓(1)—— Hadoop HA 安装部署
目录 一、主机规划 二、环境准备 1. 启动 NTP 时钟同步 2. 修改 hosts 文件 3. 配置所有主机间 ssh 免密 4. 修改用户可打开文件数与进程数(可选) 三、安装 JDK 四、安装部署 Zookeeper 集群 1. 解压、配置环境变量 2. 创建配置文件 3. 创建新…...
XS2185:八通道PSE控制器产品
八通道PSE控制器产品-XS2185 芯片特性 八通道PSE 支持标准PD供电 支持非标PD供电 每个端口功率最大30W 12位端口电流监测 12位电源电压监测 支持直流负载断开检测 支持LED供电状态指示 支持过流保护 支持短路保护 Sifos基本测试通过 32-PIN…...
Selenium WebDriver API 中涉及的一些常用方法和类
Selenium WebDriver API 是 Selenium 提供的一组方法和类,用于控制浏览器和操作 Web 元素。这些 API 提供了丰富的功能,包括但不限于: 1. **查找元素**:通过不同的定位方式(如ID、Class Name、XPath等)在页…...
OJ_复数集合
题干 C实现 #define _CRT_SECURE_NO_WARNINGS #include <stdio.h> #include <queue> #include <string> using namespace std;struct Complex {int re;int im;//构造函数Complex(int _re, int _im) {//注意参数名字必须不同re _re;im _im;} };//结构体不支…...
【学一点RISC-V】ACLINT(高级核心本地中断控制器)文档
RISCV架构 ACLINT文档 ACLINT原文档:https://github.com/riscv/riscv-aclint/blob/main/riscv-aclint.adoc 在这里进行了翻译以及校对,仅供参考,不正确的地方欢迎指出 1、介绍 【此 RISC-V ACLINT 规范定义了一组内存映射设备,这…...
grafana table合并查询
注:本文基于Grafana v9.2.8编写 1 问题 默认情况下table展示的是一个查询返回的多个field,但是我想要的数据在不同的metric上,比如我需要显示某个pod的读写IO,但是读和写这两个指标存在于两个不同的metirc,需要分别查…...
编程笔记 html5cssjs 007 文章排版 颜真卿《述张长史笔法十二意》
编程笔记 html5&css&js 007 文章排版 颜真卿《述张长史笔法十二意》 一、代码二、解释 这段代码定义了一个古文展示页面的结构和样式,同时本文内容也是书法爱好者的珍贵资料。 一、代码 <!DOCTYPE html> <html lang"zh-CN"> <hea…...
深入解析C++中的extern关键字:跨文件共享变量与函数的终极指南
🚀 C extern 关键字深度解析:跨文件编程的终极指南 📅 更新时间:2025年6月5日 🏷️ 标签:C | extern关键字 | 多文件编程 | 链接与声明 | 现代C 文章目录 前言🔥一、extern 是什么?&…...
【C++从零实现Json-Rpc框架】第六弹 —— 服务端模块划分
一、项目背景回顾 前五弹完成了Json-Rpc协议解析、请求处理、客户端调用等基础模块搭建。 本弹重点聚焦于服务端的模块划分与架构设计,提升代码结构的可维护性与扩展性。 二、服务端模块设计目标 高内聚低耦合:各模块职责清晰,便于独立开发…...
在WSL2的Ubuntu镜像中安装Docker
Docker官网链接: https://docs.docker.com/engine/install/ubuntu/ 1、运行以下命令卸载所有冲突的软件包: for pkg in docker.io docker-doc docker-compose docker-compose-v2 podman-docker containerd runc; do sudo apt-get remove $pkg; done2、设置Docker…...
在web-view 加载的本地及远程HTML中调用uniapp的API及网页和vue页面是如何通讯的?
uni-app 中 Web-view 与 Vue 页面的通讯机制详解 一、Web-view 简介 Web-view 是 uni-app 提供的一个重要组件,用于在原生应用中加载 HTML 页面: 支持加载本地 HTML 文件支持加载远程 HTML 页面实现 Web 与原生的双向通讯可用于嵌入第三方网页或 H5 应…...
Angular微前端架构:Module Federation + ngx-build-plus (Webpack)
以下是一个完整的 Angular 微前端示例,其中使用的是 Module Federation 和 npx-build-plus 实现了主应用(Shell)与子应用(Remote)的集成。 🛠️ 项目结构 angular-mf/ ├── shell-app/ # 主应用&…...
省略号和可变参数模板
本文主要介绍如何展开可变参数的参数包 1.C语言的va_list展开可变参数 #include <iostream> #include <cstdarg>void printNumbers(int count, ...) {// 声明va_list类型的变量va_list args;// 使用va_start将可变参数写入变量argsva_start(args, count);for (in…...
stm32wle5 lpuart DMA数据不接收
配置波特率9600时,需要使用外部低速晶振...
算法打卡第18天
从中序与后序遍历序列构造二叉树 (力扣106题) 给定两个整数数组 inorder 和 postorder ,其中 inorder 是二叉树的中序遍历, postorder 是同一棵树的后序遍历,请你构造并返回这颗 二叉树 。 示例 1: 输入:inorder [9,3,15,20,7…...
设计模式-3 行为型模式
一、观察者模式 1、定义 定义对象之间的一对多的依赖关系,这样当一个对象改变状态时,它的所有依赖项都会自动得到通知和更新。 描述复杂的流程控制 描述多个类或者对象之间怎样互相协作共同完成单个对象都无法单独度完成的任务 它涉及算法与对象间职责…...
动态生成element-plus的scss变量;SCSS中实现动态颜色变体生成
文章目录 一、动态css变量1.生成内容2.动态生成css变量2.1新增_color-utils.scss(不推荐)2.2新增_color-utils.scss(推荐)2.3theme.scss引入使用 一、动态css变量 1.生成内容 在我们修改element-plus主题色时候,会自…...
