前端框架Vue----事件处理

点击事件

v-on:click = ‘func1’
@click = ‘func2’

<div id='test'>
	<button v-on:click='func1'>点击{{ name1 }}</button>
	<button @click='func2'>点击{{ name2 }}</button>
	<input type='text' @focus="focus($event, '测试传参')" name='name'>
</div>

<script type='text/javascript'>
	Vue.config.productionTip = false
	
	new Vue({
		el: "#test", //选择容器节点
		data: {//容器内使用的数据
			name1: 'jack',
			name2: 'tom',
		},
		methods: {//容器内部使用的方法，直接 方法名(){}
			func1(event){//注意不写箭头函数
				console.log(event)//event事件源
				console.log(this)//this Vue实例
				alert("clicking " + this.name1)
			},
			func2(event){
				alert("clicking " + this.name2)
			},
			focus(event, param){
				console.log(event, param)
			},
		},
	})
</script>

v-on: 其他事件名称 = “func1” ; 不传参
@其他事件名称 = ‘func2($event, param)’ 传参，$event 必须传
methods对象里的函数最终在Vue实例对象身上，由Vue实例统一管理，内部的函数不能使用箭头函数，否则this就不是Vue实例或者组件实例

事件修饰符

1. prevent， 阻止默认的事件操作

<!-- 事件修饰符prevent，阻止默认的事件操作，
            如超链接的跳转，表单的提交等 -->
<a href="https://www.baidu.com" @click.prevent="func3">百度(不跳转)</a>

<!--在函数中阻止，event.preventDefault()-->

2. stop，阻止事件冒泡
   事件冒泡，即祖先元素与后代元素具有同样的事件监听，依次从后代元素触发事件，每次向上走一层，触发事件，直到最顶层的祖先元素触发事件。但是event.target事件源就只是第一次触发的元素
   如下，点击一次按钮，触发两次事件
   
   为了让子元素仅仅触发一次点击事件，其上层的父元素即使具有同样的事件也不再触发，即阻止事件冒泡。
   

<!-- 事件冒泡 祖先元素与后代元素具有同样的事件，依次从后代元素触发事件
            每次向上走一层，触发事件，直到最顶层的祖先元素触发事件 -->
<div class='bubble' @click="outer($event, 'outer layer')">
	<button @click.stop="inner($event, 'inner layer')">测试事件冒泡</button>
</div>

<script type='text/javascript'>
        Vue.config.productionTip = false
        
        new Vue({
            el: "#test", //选择容器节点
            data: {//容器内使用的数据
                name1: 'jack',
                name2: 'tom',
            },
            methods: {//容器内部使用的方法，直接 方法名(){}
                outer(event, p){
                    console.log(p)
                },
                inner(event, p){
                    // 阻止事件冒泡
                    // event.stopPropagation()
                    console.log(p)
                },
            }
        })
    </script>

3. once，事件仅仅触发一次
   @click.once = ‘func’ ，点击只触发一次

4. capture，事件的捕获阶段执行
   事件触发的时候，先由外层到内层的捕获事件阶段，然后由内而外的冒泡触发阶段
   @click.capture = “func” ，点击时，在捕获阶段执行

5. self，当event.target事件源是当前触发事件的元素时，才触发执行。
   点击的是我，我就触发
   点击的是别人，冒泡到我这里，我就不触发

6. passive，默认的事件操作立即执行，不再等待回调函数执行完毕

@wheel = ’func‘; 鼠标滚轮事件
@scroll = “func”；滚动条事件

事件的修饰符是可以连续写的，如@click.prevent.stop，先阻止默认操作，再阻止冒泡

键盘事件

@keydown， 键盘被按下
@keyup，键盘弹起来

<!-- input 中输入值，回车后触发打印value -->
<br>
<label for="">测试键盘事件：</label>
<input type="text" @keydown.enter="output" name="username">

在事件函数内部处理的话，判断是哪个键被按下
console.log(event.keyCode) , 13代表enter键；
console.log(event.key)， 键盘的名字

Vue中定义好的别名按键判断：
@keydown.enter; Enter回车键
@keydown.delete; Delete &Backspace 键
@keydown.esc; Esc键
@keydown.tab; Tab键 (仅仅配合keydown使用)
@keydown.space; 空格键
@keydown.left;
@keydown.right;
@keydown.up;
@keydown.down;

Vue未定义别名的键，使用event.key的值，转为小写且多个单词用-拼接
@keydown.caps-lock

系统修饰键
alt、shift、ctrl、win，配合keyup使用特殊，如下：
@keyup.ctrl = ‘func’ ; 按下Ctrl + other后， other 弹起 则触发
配合keydown则正常触发
设置只有按下Ctrl + y的时候，才触发，@keyup.ctrl.y = ‘func’