《vue2.0 框架学习》--事件和修饰符

最新推荐文章于 2025-04-16 11:57:45 发布

良言SE

最新推荐文章于 2025-04-16 11:57:45 发布

阅读量182

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/qq_32265719/article/details/82809631

本文深入解析Vue2.0的关键特性，包括基础模板语法、属性绑定、事件处理及修饰符的使用，通过示例代码展示如何实现数据绑定、事件监听及防止默认行为和事件冒泡。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

vue2.0 day2

基础模板

{{}}-绑定text/data

v-html-绑定html
v-text-绑定text
v-cloak - 解决浏览器闪烁/解决vm实例加载失败的情况。
[v-cloak]{display:none}

属性
v-bind:style="color:red"
:style="color:red"
span[ref=role] --vue里面的自定义属性

事件
v-on:click="doTab"
@click="doTab"

事件进阶-修饰符
事件冒泡：事件向上传递

.prevent
告诉 v-on 指令对于触发的事件调用 event.preventDefault()
.stop
阻止默认:event.stopPropagation()
.capture
即元素自身触发的事件在此处理，然后才交由内部元素进行处理
.self
self可以理解为跳过冒泡事件和捕获事件，只有直接作用在该元素上的事件才可以执行
.once
.passive
v-on:click.prevent.self 会阻止所有的点击
v-on:click.self.prevent 只会阻止对元素自身的点击

总结

  1 .模板：{{}}语法,除了绑定数据，也可能绑定html
           2.div[v-bind:title=msg]/div[:title=msg] --绑定属性的缩写
           3.button[v-on:click=submit]/button[@click=submit]{click} -绑定那个事件/绑定事件的缩写

           4.事件修饰符 --阻止事件默认 --event.preventDefault() --.prevent
           5.事件修饰符 --阻止事件冒泡 --event.stopPropagation()/非IE --.stop
           6.其他事件操作符 --.capture --.self --.once --passive

           7.
           v-on:click.prevent.self 会阻止所有的点击
           v-on:click.self.prevent 只会阻止对元素自身的点击

demo2

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>vue2.0 day2</title>
	<script src="../node_modules/vue/dist/vue.js"></script>

	<style>
		[v-cloak]{display: none;}
		*{margin:0;padding: 0;}
		body{font-size: 16px;color: black;}
		a{text-decoration: none; color: black;}
		#app{}
		#app form p label{
			display: inline-block;
			width: 64px;
			height: 20px;
			text-align: right;
		}

	</style>
</head>
<body>

	<div id="app" v-cloak>
		<div :style="style">{{msg}}</div>
		<form action="#">
			<p>
				<label for="username">用户名：</label>
				<input type="text" v-model="json.username" name="username" id="username">
			</p>
			<p>
				<label for="passworld">密码：</label>
				<input type="passworld" v-model="json.passworld" name="passworld" id="passworld">
			</p>

			<p>
				<input type="submit"  name="submit" v-model="json.submit" @click.prevent="check()">
			</p>

		</form>
		
		<div v-html="html">
			
		</div>

		<button v-on:click="submit">点击</button>
		<button @click="submit">click</button>
		<p @click="submit" style="padding: 20px;border:1px solid black; width: 200px;">
			<a href="http://www.baidu.com" target="_blank" @click.prevent.stop="submit">baidu</a>
		</p>

	</div>
	<script>
		window.onload=function(){

			new Vue({
				el:'#app',
				data:{
					json:{
						submit:'提交',
						passworld:'',
						username:''
					},
					style:'color:red',
					html:'<span>123</span>',
					msg:'hello vue'
				},
				filters:{
					// 码值表
				},
				methods:{
					submit:function(){
						alert(this.msg)
					},
					check:function() {
						if(this.json.username=='') {
							alert("请输入用户名!");
							return false;
						}
						if(this.json.password==''){
							alert("请输入登录密码!");
							return false;
						}
						return true;
					}
				}
			});
		}
	</script>
	
</body>
</html>