vue01----虚拟DOM、指令、事件修饰符、按键修饰符、双向数据绑定、v-if和v-show的区别
原创
©著作权归作者所有:来自51CTO博客作者蓝色海岛的原创作品,请联系作者获取转载授权,否则将追究法律责任
虚拟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数据绑定
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 展示页面,类似于一些选项卡
提问和评论都可以,用心的回复会被更多人看到
评论
发布评论
相关文章
-
vue的事件修饰符和按键修饰符
事件修饰符Vue.js 为 v-on 提供了事件修饰符来处理 DOM 事件细节,如:event.preventDefault() 或 event.stopPropag
vue event callback 修饰符 vue.js -
Vue.js按键修饰符及v-model修饰符
Vue.js按键修饰符及v-model修饰符示例
vue.js typescript 前端 前端框架 开发语言 -
Vue.js事件修饰符及v-model双向数据绑定
事件冒泡是当事件触发时,会像气泡一样,从DOM树的底层,一层一层往上面
javascript html 前端 css 修饰符 -
v-on修饰符
...
JAVA