Vue学习日记之三条文本指令

1、文本暴露问题

   在Vue实例中我们通过{{message}}向页面传输数据，但是有个问题是，在网速差的情况下，会暴露信息给用户，

当网页加载完毕之后才会出现我们想要的信息。

它不仅影响了用户体验，还暴露了我们的程序，是一种安全隐患。

2、解决办法

  我们有两种方法解决，一种是我们使用Vue的指令v-clocak可以解决，另一种是使用v-text指令

2.2.1 v-clocak

• 不需要表达式（赋值）
• 在元素上一直保持，直到编译结束，呈现出正确信息
• 搭配CSS中[v-clocak]{display:none}可以隐藏未编译完成的元素

  CSS样式表，我们规定了一个属性选择器，所有应用v-clocak的元素都将被隐藏

 [v-cloak]{
            display: none;
        }

html页面，我们规定了显示信息的p元素，应用了v-cloak指令，那么p元素直到编译结束之前都会存在v-cloak属性

 <div id="app"  >
   <p v-cloak>{{message}}</p>
  </div>

  又因为，我们之前定义了一个属性选择器，实现了所有带有v-cloak属性的元素都将被隐藏，于是，实现了，当网速不好，我们编译未完成时，元素p的内容被隐藏，当编译完成时，v-cloak属性消失，p元素显示出信息。

2.2.2 v-text

  我们使用v-text指令也能够解决这一问题

• 需要表达式v-text="message"，message是vue实例中data的属性meaasge
• 此指令会覆盖掉元素的textContent
• 在未编译成功时，不显示信息
• 输出为纯文本

 <div id="app"  >
   <p v-text="message">++++++</p>   <!--v-text覆盖掉元素中的内容-->
  </div>

<script>
    var vm=new Vue({
        el:"#app",
        data:{    
            message:"看，我覆盖掉了p元素中的信息"
        }
    })

运行结果图

2.2.3  v-html

  使用v-html同样可以向元素中输出信息

• 输出类型是html
• 会覆盖掉innerHTML，也就是开始标签和结束标签之间的html
• 内容按innerHTML插入-不会作为Vue模板进行编译
• 需要表达式v-html="message"，其中message中的文本信息可作为html内容进行解析，简单来说，就是message中的标签能够被正确解析

 <div id="app">
   <p v-html="message">****</p>
  </div>

<script>
    //创建的这个vue实例就是一个ViewModel
    var vm=new Vue({
        el:"#app",
        data:{
            message:"<h3>看，我显示出了标签</h3>"
        }

运行结果图

注意！！！在网站上动态的渲染html是非常危险的，很容易遭受到XXS攻击，建议只在可信的内容上，不要在用户输入的内容中渲染html。

3、正确的输出文本信息

  当我们要在元素内容中只插入文本信息，不影响到元素中之前存在的文本时，使用插入值表达式{{message}}

  当我们要在元素内容插入文本信息，要覆盖掉元素的textContent时，使用v-text指令。

  当我们要在元素内容中插入html文本时，使用v-html指令

 

 

 

 

 

 

•