v-on 事件的基本用法
- 使用 v-on:xxx或**@xxx**绑定事件，其中 xxx 是事件名
- 事件的回调需要配置在methods对象中，最终会在vm上
- methods中的函数，不要用箭头函数，否则this就不是vm了
- methods中的函数，都是被Vue所管理的函数，this 的指向是vm或组件实例对象
- @click="demo"和@click=“demo($event)” 效果一致，但后者可以传参
<div id="app">
<button v-on:click="showInfo">提示（不传参）</button>
<button @click="del(66,$event)">删除（传参）</button>
</div>
<script type="text/javascript">
new Vue({
el: '#app',
methods: {
showInfo(event) {
console.log(event.target);
console.log("点击了 showInfo");
},
del: function (id, event) {
console.log(event.target);
console.log("删除id=" + id);
}
}
})
</script>
事件修饰符
- prevent 阻止事件的默认行为（常用）
<div class="box1"> <a href="http://www.baidu.com" @click.prevent="showMsg('1')">阻止事件的默认行为</a> </div> - stop 阻止事件冒泡，从而防止其被祖先元素捕获（常用）
<!-- 点击儿子： 1、默认执行顺序： 儿子->父亲 2、阻止事件冒泡， 儿子 --> <div class="box1" @click="showMsg('父亲1')"> 父亲1 <div class="box2" @click.stop="showMsg('儿子2')">儿子2</div> </div> - once 事件只触发一次（常用）
<button @click.once="showMsg('1')">一次性按钮</button> - capture 使用事件的捕获模式(先捕获后冒泡)
<!-- 点击儿子： 1、默认执行顺序： 儿子->父亲 2、使用事件捕获模式，点击儿子，执行顺序：父亲->儿子 --> <div class="box1" @click.capture="showMsg('父亲1')"> 父亲1 <div class="box2" @click="showMsg('儿子2')">儿子2</div> </div> - self 只有event.target元素本身触发时才执行
<!-- 点击儿子： 1、默认执行顺序： 儿子->父亲 2、使用self，执行顺序： 儿子 --功能有点类似，阻止冒泡 --> <div class="box1" @click.self="showMsg('父亲1')"> 父亲1 <div class="box2" @click="showMsg('儿子2')">儿子2</div> </div> - passive 事件的默认行为立即执行，无需等待事件回调执行完毕
<!-- 事件的默认行为立即执行，无需等待事件回调执行完毕，如：事件中耗时操作 （从而提高页面的滚动性能） wheel是鼠标滚轮滚动，passive有影响 1、默认执行顺序： 页面滚动卡顿 2、使用passive，优先响应滚动 --> <div class="box1" @click.capture="showMsg('父亲1')"> <ul @wheel.passive="wheel" class="list"> <li>1</li> <li>2</li> </ul> </div>
补充：
<script type="text/javascript">
new Vue({
el: '#app',
methods: {
showMsg(msg) {
console.log(event.target);
console.log(msg);
},
//鼠标滚轮 事件
wheel(event) {
for (let index = 0; index < 10000; index++) {
console.log("#--耗时中");
}
console.log(event.currentTarget.scrollTop);
console.log("滚动完成");
}
}
})
</script>
按键修饰符(键盘事件)
- Vue 提供常用的按键码的别名：
.enter (回车).tab (换行 tab特殊，必须配合keydown去使用).delete(捕获“删除”和“退格”键).esc (退出).space (空格).up (上).down (下).left (左).right (右)
- Vue未提供别名的按键，可以使用按键原始的key值去绑定，但注意要转为kebab-case（多单词小写短横线写法）
- 系统修饰键（用法特殊）ctrl alt shift meta（meta就是win键）
- 配合keyup使用：按下修饰键的同时，再按下其他键，随后释放其他键，事件才被触发指定 ctr+y 使用 @keyup.ctr.y
- 配合keydown使用：正常触发事件
- 也可以使用keyCode去指定具体的按键（不推荐）键码不推荐了
//参考地址--已经被弃用了 https://developer.mozilla.org/zh-CN/docs/Web/API/KeyboardEvent/keyCode - Vue.config.keyCodes.自定义键名 = 键码，可以去定制按键别名
<div id="app">
<input type="text" placeholder="keyup" @keyup="showMsg"><br />
<input type="text" placeholder="caps-lock" @keyup.caps-lock="showMsg"><br />
<input type="text" placeholder="回车" @keyup.enter="showMsg"><br />
<input type="text" placeholder="自定义回车" @keydown.huiche="showMsg"><br />
<input type="text" placeholder="tab" @keydown.tab="showMsg"><br />
<input @keyup.alt.67="showMsg" placeholder="Alt + C"><br />
<input @click.ctrl="showMsg" placeholder="Ctrl + Click"><br />
<input @click.ctrl="showMsg" placeholder="即使 Alt 或 Shift 被一同按下时也会触发"><br />
<input @click.ctrl.exact="showMsg" placeholder="有且只有 Ctrl 被按下的时候才触发"><br />
<input @click.exact="showMsg" placeholder="没有任何系统修饰符被按下的时候才触发"><br />
</div>
<script type="text/javascript">
//自定义键名 = 键码，可以去定制按键别名
Vue.config.keyCodes.huiche = 13 // 定义了一个别名按键
new Vue({
el: '#app',
methods: {
showMsg(e) {
console.log(e);
console.log("键位=", e.key, "---- 键码=", e.keyCode)
console.log("值：", e.target.value);
},
}
})
</script>
