学习day48

事件的基本使用:

            1.使用v-on:xxx或@xxx绑定事件,其中xxx是事件名

            2.事件的回调需要配置在methods对象中,最终会在vm上

            3.methods中配置的函数,不要用箭头函数!否则this就不是vm了

            4.methods中配置的函数,都是被Vue所管理的函数,this指向的是vm或组件实例对象

            5.@click=“demo”和@click="demo($event)"效果一致,但后者可以传参




    
    Vue中数据代理
    


    

    

欢迎来到{{name}}学习

Vue中的事件修饰符:

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

          2.stop:阻止事件冒泡(常用)

          3.once:事件只触发一次(常用)

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

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

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




    
    事件修饰符
    
    


    

    

欢迎来到{{name}}学习

点我提示信息
div1
div2

1.Vue中常用的按键别名

          回车:enter

          删除:delete(捕获“删除”和“退格”)

          退出:esc

          空格:space

          换行:tab

          上:up

          下:down (特殊,配合keydown使用)

          左:left

          右:right

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

        3.系统修饰键(用法特殊):ctrl,alt,shift,meta

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

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

        4.也可以使用keyCode去指定具体的按键

        5。Vue.config.keyCodes 自定义键名=键码,可以去定制按键别名




    
    键盘事件
    


    

    

欢迎来到{{name}}学习

计算属性:

            1.定义:要用的属性不存在,要通过已有的属性计算得来

            2.原理:底层借助了Object.defineproperty方法提供getter和setter

            3.get函数什么时候执行?

                (1)初次读取时会执行一次,

                (2)当依赖的数据发生改变时,会再次调用

            4.优势:与methods实现相比,内部有缓存机制(复用),效率更高,调试方便

            5.备注

               1.计算属性最终会出现在vm上,直接读取即可

               2.如果计算属性要被修改,那必须写set函数去响应,且set中要引起计算时依赖的数据发生改变




    
    姓名案例_计算属性实现
    


    


    
姓:
名:
测试:
全名:{{fullName}}

监视属性watch:

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

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

          3.监视的两种写法:

              (1)new Vue传入watch配置

              (2)通过vm.$watch监视




    
    天气案例_监视属性
    


    

    

今天天气{{info}}

深度监视:

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

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

        备注:

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

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




    
    天气案例_监视属性
    


    

    

今天天气{{info}}


a的值时:{{numbers.a}}

b的值时:{{numbers.b}}

今天差不多到这里了,感觉前端真的东西很多。

你可能感兴趣的:(学习)