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

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  展示页面，类似于一些选项卡