vue的事件处理梳理

<!DOCTYPE html>
<html>
<head>
	<title>事件处理</title>
	<style type="text/css">
		.div1,.div2{
			padding: 100px
		}
		.div1{
			background-color: red
		}
		.div2{
			background-color: yellow
		}

	</style>>

</head>
<body>

	<div id="app">

		<!-- v-on用来绑定事件 -->

<!-- 		三要素
				事件源
				事件
				处理函数 -->
<!-- ------------------------------------------------------------------------------------------ -->

		{{gread}}

		<input type="button" v-on:click="test" value="点我">

		<!-- click绑定一个函数 -->


<!-- ---------------------------------------------------------------------------------------------->
		{{gread}}

		<input type="button" v-on:click="gread+=1" value="点我">

		<!-- click绑定一个表达式 -->


<!-- ---------------------------------------------------------------------------------------------->
		{{gread}}

		<input type="button" v-on:click="click(gread)" value="点我">


		<!-- click绑定一个函数，传递一个属性给函数做为参数 -->

<!-- ---------------------------------------------------------------------------------------------->
		{{gread}}

		<input type="button" v-on:click="click('hello vue')" value="点我">


		<!-- click绑定一个函数，传递一个字符串给函数作为参数 -->


<!-- ---------------------------------------------------------------------------------------------->
		
		<input type="button" v-on:click="testObj" value="点我">


<!-- ---------------------------------------------------------------------------------------------->
		<!-- 事件修饰符 -->
<!-- 		.stop
		.prevent
		.capture
		.self
		.once -->

		<div class="div1" v-on:click="div1">
			<div class="div2" v-on:click.stop="div2"></div>
		</div>

		<!-- .stop阻止默认行为的演示 -->



		<form v-on:submit.prevent="tijiao">
			<input type="submit" value="提交">
		</form>

		<!-- .prevent阻止默认行为的演示，这个默认行为就是刷新 -->


		<!-- 事件修饰符可以串联 -->



		<form v-on:submit.prevent>
			<input type="submit" value="提交">
		</form>
		<!-- 还可以只有修饰符，没有函数 -->



		<div class="div1" v-on:click.capture="div1">
			<div class="div2" v-on:click.capture="div2"></div>
		</div>
		<!-- capture捕获的演示，先执行父节点的绑定事件，在执行自己的绑定事件，默认是先执行自己的绑定的事件，后执行父节点绑定的事件 -->


		<div class="div1" v-on:click.self="div1">
			<div class="div2"></div>
		</div>


		<!-- self。只给自己绑定事件，对子元素不会绑定事件，如果没有self修饰符，则点击子元素也会触发div1这个函数 -->




		<div class="div1" v-on:click.once="div1">


			<div class="div2"></div>
		</div>


		<!-- once修饰符，意思是这个事件只执行一次 -->
	</div>
	<script type="text/javascript" src="vue.js"></script>
	<script type="text/javascript">

		var app = new Vue({
			el:"#app",
			data:{
				seen:false,
				gread:90,
				logintype:"username",
				items:[
					{text:"chifan",isok:false},
					{text:"kandianshi",isok:true},
					{text:"xuepython",isok:true},
					{text:"xueshell",isok:true},
				],
				pipi:{
					firstname:"haoran",
					lastname:"cui",
					age:"2"
				},
				numbers:[1,2,3,4,5,6,7,8,9,10]
			},
			methods:{
				test:function(){
					alert(123)
				},
				click:function(mes){
					alert(mes)
				},
				testObj:function(event){
					console.log(event.target)
					// event这个参数是自带的，我们这里查看这个事件的事件源
					console.log(event.type)
					// type是这个事件的类型，这里是click类型

					// 如果这里要传递我们自己的参数，那么我们自己的参数要放在最前面，把event这个参数放在最后

				},
				div1:function(){
					alert("outer")
				},
				div2:function(){
					alert("inner")
				},
				tijiao:function(){
					console.log(123)
				}
			}


		})
			
	</script>
</body>
</html>
vue的事件处理梳理

猜你喜欢
