这篇文章继续给各位前端程序员们介绍Vue相关的技术点。这篇文章主要分为以下几个部分:
何为指令?
指令的定义
常见的指令有哪些
指令的定义?
指令,说到指令其实就是操作DOM树的一些内置指令,大家都知道Vue采用虚拟DOM的渲染方法,那么我们就难去获取它的DOM节点,更难去直接操作DOM树,所以我们引入了指令,Vue的指令就是为了让大家更方便的操作DOM节点产生的。
常见的指令
- v-mode 主要的作用就是绑定表单元素,实现表单元素的双向绑定,可以简写为:变量
- v-text 绑定文本
- v-html 绑定html标签,解析html标签
- v-if 进行逻辑判断
- v-else
- v-show 控制元素的显示与隐藏
- v-for 便利DOM时使用
- v-bind 绑定html标签的一些属性,比如图片的src,div的calss名等
- v-on 主要是用来给html元素绑定事件,这样我们就可以操作元素
需要注意的点
这些是自己整理的一些日常开发过程中碰到比较多的指令相关的bug
- 尽量多用v-text而不是{{}},因为在一些变量的获取是异步的这样的话{{}}语法会出现一个问题,就是在数据渲染比较多的时候会可能先渲染为{{}}随后在改变成为获取的数据,造成屏幕闪动,但是在使用v-text解决闪动问题时还要配合v-clock使用。这一点需要注意
- 能用v-if控制尽量别用v-show,因为v-if和v-show是有本质意义上的区别,v-if是不会渲染这个DOM节点元素,但是v-show是会先渲染然后在隐藏,这样的话安全性比较低,可以利用js脚本,攻击你的网站,其实v-show说白了就是在控制DOM元素的display属性
- v-bind在使用变量的时候一定要现在data函数中先进行定义
- v-for循环的时候一定要记得写上key。
这篇文章就和大家分享这么多,先一篇文章会给大家分享Vue中的计算属性和监听以及过滤,喜欢的朋友可以关注我哟,每天都会给大家分享一篇前端开发相关的文章,希望大家共同进步,坚持学习