事件处理
事件的基本使用
- 使用v-on : xXX或@xxx绑定事件，其中xxx是事件名;
- 事件的回调需要配置在methods对象中，最终会在vm上;
- methods中配置的函数,不要用箭头函数!否则this就不是vm了;
- methods中配置的函数，都是被Vue所管理的函数，this的指向是vm或组件实例对象
- @click="demo”和@click="demo($event)”效果一致，但后者可以传参;
<script src="../js/vue.js"></script>
</head>
<body>
<div id="root">
<h1>欢迎{{name}}来到</h1>
<button @click="showInfo1">点我弹出提示1(不传参)</button>
<button @click="showInfo2(66,$event)">点我弹出提示2(传参)</button>
</div>
</body>
<script>
Vue.config.productionTip = false;
const vm = new Vue({
el: "#root",
data: {
name: 'feliks',
},
methods: {
showInfo1(event) {
alert('hello')
},
showInfo2(number) {
alert(number)
}
}
})
</script>
事件修饰符
- prevent: 阻止默认事件（常用）;
- stop:阻止事件冒泡（常用）;
- once:事件只触发一次（常用）;
- capture:使用事件的捕获模式;
- self:只有event.target是当前操作的元素时才触发事件;
- passive:事件的默认行为立即执行，无需等待事件回调执行完毕;
<!DOCTYPE html>
<html lang="en">
<head>
<script src="../js/vue.js"></script>
</head>
<style>
<!--style文件省略-->
</style>
<body>
<div id="root">
<h1>欢迎{{name}}</h1>
<a href="http://felikschen.vcn.ink" @click.prevent="showInfo">我能阻止默认行为</a>
<div @click="showInfo" class="demo1">
<button @click.stop="showInfo">我能阻止冒泡</button>
</div>
<button @click.once="showInfo">我只触发一次</button>
<div class="div1" @click.capture="showMsg(1)">
div1
<div class="div2" @click="showMsg(2)">
div2
</div>
</div>
<div @click.self="showInfo" class="demo1">
<button @click="showInfo">我能阻止冒泡</button>
</div>
<ul class="list" @wheel.passive="demo">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
</div>
</body>
<script>
Vue.config.productionTip = false;
new Vue({
el: "#root",
data: {
name: 'feliks',
},
methods: {
showInfo(e) {
alert('要去我的主页吗?')
},
showMsg(msg) {
console.log(msg);
},
demo() {
for (let i = 0; i < 10000; i++) {
console.log('#');
}
}
}
})
</script>
</html>
键盘事件
- Vue中常用的按键别名
- 回车=>enter
- 删除=>delete(捕获删除”和“退格”键)
- 退出=>esc
- 空格=>space
- 换行 =>tab(特殊，必须配合keydown使用)
- 上=> up
- 下 = down
- 左=> left
- 右=> right
- Vue未提供别名的按键，可以使用按键原始的key值去绑定，但注意要转为kebab-case（短横线命名)
- 系统修饰键(用法特殊）:ctrl、alt、shift、meta(win键)
- (1).配合keyup使用:按下修饰键的同时，再按下其他键，随后释放其他键，事件才被触发。
- (2).配合keydown使用:正常触发事件。
- 也可以使用keyCode去指定具体的按键(不推荐)
- Vue.config.keyCodes.自定义键名=键码，可以去定制按键别名
<body>
<div id="root">
<h1>欢迎{{name}}</h1>
<input type="text" placeholder="按下回车提示" @keyup.huiche="showInfo">
</div>
</body>
<script>
Vue.config.productionTip = false;
new Vue({
el: "#root",
data: {
name: 'feliks',
},
methods: {
showInfo(e) {
console.log(e.target.value);
console.log(e.key, e.keyCode);
}
}
})
</script>
|
