Chapter 04 Vue指令（下）

2024-08-27 18:52
文章标签 javascript vue 指令 04 frontend chapter

本文主要是介绍Chapter 04 Vue指令（下），希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

欢迎大家订阅【Vue2+Vue3】入门到实践 专栏，开启你的 Vue 学习之旅！

文章目录

  • 前言
  • 一、指令修饰符
  • 二、v-bind对于样式操作的增强
  • 三、v-model应用于表单元素

前言

在 Vue.js 中，指令是带有 v- 前缀的特殊属性，不同属性对应不同的功能。通过学习不同的指令，我们能够灵活应对多种业务场景的需求。本章详细讲解了指令修饰符并对 v-bind 以及 v-model 指令进行了拓展。

一、指令修饰符

指令修饰符是用于修改指令行为的特殊后缀，通过 . 指明一些指令后缀，不同后缀封装了不同的处理操作，能够改变指令的默认行为。通过使用修饰符，开发者可以在不增加额外逻辑的情况下，提高Vue应用的功能和可读性。

常用的指令修饰符如下：
①.stop
阻止事件冒泡。使用此修饰符可以防止事件向上冒泡到父元素。

【示例】

<!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>  .a {  width: 200px;  height: 200px;  background-color: pink;  margin-top: 20px;  }  .b {  width: 100px;  height: 100px;  background-color: skyblue;  }  </style>  
</head>  
<body>  <div id="app">   <div @click="aFn" class="a">  <div @click="bFn" class="b">B</div> <!-- 使用 .stop 修饰符 -->  </div>  </div>  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>  <script>  const app = new Vue({  el: '#app',  methods: {  aFn() {  alert('A被点击了');  },  bFn() {  alert('B被点击了');  }  }  });  </script>  
</body>  
</html>

运行结果：
点击B，会弹出弹窗“B”被点击了”，点击“确定”后会弹出弹窗“A被点击了”
在这里插入图片描述
在这里插入图片描述
【分析】
在DOM（文档对象模型）事件处理模型中，事件的传播有两个主要阶段：捕获阶段和冒泡阶段。对于在本例中，点击B元素时事件会冒泡到A元素。
事件传播的过程如下：
①捕获阶段：事件从文档的根元素开始，逐层向下传播到触发事件的目标元素（在本例中是B元素）。
②目标阶段：事件到达目标元素（B），此时可以执行目标元素上的事件处理。
③冒泡阶段：事件开始从目标元素向上传播，逐层返回到文档的根元素。在这个阶段，父元素的事件处理器将被触发（在本例中是A元素）。

为防止事件向上冒泡到父元素，可使用 .stop 修饰符，修改代码为：

<div @click="aFn" class="a">  <div @click.stop="bFn" class="b">B</div> 
</div>

运行结果:
点击B，会弹出弹窗“B”被点击了”在这里插入图片描述
点击A，会弹出弹窗“A被点击了”
在这里插入图片描述

②.prevent
阻止默认事件的发生。常用于表单提交等场景，以防止页面刷新。

【示例】

    <a @clickhref="http://www.baidu.com">阻止默认行为</a>

运行结果：
点击页面链接会跳转至百度官网
在这里插入图片描述
在这里插入图片描述
如果要阻止默认事件的发生，可使用 .prevent 修饰符，修改代码为：

<h3>@事件名.prevent  →  阻止默认行为</h3><a @click.prevent href="http://www.baidu.com">阻止默认行为</a>

运行结果：
点击页面链接不会发生跳转
在这里插入图片描述
③.trim
用于处理输入的字符串。当使用v-model绑定输入框时，去除输入字符串的前后空格。

【示例】

<body><div id="app">姓名：<input v-model="username" type="text"><br>年纪：<input v-model="age" type="text"><br></div><script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script><script>const app = new Vue({el: '#app',data: {username: '',age: '',}})</script>
</body>

运行结果：
在这里插入图片描述
如果要去除输入字符串的前后空格，可使用 .trim 修饰符，修改代码为：

<div id="app"><h3>修饰符 .trim </h3>姓名：<input v-model.trim="username" type="text"><br>年纪：<input v-model="age" type="text"><br>
</div>

运行结果：
在这里插入图片描述

④.number
自动将输入字符串转换为数字。适合处理数字输入。

【示例】

<body><div id="app">姓名：<input v-model="username" type="text"><br>年纪：<input v-model="age" type="text"><br></div><script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script><script>const app = new Vue({el: '#app',data: {username: '',age: '',}})</script>
</body>

运行结果：
在这里插入图片描述
如果要将输入字符串转换为数字，可使用 .number 修饰符，修改代码为：

<h3>修饰符 .number</h3>姓名：<input v-model.trim="username" type="text"><br>年纪：<input v-model.number="age" type="text"><br>
</div>

运行结果：
在这里插入图片描述

二、v-bind对于样式操作的增强

为了方便开发者进行样式控制， Vue 扩展了 v-bind 的语法，可以针对 class 类名和 style 行内样式进行控制。

①操作class
语法1：:class="{类名1 : 布尔值, 类名2 : 布尔值,……}"

对象 → 键就是类名，值是布尔值。如果值为 true，该类存在，否则不存在。

适用场景：一个类名来回切换

【示例】

<!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 {width: 200px;height: 200px;border: 3px solid #000;font-size: 30px;margin-top: 10px;}.pink {background-color: pink;}.big {width: 300px;height: 300px;}</style>
</head>
<body><div id="app"><div class="box">Hello Vue</div></div><script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script><script>const app = new Vue({el: '#app'})</script>
</body>
</html>

运行结果：
在这里插入图片描述
如果我们需要改变box的样式：

<div id="app"><div class="box pink big">Hello Vue</div>
</div>

运行结果：
在这里插入图片描述
该写法不能根据应用状态动态添加或删除样式类。如果需要根据条件来改变样式，就需要通过添加额外的逻辑来实现，增加代码的复杂度。

可使用动态绑定（例如v-bind:class）根据组件的数据状态动态添加或删除类，修改代码如下：

<div id="app"><div class="box" :class="{pink:true,big:true}">Hello Vue</div>
</div>

语法2：:class="['类名1', '类名2', ……]"

数组 → 数组中所有的类，都会添加到盒子上，本质就是一个 class 列表

适用场景：批量添加或删除类

【示例】

<div id="app"><div class="box" :class="['pink','big]">Hello Vue</div>
</div>

【案例——京东秒杀 tab 导航高亮】
请根据所学知识实现以下效果：
在这里插入图片描述
核心思路：

  • 基于数据动态渲染 tab → v-for
  • 设置下标记录高亮的是哪一个 tab → activeIndex
  • 基于下标动态控制 class 类名 → v-bind:class
<!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>* {margin: 0;padding: 0;}ul {display: flex;border-bottom: 2px solid #e01222;padding: 0 10px;}li {width: 100px;height: 50px;line-height: 50px;list-style: none;text-align: center;}li a {display: block;text-decoration: none;font-weight: bold;color: #333333;}li a.active {background-color: #e01222;color: #fff;}</style>
</head>
<body><div id="app"><ul><!-- @click="activeIndex=index": 处理点击事件，将当前项的索引赋值给activeIndex，以便高亮显示当前选中的项===:为一种比较运算符，称“严格相等”运算符。它用于比较两个值是否相等，同时还会检查它们的类型是否相同。--><li v-for="(item,index) in list" :key="item.id" @click="activeIndex=index"><a :class="{active:index===activeIndex}" href="#">{{item.name}}</a></li></ul></div><script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script><script>const app = new Vue({el: '#app',data: {/* 用于存储选中项的索引，初始值为0 */activeIndex:0, list: [{ id: 1, name: '京东秒杀' },{ id: 2, name: '每日特价' },{ id: 3, name: '品类秒杀' }]}})</script>
</body>
</html>

运行结果：
在这里插入图片描述
点击“每日特价”后：
在这里插入图片描述
点击“品类秒杀”后：
在这里插入图片描述

②操作style
语法：:style="{CSS属性名1 : 'CSS属性值', CSS属性名2 : 'CSS属性值', ……}"

适用场景：某个具体属性的动态设置

【示例】

<!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 {width: 200px;height: 200px;background-color: rgb(187, 150, 156);}</style>
</head>
<body><div id="app"><div class="box"></div></div><script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script><script>const app = new Vue({el: '#app'})</script>
</body>
</html>

运行结果：
在这里插入图片描述
使用 v-bind:style 动态地修改元素的样式，修改代码如下：

<div id="app"><!-- 在 JavaScript 中，属性名不能包含连字符，应使用驼峰命名法（CamelCase）来表示background-color要写成backgroundColor --><div class="box" :style="{width:'400px',height:'400px',backgroundColor:'red'}"></div></div>

运行结果：
在这里插入图片描述
【案例——进度条效果】
请根据所学知识实现以下效果：
在这里插入图片描述

<!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>.progress {height: 25px;width: 400px;border-radius: 15px;background-color: #272425;border: 3px solid #272425;box-sizing: border-box;margin-bottom: 30px;}.inner {width: 50%;height: 20px;border-radius: 10px;text-align: right;position: relative;background-color: #409eff;background-size: 20px 20px;box-sizing: border-box;transition: all 1s;}.inner span {position: absolute;right: -20px;bottom: -25px;}</style>
</head>
<body><div id="app"><!-- 外层盒子——进度条外框（黑色） --><div class="progress"><!-- 内层盒子——进度（蓝色） --><div class="inner" :style="{width:percent+'%'}"><span>{{percent}}%</span></div></div><!-- 每个按钮通过 Vue 的事件处理 (@click) 设置 percent 数据属性，从而改变进度条的显示百分比 --><button @click="percent=25">设置25%</button><button @click="percent=50">设置50%</button><button @click="percent=75">设置75%</button><button @click="percent=100">设置100%</button></div><script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script><script>const app = new Vue({el: '#app',data: {percent:0}})</script>
</body>
</html>

运行结果：
在这里插入图片描述
点击“设置25%”后：
在这里插入图片描述
点击“设置100%”后：
在这里插入图片描述

三、v-model应用于表单元素

常见的表单元素都可以用 v-model 绑定关联，以便快速获取或设置表单元素的值。v-model 应用于表单元素时会根据控件类型自动选取正确的方法来更新元素。
在这里插入图片描述

【示例】

<!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>textarea {display: block;width: 240px;height: 100px;margin: 10px 0;}</style>
</head>
<body><div id="app"><h3>消息注册</h3>姓名：<input type="text" v-model="username"> <br><br>是否单身：<input type="checkbox" v-model="isSingle"> <br><br><!-- 前置理解：1. name:  给单选框加上 name 属性 可以分组 → 同一组互相会互斥如果不设置 name 属性，用户就可以同时选择多个选项，违背了单选框的设计初衷2. value: 给单选框加上 value 属性，用于提交给后台的数据-->性别: <input type="radio" name="gender" value="1">男<input type="radio" name="gender" value="2">女<br><br><!-- 前置理解：1. option 需要设置 value 值，提交给后台2. select 的 value 值，关联了选中的 option 的 value 值-->所在城市:<select v-model="cityId"><option value="101">北京</option><option value="102">上海</option><option value="103">成都</option><option value="104">南京</option></select><br><br>自我描述：<textarea v-model="desc"></textarea> <button>立即注册</button></div><script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script><script>const app = new Vue({el: '#app',data: {username:'',isSingle:'',gender:'',cityId:'',desc:''}})</script>
</body>
</html>

运行结果：
在这里插入图片描述

填写相关信息后：
在这里插入图片描述

这篇关于Chapter 04 Vue指令（下）的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！


http://www.chinasem.cn/article/1112489。

相关文章

Vue中组件之间传值的六种方式（完整版）

Vue中组件之间传值的六种方式（完整版）

《Vue中组件之间传值的六种方式（完整版）》组件是vue.js最强大的功能之一,而组件实例的作用域是相互独立的,这就意味着不同组件之间的数据无法相互引用,针对不同的使用场景,如何选择行之有效的通信方式... 目录前言方法一、props/$emit1.父组件向子组件传值2.子组件向父组件传值（通过事件形式）方
阅读更多...
css中的 vertical-align与line-height作用详解

css中的 vertical-align与line-height作用详解

《css中的vertical-align与line-height作用详解》：本文主要介绍了CSS中的`vertical-align`和`line-height`属性，包括它们的作用、适用元素、属性值、常见使用场景、常见问题及解决方案，详细内容请阅读本文，希望能对你有所帮助... 目录vertical-ali
阅读更多...
Nginx指令add_header和proxy_set_header的区别及说明

Nginx指令add_header和proxy_set_header的区别及说明

《Nginx指令add_header和proxy_set_header的区别及说明》：本文主要介绍Nginx指令add_header和proxy_set_header的区别及说明,具有很好的参考价... 目录Nginx指令add_header和proxy_set_header区别如何理解反向代理？proxy
阅读更多...
浅析CSS 中z - index属性的作用及在什么情况下会失效

浅析CSS 中z - index属性的作用及在什么情况下会失效

《浅析CSS中z-index属性的作用及在什么情况下会失效》z-index属性用于控制元素的堆叠顺序,值越大,元素越显示在上层,它需要元素具有定位属性（如relative、absolute、fi... 目录1. z-index 属性的作用2. z-index 失效的情况2.1 元素没有定位属性2.2 元素处
阅读更多...
Python实现html转png的完美方案介绍

Python实现html转png的完美方案介绍

《Python实现html转png的完美方案介绍》这篇文章主要为大家详细介绍了如何使用Python实现html转png功能,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下... 1.增强稳定性与错误处理建议使用三层异常捕获结构：try: with sync_playwright(
阅读更多...
Vue 调用摄像头扫描条码功能实现代码

Vue 调用摄像头扫描条码功能实现代码

《Vue调用摄像头扫描条码功能实现代码》本文介绍了如何使用Vue.js和jsQR库来实现调用摄像头并扫描条码的功能,通过安装依赖、获取摄像头视频流、解析条码等步骤,实现了从开始扫描到停止扫描的完整流... 目录实现步骤：代码实现1. 安装依赖2. vue 页面代码功能说明注意事项以下是一个基于 Vue.js
阅读更多...
CSS @media print 使用详解

CSS @media print 使用详解

《CSS@mediaprint使用详解》：本文主要介绍了CSS中的打印媒体查询@mediaprint包括基本语法、常见使用场景和代码示例，如隐藏非必要元素、调整字体和颜色、处理链接的URL显示、分页控制、调整边距和背景等，还提供了测试方法和关键注意事项，并分享了进阶技巧，详细内容请阅读本文，希望能对你有所帮助...
阅读更多...
Nginx实现前端灰度发布

Nginx实现前端灰度发布

《Nginx实现前端灰度发布》灰度发布是一种重要的策略,它允许我们在不影响所有用户的情况下,逐步推出新功能或更新,通过灰度发布,我们可以测试新版本的稳定性和性能,下面就来介绍一下前端灰度发布的使用,感... 目录前言一、基于权重的流量分配二、基于 Cookie 的分流三、基于请求头的分流四、基于请求参数的分
阅读更多...
基于Canvas的Html5多时区动态时钟实战代码

基于Canvas的Html5多时区动态时钟实战代码

《基于Canvas的Html5多时区动态时钟实战代码》：本文主要介绍了如何使用Canvas在HTML5上实现一个多时区动态时钟的web展示，通过Canvas的API，可以绘制出6个不同城市的时钟，并且这些时钟可以动态转动，每个时钟上都会标注出对应的24小时制时间，详细内容请阅读本文，希望能对你有所帮助...
阅读更多...
HTML5 data-*自定义数据属性的示例代码

HTML5 data-*自定义数据属性的示例代码

《HTML5data-*自定义数据属性的示例代码》HTML5的自定义数据属性（data-*）提供了一种标准化的方法在HTML元素上存储额外信息,可以通过JavaScript访问、修改和在CSS中使用... 目录引言基本概念使用自定义数据属性1. 在 html 中定义2. 通过 JavaScript 访问3.
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2