一、事件的基本使用
- 使用v-on:xxx绑定事件，xxx是时间名，可简写为**@xxx**。
<button v-on:click='show' >点击</button>
<button @click='show1' >点击</button>- 事件的回调函数需要配置在methods对象中，最终会放在vm身上。
<body>
<div id="root">
<h1>你好，{{name}} </h1>
<button v-on:click='show' >点击</button>
</div>
<script>
const vm = new Vue({
el: '#root',
data:{name: 'rose'},
methods:{
show(){
alert('哈哈')
}
}
})
</script>
</body>- method中配置的函数都是被vue所管理的函数，this的指向都是vm或组件实例对象。不能用箭头函数，否则this的指向就不是vm了。
<body>
<div id="root">
<h1>你好，{{name}} </h1>
<button @click='showThis1' >点击</button>
<button @click='showThis2' >箭头函数点击</button>
</div>
<script>
const vm = new Vue({
el: '#root',
data:{name: 'rose'},
methods:{
showThis1(){
console.log(this) //指向vm
},
showThis2: ()=>{
console.log(this) //指向window
}
}
})
</script>
</body>- @click="test"和@click="test($event)"效果相同，但后者可以传参。
$event用来接收vue传入的触发当前事件的对象。
<body>
<div id="root">
<h1>你好，{{name}} </h1>
<button @click='test1' >无参函数 点击</button>
<button @click='test2($event,1)' >有参函数 点击</button>
</div>
<script>
const vm = new Vue({
el: '#root',
data:{name: 'rose'},
methods:{
test1(event){ //没有参数时，接收第一个参数默认为event对象
console.log(event) //触发事件的按钮对象
},
test2($event,a){ //有参数时，用$event来占位，用来接收event对象
console.log($event) //触发事件的按钮对象
console.log(a); //手动传入的实参
}
}
})
</script>
</body>二、事件修饰符
vue中的事件修饰符：
- prevent：阻止默认事件（常用）
- stop：阻止事件冒泡（常用）
- once：事件只触发一次（常用）
- capture：在事件捕获阶段就执行回调
- self：只有当event.target是当前操作的元素时才触发事件
- passive：事件的默认行为立即执行，无需等待事件的回调函数执行完毕
事件修饰符也可以连着写，例如：@click.stop.prevent
<body>
<div id="root">
<h1>Hello, {{name}} </h1>
<!-- 使用prevent修饰符取消a链接的默认跳转行为 -->
<a @click.prevent="showInfo" href="http://www.baidu.com">点击</a>
<hr>
<!-- 使用stop修饰符阻止事件冒泡 -->
<div @click='showInfo' id="box1">
div1
<div @click.stop='showInfo' id="box2">
div2
</div>
</div>
<hr>
<!-- 使用once修饰符 让事件只触发一次 -->
<button @click.once='showInfo'>点击</button>
<hr>
<!-- 使用self修饰符 当点击的对象是触发事件的对象时才执行回调函数 -->
<div @click.self='showInfo' id="box1">
div1
<div @click='showInfo' id="box2">
div2
</div>
</div>
<hr>
<!-- 使用passive修饰符 使事件的默认行为立即执行 不需要等待回调函数执行完 -->
<ul @wheel.passive="logInfo" id="list">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
</div>
<script>
const vm = new Vue({
el: '#root',
data: { name: 'rj' },
methods: {
showInfo() {
alert('hello~~~')
},
logInfo() {
for (let i = 0; i < 100000; i++) {
console.log('@');
}
}
}
})
</script>
</body>三、键盘事件
1. Vue中常用的别名
- enter：回车
- delete：删除或退格
- esc：退出
- space：空格
- tab：换行
- up：上
- down：下
- left：左
- right：右
<body>
<div id="root">
<!-- 使用回车键的别名：enter，当回车键被按下时触发事件 -->
<input @keyup.enter="show" type="text">
</div>
<script>
const vm = new Vue({
el: '#root',
methods: {
show(e){
console.log(e.target.value);
}
}
})
</script>
</body>2. 未提供别名的按键
Vue未提供别名的按键，可以用原始的key值去绑定，但是注意要使用短横线命名法：test-key。
<body>
<div id="root">
<!-- 使用键的原生key值绑定，注意要用短横线命名 -->
<input @keyup.backspace="show" type="text">
<input @keyup.caps-lock="show" type="text">
</div>
<script>
const vm = new Vue({
el: '#root',
methods: {
show(e){
console.log(e.target.value);
}
}
})
</script>
</body>3. 系统修饰键（用法特殊）
ctrl、shift、alt、meta（徽标键）
（1）配合keyup使用：按下修饰键的同时，再按下其他键，随后释放其他键，即可触发。
（2）配合keydown使用：正常触发
系统修饰键可以连着写，例如@keyup.ctrl.y
<body>
<div id="root">
<!-- 使用系统修饰符结合keyup使用：需要再按下其他键 -->
<input @keyup.ctrl="show" type="text">
<input @keyup.shift="show" type="text">
<!-- 使用系统修饰符结合keydown使用：正常使用 -->
<input @keydown.alt="show" type="text">
</div>
<script>
const vm = new Vue({
el: '#root',
methods: {
show(e){
console.log(e.target.value);
}
}
})
</script>
</body>4. 使用keyCode指定具体按键（不推荐）
<body>
<div id="root">
<!-- 使用keyCode：enter 13 -->
<!-- <input @keyup.13="show" type="text"> -->
</div>
<script>
const vm = new Vue({
el: '#root',
methods: {
show(e){
console.log(e.target.value);
}
}
})
</script>
</body>5. 自定义别名
Vue.config.KeyCodes.自定义名字 = 键码
<body>
<div id="root">
<!-- 自定义别名 -->
<input @keyup.huiche="show" type="text">
</div>
<script>
Vue.config.keyCodes.huiche = 13 //自定义别名
const vm = new Vue({
el: '#root',
methods: {
show(e){
console.log(e.target.value);
}
}
})
</script>
</body>
本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
