Vue模板语法——数据绑定指令

一、数据绑定指令

1. v-text 填充纯文本

   相比插值表达式更加简洁

2. v-html 填充HTML片段

   • 存在安全问题
   • 本网站内部数据可以使用，来自第三方的数据不可以用

3. v-pre 填充原始信息

   显示原始信息，跳过编译过程（分析编译过程）

---

二、v-text 填充纯文本

1. v-text用法

   在需填充的标签中添加v-text指令

2. 例如

      <div id='app'>
        <div v-text="msg"></div>
      </div>
      <script type="text/javascript" src="js/vue.js"></script>
      <script type="text/javascript">
         new Vue({
               el:'#app',
               data:{
                  msg:'HelloWorld'
               }
         })
      </script>

结果：HelloWorld

三、v-html 填充HTML片段

1. v-html用法

   在需填充的标签中添加v-html指令

2. 例如

      <div id='app'>
        <div v-html="msg"></div>
      </div>
      <script type="text/javascript" src="js/vue.js"></script>
      <script type="text/javascript">
         new Vue({
               el:'#app',
               data:{
                  msg:'<h1>HelloWorld</h1>'
               }
         })
      </script>

结果：

HelloWorld

四、v-pre 填充原始信息

1. v-pre用法

   在需填充的标签中添加v-pre指令

2. 例如

      <div id='app'>
        <div v-pre>{{msg}}</div>
      </div>
      <script type="text/javascript" src="js/vue.js"></script>
      <script type="text/javascript">
         new Vue({
               el:'#app',
               data:{
                  msg:'<h1>HelloWorld</h1>'
               }
         })
      </script>