vue01----虚拟DOM指令事件修饰符按键修饰符双向数据绑定v-if和v-show的区别

Posted wuqilang

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了vue01----虚拟DOM指令事件修饰符按键修饰符双向数据绑定v-if和v-show的区别相关的知识,希望对你有一定的参考价值。

### 虚拟DOM:

    虚拟DOM就是内存中的一个变量,是一个对象结构

    前端效率优化:最致命的问题就是DOM操作,尽量减少DOM操作

    vue的高效:
        1、虚拟DOM页面渲染高效
        2、js   ①获取数据②根据数据渲染界面DOM操作 for
        vue将开发者的精力从DOM操作上转移到了数据操作上,数据变页面变

### 指令:

    内置指令

        v-if
        v-show

        v-on----事件绑定
            语法:  v-on:事件名称="事件函数"
                v-on:click="事件函数"
            简写:  @事件名称(需要传参时加(),不需要传参时不用加()。在事件函数中,用this可以访问到data中的数据:this.msg=1907)

        事件对象:($event)
            如果需要事件对象,只需要给函数传递一个$event。
            @click="clickHandler($event)"   将事件对象e传过去,默认参数是事件对象,不传参时,参数默认是e;如果有其他参数,需要通过$event手动传递。

        v-test
            值为data中的数据,null和undefined无法显示,可以用三元表达式进行判断
            1、解析data中的数据
            2、可以解析js的表达式
            底层原理:innerText
            简写:{{}}----插值法
        
        v-html
            值为data中的数据
            1、解析data中的数据
            2、可以解析js的表达式
            底层原理:innerHTML
            v-html和v-text是一样的,不同的是v-html可以解析html标签

        v-bind
            给元素绑定属性
            语法:v-bind:属性=属性值
            简写:  :属性=属性值
            v-bind绑定class:
                myClass:"box1 box2"
                myClass:["box1","box2"]
                myClass:{
                    box1:true,
                    box2:true
                }

        v-for
            用来遍历数组、对象、字符串、数字……
            如果报波浪线警告,加    :key="index"

        v-pre
            不解析{{}}

        v-cloak
            防止{{}}在vue.js没有加载进来的时候显示,需要写个样式:[v-clock]:{display:none;}

        v-once
            数据值解析一次



    自定义指令

        创建一个自动聚焦的自定义指令:
            Vue.directive("focus",{
                inserted(el){
                    el.focus()
                }
            })

### 事件修饰符:

    stop    阻止冒泡    @contextmenu.prevent=""----阻止右键默认事件
    self    只针对自己有效
    prevent     阻止浏览器默认事件
    enter   按下回车    @keydown.enter="downClick"----按下回车时触发事件
    once    事件只绑定一次      语法:指令.修饰符.修饰符
    capture     取消捕获

### 按键修饰符:(效率更高)

    enter   @keyup.enter----按下enter键抬起时触发
    esc     @keyup.esc----按下esc键抬起时触发
    left    @keyup.left----按下left键抬起时触发
    right   @keyup.right----按下right键抬起时触发
    up
    down
    tab
    delete
    space


### 双向数据绑定

    v-model----将表单元素的value和data数据绑定
 

### Q:

    1、v-if和v-show的区别:
        ①v-if底层是控制元素的创建和销毁,v-show是操作元素的display属性。v-if的开销要大一点,判断登录和未登录状态时用这个,但是它并未操作DOM,vue中都是操作的虚拟DOM。
        ②v-if配合v-else-if和v-else使用。
        场景:v-if  权限校验的时候
             v-show  展示页面,类似于一些选项卡


以上是关于vue01----虚拟DOM指令事件修饰符按键修饰符双向数据绑定v-if和v-show的区别的主要内容,如果未能解决你的问题,请参考以下文章

Vue常用修饰符

vue小总结

Vue之自定义按键及指令

Vue中的事件修饰符,按键修饰符

Vue—事件修饰符

Vue—事件修饰符