Vue中常见的指令介绍以及那些我踩过的坑

news/2024/7/10 0:07:49 标签: vue

这篇文章继续给各位前端程序员们介绍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中的计算属性和监听以及过滤,喜欢的朋友可以关注我哟,每天都会给大家分享一篇前端开发相关的文章,希望大家共同进步,坚持学习


http://www.niftyadmin.cn/n/1319077.html

相关文章

Oracle 方法

语法&#xff1a; CREATE OR REPLACE FUNCTION <function_name> [(<parameters>)] RETURN <datatype> IS [declare section] BEGIN[<statement(s)>] RETURN <expression>; [EXCEPTION <exception handler(s);] END [<function_name>]…

git分支控制心得

1.git 删除本地分支 git branch -D dev 2. git 查看本地分支 git branch 3. git 查看本地分支和远程分支的区别 git branch -a 4. git 删除远程分支 git push origin -delete dev 5. git 切换分支 git checkout dev 6.git 删除远程不存在的本地分支 git fetch --prune

JDK1.5 AtomicLong实例

JDK1.5 AtomicLong实例 类 AtomicLong 可以用原子方式更新的 long 值。有关原子变量属性的描述&#xff0c;请参阅 java.util.concurrent.atomic 包规范。AtomicLong 可用在应用程序中&#xff08;如以原子方式增加的序列号&#xff09;&#xff0c;并且不能用于替换 Long。但是…

简单模拟实现数据库连接池

简单模拟实现数据库连接池 实例1&#xff1a; package com.bijian.thread;public class DB {//private static final int MAX_COUNT 10;private static final DB instance new DB();private int count 0;private int maxCount 0;private DB() {}public static DB getInstan…

async和await使用心得

最近简单的async 和 await 使用教程 await 函数智能在async中使用&#xff0c;他们两者的关系是在async函数执行的过程中遇见await修饰的函数async函数会先停止&#xff0c;执行&#xff0c;会先去执行await修饰的函数&#xff0c;等到await修饰的函数&#xff0c;执行完毕之后…

重载 覆盖 隐藏

【1】重载 &#xff08;1&#xff09;重载是指在同一个类内被声明的几个具有不同参数列的同名函数。 函数名必须相同&#xff0c;不考虑函数的返回值类型。 &#xff08;2&#xff09;示例代码如下&#xff1a; 1 #include<iostream>2 using namespace std;3 4 class Sa…

日常常用cmd命令总结:

日常常用cmd命令总结&#xff1a; 1.查看本机ip或者本机mac地址&#xff1a;ipconfig/all 2.进入某一盘符&#xff1a;d: 3.进入某一盘符下的某一文件夹&#xff1a;cd XXX 4.查看当前进程列表tasklist5.返回上一级目录cd.. 6.返回根目录cd\ 7.查看当前运行的服务services.msc…

javascript正则表达式的基础知识

javascript正则表达式的基础知识1.javascript 正则对象创建 和 用法 声明javascript 正则表达式 var reCat new RegExp("cat"); 你也可以 var reCat /cat/; //Perl 风格 &#xff08;推荐&#xff09;2.学习最常用的 test exec match sear…