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。

相关文章

全面解析HTML5中Checkbox标签

全面解析HTML5中Checkbox标签

《全面解析HTML5中Checkbox标签》Checkbox是HTML5中非常重要的表单元素之一，通过合理使用其属性和样式自定义方法，可以为用户提供丰富多样的交互体验，这篇文章给大家介绍HTML5中C... 在html5中，Checkbox（复选框）是一种常用的表单元素，允许用户在一组选项中选择多个项目。本
阅读更多...
HTML5 搜索框Search Box详解

HTML5 搜索框Search Box详解

《HTML5搜索框SearchBox详解》HTML5的搜索框是一个强大的工具，能够有效提升用户体验,通过结合自动补全功能和适当的样式，可以创建出既美观又实用的搜索界面,这篇文章给大家介绍HTML5... html5 搜索框（Search Box）详解搜索框是一个用于输入查询内容的控件，通常用于网站或应用程
阅读更多...
Python包管理工具核心指令uvx举例详细解析

Python包管理工具核心指令uvx举例详细解析

《Python包管理工具核心指令uvx举例详细解析》：本文主要介绍Python包管理工具核心指令uvx的相关资料,uvx是uv工具链中用于临时运行Python命令行工具的高效执行器,依托Rust实... 目录一、uvx 的定位与核心功能二、uvx 的典型应用场景三、uvx 与传统工具对比四、uvx 的技术实
阅读更多...
CSS3中的字体及相关属性详解

CSS3中的字体及相关属性详解

《CSS3中的字体及相关属性详解》：本文主要介绍了CSS3中的字体及相关属性，详细内容请阅读本文，希望能对你有所帮助... 字体网页字体的三个来源：用户机器上安装的字体，放心使用。保存在第三方网站上的字体，例如Typekit和Google,可以link标签链接到你的页面上。保存在你自己Web服务器上的字
阅读更多...
html 滚动条滚动过快会留下边框线的解决方案

html 滚动条滚动过快会留下边框线的解决方案

《html滚动条滚动过快会留下边框线的解决方案》：本文主要介绍了html滚动条滚动过快会留下边框线的解决方案，解决方法很简单，详细内容请阅读本文，希望能对你有所帮助... 滚动条滚动过快时，会留下边框线但其实大部分时候是这样的，没有多出边框线的滚动条滚动过快时留下边框线的问题通常与滚动条样式和滚动行
阅读更多...
使用vscode搭建pywebview集成vue项目实践

使用vscode搭建pywebview集成vue项目实践

《使用vscode搭建pywebview集成vue项目实践》：本文主要介绍使用vscode搭建pywebview集成vue项目实践,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地... 目录环境准备项目源码下载项目说明调试与生成可执行文件核心代码说明总结本节我们使用pythonpywebv
阅读更多...
使用Python和Tkinter实现html标签去除工具

使用Python和Tkinter实现html标签去除工具

《使用Python和Tkinter实现html标签去除工具》本文介绍用Python和Tkinter开发的HTML标签去除工具,支持去除HTML标签、转义实体并输出纯文本,提供图形界面操作及复制功能,需... 目录html 标签去除工具功能介绍创作过程1. 技术选型2. 核心实现逻辑3. 用户体验增强如何运行
阅读更多...
CSS 样式表的四种应用方式及css注释的应用小结

CSS 样式表的四种应用方式及css注释的应用小结

《CSS样式表的四种应用方式及css注释的应用小结》：本文主要介绍了CSS样式表的四种应用方式及css注释的应用小结，本文通过实例代码给大家介绍的非常详细，详细内容请阅读本文，希望能对你有所帮助... 一、外部 css（推荐方式）定义：将 CSS 代码保存为独立的 .css 文件，通过 <link> 标签
阅读更多...
使用Vue-ECharts实现数据可视化图表功能

使用Vue-ECharts实现数据可视化图表功能

《使用Vue-ECharts实现数据可视化图表功能》在前端开发中,经常会遇到需要展示数据可视化的需求,比如柱状图、折线图、饼图等,这类需求不仅要求我们准确地将数据呈现出来,还需要兼顾美观与交互体验,所... 目录前言为什么选择 vue-ECharts？1. 基于 ECharts，功能强大2. 更符合 Vue
阅读更多...
Vue中插槽slot的使用示例详解

Vue中插槽slot的使用示例详解

《Vue中插槽slot的使用示例详解》：本文主要介绍Vue中插槽slot的使用示例详解,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧... 目录一、插槽是什么二、插槽分类2.1 匿名插槽2.2 具名插槽2.3 作用域插槽三、插槽的基本使用3.1 匿名插槽
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2