vue模板语法下集

已于 2022-09-05 09:43:43 修改
阅读量242 收藏
点赞数 2
文章标签： vue.js javascript 前端
于 2022-09-03 18:48:10 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_65808248/article/details/126675038
版权

目录

一、事件处理器

1、阻止冒泡

2、 事件修饰符

3、按键修饰符

二、组件及组件通信

1、简单组件 & 父组件 传参 给子组件

2、父组件 传参 给子组件

三、表单综合案例

一、事件处理器

1、阻止冒泡

 

<!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>
		<style type="text/css">
			.pink {
				height: 400px;
				width: 400px;
				background-color: pink;
			}

			.palevioletred {
				height: 300px;
				width: 300px;
				background-color: palevioletred;
			}

			.plum {
				height: 200px;
				width: 200px;
				background-color: plum;
			}

			.bisque {
				height: 100px;
				width: 100px;
				background-color: bisque;
			}
		</style>
	</head>
	<body>
		<div id="app">
			<p>阻止冒泡</p>
			<div class="pink" @click="pink">
				<div class="palevioletred" @click.stop="palevioletred">
					<div class="plum" @click.stop="plum">
						<div class="bisque" @click.stop="bisque"></div>
					</div>
				</div>
			</div>
		</div>
	</body>
	<script>
		new Vue({
			el: '#app',
			data() {
				return {
					msg: "hello 杨总"
				}
			},
			methods: {
				pink() {
					alert('pink');
				},
				palevioletred() {
					alert('palevioletred');
				},
				plum() {
					alert('plum');
				},
				bisque() {
					alert('bisque');
				}
			}
		})
	</script>
</html>

 运行：

 

 

 

2、 事件修饰符

Vue通过由点(.)表示的指令后缀来调用修饰符，

  .stop

  .prevent

  .capture

  .self

  <!-- 阻止单击事件冒泡 -->

  <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>

<!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">
			<p>发送一次</p>
			<input type="text" v-model="msg"/>
			<button type="button" @click.once="dianwoshishi">点我试试</button>
			
		</div>
	</body>
	<script>
		new Vue({
			el: '#app',
			data() {
				return {
					msg: "hello 杨总"
				}
			},
			methods: {
				
				dianwoshishi(){
					alert(this.msg);
					// console.log(this.msg);
				}
			}
		})
	</script>
</html>

点击只弹出一次，不会反复刷新：

 

3、按键修饰符

  

 Vue允许为v-on在监听键盘事件时添加按键修饰符：

  <!-- 只有在 keyCode 是 13 时调用 vm.submit() -->

  <input v-on:keyup.13="submit">

  Vue为最常用的按键提供了别名

  <!-- 同上 -->

  <input v-on:keyup.enter="submit">

  全部的按键别名：

  .enter

  .tab

  .delete (捕获 "删除" 和 "退格" 键)

  .esc

  .space

  .up

  .down

  .left

  .right

  .ctrl

  .alt

  .shift

  .meta      

<!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">
			<p>按键修饰符</p>
			<input type="text" v-model="msg" @keyup.enter="dianwoshishi"/>
			
			
		</div>
	</body>
	<script>
		new Vue({
			el: '#app',
			data() {
				return {
					msg: "hello 杨总"
				}
			},
			methods: {
				
				dianwoshishi(){
					alert(this.msg);
					// console.log(this.msg);
				}
			}
		})
	</script>
</html>

 点击文本框直接回车就会弹出：

 

 

二、组件及组件通信

1、简单组件 & 父组件 传参 给子组件

<!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>
		<style type="text/css">
			
		</style>
	</head>
	<body>
		<div id="app">
			<p>简单组件</p>
			<my-button></my-button>
			<p>父组件 传参 给子组件</p>
			<my-button m='yangzong' n='3'></my-button>
		</div>
	</body>
	<script>
		Vue.component('my-button',{
			// template:'<button>我的按钮</button>'
			template:'<button>{{m}}点击了{{n}}次</button>',
			props:['m','n']
		})
		new Vue({
			el: '#app',
			data() {
				return {
					msg: "hello 杨总"
				}
			}
			
		})
	</script>
</html>

 

组件

定义：template

父传子：props

子传父：通过$emit注册事件名

this.$emit（'事件名',......）

2、父组件 传参 给子组件

<!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>
		<style type="text/css">
			
		</style>
	</head>
	<body>
		<div id="app">
			<p>父组件 传参 给子组件</p>
			<my-button m='yangzong' n='3'  @mymethod="xxx"></my-button>
		</div>
	</body>
	<script>
		Vue.component('my-button',{
			// template:'<button>我的按钮</button>'
			template:'<button @click="sub">{{m}}点击了{{n}}次</button>',
			props:['m','n'],
			methods:{
				sub(){
					var name="杨总";
					var sex="女";
					var age="19";
					console.log(name);
					console.log(sex);
					console.log(age);
					// 子组件 将参数传递给 父组件 的关键在于
					// 1、$emit 2、自定义事件
					this.$emit('mymethod',name,sex,age);
				}
			}
		})
		
		// 外部
		new Vue({
			el: '#app',
			data() {
				return {
					msg: "hello 杨总"
				}
			},
			methods:{
				xxx(a,b,c){
					console.log(a);
					console.log(b);
					console.log(c);
				}
			}
		})
	</script>
</html>

 运行：

三、表单综合案例

<!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: 'A'
					}, {
						id: 2,
						name: 'B'
					}, {
						id: 3,
						name: 'C'
					}],
					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>

 

 

今日分享就到这啦！再会！

酒醉猫(^･ｪ･^)
关注
  • 2
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 1
    评论
Vue中递归组件时的阻止冒泡事件和$emit失效问题解决
weixin_43120290的博客
05-31 2809
今天在写一个侧边栏时，用到了递归组件，代码如下 <template> <div> <ul class="rightList-container"> <li v-for="(item, i) in list" :key="i" @click="handleClick(item)"> <span :class="{ active: item.isSelected }">{{ item.name }}</sp
vue阻止事件冒泡
weixin_49203377的博客
05-17 1万+
我们在使用antdesign或者element等UI框架的时候，会遇到事件冒泡的问题，如何阻止呢？ 在普通的vue中如果要阻止事件冒泡通常只需要在click点击事件上.stop就可以像下面这样 <div @click.stop="handleEdit(row)">编辑</div> 这是因为 .stop - 调用 event.stopPropagation()。 .prevent - 调用 event.preventDefault()。 在使用UI框架的时候 有时候上面并没用点击事
VUE笔记之 keep-alive , slot , $emit , props ,refs , eventbus,router,v-bind:src 路由获取参数,右击，阻止默认行为和冒泡
还不是【web】的博客
11-07 687
vue中使用less 安装less依赖，npm install less less-loader --save   vue项目优化之通过keep-alive数据缓存的方法 &lt;keep-alive&gt;是Vue的内置组件，能在组件切换过程中将状态保留在内存中，防止重复渲染DOM。 &lt;keep-alive&gt; 包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们。和 &l...
vue中 关于$emit的用法
qq_43170213的博客
10-08 1万+
1、父组件可以使用 props 把数据传给子组件。 2、子组件可以使用 $emit 触发父组件的自定义事件。 vm.$emit( event, arg ) //触发当前实例上的事件 vm.$on( event, fn );//监听event事件后运行 fn； 例如：子组件： <template> <div class="train-city"> <h3>父组件传给子组件的toCity:{{sendData}}</h3> <br/&g
vue事件对象、冒泡、阻止默认行为
小牛牛的博客
02-15 2万+
事件对象<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script src="../js/Vue.js" charset="utf-8"></script> <script type="text/javascript"> window.onload = fun
vue模板语法-插值详解
08-31
Vue 模板语法 - 插值详解 Vue 模板语法 - 插值详解是 Vue 框架中的一种模板语法，用于在 Vue 模板中插入动态数据。插值是 Vue 模板语法中的一种基本语法，用于将数据绑定到模板中。 文本插值 在 Vue 模板语法中，...
Vue模板语法中数据绑定的实例代码
10-16
在Vue模板语法中，数据绑定是核心特性之一，它允许开发者轻松地将数据模型与DOM元素关联起来，实现视图和数据的同步更新。下面我们将详细讨论Vue模板语法中的数据绑定及其应用。 1. 单向数据绑定 单向数据绑定是...
day01-Vue模板语法.zip
01-17
在"day01-Vue模板语法.zip"这个压缩包中，我们可以预见到内容可能涵盖了Vue的基础模板语法教程，这对于初学者或者想要深入理解Vue的开发者来说是非常宝贵的资源。 Vue模板语法是Vue.js的一个核心特性，它允许开发者...
Vue 3模板语法.pdf
最新发布
02-21
Vue.js 使用了基于 HTML 的模板语法，允许开发者声明式地将 DOM 绑定至底层组件实例的数据。所有 Vue.js 的模板都是合法的 HTML，所以能被遵循规范的浏览器和 HTML 解析器解析。 在底层的实现上，Vue 将模板编译成...
vue组件中$emit()的作用
wuqiongqiong_的博客
08-10 5786
尽管子组件可以用this.$parent访问它的父组件及其父链上任意的实例，不过子组件应当避免直接依赖父组件的数据，尽量显式地使用 props 传递数据。另外，在子组件中修改父组件的状态是非常糟糕的做法，因为：  这让父组件与子组件紧密地耦合； 只看父组件，很难理解父组件的状态。因为它可能被任意子组件修改！理想情况下，只有组件自己能修改它的状态。 　　每个Vue实例都是一个事件触发
vuejs2.0实现分页组件，使用$emit进行事件监听数据传递
大灰狼的小绵羊哥哥的博客
02-23 5111
上一篇文章介绍了vuejs实现的简单分页，如果我有几个页面都需要有分页效果，不可能每个页面都去复制一下这段代码吧，意思是封装一下，变成通用的组件。https://segmentfault.com/a/1190000008446707 首先使用基础 Vue 构造器，创建一个“子类”,Vue.extend( options ) var barHtml = ''+
Vue.js 使用 $emit 触发事件填坑
u014418380的博客
07-16 8523
vue的组件内触发外部事件不起作用 vue的组件内触发自定义事件（发外部事件）不起作用 今天学习vue的自定义组件功能，在组件内部触发一个事件，在使用组件的地方使用v-on绑定这个事件，然而触发一直不生效，检查了很多遍的代码都没看出什么问题，代码如下： <div id="app"> <button v-on:click="IncrHandle">增加</button...
vue里边的冒泡处理
七爷不在我这里
06-05 2483
描述：父容器上有@click、子元素里也有@click、那么点击子元素、会触发父容器的函数。可以用@click.stop解决。&lt;div @click="foo1"&gt; 父容器 &lt;p @click.stop="foo2"&gt;子元素1&lt;/p&gt; &lt;p @click="foo3"&gt;子元素2&lt;/p&gt;&lt; &amp
vue.js中this.$emit的理解
热门推荐
王小森的成长博客
07-17 7万+
对于vue.js中的this.emit的理解：this.emit的理解： this.emit(‘increment1’,”这个位子是可以加参数的”)；其实它的作用就是触发自定义函数。
Vue事件解读之$emit
FEE
03-21 2万+
Vue事件分两部分，一是DOM绑定事件，二是自定义事件。DOM事件 在Vue中可通过v-on指令或事件语法糖@来为DOM元素绑定事件// app.vue <template> <test @childevent="childEventHandler"></test> </template> methods: { childEventHandler () {} } // test.vue
Vue处理事件冒泡
qq_51420411的博客
12-22 1万+
初学vue
vue 事件
wanmeizty的专栏
08-18 577
1.事件修饰符 v-on : click = @click .stop 阻止事件继续往下传播（应用于一个局部响应点击事件） .prevent 用于阻止默认事件，点击 a 标签 href 可以打开相应的链接，那么给事件加 上此关键字 .capture 冒泡顺序，先冒泡有修饰符的由外层往里，再由无修饰的由里到顺序进行 .self 只有点击自己才会响应事件，不会由子事件传递过来 .once 点击事件只会执行一次 .passive 拦截默认事件 .passive 不拦截
vue $on 和 $emit 一起使用：监听自定义事件--》触发自定义事件--》触发监听结果
weixin_41796631的博客
10-30 1万+
$on 和 $emit 一起使用 $on：监听当前实例上的自定义事件。事件可以由vm.$emit触发。回调函数会接收所有传入事件触发函数的额外参数。 $emit：触发当前实例上的事件。附加参数都会传给监听器回调。 例子解析： 1. $on 监听自定义事件要在事件执行前被监听。所以例子中在生命周期 beforeCreate 就开始了监听自定义事件 "start"。 2. 在method...
vue模板语法里读取数组的某一项
05-26
在Vue模板语法中，要读取数组的某一项，可以使用以下方式： ``` {{ array[index] }} ``` 其中，array是你要读取的数组名，index是数组中要读取的元素的下标。例如，如果你有一个名为`list`的数组，想要读取第二个...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

酒醉猫(^･ｪ･^)

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值