事件处理
使用v-on：xxx或者@xxx绑定事件，xxx是事件别名
在methods对象中配置回调函数
在methods中配置函数时，不要使用箭头函数
click事件
点击事件，点击对应的标签或者按钮会产生一个事件
@click='demo' 和@click='demo($event)'效果一致，但后者可以传参
代码如下：
首先创建div标签：
<div id="root">
<h2>欢迎来到{{name}}世界</h2>
<!-- <button v-on:click="showInfo">点我提示信息1</button>-->
<button @click="showInfo1">点我提示信息1不传参</button>
<!-- 简写-->
<button @click="showInfo2(66,$event)">点我提示信息2 传参</button>
</div>
之后设置vue实例：
<script>
const vm = new Vue({
el:'#root',
data:{
name:'gugu'
},
methods:{
showInfo1(event){
console.log(this)//此处的this是vm
alert('hello')
},
showInfo2(number,event){
alert('hello hello')
console.log(number)
}
}
})
</script>
总结：
<!--
事件的基本使用：
1. 使用v-on:xxx 或@xxx绑定事件，其中xxx是事件名
2. 事件的回调需要配置在methods对象中，最终会在vm上
3. methods中配置的函数，不要用箭头函数，否则this指代的是window
4. methods中配置的函数，都是被vue所管理的函数，this指向的是vm或者组件实例对象
5. @click='demo' 和@click='demo($event)'效果一致，但后者可以传参
-->
事件修饰符
常见修饰符
-
prevent:阻止默认事件，例如网页跳转
-
stop:阻止事件冒泡 例如回调时触发其他事件
-
once：事件只触发一次，之后再点击无效
代码：
<div id="root"> <h2>welcom to {{name}} world</h2> <!--prevent:阻止默认事件--> <a href="http://www.bilibili.com" @click.prevent="showinfo">点我提示信息</a> <!--stop：阻止事件冒泡--> <div class="demo1" @click="showinfo"> <button @click.stop="showinfo">点我提示信息</button> <!--点一次按钮出现两次弹窗，先出现button中的，后出现div中的--> </div> <!--once:事件只触发一次--> <button @click.once="showinfo">点我提示信息</button> </div> <script> new Vue({ el:'#root', data:{ name:'gugu' }, methods:{ showinfo(){ alert('hello!') }, showMsg(msg){ console.log(msg) }, demo(){ for (let i = 0; i < 100000; i++) { console.log('#') } console.log('tired') } } }) </script>css配置：
<style> *{ margin-top: 20px; } .demo1{ height: 50px; background: aqua; } .box1{ padding: 5px; background: aquamarine; } .box2{ padding: 5px; background: orange; } .list{ width: 200px; height: 200px; background: palegreen; overflow:auto; } li{ height: 100px; } </style>
不常见修饰符
-
capture：使用事件的捕获模式，在捕获事件时执行
-
self：只有event.target是当前操作的元素时才触发事件
-
passive：事件的默认行为立即执行，无需等待事件回调执行完毕
<div id="root">
<h2>welcom to {{name}} world</h2>
<!--capture：使用事件的捕获模式,在捕获时执行-->
<div class="box1" @click.capture="showMsg(1)">
div1
<div class="box2" @click="showMsg(2)">
div2
</div>
</div>
<!--self：只有event.target是当前操作的元素时才触发事件-->
<div class="demo1" @click.self="showinfo">
<button @click="showinfo">点我提示信息</button>
</div>
<!--passive:事件的默认行为立即执行，无需等待事件回调执行完毕-->
<ul class="list" @wheel="demo" @click.passive>
<!--scroll:滚动条滚动触发事件-->
<!--wheel:鼠标滚轮滚动触发事件-->
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
</div>
vue实例与css同上
键盘事件
@keyup，keydown绑定键盘事件
<!-- keydown:摁下就触发事件 --> <!-- keyup:摁下松手才触发事件 -->
代码：
<body>
<!--
1. vue中常用的按键别名：
回车：enter
删除：delete（捕获删除和退格键）
退出：esc
空格：space
换行：tab(特殊，必须要使用keydown使用)
上：up
下：down
左：left
右：right
2.vue未提供别名的按键，可以使用按键原始的key值去绑定，但要注意转为kebab-case
3. 系统修饰键：ctrl，alt，shift，meta，tab
(1).配合keyup使用：按下修饰键的同时，再按下其他键，随后释放其他键，事件才被触发
(2).配合keydown使用：正常触发事件。
4. 也可以使用KeyCode去指定具体的按键
5. Vue.config.KeyCode.自定义键名 = 键码，可以定制按键别名
-->
<div id="root">
<h2>welcome to {{name}} world</h2>
<input type="text" placeholder="按下回车提示输入" @keyup.huiche="showInfo">
<!-- keydown:摁下就触发事件 -->
<!-- keyup:摁下松手才触发事件 -->
</div>
</body>
<script>
Vue.config.productionTip = false
Vue.config.keyCodes.huiche = 13 // 定义了一个别名
new Vue({
el:'#root',
data:{
name:"gugu",
},
methods:{
showInfo(e){
// console.log(e.key,e.keyCode)
console.log(e.target.value)
}
}
})
</script>
over
标签：log,事件处理,console,name,--,methods,事件,提示信息,day57 From： https://www.cnblogs.com/GUGUZIZI/p/17044748.html