Vue-方法和事件的绑定

方法

　　方法通常指的函数，在Vue框架中一般方法都是写在methods中，供事件或者别的方法调用，方法的写法是不限于es5，es6语法的函数形式也是可以的，其中除了箭头函数外其他形式函数的this都是指的vm对象（也就是new Vue（））。

事件的绑定

　　事件的绑定有两种方式：

　　　　1.v-on

 

<button v-on:click="fn1()">点击事件1</button>
//给button标签绑定点击事件

 

　　　　2.@

 

<button @click="fn2">点击事件2</button>
//给button标签绑定点击事件

 

事件的修饰符

  • stop 阻止冒泡，阻止从当前元素经过的所有冒泡行为

  • .prevent 阻止默认事件

  • .capture 添加事件侦听器时让事件在捕获阶段触发

  • .self 其他元素的事件触发时 事件链经过它,无论是捕获还是冒泡阶段都不会触发它的事件,只有它自己是精准对象才会触发事件, 虽然它自己不会被别人影响,但是它自己的事件触发的时候还是会生成事件链经过其他元素,并不阻止继续冒泡到其他元素

  • .once 事件只触发一次,触发完之后,事件就解绑

案例

<body>
		<div id="app" :style="style1" v-on:click="fn1">
			<div :style="style2" @click.stop="fn2">
				<div :style="style3" @click.self="fn3">
					<button @click.once="fn4">测试</button>
　　　　　　　　　　　　　　　　　　　　　　　　<button @click="fn4">测试</button>
					<a href="www.baidu.com" @click.prevent="">百度</a>
					<div :style="style4" @click.capture="fn5"></div>
				</div>
			</div>
		</div>
		<div id="app1">
		　　　　　<button @mouseenter.once="fn">text</button>
　　　　　　　　　　　　　　<button @mouseenter="fn">text</button>
		</div>
	</body>
	<script>
		new Vue({
			el:"#app1",
			data:{},
			methods:{
				fn(){
					console.log("鼠标进入了")
				}
			}
		})
		new Vue({
			el:"#app",
			data:{
				style1:"width:300px;height:300px;backgroundColor:purple;",
				style2:"width:200px;height:200px;backgroundColor:green;",
				style3:"width:100px;height:100px;backgroundColor:gold;",
				style4:"width:80px;height:80px;backgroundColor:pink;"
			},
			methods:{
				fn1(){
					console.log("紫色")
				},
				fn2(){
					console.log("绿色")
				},
				fn3(){
					console.log("金色")
				},
				fn4(){
					console.log("百度")
				},
				fn5(){
					console.log("粉色")
				}
			}
		})
	</script>

　　

 

posted @ 2022-08-31 00:14  前端小白银  阅读(126)  评论(0)    收藏  举报