Vue核心基础2：事件处理和事件修饰符

1 事件处理

1.1 点击事件

<body><div id="root"><h1>姓名： {{ name }}</h1><h1>地址： {{ address }}</h1><!-- <button v-on:click="showInfo">提示信息</button> --><!-- 简写形式 --><button @click="showInfo1">提示信息1(不传参)</button><button @click="showInfo2($event, 66)">提示信息2(传参)</button></div><script>const vm = new Vue({el: '#root',data: {name: '张三',address: '北京'},methods: {showInfo1(event) {// alert('同学你好！')console.log(event.target.tagName)console.log(this)  // 此处的this是vm},showInfo2(event, number) {console.log(event.target.tagName)console.log(number)}}})</script>
</body>

2 事件修饰符

2.1 prevent 阻止默认事件

<a href="http://www.baidu.com" @click.prevent="showInfo">百度</a>

    <script>const vm = new Vue({el: '#root',data: {name: '张三',address: '北京'},methods: {showInfo(e) {alert('同学你好！')// e.preventDefault() // 阻止默认行为 ->  vue中有简洁的写法 @click.prevent}}})</script>

2.2 stop 阻止事件冒泡

<div class="demo1" @click="showInfo1"><button @click.stop="showInfo1">点我提示信息</button>
</div>

    <script>const vm = new Vue({el: '#root',data: {name: '张三',address: '北京'},methods: {showInfo1(e) {alert('同学你好 1111')// e.stopPropagation() // 阻止事件冒泡 ->  vue中有简洁的写法 @click.stop},}})</script>

2.3 once 事件只触发一次

<button @click.once="showInfo2">点我提示信息</button>

    <script>const vm = new Vue({el: '#root',data: {name: '张三',address: '北京'},methods: {showInfo2(e) {alert('同学你好 2222')},}})</script>

2.4 capture 使用事件的捕获模式, 正常在冒泡阶段处理事件，通过这个可以在捕获阶段处理事件

<div class="demo1" @click.capture="showInfo3(1)"><button @click="showInfo3(2)">点我提示信息</button>
</div>

    <script>const vm = new Vue({el: '#root',data: {name: '张三',address: '北京'},methods: {showInfo3(msg) {console.log(msg)   // 先1后2// 原本在冒泡阶段处理事件，应是先输出2，再输出1},}})</script>

2.5 self 只有event.target是当前操作的元素时才触发事件

<!-- 在下述中，因为当前操作的元素是button,所以不触发div -->
<div class="demo1" @click.self="showInfo4"><button @click="showInfo4">点我提示信息</button>
</div>

    <script>const vm = new Vue({el: '#root',data: {name: '张三',address: '北京'},methods: {showInfo4(e) {console.log(e.target)  // <button>点我提示信息</button>},}})</script>

2.6 passive 事件的默认行为立即执行，无需等待事件回调执行完毕

<!-- @scroll 为滚动条滚动 --><!-- <ul @scroll="demo" class="list"><li>1</li><li>2</li><li>3</li><li>4</li></ul> --><!-- @wheel 为鼠标滚轮滚动  但是滚到最后的位置，仍然触发 --><ul @wheel.passive="demo" class="list"><li>1</li><li>2</li><li>3</li><li>4</li></ul>

    <script>const vm = new Vue({el: '#root',data: {name: '张三',address: '北京'},methods: {demo() {console.log('滚动了')}}})</script>

3 键盘事件

<body><div id="root"><input type="text" placeholder="按下回车提示输入" @keyup.enter="showInfo"><!-- CapsLock  切换大小写键， 写法需要用斜杠连接才有效果 --><input type="text" placeholder="按下回车提示输入" @keyup.caps-lock="showInfo"></div><script>// Vue.config.keyCodes.huiche = 13  // 定义了一个回车别名按键const vm = new Vue({el: '#root',data: {name: 'Vue'},methods: {showInfo(e) {// if (e.keyCode !== 13) return    传统做法console.log(e.target.value)// console.log(e.key, e.keyCode)}}})</script>
</body>

总结：

1.Vue中常用的按键别名：
回车 => enter
删除 => delete （捕获“删除” 和 “退格”键）
退出 => esc
空格 => space
换行 => tab (特殊，必须配合keydown使用)
上 => up
下 => down
左 => left
右 => right

2. Vue未提到别名的按键，可以使用按键原始的Key值绑定，但注意用短横线连接

3. 系统修饰键（用法特殊）：ctrl, shfit, alt, win/meta
(1).这几个键配合keyup使用：按下修饰键，再按下其他键，随后释放其他键，事件才被触发（想要指定特定的键可以，比如指定y： @keyup.ctrl.y）
(2).配合keydown使用：正常触发事件

4.也可以使用keyCode去指定具体的按键（不推荐）

5. Vue.config.keyCodes.自定义键名 = 键码可以去定制按键别名