vue模板语法（下集）

news2024/9/25 17:20:33

事件处理器

Vue模板语法中的事件处理器是指在Vue组件中绑定DOM事件，当事件发生时执行相应的方法或表达式。常见的事件包括点击事件@click、输入事件@input、鼠标移入事件@mouseover等等。

事件监听可以使用v-on 指令

  2.1 事件修饰符

      .Vue通过由点(.)表示的指令后缀来调用修饰符，
      .stop
      .prevent
      .capture
      .self
      .once 
      <!-- 阻止单击事件冒泡 -->
      <a v-on:click.stop="doThis"></a>
      <!-- 提交事件不再重载页面 -->
      <form v-on:submit.prevent="onSubmit"></form>
      <!-- 修饰符可以串联  -->
      <a v-on:click.stop.prevent="doThat"></a>
      <!-- 只有修饰符 -->
      <form v-on:submit.prevent></form>
      <!-- 添加事件侦听器时使用事件捕获模式 -->
      <div v-on:click.capture="doThis">...</div>
      <!-- 只当事件在该元素本身（而不是子元素）触发时触发回调 -->
      <div v-on:click.self="doThat">...</div>
      <!-- click 事件只能点击一次 -->
      <a v-on:click.once="doThis"></a>

  全部的按键别名：
      .enter
      .tab
      .delete (捕获 "删除" 和 "退格" 键)
      .esc
      .space
      .up
      .down
      .left
      .right
      .ctrl
      .alt
      .shift
      .meta      

 注1：什么是事件冒泡?
           见“事件冒泡模型.png” 

  ## demo3.1.html
  2.2 按键修饰符
      Vue允许为v-on在监听键盘事件时添加按键修饰符：

      <!-- 只有在 keyCode 是 13 时调用 vm.submit() -->
      <input v-on:keyup.13="submit">

      Vue为最常用的按键提供了别名
      <!-- 同上 -->
      <input v-on:keyup.enter="submit">

   

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<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: red;
				height: 400px;
				width: 400px;
			}
			.two{
				background-color: blue;
				height: 300px;
				width: 300px;
			}
			.three{
				background-color: pink;
				height: 200px;
				width: 200px;
			}
			.four{
				background-color: yellow;
				height: 100px;
				width: 100px;
			}
		</style>
	
	</head>
	<body>
		<div id="app">
			<dvi class="one"@click.stop="fun1">
				<div class="two"@click.stop="fun2">
				  <div class="three"@click.stop="fun3">
					  <div class="four"@click.stop="fun4"></div>
					  </div>
				</div>	  
			</dvi>
				<p>提交答案</p>
						<button @click.once="dosub">提交</button>
						<p>按键修饰符</p>
						<input v-on:keyup.enter="dosub" />
		</div>	
				
		<script type="text/javascript">
		new Vue({
			el:"#app",
			data(){
				return{
					msg:'hello  小B 你相信光吗？',
					};
			},
			methods:{
				fun1(){
					alert("fun1")
				},
				fun2(){
					alert("fun2")
				},
				fun3(){
					alert("fun3")
				},
				fun4(){
					alert("fun4")
				},
					dosub(){
									alert("已做完，提交答案");
								}
			}
		});
		
		</script>
	
	</body>
</html>

Vue表单

Vue表单是一种用于收集用户输入信息的Web表单，它基于Vue框架的数据双向绑定特性，可以使开发者更加简单和方便地管理表单数据。Vue表单提供了一系列的组件，比如文本输入框、下拉列表、单选框、复选框等，开发者可以根据需要在界面上选择合适的组件，同时使用Vue的模板语法进行组件的渲染和绑定。

Vue表单中的组件通常由两部分组成，一部分是表单对象，用来表示表单的数据结构和验证规则，另一部分是表单控件，用来实现界面上的输入和操作行为。在Vue中，表单对象可以通过data选项或computed属性来定义，同时通过v-model指令与表单控件进行双向数据绑定，实现数据的自动更新。除此之外，Vue表单还提供了一些常用的验证规则和自定义验证函数，开发者可以根据需要进行使用和扩展。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script>
		<title>表单</title>
	</head>
	<body>
		<div id="app">
			<h1>标题</h1>
			<ul>
				<li>
					<p>vue表单</p>
					<label>姓名：</label><input v-model="uname" /><br />
					<label>密码：</label><input v-model="upwd" type="password" /><br />
					<!-- 将用户的输入值转为 Number 类型 -->
					<label>年龄：</label><input v-model.number="age" /><br />
					<label>性别：</label>
					<input type="radio" v-model="sex" name="sex" value="1" />男
					<input type="radio" v-model="sex" name="sex" value="0" />女<br />
					<label>爱好：</label>
					<div v-for="h in hobby">
						<input type="checkbox" v-model="hobbies" v-bind:value="h.id" />{{h.name}}
					</div>
					<label>类别：</label>
					<select v-model="type">
						<option value="-1">===请选择===</option>
						<option v-for="t in types" v-bind:value="t.id">{{t.name}}</option>
					</select><br />
					<label>备注：</label>
					<textarea v-bind:value="mark"></textarea><br />
					确认<input type="checkbox" v-model="flag" />
					<input type="submit" v-bind:disabled="show" v-on:click="doSubmit" />
				</li>
			</ul>
		</div>
	</body>
	<script type="text/javascript">
		new Vue({
			el: '#app',
			data() {
				return {
					uname: null,
					upwd: null,
					age: 10,
					sex: 1,
					hobby: [{
						id: 1,
						name: '洗脚'
					}, {
						id: 2,
						name: '看飞机'
					}, {
						id: 3,
						name: '上网'
					}],
					hobbies: [],
					types: [{
						id: 1,
						name: '男'
					}, {
						id: 2,
						name: '其他'
					}, {
						id: 3,
						name: '女'
					}],
					type: null,
					mark: '。。。',
					flag: false
				}
			},
			computed: {
				show: function() {
					return !this.flag;
				}
			},
			methods: {
				doSubmit: function() {
					console.log('doSubmit')
					var obj = {
						uname: this.uname,
						upwd: this.upwd,
						age:this.age+10,
						sex: this.sex,
						hobbies:this.hobbies,
						type: this.type,
						mark: this.mark,
					}
					console.log(obj);
				}
			}

		})
	</script>
</html>

总的来说，Vue表单的优点是它具有简单易用、数据双向绑定、验证规则灵活和可扩展性强等特点，适合于快速开发和维护大量的响应式表单

组件通信

Vue的组件通信是指不同组件之间进行数据和事件的传递的过程。在Vue中，

组件通信主要包括以下几种方式：

父子组件通信：

父组件可以通过props向子组件传递数据，子组件可以通过$emit事件向父组件发送数据。

兄弟组件通信：

兄弟组件通信需要通过共同的父组件来传递数据，可以通过props和$emit事件来实现。

跨级组件通信：

跨级组件通信也需要通过共同的父组件来传递数据，可以通过provide和inject实现，在父组件中提供数据，在后代组件中使用inject获取数据。

使用全局事件总线：

使用Vue实例作为事件总线，通过$on、$emit、$off等方法来实现组件之间的数据传递。

使用Vuex来进行状态管理：

Vuex是Vue官方推荐的状态管理库，可以将共享的状态抽离出来，放到单独的store中，供所有组件使用，可以通过调用store中的方法来实现数据的传递和状态管理。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
	</body>
</html>
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js"></script>
	</head>
	<body>
		<!-- 定义边界 -->
		<div id="app">
			<!-- 定义组件不能用驼峰命名 -->
			<!-- 需求是：当引用一个myButton，也页面上一个独特标记按钮 -->
			<my-button m="刘文"></my-button>
			<my-button m="刘鑫"></my-button>
			
			<!-- <button onclick=""></button> -->
		</div>
	</body>
	<script type="text/javascript">
		Vue.component('my-button', {
			// props是定义组件中的变量的
			props:['m'],
			// template代表了自定义组件在页面上显示的类容
			template:'<button v-on:click="incrn">我被{{m}}点击{{n}}次</button>',
			data:function(){
				return {
					n:1
				}
			},
			methods:{
				incrn(){
					this.n++;
				}
			}
		});
		// 绑定边界	ES6具体体现
		new Vue({
			el: '#app',
			data() {
				return {
				};
			}
		})
	</script>
</html>

 

总的来说，Vue的组件通信提供了多种方式，根据不同的场景和需求可以选择合适的方式来实现组件之间的数据和事件的传递。

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/1026711.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

近2万签名的句子网络签名ACCESS\EXCEL数据库

近2万签名的句子网络签名ACCESS\EXCEL数据库

虽然已经有《24万QQ伤感签名论坛签名ACCESS数据库》和《2万多条QQ签名论坛签名大全ACCESS数据库》两个论坛签名数据&#xff0c;但是总觉得今天更正经一些&#xff0c;每个句子都可以当作一个好词好句。 分类包含&#xff1a;爱情诗&#xff08;2315&#xff09;、超级拽&#…
阅读更多...
IMX6ULL ARM Linux开发板SD卡启动，SD卡的分区与分区格式化创建

IMX6ULL ARM Linux开发板SD卡启动，SD卡的分区与分区格式化创建

一、确定TF卡挂载到ubuntu上的设备名称及分区情况 1. 在ubuntu不接入TF卡的情况下&#xff0c; 使用df -lh /dev/sd*命令查看当前"/dev/sd开头"的设备。 ##输入df -lh /dev/sd*命令&#xff0c;敲回车键 ~$ df -lh /dev/sd* 2.将TF卡接入到ubuntu&#xff0c;再次使…
阅读更多...
Compose的一些小Tips - 可组合项的绘制

Compose的一些小Tips - 可组合项的绘制

系列文章 Compose的一些小Tips - 可组合项的生命周期 Compose的一些小Tips - 可组合项的绘制&#xff08;本文&#xff09; Compose的一些小Tips - 列表的优化 前言 本系列介绍Compose的一些常识&#xff0c;了解这些tips并不会让人摇身一变成为大佬&#xff0c;但可以帮助到…
阅读更多...
大数据Flink（八十四）：SQL语法的DML：窗口聚合

大数据Flink（八十四）：SQL语法的DML：窗口聚合

文章目录 SQL语法的DML：窗口聚合 一、滚动窗口（TUMBLE）
阅读更多...
R 语言画图中英文字体解决方案

R 语言画图中英文字体解决方案

在某些时候&#xff0c;需要在 R 画图中添加中文&#xff0c;但是默认情况下&#xff0c;R 对中文的支持不好。这里推荐一个 showtext 的 R 包。如果需要将含有中文字体的图形保存为 pdf 文件&#xff0c;可以使用下面讲到的方案&#xff0c;最新版的showtext已经支持了 ggplot…
阅读更多...
6.1 使用scikit-learn构建模型

6.1 使用scikit-learn构建模型

6.1 使用scikit-learn构建模型 6.1.1 使用sklearn转换器处理数据6.1.2 将数据集划分为训练集和测试集6.1.3 使用sklearn转换器进行数据预处理与降维1、数据预处理2、PCA降维算法 代码 scikit-learn&#xff08;简称sklearn&#xff09;库整合了多种机器学习算法&#xff0c;可以…
阅读更多...
已解决 Bug: SyntaxError - expected expression, got ‘＜‘

已解决 Bug: SyntaxError - expected expression, got ‘＜‘

&#x1f337;&#x1f341; 博主猫头虎&#xff08;&#x1f405;&#x1f43e;&#xff09;带您 Go to New World✨&#x1f341; &#x1f984; 博客首页: &#x1f405;&#x1f43e;猫头虎的博客&#x1f390;《面试题大全专栏》 &#x1f995; 文章图文并茂&#x1f996…
阅读更多...
C# ref 学习1

C# ref 学习1

ref 关键字用在四种不同的上下文中&#xff1b; 1.在方法签名和方法调用中&#xff0c;按引用将参数传递给方法。 2.在方法签名中&#xff0c;按引用将值返回给调用方。 3.在成员正文中&#xff0c;指示引用返回值是否作为调用方欲修改的引用被存储在本地&#xff0c;或在一般…
阅读更多...
React 全栈体系（十）

React 全栈体系（十）

第五章 React 路由 三、基本路由使用 7. 代码 - Switch 的使用 7.1 Test /* src/pages/Test/index.jsx */ import React, { Component } from reactexport default class Test extends Component {render() {return (<div><h2>Test....</h2></div>…
阅读更多...
拓世AI|轻松涨粉的秘密武器！从选题到配图，AI工具让你事半功倍

拓世AI|轻松涨粉的秘密武器！从选题到配图，AI工具让你事半功倍

2023年的小红书&#xff0c;发展趋势依旧昂扬向上。 最新数据显示&#xff0c;小红书拥有逾3亿的月活用户,且超过80%的用户集中在20-30岁年龄段。这代表什么?广大的年轻用户基数和消费能力!正处于购买力上升期的年轻人,是品牌最想抓住的目标用户。巨大的红利吸引了无数人下场…
阅读更多...
自定义开发成绩查询小程序

自定义开发成绩查询小程序

在当今数字化时代&#xff0c;教育行业借助技术手段提高教学效果。作为老师&#xff0c;拥有一个自己的成绩查询系统可以帮助你更好地管理学生成绩&#xff0c;并提供更及时的反馈。本文将为你详细介绍如何从零开始搭建一个成绩查询系统&#xff0c;让你的教学工作更加高效和便…
阅读更多...
MQ - 10 RocketMQ的架构设计与实现

MQ - 10 RocketMQ的架构设计与实现

文章目录 导图概述RocketMQ 系统架构协议和网络模块数据存储元数据存储消息数据生产者和消费者生产端消费端HTTP 协议支持和管控操作RocketMQ 从生产到消费的全过程总结导图 概述 RocketMQ 在功能、稳定性、性能层面都比 RabbitMQ 的表现更好 RocketMQ 系统架构 先来看一下 R…
阅读更多...
驱动开发练习，platform驱动模型的使用

驱动开发练习，platform驱动模型的使用

一.总线模型介绍 linux中将一个挂载在总线上的驱动的驱动模型分为三部分&#xff1a;device、driver和bus&#xff1b; device部分&#xff1a;用来保存设备信息对象&#xff0c;在内核中一个klist_device链表中进行管理&#xff1b; driver部分&#xff1a;用来保存驱动信息对…
阅读更多...
Windows：虚拟内存的使用

Windows：虚拟内存的使用

文章目录 简介如何开启并设置虚拟内存如何查看虚拟内存参考文献 简介 windows里什么是虚拟内存&#xff1f; 其实类似Linux里的交换内存/交换页&#xff0c;即将硬盘上一块空间作为虚拟的内存&#xff0c;当物理内存不足时&#xff0c;则可以将不常用的数据从物理内存中转移到…
阅读更多...
如何做到人声和背景音乐分离？记住这个宝藏网站～

如何做到人声和背景音乐分离？记住这个宝藏网站～

在这个短视频盛行的时代&#xff0c;优质的背景音乐会让视频锦上添花&#xff0c;但也会造成类似的问题&#xff1a;想单独使用视频中的某一段人声&#xff0c;但会被背景音乐扰乱视听效果。这时就需要将人声和背景音乐进行分离了&#xff0c;下面来分享一个宝藏网站&#xff0…
阅读更多...
CodeArts Check代码检查服务用户声音反馈集锦（5）

CodeArts Check代码检查服务用户声音反馈集锦（5）

作者&#xff1a;gentle_zhou 原文链接&#xff1a;CodeArts Check代码检查服务用户声音反馈集锦&#xff08;5&#xff09;-云社区-华为云 CodeArts Check&#xff08;原CodeCheck&#xff09;&#xff0c;是自主研发的代码检查服务。建立在华为30年自动化源代码静态检查技术…
阅读更多...
抖音seo矩阵系统源码分享-技术梳理

抖音seo矩阵系统源码分享-技术梳理

抖音seo源码&#xff0c;抖音seo矩阵系统源码技术搭建&#xff0c;抖音seo源码技术开发思路梳理搭建 抖音账号矩阵系统部分源代码分享 if (empty($video_item)) {$this->displayJsonError(参数错误);}$curr_platform json_decode($video_item[dv_platform], 1);$curr_plat…
阅读更多...
StarRocks 社区：从初生到两周年的进化之路

StarRocks 社区：从初生到两周年的进化之路

2021 年 9 月 8 日&#xff0c;StarRocks 开源社区诞生。从第一天开始&#xff0c;我们怀揣着“打造世界一流的数据分析产品”的梦想&#xff0c;踏上了星辰大海的征途。 两年间&#xff0c;StarRocks 在 GitHub 上收获了 5.4K Stars&#xff0c;产品共迭代发布了 90 余个版本&…
阅读更多...
数字化营销到底是什么？与传统营销有什么区别？

数字化营销到底是什么？与传统营销有什么区别？

一、什么是数字化营销&#xff1f; 数字化 将许多复杂的、难以估计的信息通过一定的方式变成计算机能处理的0和1的二进制码&#xff0c;形成计算机里的数字孪生。物理世界被重构&#xff0c;被一一搬到数字化世界当中。 数字化营销 就是数字化的传播渠道去推广企业的产品&am…
阅读更多...
GLTF编辑器如何快速重置模型原点

GLTF编辑器如何快速重置模型原点

1、什么是模型原点&#xff1f; 模型原点是三维建模中的概念&#xff0c;它是指在一个虚拟三维空间中确定的参考点。模型原点通常位于模型的几何中心或基本组件的中心位置。如图所示&#xff1a; 可以看到模型的原点在模型的几何中心 2、模型原点的作用 知道了什么是模型原点&…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023