码迷,mamicode.com
首页 > 其他好文 > 详细

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

时间:2020-02-11 19:12:06      阅读:51      评论:0      收藏:0      [点我收藏+]

标签:传参   开发   区别   insert   创建   hand   enter   data   rev   

### 虚拟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的区别

标签:传参   开发   区别   insert   创建   hand   enter   data   rev   

原文地址:https://www.cnblogs.com/GGbondLearn/p/12296216.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
分享档案
周排行
mamicode.com排行更多图片
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!