【Vue】「Vue.js 入门指南」之常用指令的含义与用法
toyiye 2024-09-16 06:00 3 浏览 0 评论
前言
本篇博文是《Vue.js 打怪升级之路》中入门系列的第三篇博文,主要内容是详细介绍 Vue 常用指令的含义与用法,并通过一个案例—电子宣传小册的制作,来展示如何使用 Vue 的指令进行开发,往期系列文章请访问博主的 Vue 专栏,博文中的所有代码全部收集在博主的 GitHub 仓库中;
内容渲染指令
内容渲染指令主要用于控制元素内容的动态显示和更新,实现灵活的数据展示和交互效果。【内容渲染指令】代码点击此处跳转。
{{ }}:双括号中可以写入 Vue 实例中的数据或表达式,将其渲染到模板中。例如:<p>{{ message }}</p>,这种方式是最常见的内容渲染方式。在上篇博文 Vue.js 入门指南:(二)了解插值表达式和响应式特性 中有过详细讲解,对此不太熟悉的小伙伴可以往前翻一翻。
代码如下:
<h3>{{name}}</h3>
<p>{{motto.toUpperCase()}}</p>
<p>{{age >= 18 ? '成年':'未成年'}}</p>
<p>{{friend.sex}}</p>
<p>{{fn()}}</p>
运行结果:
v-text:用于设置元素的文本内容,类似于 JavaScript 中的 innerText,使用该指令会覆盖标签原有内容。
代码如下:
<!-- v-text -->
<span>sidiot</span>
<span v-text="text">sidiot</span>
运行结果:
v-html:用于将数据作为 HTML 解析并渲染到元素中,类似于 JavaScript 中的 innerHTML,同时使用该指令会覆盖标签原有内容。
代码如下:
<!-- v-html -->
<span>sidiot</span>
<span v-html="html">sidiot</span>
运行结果:
但要注意的是,使用 v-html 这个指令时要确保数据的安全性,以避免 XSS 攻击。
例如给 v-html 赋值 <img src='' onerror='alert("sidiot")'/>,代码如下:
<!-- v-html xss -->
<label>
<input type="text" v-model="value">
<p>输入的值: <span v-html="value"></span></p>
</label>
运行结果:
条件渲染指令
条件渲染指令主要用于根据条件来控制元素的显示和隐藏,实现根据不同的条件来动态地显示或隐藏元素。【条件渲染指令】代码点击此处跳转。
v-show:用于根据条件来控制元素的显示与隐藏,但不是直接从 DOM 中移除。当条件为真时,元素会显示;当条件为假时,元素会隐藏,但仍占据 DOM 空间。一般用于频繁切换的场景。
代码如下:
<!-- v-show -->
<h3>盒子一号</h3>
<div v-show=true class="box">我是 sidiot 控制的盒子</div>
<h3>盒子二号</h3>
<div v-show=false class="box">我不是 sidiot 控制的盒子</div>
运行结果:
v-if:用于根据条件判断是否渲染元素。当条件为真时,元素会被渲染;当条件为假时,元素会被移除。这个指令会触发 DOM 的插入和移除操作,因此在使用时需要谨慎,在不频繁切换的场景进行使用,以避免性能问题。
代码如下:
<!-- v-if -->
<h3>盒子三号</h3>
<div v-if=true class="box">我是 sidiot 控制的盒子</div>
<h3>盒子四号</h3>
<div v-if=false class="box">我不是 sidiot 控制的盒子</div>
运行结果:
v-else-if:用于在多个条件之间进行判断。它与 v-if 连用,用于指定上一个 v-if 或 v-else-if 指令条件为假时的下一个条件。
代码如下:
<!-- v-else-if -->
<h3>成绩单</h3>
<p>您的成绩是 {{ score }},等级:
<span v-if="score >= 90">优秀</span>
<span v-else-if="score >= 75">良好</span>
<span v-else-if="score >= 60">合格</span>
</p>
运行结果:
v-else:用于指定在之前的 v-if 或 v-else-if 条件都不满足时的默认情况。它必须紧跟在一个带有条件的指令后面,并且不能有条件表达式。
代码如下:
<!-- v-else-if v-else -->
<h3>成绩单</h3>
<p>您的成绩是 {{ score }},等级:
<span v-if="score >= 90">优秀</span>
<span v-else-if="score >= 75">良好</span>
<span v-else-if="score >= 60">合格</span>
<span v-else style="color: red">不合格</span>
</p>
运行结果:
事件绑定指令
事件绑定指令主要用于根据条件来控制元素的显示和隐藏,实现根据不同的条件来动态地显示或隐藏元素。【事件绑定指令】代码点击此处跳转。
v-on 指令用于在 Vue 中监听 DOM 事件,如点击、键盘输入、鼠标移动等,它的作用是在事件触发时执行一些 JavaScript 代码。v-on 简写为 @。
v-on:事件名="内联语句"
代码如下:
<button @click="count--">-</button>
<span>{{ count }}</span>
<button v-on:click="count++">+</button>
运行结果:
v-on:事件名="处理函数"
代码如下:
<button @click="count--">-</button>
<span>{{ count }}</span>
<button v-on:click="count++">+</button>
运行结果:
v-on:事件名="处理函数(参数)"
代码如下:
<!-- v-on:事件名="处理函数(参数)" -->
<span>钱包余额:{{ money }}</span>
<div class="box1">
<h3>sidiot 小卖部</h3>
<button @click="buy(10)">泡面10元</button>
<button @click="buy(3)">火腿肠3元</button>
</div>
运行结果:
属性绑定指令
属性绑定指令主要用于将数据绑定到 HTML 元素的属性上,实现动态设置 HTML 的标签属性。【属性绑定指令】代码点击此处跳转。
v-bind:用于在数据和视图之间建立单向绑定关系,使得数据的变化能够自动更新到视图上,但不会影响原始数据。v-bind 有一种简写形式,即使用冒号 :。
代码如下:
<img v-bind:src="imgUrl[0]" v-bind:title="msg" alt="">
<img :src="imgUrl[1]" :title="msg" alt="">
运行结果:
v-model:用于在数据和视图之间建立双向绑定关系,使得数据的变化能够自动更新到视图上,同时视图的变化也能够自动更新到数据中。
代码如下:
账户:<input type="text" v-model="username"> <br><br>
密码:<input type="password" v-model="password"> <br><br>
<button @click="login">登录</button>
<button @click="reset">重置</button>
data: {
username: '',
password: ''
},
methods: {
login () {
console.log("账号: " + this.username + ", 密码: " + this.password)
console.log("登录中...")
},
reset () {
this.username = ''
this.password = ''
console.log("重置了账号密码!")
}
}
运行结果:
案例:电子宣传小册
经过上面的知识学习,让我们写一个小 demo 来练练手,巩固一下吧。
博主之前写过一个专栏 探索 Netty:源码解析与应用案例分享,为了让更多的人了解到这个专栏,现在要做一个电子宣传小册,需求是展示专栏中的文章标题以及其对应的封面,并且要有 “上一篇” 和 “下一篇” 的按钮,来实现不同文章的切换。
实现效果
实现思路
1、数组存储标题和封面图片路径。
data: {
title_list:[
"【Netty】「源码解析」(三)设置连接超时:深入分析 ChannelFuture.sync() 的执行过程",
"【Netty】「源码解析」(二)HeapBuffer 创建过程详解:高效可靠的内存管理技巧",
"【Netty】「源码解析」(一)ByteBuf 的动态扩容策略与实现原理",
"【Netty】「项目实战」(三)序列化算法选型对聊天室可扩展性的影响",
"【Netty】「项目实战」(二)提升聊天室的性能,从引入心跳检测机制开始",
"【Netty】「项目实战」(一)如何构建多客户端聊天室"
],
photo_list: [
"./imgs/y3.png",
"./imgs/y2.png",
"./imgs/y1.png",
"./imgs/x3.png",
"./imgs/x2.png",
"./imgs/x1.png"
]
}
2、准备下标值 index 来获取数组中的标题和封面。
data: {
index: 0,
...
}
3、通过内容渲染指令 v-text 设置 <h5> 标签的文本内容为文章标题。
<h5 v-text="title_list[index]"></h5>
4、通过属性绑定指令 v-bind 将封面图片路径绑定到 <img> 标签的 src 属性上。
<img :src="photo_list[index]" alt="">
5、通过事件绑定指令 v-on 实现点击按钮来改变下标值 index。
<button @click="index--">上一篇</button>
<button @click="index++">下一篇</button>
6、当展示的是第一篇文章时,“上一篇” 按钮应该进行隐藏;展示的是最后一篇文章时,“下一篇” 按钮应该进行隐藏。由于这是频繁切换的场景,因此通过条件渲染指令 v-show 来实现此需求。
<button v-show="index > 0" @click="index--">上一篇</button>
<button v-show="index < photo_list.length - 1" @click="index++">下一篇</button>
实现代码
后记
通过本文的介绍,相信你对 Vue 常用的指令有了更深入的了解。内容渲染指令可以将数据动态地呈现在页面上,条件渲染指令根据特定条件来显示或隐藏元素,事件绑定指令能够对用户的交互进行响应,属性绑定指令则赋予了更大的灵活性和控制力。并且,通过电子宣传小册的开发,我们也实际运用了这些指令来构建一个简单但是有趣的 demo。
作者:sidiot
链接:https://juejin.cn/post/7303386068606730279
相关推荐
- 为何越来越多的编程语言使用JSON(为什么编程)
-
JSON是JavascriptObjectNotation的缩写,意思是Javascript对象表示法,是一种易于人类阅读和对编程友好的文本数据传递方法,是JavaScript语言规范定义的一个子...
- 何时在数据库中使用 JSON(数据库用json格式存储)
-
在本文中,您将了解何时应考虑将JSON数据类型添加到表中以及何时应避免使用它们。每天?分享?最新?软件?开发?,Devops,敏捷?,测试?以及?项目?管理?最新?,最热门?的?文章?,每天?花?...
- MySQL 从零开始:05 数据类型(mysql数据类型有哪些,并举例)
-
前面的讲解中已经接触到了表的创建,表的创建是对字段的声明,比如:上述语句声明了字段的名称、类型、所占空间、默认值和是否可以为空等信息。其中的int、varchar、char和decimal都...
- JSON对象花样进阶(json格式对象)
-
一、引言在现代Web开发中,JSON(JavaScriptObjectNotation)已经成为数据交换的标准格式。无论是从前端向后端发送数据,还是从后端接收数据,JSON都是不可或缺的一部分。...
- 深入理解 JSON 和 Form-data(json和formdata提交区别)
-
在讨论现代网络开发与API设计的语境下,理解客户端和服务器间如何有效且可靠地交换数据变得尤为关键。这里,特别值得关注的是两种主流数据格式:...
- JSON 语法(json 语法 priority)
-
JSON语法是JavaScript语法的子集。JSON语法规则JSON语法是JavaScript对象表示法语法的子集。数据在名称/值对中数据由逗号分隔花括号保存对象方括号保存数组JS...
- JSON语法详解(json的语法规则)
-
JSON语法规则JSON语法是JavaScript对象表示法语法的子集。数据在名称/值对中数据由逗号分隔大括号保存对象中括号保存数组注意:json的key是字符串,且必须是双引号,不能是单引号...
- MySQL JSON数据类型操作(mysql的json)
-
概述mysql自5.7.8版本开始,就支持了json结构的数据存储和查询,这表明了mysql也在不断的学习和增加nosql数据库的有点。但mysql毕竟是关系型数据库,在处理json这种非结构化的数据...
- JSON的数据模式(json数据格式示例)
-
像XML模式一样,JSON数据格式也有Schema,这是一个基于JSON格式的规范。JSON模式也以JSON格式编写。它用于验证JSON数据。JSON模式示例以下代码显示了基本的JSON模式。{"...
- 前端学习——JSON格式详解(后端json格式)
-
JSON(JavaScriptObjectNotation)是一种轻量级的数据交换格式。易于人阅读和编写。同时也易于机器解析和生成。它基于JavaScriptProgrammingLa...
- 什么是 JSON:详解 JSON 及其优势(什么叫json)
-
现在程序员还有谁不知道JSON吗?无论对于前端还是后端,JSON都是一种常见的数据格式。那么JSON到底是什么呢?JSON的定义...
- PostgreSQL JSON 类型:处理结构化数据
-
PostgreSQL提供JSON类型,以存储结构化数据。JSON是一种开放的数据格式,可用于存储各种类型的值。什么是JSON类型?JSON类型表示JSON(JavaScriptO...
- JavaScript:JSON、三种包装类(javascript 包)
-
JOSN:我们希望可以将一个对象在不同的语言中进行传递,以达到通信的目的,最佳方式就是将一个对象转换为字符串的形式JSON(JavaScriptObjectNotation)-JS的对象表示法...
- Python数据分析 只要1分钟 教你玩转JSON 全程干货
-
Json简介:Json,全名JavaScriptObjectNotation,JSON(JavaScriptObjectNotation(记号、标记))是一种轻量级的数据交换格式。它基于J...
- 比较一下JSON与XML两种数据格式?(json和xml哪个好)
-
JSON(JavaScriptObjectNotation)和XML(eXtensibleMarkupLanguage)是在日常开发中比较常用的两种数据格式,它们主要的作用就是用来进行数据的传...
你 发表评论:
欢迎- 一周热门
- 最近发表
- 标签列表
-
- r语言矩阵 (127)
- browsererror (114)
- exportexcel (119)
- cv2.bitwise_not (137)
- dump命令 (128)
- es6concat (126)
- heapify (127)
- java.security.egd (130)
- javax.annotation (117)
- jsstringsplit (117)
- js数字 (115)
- maven编译 (132)
- mysqlleft (128)
- nodejsbuffer (149)
- org.apache.commons.httpclient (126)
- org.jsoup (141)
- org.springframework.web (128)
- robotframework-ride (115)
- setnocounton (141)
- socket.gethostbyname (122)
- sqlmid (121)
- time.strptime (133)
- vscode格式化 (125)
- win32con (129)
- window.localstorage (126)