Vue 基础 之 事件处理
1、事件监听
可以用 v-on:click 或者 @click 指令监听 DOM 事件,并在触发时运行一些 JavaScript 代码。
示例:
<div id="root"> <button v-on:click="greet">Greet</button> <button @click="greet()">Greet</button> </div>
var vm= new Vue({ el: '#root', data: { name: 'Vue.js' }, // 在 `methods` 对象中定义方法 methods: { greet(event) { // `this` 在方法里指向当前 Vue 实例 alert('Hello ' + this.name + '!') } } })
2、事件修饰符
在事件处理程序中调用 event.preventDefault() 或 event.stopPropagation() 是非常常见的需求。尽管我们可以在方法中轻松实现这点,但更好的方式是:方法只有纯粹的数据逻辑,而不是去处理 DOM 事件细节。
为了解决这个问题,Vue.js 为 v-on 提供了事件修饰符。之前提过,修饰符是由点开头的指令后缀来表示的。
.stop
.prevent
.capture
.self
.once
.passive
<style> ul { height: 200px; width: 150px; background: beige; padding: 10px; margin: 5px; overflow: auto; } li { height: 70px; background: aquamarine; margin: 5px; } </style> <button @click="clickOne">点击</button> <br> <button v-on:click="clickOne2">点击2</button> <br> <!-- 阻止单击事件继续传播 --> <a v-on:click.prevent="doStop" href="https://www.baidu.com">不会跳转到其他网址 </a> <br> <a v-on:click.stop="doStop" href="https://www.baidu.com">会跳转到其他网址 </a> <br> <!-- 提交事件不再重载页面 --> <button v-on:submit.prevent="onSubmit">不重载</button> <br> <div v-on:click="inLink" class="inLink"> <!-- 修饰符可以串联 --> <button v-on:click.prevent="inLink">内联1</button> <br> </div> <div v-on:click="inLink" class="inLink"> <!-- 修饰符可以串联 --> <button v-on:click.stop="inLink">内联2</button> <br> </div> <!-- 只有修饰符 --> <button v-on:submit.prevent></button> <br> <!-- 添加事件监听器时使用事件捕获模式 --> <!-- 即内部元素触发的事件先在此处理,然后才交由内部元素进行处理 --> <div v-on:click.capture="doThis">捕获</div> <br> <!-- 只当在 event.target 是当前元素自身时触发处理函数 --> <!-- 即事件不是从内部元素触发的 --> <div v-on:click.self="doThat">指定过滤元素</div> <br> <!-- 点击事件将只会触发一次 --> <button v-on:click.once="once">只会触发一次</button> <br> <!-- 滚动事件的默认行为 (即滚动行为) 将会立即触发 --> <!-- 而不会等待 `onScroll` 完成 --> <!-- 这其中包含 `event.preventDefault()` 的情况 --> <br> <ul v-on:scroll="onScroll"> <li>1</li> <li>2</li> <li>3</li> <li>4</li> </ul> <!--按键修饰符 别名 .enter .tab .delete (捕获“删除”和“退格”键) .esc .space .up .down .left .right --> <!-- 只有在 `key` 是 `Enter` 时调用 `vm.submit()` --> <input v-on:keyup.enter="enter()"> <br> <input v-on:keyup.esc="esc()"> <br> <!--系统按键修饰符 别名 .ctrl .alt .shift .meta (就是Win键) --> <!-- Alt + C --> <input v-on:keyup.alt.c="cc"> <br> <!-- Ctrl + Click --> <input v-on:keydown.ctrl="ctrlKey" >
Vue.config.productionTip = false new Vue({ el: "#root", data: { name: "你好", person: { name: "小明" } }, methods: { clickOne() { alert("点击率") }, clickOne2() { alert("点击率2") }, doStop() { alert("aaaaaaa") }, inLink() { alert("inLink") }, once() { alert("once") }, onScroll() { console.log("滚了@@@@") }, enter() { console.log("点击回车") }, esc() { console.log("点击esc") }, cc() { console.log("点击alt.c") }, ctrlKey() { console.log("点击ctrlKey") },, } })
使用修饰符时,顺序很重要;相应的代码会以同样的顺序产生。因此,用 v-on:click.prevent.self 会阻止所有的点击,而 v-on:click.self.prevent 只会阻止对元素自身的点击。
B站链接
https://www.bilibili.com/video/BV1Zy4y1K7SH?p=15