vue 事件机制

向右看齐 2021-07-24 21:08 365阅读 0赞

事件机制
    	(1)获取标签上自定义属性
    		配合事件中的event
    			<p data-id='xx'></p>
    			event.target.dataset.id获取
    	
    	(2)在标签事件上可以放表达式
    		@click='num++'
    		在标签上使用event：
    			如获取元素的value值:
    				@click='$event.target.value'
    				
        (2.5)事件动态参数
        	<a @[eventName]="doSomething"> ... </a>
        		eventName='click',则等价于:<a @click="doSomething"> ... </a>
        		
        (2.6)事件对象语法
        	<button v-on="{ mousedown: doThis, mouseup: doThat }"></button>
        	<button @="{ mousedown: doThis, mouseup: doThat }"></button>
        	
    	(3)事件的回调函数会自动传入event
    	
    	(4)事件修饰符
    	
    		    .stop       阻止冒泡
    		    .prevent    阻止默认行为
    		    	表单:
    		    		(1)阻止input的type属性为submit时的,点击事件默认条件行为
    		    			@click.prevent='函数'
    		    		(2)组件@submit事件提交不再重新加载页面
    		    			@submit.prevent='函数'
    		    			
    		    .capture	开启捕获,即内部元素触发的事件先在此处理，然后才交由内部元素进行处理
    		    .self	    和event.target触发条件一样,阻止自身冒泡,但冒泡链上的冒泡不阻止,即事件不是从内部元素触发的,是当前元素自身时触发
    		    .once	    只触发一次
    		    .passive    不阻止事件的默认行为,尤其能够提升移动端的性能。
    		    .native     监听组件根元素的原生事件,用于给组件绑定事件
    			
    			 鼠标事件修饰符
    			 	.left、.right、.middle	仅响应特定的鼠标按钮。
    			
    			 用法:
    			 	方式一:@click.stop='函数', 可以链式调用修饰符
    			 	方式二:只有修饰符
    			 		<div @submit.prevent></div>	将会阻止表单提交重新加载页面行为
    			 		<div @click.prevent></div>	将会阻止所有点击事件
    			    
    	
    	(5)键盘事件按键修饰符
    		方式一:使用按键名称
    		1、单按键
    			<input @keyup.enter="submit">
    			<input @keyup.page-down="onPageDown">
    				    .enter
    				    .tab
    				    .delete (捕获“删除”和“退格”键)
    				    .esc
    				    .space
    				    .up
    				    .down
    				    .left
    				    .right
    
    			对应的键盘事件名称,访问:https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/key/Key_Values
    			
    		2、组合按键					
    		    .ctrl、 .alt、.shift、.meta
    		    <input v-on:keyup.alt.67="clear">	Alt + C触发
    		    <div v-on:click.ctrl="doSomething">Do something</div>	Ctrl + Click触发
    		    其中:keyup.ctrl	只有在按住ctrl的情况下释放其它按键,才能触发keyup.ctrl,或者替换为keyup.17
    			
    			精确控制.exact
    				<button v-on:click.ctrl="onClick">A</button>	即使Alt或Shift被一同按下时也会触发
    				<button v-on:click.ctrl.exact="onCtrlClick">A</button>	有且只有Ctrl被按下的时候才触发
    				<button v-on:click.exact="onClick">A</button>	没有任何系统修饰符被按下的时候才触发
    			
    		方式二:使用按键码(keyCode 的事件用法已经被废弃了并可能不会被最新的浏览器支持。)
    			<input v-on:keyup.13="submit">
    			自定义按键修饰符别名
    			Vue.config.keyCodes.f1 = 按键码
    			@keyup.f1
    	
    				
    	1、在script中,与data同级
    		methods:{
    			可采取键值对的形式写函数
    			或者es6写法,直接写函数
    
    			在函数中获取组件data中的内容,直接this.属性名获取
    		}
    		
    	2、在标签添加事件
    		两种写法
    			v-on:js中去掉on的事件名='函数'
    			@js中去掉on的事件名='函数'
    	
    	3、事件传参
    		(1)在标签中传递参数
    			如:@click='clicks("哈哈",$event)'
    			其中:
    			1、若传递参数后,还要使用event属性,必须还要传入$event,若不传参,则不需要
    			2、函数中接收参数,根据形参位置来接收
    
    	4、以下数组方法使用时,会因为vue的观察变异,会实时触发视图更新
    	
    		(1)如使用v-for利用数组生成多个标签时,数组的内容添加,会在视图中实时添加
    		(2)改变原数组的方法会引起
    		(3)返回新数组的方法不会引起如concat(),slice()等
    
    			push()
    			pop()
    			shift()
    			unshift()
    			splice()
    			sort()
    			reverse()

代码示例:

<template>
      <div class="hello">
        <p v-on:mouseover='clicks'>哈哈哈</p>
         <p @click='clicks("哈哈",$event)'>哈哈哈2</p>
      </div>
    </template>
    
    <script>
    export default { 
      name: 'HelloWorld',
    
      //相当于react中的state
      data () { 
        return { 
          msg: 'Welcome to Your Vue.js App',
          hello:"<h3>hello</h3>",
          url_name:"百度",
          url:"http://www.baidu.com",
          divClass:'isActive',
          flag:false,
          val:'a',
          flag2:true,
          names:['jeff','mike','tom'],
          obj:{ name:'jeff',name2:'mike2',name3:'tom2'}
        }
      },
      
      methods:{ 
        clicks:function(data,event)
        { 
            console.log('点击');
            console.log(this.flag);
            console.log(event);
             console.log(data);
        }
      }
    }