Vue基础事件

xiaoxiao2022-07-14 148

事件

指令v-on

格式 v-on:eventType = “事件处理程序名称”

简写 @eventType = ‘事件处理程序名称’

参数如果参数中需要事件对象，在方法调用的时候，使用一个叫做 $event的作为实际参数

事件修饰符

修饰符事件的修饰符格式： v-on:click.xxx = ‘handler’ xxx指的是修饰符的名称

问题：修饰符使用有什么好处？

举例：事件冒泡案例

分析：发现 e.stopPropagation() 在每一个方法中都要使用，这个时候发现代码很冗余

解决：事件修饰符

总结：用事件修饰符可以解决代码冗余。代码：

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script> <style> .big{ width: 300px;height: 300px; background: red; } .middle{ width: 200px;height: 200px; background: purple; } .small{ width: 100px;height: 100px; background: blue; } </style> </head> <body> <div id="app"> <div class="big" @click.stop = "bigHandler"> <div class="middle" @click.stop = "middleHandler"> <div class="small" @click.stop = "smallHandler"></div> </div> </div> <hr> <div class="big" @click.self = "bigHandler"> <div class="middle" @click.self = "middleHandler"> <div class="small" @click.self = "smallHandler"></div> </div> </div> </div> </body> <script> new Vue({ el: '#app', methods: { bigHandler (e) { // e.stopPropagation() alert('big') }, middleHandler (e) { // e.stopPropagation() alert('middle') }, smallHandler (e) { // e.stopPropagation() alert( 'small' ) } } }) </script> </html>

按键修饰符当我们想要敲下某一个按键的同时出发某个事件，就有了按键事件，但是在每一个事件的出发过程中都加入键盘事件，就导致了代码冗余并且会造成冲突，

get_user_input ( e ) { const keyCode = e.keyCode const target = e.target if( keyCode === 13 ){ console.log( target.value ) } },

于是vue就将这部分代码封装在自己的 Vue.js中，然后我们来调用这个功能，我们通过按键修饰符来使用，这个功能实现了复用,按键修饰符支持建码，字母等

自定义按键修饰符键盘码

Vue.config.keyCodes.p = 80

表单双向数据绑定

双向数据绑定： VM改变，V响应 V改变， VM也会响应

双向数据绑定原理/数据驱动/深入响应式原理：

vue是通过数据劫持和事件的发布订阅来进行数据驱动的，当我们在data选项中定义数据后，vue会通过observer（观察者）监听data选项，将data选项中的所有key通过es5的Object.definedPropty进行getter和setter设置，当数据绑定在DOM上是，就会触发getter,给DOM设置初始值，当我们在V(视图中)输入内容时，就会触发setter ,就可以获得最新的值，通过watch（监听）通知Vue进行V(视图)重新渲染

vue中通过 v-model 来进行双向数据绑定

v-model只用于表单元素

v-model默认绑定 value属性

格式：

举例：购物车的加减

<div id="app"> <div> <button @click = "decrement"> - </button> <input type="text" v-model = 'number'> <button @click = "increment"> + </button> </div> </div> <script> new Vue({ el: '#app', data: { msg: ' hello 1902 ', num: 0.898098908, number: 1 }, methods: { increment () { //加 this.number ++ }, decrement () { // 减 this.number -- } } }) </script>

单向实现双向数据绑定

利用事件触发，input在不断触发的同时，不断在new vue中的msg赋值，因此导致h3的内容在input的vlue值改变的同时也在不断的改变

<div id="app"> <input type="text" :value = "msg" @input = "getValue"> <h3> {{ msg }} </h3> </div> new Vue({ el: '#app', data: { msg: '请输入' }, methods: { getValue ( e ) { var val = e.target.value this.msg = val

最新回复(0)