vue 的事件修饰符(v-on, v-model)

先谈谈我对vue 的一些指令的理解吧;
v-bind, 顾名思义是绑定的意思;但是只能绑定属性 语法糖:@

而 v-on 是绑定一个事件, 语法糖 :

v-model 是双向数据的绑定,只能用于表单中,

而值得一说的v-model 相当于是 v-bind 与v-on 的语法糖;

因为使用v-bind 与v-on 也可以实现双向数据的绑定; 使用event.target.value 即可实现

值得注意的是如果将这个方法直接写在input事件中的时候,此时需要写成
方法没有传参的时候,默认会将对应的事件传入
$event.target.value

 <div class="app">
        <h3>事件修饰符的总结</h3>
        <div>
             <input type="text" :value="msg" @input='clickEvent()'>{{msg}}
              <!-- 两者等效 -->
             <input type="text" v-model="msg1">{{msg1}}
        </div>
       
    </div>
    

    <script>
    
        const app=new Vue({
            el:'.app',
            data:{
                msg:'绑定一个数据'

            },
            methods:{
                clickEvent(){
                    console.log(event);
                   return this.msg=event.target.value;

                }

            }
        })
    </script>

但是这两者还是有些区别的,使用v-bind与v-on实现的双向数据是实时的,就是输入什么都会立马获取到,
而v-model 会在输入完后, 在按下其他键才会显示, (例如空格/enter键)

---

我们那就再说说事件修饰符吧, v-on 默认会有事件冒泡的,
对于利用事件冒泡,我们利用事件委托来达到一些意想不到的目的,

可是我们有时并不像产生事件冒泡,这就要利用到我们的事件修饰符了
常用的事件修饰符有：

.stop 阻止事件冒泡

.self 当事件在该元素本身触发时才触发事件

.capture 添加事件侦听器是，使用事件捕获模式

.prevent 阻止默认事件

.once 事件只触发一次

这个大家可以使用三个嵌套的div 就可以实现想要的操作;

值得注意的.self不会阻止时间冒泡,在其父辈的元素,也会响应;

还有要说的就是,v-on,还可以绑定 键盘事件,并且可以多个一起使用

常用的事件修饰符按键别名：

.enter
.tab
.delete
.esc
.space
.up
.down
.left
.right
.ctrl
.alt
.shift
.meta (window键)

v-model 的事件修饰符:

.lazy, 一次性输完了,才会将数组,绑定,(按下enter键才会生效)
.number ,在表单提交的时候input中的输数字默认会转成字符串的类型
.trim ,会将输入中的空格给去除掉;

---

由于这些事件是动态的就不给大家演示了,大家有空可以自己试试,自己尝试过了,才会理解的更加深刻

---

再说说input 的一些相关事宜
input中type 使用number 类型时,禁止输入其他的东西,否则会自动删除

从input框获取焦点到，输入值，失去焦点这个过程所有事件

onfocus -> 键盘输入 -> onkeydown -> onkeypress -> onkeyup ->
oninput -> 失去焦点 -> onchange -> onblur

onfocus

是当焦点转移到（点击，tab切换） input 框上边的时候触发；

onkeydown

键盘按下的时候触发，但是此时按下的值并没有被输入到 input ，所以，此时的 value 没有值，或者说它的值 只能是之前的旧值

另外，此时可以阻止按键的默认事件；

onkeypress

按键在按下之后，并且是按键松开之前触发的；

和 keydown 一样不能获取新的到 value；此时，也可以阻止按键的默认事件；

但是这个事件对一下按键的支持不好，一些非输入性质的按键（如；delete, backspare）不支持；（除enter）；

oninput

这个事件很贼，它的触发时机，从上面就可以看到，onpress 之后 onkeyup 之前；

此时，已经可以拿到 value，不能拿到keycode，不可以阻止默认事件了 ；

关键是这货明明是每次输入框的值变化时候出发的，抢了onchange 的饭碗；

另外，这东西是新的，IE9以下不支持，需要使用 onpropertychange；

还有这货，仅仅在input， textarea 支持；

---

onkeyup

按键在松开之后触发的；

能获取新的到 value，keycode；此时，不可以阻止按键的默认事件；

onchange

你敢说这是你认识的onchange吗？反正我是不敢；在失去焦点之后触发的，明明是 onchange 为什么是在失去焦点后触发的，还偏偏比 onblur 快；

能获取新的到 value，不能拿到 keycode；此时，不可以阻止按键的默认事件；

onblur

失去焦点时候触发，但是还是比 onchange 慢了；

能获取新的到 value，不能拿到 keycode；