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的区别的主要内容,如果未能解决你的问题,请参考以下文章