vue从入门到精通(七)：事件处理
1，事件的基本使用
1.使用v-on:xxx或 @xxx 绑定事件，其中xxx是事件名
2.事件的回调需要配置在methods对象中，最终会在vm上
3.methods中配置的所数，不要用箭头函数!否则this就不是vm了
4.methods中配置的函数，都是被Vue所管理的函数，this的指向是vm 或 组件实例对象
5.@click="demo”和 @click="demo($event)”效果一致，但后者可以传参
<title>事件的基本使用</title>
<script src="../js/vue.js"></script>
<body>
<div id="root">
<h1>您好，{{name}}</h1>
<!--<button v-on:click="showInfo">点我提示信息</button>-->
<button @click="showInfo">点我提示信息(不传参)</button>
<button @click="showInfo2(66,$event)">点我提示信息2(传参)</button>
</div>
</body>
<script type="text/javascript">
const vm = new Vue({
el:'#root',
data:{
name:'张三'
methods :{
showInfo(e){
console.log(e);
console.log(e.target.innerText);
//比处的this是vm
console.log(this === vm);
console.log(this);
}
showInfo2(number,e){
console.1og('你好同学!!',number);
console.log(e.target.innerText);
}
</script>
2，事件修饰符
<body>
<!--
vue中的事件修饰符:
1.prevent:阻止默认事件(常用);
2.stop:阻止事件冒泡(常用);
3.once:事件只触发一次(常用):
4.capture:使用事件的捕获模式;
5.self:只有event.target是当前操作的元素时才触发事件;
6.passive:事件的默认行为立即执行，无需等待事件回调执行完毕;
-->
<div id="root">
<h1>您好，{{name}}</h1>
<!-- prevent:阻止默认事件(常用);-->
<a @click.prevent="showInfo" href="https://www.baidu.com/">点击提示信息</a>
<!-- 2.stop:阻止事件冒泡(常用);-->
<div @click="showInfo">
<button @click.stop="showInfo">点击提示信息</button>
</div>
<!-- 3.once:事件只触发一次(常用):-->
<button @click.once="showInfo">点击提示信息</button>
</div>
</body>
<script type="text/javascript">
const vm = new vue({
el:'#root',
data:{
name:'张三',
},
methods:{
showInfo(e){
//e.preventDefault();//阻止默认行为
alert('你好同学!!');
}
}
</script>
3，键盘事件
1.Vue中常用的按键别名:
回车 =>enter
删除 => delete(捕获“删除”和“退格”键)
退出 =>esc
空格 =>space
换行 =>tab(特殊，必须配合keydown去使用)
上=> up
下=> down
左 =>left
右 =>right
2.vue未提供别名的按键，可以使用按键原始的key值去绑定，但注意要转为kebab-case(短横线命名)
3.系统修饰键(用法特殊):ctrl、alt、shift、meta
(1).配合keyup使用:按下修饰键的同时，再按下其他键，随后释放其他键，事件才被触发。
(2).配合keydown使用:正常触发事件。
4.也可以使用keycode去指定具体的按键(不推荐)
5.Vue.config.keyCodes.自定义键名 =键码，可以去定制按键别名
<!DOCTYPE html)
<html>
<head>
<meta charset="utf-8">
<title>事件的基本使用</title>
<script src="../js/vue.js"></script><body>
<div id="root">
<h1>您好，{{name}}</h1>
<input type="text" placeholder="按下回车提示输入" @keyup.enter="showInfo"/>
<!--<input type="text" placeholder="按下回车提示输入" @keyup.13="showInfo"/> -->
<input type="text”placeholder="按下回车提示输入" @keyup="showInfo"/>
</div>
<!--修饰符可以连续写-->
<a href="https://www.baidu.com" @click.prevent.stop="showInfo">点我提示信息</a>
<!--按下ctrl+y才触发事件-->
<input type="text" placeholder="按下回车提示输入" @keyup.ctrl.y="showInfo" ></div>
</body>
<script type="text/javascript">
Vue.config.keycodes.huiche=13
const vm = new Vue({
el:'#root',
data:{
name:'张三'
}
methods：{
showInfo(e){
console.log(e.key,e.keycode)
//if(e.keycode !== 13)return
console.log(e.target.value);
}
}
</script>
</html>
原文地址：https://blog.csdn.net/hjji12/article/details/144004860
免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！