vue——模板语法

Vue的模板语法

1、插值表达式：{{…}}

2、当我们看到vue指令后面跟着一个值得时候，这里的值就不再是一个字符串了，它指的是一定是一个JS的表达式。

①v-text=“name”;

表示让这个div标签里面的innerText的内容变成data数据里name的内容。效果和插值表达式一样，进行了转义，不会有任何样式的改变。

②v-html=“name”；

让这个div标签里的innerHTML的内容和name这个数据变量做绑定。不做任何的解析，把内容输出出来。

【v-html不会转译，内容按普通 HTML 插入 ，不会作为 Vue 模板进行编译，所以h1标签内容会加粗显示。

而v-text和{{}}会进行转译，将h1标签编译Vue模板。所以在页面中会直接显示h1标签结构。】

【转译和转义的两者区别如下：

转译：是指将一种语言编译成另一种语言。示例：将html标签转译成Vue模板

转义：是指由原义引申、比喻而形成的新意义。示例： 转义字符就是将反斜杠‘\’后面的字符转成新的的含义。即：\n 表示换行】

③插值表达式、v-text、v-html里面都是不仅可以写变量，还可以写js表达式。

<div id="app">
              <!-- 插值表达式 -->
             {{name}}
         <!-- v-text 内容进行了转义，不会有任何样式的改变。跟插值表达式功能一样,把一个数据变量显示在页面上 ，-->
               <div v-text="name"></div>
            <!-- v-html 数据变量做绑定。不做任何的解析，把内容输出出来-->
             <div v-html="name+'Lee'"></div>
              <!-- 插值表达式、v-text、v-html里面都是不仅可以写变量，还可以写js表达式 -->
   </div>
     <script>
          var vm = new Vue({
                       el:'#app',
                       data:{
                           name:'<h1>Dell</h1>'
                 }
        })
        </script>