Vue中的事件修饰符 键盘事件 监视属性watch 深度监视 简写

                        Vue中的事件修饰符

 1.Prevent:阻止默认事件(常用)

 @click.prevent阻止事件默认行为 

 点击提示信息

    2.stop:阻止事件冒泡

.stop  阻止事件冒泡 

       

           点我提示信息

        修饰符可以连续写

    点击提示信息 

       

    3.once:事件只触发一次

  .once:事件只触发一次

  点我提示信息1111

    4.capture:使用事件的捕获模式

                      .capture:使用事件的捕获模式 

       

            div1

           

                div2

           

       

    5.self:只有event.target是当前操作的元素是才触发事件

                 .self:只有event.target是当前操作的元素是才触发事件

       

            点我提示信息

         

    6.passive:事件的默认行为立即执行，无需等待事件回调函数执行完毕

         .passive:事件的默认行为立即执行，无需等待事件回调函数执行完毕 

         scroll 滚动条   wheel滚动轮的滚动  @wheel.passive 

         

             

• 1

             

• 2

             

• 3

             

• 4

         

                                  键盘事件

  1.Vue中常用的案件别名

        回车 => enter

        删除=> delect (捕获“删除”和“退格”)

        退出=>esc

        空格=>space

        换行=>tab  将焦点从当前元素移走  必须配合 keydown使用

        上=>up

        下=>down

        左=>left

        右=>right

 tab键将焦点从当前元素移走   

 @keyup.enter  不用写方法  用.enter 按下回车的时候会自动调用  不会输入一点调用一次

        @keyup.ctrl.y   同时点击 ctrl + y  才会调用 

   

 2.Vue未提供别名的按键 可以使用按键原始的key值去绑定 但注意要转化为kebab-case(短横线命名)

 3.系统修饰键 ctrl alt shift meta

     (1).配合keyup使用 按下修饰键的同时 再按下其他键 随后释放其他键 事件才被触发

     (2).配合keydown使用正常触发事件

     4.也可以使用 keyCode去指定具体的按键(不推荐)

  @keyup.13  = @keyup.Enter

     5.Vue.confing.keyCodes.自定义键名 = 键码  可以去定制按键名

 Vue.config.keyCodes.huice = 13 //定义了一个别名按键

                      监视属性watch

 1.当监视的属性变化时 回调函数自动调用 进行相关操作

watch:{

   isHot:{

       immediate:true,       // 初始化时让handler调用一下

      handler(newValue,oldValue){        //handler什么时候被调用 当isHot值发生改变时

     console.log("isHot被修改了",newValue,oldValue);

          },

        }

    }

        2.监视属性的属性必须存在 才能进行监视

        3.监视的两种写法

        (1)new Vue时传入watch配置

        (2)通过vm.$watch监视

const vm = new Vue({

    el:"#root",

    data:{

        isHot:true,

        x:1,

    },

    computed:{

        info(){

         return this.isHot ? '炎热' :'凉爽'  

        }

    },

 vm.$watch('isHot',{

    immediate:true ,// 初始化时让handler调用一下

         handler(newValue,oldValue){         //handler什么时候被调用 当isHot值发生改变时

         console.log("isHot被修改了",newValue,oldValue);

          },

    })

                               深度监视

 (1).Vue中的watch默认不检测对象内部值的改变(一层)

        'numbers.a':{                   //监视多级结构中某个属性的变化

            handler(newValue,oldValue){

                console.log("a改变了");

            }

        },

        (2)配置deep:true可以检测对象内部值改变(多层)

        'numbers':{                                    //监视多级结构中所有属性的变化

            deep:true,                                               //深度监视

            handler(newValue,oldValue){

                console.log("numbers改变了");

            }

        }

        备注:

        (1)Vue自身可以检测对象内部值的改变但Vue提供的watch默认不可以

        (2)使用watch时根据数据的具体结构 决定是否采用深度监视

                                          简写

watch: {                                            //正常写法

                isHot:{

                immediate:true ,// 初始化时让handler调用一下

              handler什么时候被调用 当isHot值发生改变时

                handler(newValue,oldValue){

              console.log("isHot被修改了",newValue,oldValue);

                  },

              },

                isHot(newValue, oldValue) {                                //简写

                    console.log("isHot被修改了", newValue, oldValue);

                }

 vm.$watch('isHot',{

          immediate:true ,// 初始化时让handler调用一下

          handler什么时候被调用 当isHot值发生改变时

        handler(newValue,oldValue){

         console.log("isHot被修改了",newValue,oldValue);

              },

     })

简写

        vm.$watch('isHot',function(newValue,oldValue){

            console.log("isHot被修改了",newValue,oldValue);

        })