官方的模板語法：https://cn.vuejs.org/v2/guide/syntax.html

vue使用的雙花括號的語法，mustache語法。

模板部分分為三部分，1.插入值 2.指令 3.縮寫

跟官網一毛一樣。不同的是我在實現的過程出現的問題會寫出來。

1.插入值：

1）插入文本：

html部分：{{ msg }} //官網寫的賊簡單，沒有給後臺js的部分

需要加入js，才能實現文本數據綁定。

<script>
export default{
    name:"HelloWorld",
    data(){
       return {
              msg:
 
"ojbk"
          }
     }
}
</script>
        

雙括號裏面的屬性,就是一個變量。既然是變量，所以唯一需要註意的就是符號+,數字會自動加和，{{1+“sdfsdfs”}}會直接連接在一起。

1）只渲染一次：

<span v-once> {{msg}} </span>

這個需要input的配合才能 看出效果。

2）原始的html,有的時候需要

<span v-html=‘msg‘></span>

<script>
export default {
    name:‘Helloworld
 
‘,
    data(){
        return {
               msg:‘<h1></h1>‘
         }
     }
}
</script>

需要註意的是v-html後面不需要家花開括號，只需講v-html當做屬性，插入到元素標簽，裏面的內容vue會自動渲染進去。v-html是一個指令，所以不能使用{{ }}

特性：註意自己賦值的時候，如果是布爾或者null這類的關鍵詞，需要特別註意。當返回的值是否定類的時候，不會發生渲染。

3）使用js，在｛｛｝｝ 可以使用js但是有限制，最多只支持單行的表達式，可以使用一些函數。、

2.指令：所謂的指令就是前綴掛v-的

指令的作用就是根據相應的條件影響Dom節點。例如v-html,通過綁定v-html,我們可以改變span內部的值。不需要通過雙括號傳值

1）if判斷:

<span if-v=‘switch‘></span>

後面跟的是判斷條件，通過變量的形式傳入，而vue通過data講前臺屬性名和變量綁定達到一起

2.）參數：一個指令可能會傳遞參數，通過冒號的方式使用：

<a v-bind:href=‘url‘>balabala</a>

v-bind用來綁定屬性，{{}}不用再標簽內部，不能作用在屬性上。

3) 修飾符：

<form v-on:submit.prevent="onSubmit">...</form>

3.縮寫：

：是v-bind:的縮寫

@是v-on的縮寫。

好了，寫的快吐血了，回頭再修改吧，如果想起了的話。

vue系列3--模板語法