【Vue3.0 ——指令学习】

news2024/11/19 7:45:43

v-text

期望值是string
在这里插入图片描述

v-html

期望值:string

注意:在你的站点上动态渲染任意的HTML是非常危险的,因为他很容易导致XSS攻击。请只对可信内容使用HTML差值,绝不要将用户提供的内容作为插值
scoped将不会作用于v-html,可以使用css modules

css modules用法:https://blog.csdn.net/weixin_47416539/article/details/129150073
在这里插入图片描述

v-show

期望值:any
通过css实现显示隐藏

v-if

期望值:any
通过dom实现显示隐藏
注意:v-if的优先级比v-for的优先级高
拓展:v-elsev-else-if

v-for

在这里插入图片描述

v-on

缩写:@
参数:event
修饰符:

  • .stop:阻止冒泡
  • .prevent:阻止默认事件
  • .captrue:阻止捕获
  • .self:只有事件从元素本身发生才触发处理函数
  • .once:只触发一次
  • .keycode:键盘事件触发
  • .left:鼠标left时触发
  • .right:鼠标right时触发
  • .middlle:鼠标middle时触发
  • .passive:通过{passive:true}附加dom事件
    在这里插入图片描述
    在这里插入图片描述
    缩写::或者.(当使用.prop修饰符)
    修饰符:
  • .camel:将短横线命名的attribute转变成驼峰命名
  • .prop:强制绑定为dom property
  • .attr:强制绑定为dom attribute
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述

v-model

双向绑定
修饰符:

  • .lazy:监听change事件而不是input
  • .number:将输入的字符串变为数字
  • .trim:去除首尾空格

v-solt

用于声明具名插槽或是期望接收props的作用域插槽
缩写:#

在这里插入图片描述

v-pre

跳过该元素及其所有子元素的编译
在这里插入图片描述

v-once

只渲染一次并跳过之后的更新
在这里插入图片描述

v-memo

缓存一个模板的子树。如果数组里的每个值都与最后一次的渲染相同,那么整个子树的更新将被跳过。
如果传入空数组会与v-once效果相同
在元素和组件上都可以使用
在这里插入图片描述
与v-for搭配使用,等于[]中的条件的时候才会进行渲染
在这里插入图片描述
当搭配v-for使用v-memo,确保两者都绑定在同一个元素上。v-memo不能用在v-for内部

v-cloak

在这里插入图片描述
用来解决页面页面闪现的问题

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/886361.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

【悬挂绝缘子的串效模型】测量每个绝缘子盘之间的电压并测量串效研究(Simulink)

💥💥💞💞欢迎来到本博客❤️❤️💥💥 🏆博主优势:🌞🌞🌞博客内容尽量做到思维缜密,逻辑清晰,为了方便读者。 ⛳️座右铭&a…

解析错误:‘import‘和‘export‘可能只出现在顶层

1、import引入文件时,提示Parsing error: ‘import’ and ‘export’ may only appear at the top leveleslint 中文含义:解析错误:import和export可能只出现在顶层,如下提示: 2、下载包npm i babel/eslint-parser -D 在此配置中…

算法学习总结

算法总结 文章目录 算法总结搜索遍历dfs树的深度树的重心图的连通块划分 bfs双端队列bfsbfs图问题 迭代加深双向搜索A*IDA*Morris遍历Manacher 数论质数判断质数分解质因数埃氏筛法线性筛法 约数求N的正约数集合——试除法求1~N每个数的正约数集合——倍除法 欧拉函数快速幂快速…

2008-2020年全国各省绿色金融发展指数(含原始数据)

2008-2020年全国各省绿色金融发展指数(含原始数据) 1、时间:2008-2020年 2、范围:30个省市 不含西藏 3、来源:原始数据整理自csmar、eps、wind等数据库 4、原始数据指标: A股上市环保企业新增银行贷款…

kaggle注册不显示验证码

edge浏览器 1.点击浏览器右上角三个点 2.点击扩展 3.点击管理扩展 4.点击获取Microsoft Edge扩展,在左上角输入Head Editor 5.输入https://www.azurezeng.com/static/HE-GoogleRedirect.json 6.下载后,点保存 成功!

spring框架,以及和spring框架相关的Java面试题和spring ioc的注入方式

目录 一.spring来源,以及介绍 1.spring诞生的背景 2.spring框架 介绍 3.spring框架在使用中的优点以及不足 3.1优点 3.2不足 3.3总结 4.为什么要使用spring 二.将spring框架部署在IDEA中 1.替换pom.xml 2.构建spring所需要的xml文件 三.spring的三种注入…

从针尖对麦芒,到丝滑入扣,记录那些BT需求

前言: 最近被一个“简单”的需求,搞的有点难受。需求其实很简单,就是记录某成品生产过程数据,然后进行展示,但因需求部门是管理部门。为了能获取足够多的参数来提高生产效率和研发进度。因此需要生产来统计收集对应生产…

文件IO编程 1 2

头文件包含路径 linux 操作系统分为两大空间:用户空间和内核空间 这样划分,是为了保护内核的核心组件,不被轻易访问和修改 系统调用:安全的访问内核空间 其核心是:函数API(API:用户编程接口&…

Ogami Organic Store有机商店WordPress主题

Ogami Organic Store有机商店WordPress主题是一个整洁且响应迅速的 WooCommerce WordPress 主题,适用于任何类型的食品、蔬菜店、化妆品或类似网站,这些网站需要功能丰富且美观的在线展示以及优雅灵活的设计。 网址: Ogami Organic Store有机商店WordPr…

信息与通信工程面试准备——信号与系统|10:23

8月16日 23:21 目录 ​编辑 1. 调制的作用 2. 放大器与振荡器的作用和区别 工作原理 输出信号 应用 反馈方式 设计复杂度 装置性质 3. 信号与系统:三大变换之间的关系? 4. 无码间串扰的条件 5. 冲激函数的作用? 研究的意义&…

Java免费自学网站推荐来啦!

Java自学的难度因人而异,取决于个人的学习能力、学习方法和学习态度等因素。对于一些有编程经验或者具备良好的逻辑思维能力的人来说,自学Java可能会相对容易些。而对于零基础的初学者来说,可能需要更多的时间和精力来理解和掌握Java的概念和…

进制转换:二进制、八进制、十六进制、十进制之间的转换

对于基础薄弱的读者,本节的内容可能略显晦涩和枯燥,如果你觉得吃力,可以暂时跳过,基本不会影响后续章节的学习,等用到的时候再来阅读。 上节我们对二进制、八进制和十六进制进行了说明,本节重点讲解不同进制…

无痛VSCode+clangd+lldb+cmake配置C/C++开发环境

前言 在C/C开发中,如果使用vscode作为开发平台的话,相信大家都会安装C/C扩展,在remote到远程一个机器上开发时,C/C扩展提供的自动补全等功能总是慢一拍,这让我感觉很不舒服,时间就了就人忍不下去了&#x…

考公-判断推理-逻辑判断-加强类

论点 论据 削弱 论点 转折之后 例题 例题 例题 例题 搭桥方向,论据推出论点 例题 例题 例题 例题 例题 例题 例题 例题 例题 例题 例题 例题 例题 例题 例题 例题 例题 例题 例题

【Redis】Redis的持久化(备份)

【Redis】Redis的持久化(备份) Redis的数据全部在内存里,如果突然宕机,数据就会全部丢失,因此必须有一种机制来保证Redis的数据不会因为故障而丢失,这种机制就是Redis的持久化机制。 如图所示&#xff0c…

将单个训练数据集文件拆分为:image文件和label文件(pytorch学习+蚂蚁蜜蜂数据集)

蚂蚁蜜蜂分类数据集下载链接:https://download.pytorch.org/tutorial/hymenoptera_data.zip 要实现如图操作: 将ants分为ants_image和ants_label 将bees分成bees_image和bees_label 创建ants_label和bees_label,并且以图片名作为txt文件的…

layui单选必填验证

效果&#xff1a; 代码 <div class"layui-form-item"><label class"layui-form-label layui-required-title">对此次活动内容输出是否满意&#xff1f;</label><div class"layui-input-block"><input type"ra…

int(M)、char(M) 、varchar(M)的用法

文章目录 MySQL中int、char、varchar的一般用法1、int (M)2、varchar(M)3、char(M)4、char(M) 和varchar(M)的区别4.1 区别1&#xff1a;定长和变长4.2 区别2&#xff1a;存储容量上4.3 区别3&#xff1a;在展示上4.4 区别4&#xff1a;在使用场景上4.5 区别5&#xff1a;在书写…

如何编写技术文档?

软件开发中&#xff0c;为你的软件系统编写文档并不是一件新鲜的事情。几乎所有人都明白这样的道理&#xff1a; 你的软件产品如何优秀对用户来说并不是最重要的&#xff0c;因为你的文档如果不够优秀&#xff0c;用户不会使用它&#xff01;即便用户在某些情况下不得不使用你…

uniapp app 实现右上角回首页;点homeButton返回上一页;onNavigationBarButtonTap不生效问题

场景&#xff1a; app&#xff0c;Android移动端 实现点击右上角图标&#xff0c;回首页。 问题&#xff1a;用了官网的 homeButton&#xff0c;图标正常展示了&#xff0c;也可点击&#xff0c;但每次点击后是会返回上一页而非首页。 后来查到说&#xff0c;要结合onNavigatio…