模板

特別聲明一： 本文主要學習並整理自51CTO課程《Vue.js 2.0之全家桶系列視頻課程》，講師湯小洋，跳轉鏈接見文末。

特別聲明二： 本文核心內容全部來自51CTO課程《Vue.js 2.0之全家桶系列視頻課程》，本人只是照着視頻課程敲了一遍代碼，所以本文定義爲翻譯。

---

模板的概念：

        Vue.js使用了基於HTML的模板語法，允許開發者聲明式地將DOM綁定至底層Vue實例的數據。即：模板的主要用於將DOM與Vue實例之間進行數據綁定。

---

數據綁定的相關概念：

• 雙向綁定：
          vue實例中的數據發生變化，對應DOM中的數據也會跟着變化；DOM中的數據發生變化，對應vue實例中的數據也會跟着變化。

• 單向綁定：
          vue實例中的數據發生變化，對應DOM中的數據也會跟着變化；而DOM中的數據發生變化，對應vue實例中的數據不會跟着變化。

---

數據綁定的實現方式：

雙向綁定的實現：使用v-modle。

• 示例：
  
• 使用chrome打開，效果如圖：
  

單向綁定的實現：使用{{}}或v-text或v-html。

• 使用{{}}：

  1. 提示：使用{{}}綁定數據時，可能會出現閃爍問題(即：在加載頁面時，若vue編輯較慢，則會會直接將{{…}}顯示出來，然後等vue編譯完後，纔會顯示對應的信息)；爲了解決:使用{{}}綁定時的閃爍問題，可以讓{{}}配合用v-cloak和css樣式一起使用。
     注：閃爍問題可見下面的操作示例，{{}}配合用v-cloak和css的使用方式可見下面的代碼示例。
  2. 示例：
     
  3. 使用chrome打開，效果如圖：
     

• 使用v-text：

  1. 示例：
     
  2. 使用chrome打開，效果如圖：
     

• 使用v-html：

  1. 示例：
     
  2. 使用chrome打開，效果如圖：
     

---

^_^ 如有不當之處，歡迎指正

^_^ 學習整理自
        51CTO課程《Vue.js 2.0之全家桶系列視頻課程》講師 湯小洋

^_^ 本文已經被收錄進《程序員成長筆記(六)》，筆者JustryDeng