V-on指令,methods方法,指令修饰符

最新推荐文章于 2022-09-14 21:04:23 发布

俗世凡人行

最新推荐文章于 2022-09-14 21:04:23 发布

阅读量202

点赞数

分类专栏： Vue 文章标签： v-on methods 指令修饰符

本文链接：https://blog.csdn.net/weixin_41887155/article/details/107589064

版权

Vue 专栏收录该内容

56 篇文章 0 订阅

订阅专栏

Vue指令

v-on

v-on指令, 它用于监听DOM时间;

methods

可以通过VM实例访问这些方法, 或者在指令表达式中使用; 方法中的this自动绑定Vue实例;

指令修饰符

.stop

阻止冒泡, 冒泡是一个按钮触发2个事件,冒泡可以阻止其中一个事件的触发;冒泡可以阻止, 不会向上传递,所以.stop写在内层事件才有效;

.once 只允许点击一次

缩写 `v-on:` =====> `@`

@后面跟其他事件和js事件的名字一样的

@keydown=“go()” 键盘按下事件等

eg

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id="app">
			<!-- 监听dom时间 -->
			<!-- <p v-on:click="count++">点我</p>
			<p>{{count}}</p> -->
			<!-- 我们一般点击事件, 要对数据进行一些处理,调用一个方法,go函数里面可以有参数,可以没有-->
			<!-- <p v-on:click="go('你好吗?')">点我 </p> -->
			<!-- 指令修饰符使用.stop,阻止后,支出法go1,不会触发go2 -->
			<!-- <span id="" v-on:click="go2('go22')">
				<span id="" v-on:click.stop="go1('go11')">
					点我					
				</span>
			</span> -->
			<!-- .once只触发一次 -->
			<span id="" @click.once="go2('go22')">				
					点我	
			</span>
			<!-- 按回车事件,13也是绑定回车也比较常用 -->
			<!-- <input type=""  @keydown.enter="go('enter')" name="" id="" value="" /> -->
			<input type=""  @keydown.13="go('enter')" name="" id="" value="" />				
			
		</div>
	</body>
</html>
<script type="text/javascript">
	var vm = new Vue({
		el:'#app',
		data:{		
			count:2,			
		},
		methods:{
			go:function(msg){
				// alert("hello Vue!");
				// 打印参数msg的值
				console.log(msg),
				//这里面有一个恶this对象,自动绑定vm对象的,比如this的用法
				console.log(this.count)
				
			},
			go1:function(msg)
			{
				alert(msg);
			},
			go2:function(msg)
			{
				alert(msg);
			}
		}
	})	
	
</script>