当前位置：首页 > news >正文

Vue模板语法（下）

news 2025/10/28 5:49:07

一.事件处理器

什么是事件处理器

建立一个HTML编写事件处理器

测试结果

二.表单的综合案例

什么是表单综合案例

建立一个HTML来编写表单案例

测试结果

三.局部组件

什么是组件通信

自定义组件

测试结果

组件通信-父传子

测试结果

组件通信-子传父

测试结果

一.事件处理器

什么是事件处理器

事件处理器是一种用于响应和处理用户交互事件的机制。在Web开发中，用户通过与页面中的元素（如按钮、链接、表单等）进行交互来触发各种事件，如点击、鼠标移动、键盘输入等。事件处理器允许开发者定义并执行相应的操作来响应这些事件。

在Vue中，事件处理器可以通过指令(v-on)或@符号来绑定到HTML元素上。下面是一个示例：
<button v-on:click="handleClick">Click me!</button>
在上述示例中，v-on:click="handleClick"将事件处理器handleClick绑定到按钮的点击事件上。当用户点击按钮时，绑定的handleClick方法会被调用。

可以在Vue实例的方法中定义事件处理器，如以下示例所示：
new Vue({methods: {handleClick: function() {// 处理点击事件的逻辑}}
})
在上述示例中，handleClick是一个Vue实例中的方法，它会在按钮点击事件发生时被调用。

除了点击事件(click)，Vue还支持一系列其他事件，如mouseover、input、keydown等。开发者可以根据具体需求选择合适的事件，并为其绑定对应的事件处理器。

事件处理器不仅可以在Vue实例方法中定义，还可以直接在模板中使用内联表达式的方式定义。例如：
<button v-on:click="alert('Hello!')">Click me!</button>
在上述示例中，点击按钮时会直接调用内联表达式alert('Hello!')来弹出一个对话框。

总的来说，事件处理器是Vue中用于响应用户交互事件的机制，通过绑定事件处理器，开发者可以定义相应的操作来处理用户的操作。

建立一个HTML编写事件处理器

<!DOCTYPE html>
<html><head><meta charset="utf-8"><!-- 1.导入依赖 --><script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.js"></script><script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js"></script><title>事件处理</title><style type="text/css">.one{background-color: aqua;height: 400px;width:400px;}.two{background-color: aquamarine;height: 300px;width: 300px;}.three{background-color: pink;height: 200px;width: 200px;}.four{background-color: blue;height: 100px;width: 100px;}</style></head><body><!-- 2.定义vue所管理的边界，有且只有一个根节点 --><div id="app"><div class="one"@click="fun1"><div class="two" @click.stop="fun2"><div class="three" @click.stop="fun3"><div class="four" @click.stop="fun4"></div></div></div></div><input :value="msg"/><button @click.once="clickMe">点击我</button></div><script type="text/javascript">// 构建vue实例并绑定边界new Vue({// el：提供一个在页面上已存在的 DOM 元素作为 Vue 实例的挂载目标el:"#app",// Vue 实例的数据对象，用于给 View 提供数据data(){return{msg:'放下屠刀',};},methods:{fun1(){alert("fun1");},fun2(){alert("fun2");},fun3(){alert("fun3");},fun4(){alert("fun4");},clickMe(){console.log(this.msg);}}});</script></body>
</html>

测试结果

二.表单的综合案例

什么是表单综合案例

表单综合案例是指一个包含多个表单元素的综合应用案例，旨在演示如何使用Vue来处理和验证表单数据。

一个简单的表单综合案例可以包含以下元素：

文本输入框（input）：用于接收用户输入的文本信息。
复选框（checkbox）：用于选择一个或多个选项。
单选框（radio）：用于从多个选项中选择一个选项。
下拉选择框（select）：用于从预定义的选项中选择一个选项。
文本域（textarea）：用于接收多行文本输入。
提交按钮（button）：用于提交表单数据。

以下是一个简单的表单综合案例示例：
<div id="app"><form @submit.prevent="submitForm"><label for="name">姓名</label><input type="text" id="name" v-model="form.name" required><br><label for="email">邮箱</label><input type="email" id="email" v-model="form.email" required><br><label>性别</label><input type="radio" id="male" value="男" v-model="form.gender"><label for="male">男</label><input type="radio" id="female" value="女" v-model="form.gender"><label for="female">女</label><br><label for="country">国家</label><select id="country" v-model="form.country"><option value="">请选择</option><option value="中国">中国</option><option value="美国">美国</option><option value="英国">英国</option></select><br><label for="message">留言</label><textarea id="message" v-model="form.message"></textarea><br><button type="submit">提交</button></form>
</div>
在上述示例中，使用Vue的指令(v-model)将不同类型的表单元素与Vue实例中的数据(form)进行双向绑定。当用户在表单元素中进行输入或选择时，绑定的数据会实时更新。

在Vue实例中，我们可以定义一个form对象来存储表单数据，并提供一个submitForm方法来处理表单提交事件。在submitForm方法中，可以进行表单数据的验证、发送请求等操作。
new Vue({el: '#app',data: {form: {name: '',email: '',gender: '',country: '',message: ''}},methods: {submitForm: function() {// 处理表单提交逻辑console.log(this.form);}}
})
上述示例中，定义了一个Vue实例，将form对象作为数据进行管理，并在submitForm方法中打印出表单数据。

通过上述案例的组合运用，可以实现一个简单的表单综合案例来处理用户输入的表单数据，并根据实际需求进行相应的处理和验证。

建立一个HTML来编写表单案例

<!DOCTYPE html>
<html><head><meta charset="utf-8"><!-- 1.导入依赖 --><script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.js"></script><script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js"></script><title>表单</title></head><body><div id="app">姓名：<input name="name" v-model="name"/><br />密码：<input type="password" v-model="pwd"/><br />性别：<span v-for="s in sexList"><input type="radio" name="sex" v-model="sex" :value="s.id" />{{s.name}}</span><br />籍贯：<select name="myAddr" v-model="myAddr"><option v-for="a in address" :value="a.id">{{a.name}}</option></select><br />爱好：<span v-for="h in hobby" ><input type="checkbox" v-model="myLike" :value="h.id"/>{{h.name}}</span><br />个人简介：<textarea v-model="sign" cols="10" rows="5"></textarea><br />同意：<input type="checkbox" v-model="ok"/><br /><button v-show="ok" @click="dosub">提交</button></div><script type="text/javascript">new Vue({el:"#app",data(){return{name:'放下屠刀',pwd:'123456',sexList:[{name:'男',id:1},{name:'女',id:2},{name:'未知',id:3}],sex:0,hobby:[{name:'洗脚',id:1},{name:'按摩',id:2},{name:'唱歌',id:3},{name:'打篮球',id:4}],myLike:[],address:[{name:'湖南',id:1},{name:'湖北',id:2},{name:'北京',id:3},{name:'上海',id:4}],myAddr:null,sign:null,ok:false};},methods:{dosub(){var obj={};obj.name=this.name;obj.pwd=this.pwd;obj.sex=this.sex;obj.address=this.myAddr;obj.love=this.myLike;obj.sign=this.sign;console.log(obj);}}});</script></body>
</html>

测试结果

三.局部组件

什么是组件通信

组件通信是指不同组件之间通过传递数据和/或事件来进行交流和共享信息的过程。在前端开发中，应用程序通常由多个组件构成，这些组件可以是独立的、可复用的模块，它们可能需要在不同层级或层间共享数据，或者需要相互触发事件进行交互。

组件通信可以分为两种主要类型：父子组件通信和兄弟组件通信。

父子组件通信：父组件可以通过属性绑定向子组件传递数据，子组件可以通过事件来向父组件发送消息。父组件通过属性绑定将数据传递给子组件，子组件可以通过props属性接收并使用这些数据。子组件可以通过$emit方法触发事件，并传递参数给父组件。这种通信方式符合单向数据流的原则，父组件通过属性传递数据给子组件，而子组件通过事件将消息传递给父组件。

兄弟组件通信：兄弟组件之间无法直接通信，因为它们之间没有直接的父子关系。但是可以通过共享同一个父组件或通过一个中央事件总线的方式来实现兄弟组件通信。

通过共享父组件：如果两个兄弟组件有共同的父组件，那么它们可以通过父组件来传递数据。父组件可以将数据传递给其中一个子组件，然后由这个子组件将数据通过属性传递给另一个子组件。

中央事件总线：中央事件总线是一个全局的事件触发器，可以用来在组件之间传递事件和数据。可以在应用程序的顶层创建一个事件总线，让各个组件都可以订阅事件和触发事件。这样，一个组件可以通过触发事件将数据发布到事件总线上，而其他组件可以通过订阅事件来接收数据。

除了以上两种常见的组件通信方式，还有其他的通信方式，如使用状态管理库（如Vuex）进行状态管理、使用全局变量、使用路由参数等。选择合适的组件通信方式取决于具体需求和应用的复杂程度。

总的来说，组件通信是在不同组件之间传递数据和事件进行交流和共享信息的过程。通过合适的通信方式，可以实现组件之间的数据共享、事件触发和相互协作，从而构建强大的应用程序。

自定义组件

<!DOCTYPE html>
<html><head><meta charset="utf-8"><!-- 1.导入依赖 --><script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.js"></script><script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js"></script><title>组件通信父传子</title></head><body><!-- 2.定义vue所管理的边界，有且只有一个根节点 --><div id="app"><p>自定义组件</p><my-button>xx</my-button></div><script type="text/javascript">new Vue({el:"#app",components:{'my-button':{template:'<button>小崽子</button>'}},data(){return{msg:'放下屠刀',};},methods:{fun1(){alert("fun1");}}});</script></body>
</html>

测试结果

组件通信-父传子

<!DOCTYPE html>
<html><head><meta charset="utf-8"><!-- 1.导入依赖 --><script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.js"></script><script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js"></script><title>组件传参父传子</title></head><body><!-- 2.定义vue所管理的边界，有且只有一个根节点 --><div id="app"><p>自定义组件</p><my-button>xx</my-button><p>组件通信-父传子</p><my-button m='崽子'></my-button><p>组件通信-父传子2</p><my-button m='毕崽子' n="10"></my-button></div><script type="text/javascript">new Vue({el:"#app",components:{'my-button':{props:['m'],template:'<button @click="clickMe">被{{m}}点击了{{n}}次</button>',data:function(){return{n:1}},methods:{clickMe(){this.n++;}}}},data(){return{msg:'放下屠刀',};},methods:{fun1(){alert("fun1");}}});</script></body>
</html>

测试结果

组件通信-子传父

<!DOCTYPE html>
<html><head><meta charset="utf-8"><!-- 1.导入依赖 --><script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.js"></script><script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js"></script><title>组件传参子传父</title></head><body><!-- 2.定义vue所管理的边界，有且只有一个根节点 --><div id="app"><p>组件通信-子传父</p><my-button m='毕崽子'  @xxxxx="getParam"></my-button></div><script type="text/javascript">new Vue({el:"#app",components:{'my-button':{props:['m'],template:'<button @click="clickMe">被{{m}}点击了</button>',methods:{clickMe(){let name='徐崽子';let bname='徐崽子的nl生活';let price='自己的书'this.$emit('xxxxx',name,bname,price)}}}},data(){return{msg:'放下屠刀',};},methods:{getParam(a,b,c){console.log(a,b,c);	}}});</script></body>
</html>

测试结果

Vue模板语法（下）

一.事件处理器什么是事件处理器建立一个HTML编写事件处理器测试结果二.表单的综合案例什么是表单综合案例建立一个HTML来编写表单案例测试结果三.局部组件什么是组件通信自定义组件测试结果组件通信-父传子测试结果组件通信-子传父测试结果一.事件…...

编程日记 2023/9/20 18:54:46

uniapp掉完接口后刷新当前页面方法掉完接口，里面加下面这个方法uni.redirectTo({}) setTimeout(() > {uni.redirectTo({// 当前页面路由url: /pages/property/mutualrotation/mutualrotation);}, 500)实例 mutualRotationSubmit() {let self this;uni.showMod…...

编程日记 2023/9/20 18:53:45

linux安装redis超级详细教程

redis源码安装安装gcc redis是C语言编写的，所以我们需要先在Linux上安装和升级，C语言的编译环境。 #安装gcc yum install -y gcc-c autoconf automake#centos7 默认的 gcc 默认是4.8.5,版本小于 5.3 无法编译,需要先安装gcc新版才能编译 gcc -v#升级…...

编程日记 2023/9/20 18:51:43

2023-09-20 事业-代号z-个人品牌-数据库内核专家-分析

摘要：在个人品牌层面, 必然脱离不开技术本身, 而身为数据库内核专家, 让别人尽快感知到我的专家身份至关重要. 本文从过去的经历中分析和思考, 如何尽快以技术专家的身份被感知. 过去所见过的高管的技术特点: 不在一线处理具体的事情技术理论深厚, 广度非常厉害, 知道很多相…...

编程日记 2023/9/20 18:49:41

UVA-1343 旋转游戏题解答案代码算法竞赛入门经典第二版

GitHub - jzplp/aoapc-UVA-Answer: 算法竞赛入门经典例题和习题答案刘汝佳第二版题目其实不难，但是耗费了我较多时间。这种题关键就是在于找到约束条件，我在DFS的基础上，试了很多种策略： 1. 对3种数字，每种数字…...

编程日记 2023/9/20 18:47:39

【运维篇】二、配置文件与多环境控制

文章目录 1、临时属性2、IDEA中的临时属性3、配置文件4级分类4、关于四级分类的思考5、自定义配置文件6、多环境开发（yaml版）7、配置文件按环境分类8、include与group再细粒度9、一点思考10、多环境开发兼容问题 1、临时属性 jar包或者镜像已经打完了&a…...

编程日记 2023/9/20 18:46:38

【WFA】 VHT-5.2.27 Pre-requisite throughput lower than expected

先看仪表log，可以看到log中只有0.00346666666667Mbps，说明了速率很低 ~~~~~ Storing throughput ~~~~~ Mon, 11 Sep 2023 13:13:06 INFO strmTimeStampList2 count 1 Mon, 11 Sep 2023 13:13:06 INFO Storing $X1 = 0.00346666666667 [Mbps] Mon, 11 Sep 2023 13:13:…...

编程日记 2023/9/20 18:44:36

Pytorch史上最全torch全版本离线文件下载地址大全（9月最新）

以下为pytorch官网的全版本torch文件离线下载地址 torch全版本whl文件离线下载大全https://download.pytorch.org/whl/torch/其中的文件版本信息如下所示（部分版本信息，根据需要仔细寻找进行下载）：...

编程日记 2023/9/20 18:41:33

CentOS服务器利用docker搭建中间件命令集合

一、挂载服务器磁盘 #挂盘语句 fdisk /dev/vdb 在分别输入n、p、1、2048、1048575999、w mkfs.ext4 /dev/vdb mkdir /data echo /dev/vdb /data ext4 defaults 0 0 >> /etc/fstab mount -a df -hfirewall-cmd --zonepublic --add-port8002/tcp --permanent firewall-c…...

编程日记 2023/9/20 18:37:29

Flask狼书笔记 | 09_图片社交网站 - 长文

文章目录 9 图片社交网站9.1 项目组织架构9.2 编写程序骨架9.3 高级用户认证9.4 基于用户角色的权限管理9.5 使用Flask-Dropzone优化文件上传9.6 使用Flask-Avatars处理用户头像9.7 图片展示与管理9.8 收藏图片9.9 用户关注9.10 消息提醒9.11用户资料与账户设置9.12 首页与探索…...

编程日记 2023/9/20 18:36:28

【链表】K 个一组翻转链表-力扣 25 题

💝💝💝欢迎来到我的博客，很高兴能够在这里和您见面！希望您在这里可以感受到一份轻松愉快的氛围，不仅可以获得有趣的内容和知识，也可以畅所欲言、分享您的想法和见解。推荐:kuan 的首页,持续学…...

编程日记 2023/9/20 18:35:27

jdk17新特性

JDK17新特性 jdk17下载地址：https://download.oracle.com/java/17/latest/jdk-17_windows-x64_bin.exe JDK 17 文档 - 首页 (oracle.com) 垃圾回收器（Z Garbage Collector） 概述 JDK17引入名为ZGC（Z Garbage Collector&#x…...

编程日记 2023/9/20 18:33:25

爬虫项目（四）：抓取网页所有图片

文章目录一、书籍推荐二、完整代码三、运行结果一、书籍推荐推荐本人书籍《Python网络爬虫入门到实战》 ，详细介绍见👉： 《Python网络爬虫入门到实战》书籍介绍二、完整代码原理：抓取该链接中所有的图片格式。基于seleni…...

编程日记 2023/9/20 18:31:23

短剧推广和小说推文在哪里授权介绍

短剧推广和小说推文都属于很热门的赛道，都可以通过“巨量推文”进行授权在巨量推文找到想推广的小说或者短剧后申请推广即可，小说需要有回填作品信息，短剧为全自动，出数据后实时同步到平台...

编程日记 2023/9/20 18:30:22

Java：本地文件通过表单参数接口发送后大小变成0

问题发现一个文件生成以后，如果不通过接口发送，大小就正常，通过接口发送，文件大小就变成0了，发送的文件也是0 空文件代码 MultiValueMap<String, Object> form new LinkedMultiValueMap<>();FileSyst…...

编程日记 2023/9/20 18:29:22

Linux 共享内存

#include <sys/ipc.h> #include <sys/shm.h> int shmget(key_t key, size_t size, int shmflg);功能：创建一个新的内存段或者获得一个既有的共享内存段的标识。新创建的内存段中的数据都会被初始化为0参数：-key：key_t类型是一个整…...

编程日记 2023/9/20 18:28:21

druid在springboot中如何整合配置！

在Spring Boot中配置Druid作为数据源非常简单。Druid是一个高性能的数据库连接池，它提供了丰富的监控和统计功能，适用于各种数据库。以下是在Spring Boot中配置Druid数据源的步骤： 1. 添加Druid依赖： 首先，您需要在项…...

编程日记 2023/9/20 18:25:18

数据结构：栈

文章目录栈一，概述二，添加数据三，删除数据栈一，概述栈（Stack）是一种特殊的线性表，它只允许在一端进行插入和删除操作，通常被称为“后进先出”（Last In First Out&a…...

编程日记 2023/9/20 18:24:16

每日刷题-6

目录一、选择题二、算法题 1.Fibonacci数列 2.合法括号序列判断一、选择题 1、解析：内联函数是一种可以提高函数执行效率的方法，它的原理是编译时在函数调用点直接展开函数体的代码，从而避免了函数调用的开销。但是，内联函…...

编程日记 2023/9/20 18:22:14

systrace使用注意事项

打开systrace文件报错：Unable to select a master clock domain because no path can be found from “SYSTRACE” to “LINUX_FTRACE_GLOBAL”. 使用systrace生成的trace.html文件无法打开，或者报上面的错误，可以选择下面这个方式&#xff1…...

编程日记 2023/9/20 18:20:13

《Playwright：微软的自动化测试工具详解》

Playwright 简介:声明内容来自网络，将内容拼接整理出来的文档 Playwright 是微软开发的自动化测试工具，支持 Chrome、Firefox、Safari 等主流浏览器，提供多语言 API（Python、JavaScript、Java、.NET）。它的特点包括&a…...

编程新知 2025/7/23 15:00:00

【机器视觉】单目测距——运动结构恢复

ps：图是随便找的，为了凑个封面前言在前面对光流法进行进一步改进，希望将2D光流推广至3D场景流时，发现2D转3D过程中存在尺度歧义问题，需要补全摄像头拍摄图像中缺失的深度信息，否则解空间不收敛&#xf…...

编程新知 2025/10/27 13:23:12

Element Plus 表单(el-form)中关于正整数输入的校验规则

目录 1 单个正整数输入1.1 模板1.2 校验规则 2 两个正整数输入（联动）2.1 模板2.2 校验规则2.3 CSS 1 单个正整数输入 1.1 模板 <el-formref"formRef":model"formData":rules"formRules"label-width"150px"…...

编程新知 2025/10/4 8:19:28

SAP学习笔记 - 开发26 - 前端Fiori开发 OData V2 和 V4 的差异 (Deepseek整理）

上一章用到了V2 的概念，其实 Fiori当中还有 V4，咱们这一章来总结一下 V2 和 V4。 SAP学习笔记 - 开发25 - 前端Fiori开发 Remote OData Service(使用远端Odata服务)，代理中间件（ui5-middleware-simpleproxy）-CSDN博客…...

编程新知 2025/10/23 12:52:00

html css js网页制作成品——HTML+CSS榴莲商城网页设计（4页）附源码

目录一、👨‍🎓网站题目二、✍️网站描述三、📚网站介绍四、🌐网站效果五、🪓 代码实现 🧱HTML 六、🥇 如何让学习不再盲目七、🎁更多干货一、👨‍&#x1f…...

编程新知 2025/10/25 3:14:19

网站指纹识别

网站指纹识别网站的最基本组成：服务器（操作系统）、中间件（web容器）、脚本语言、数据厍为什么要了解这些？举个例子：发现了一个文件读取漏洞，我们需要读/etc/passwd，如…...

编程新知 2025/10/25 12:55:59

Mysql8 忘记密码重置，以及问题解决

1.使用免密登录找到配置MySQL文件，我的文件路径是/etc/mysql/my.cnf，有的人的是/etc/mysql/mysql.cnf 在里最后加入 skip-grant-tables重启MySQL服务 service mysql restartShutting down MySQL… SUCCESS! Starting MySQL… SUCCESS! 重启成功 2.登…...

编程新知 2025/9/12 22:46:10