一.簡介

Vue是現在最流行的前端框架之一，而且相對于其他兩個框架React和Anglar來說也更加易學，而且它的作者是國人，中文文檔也很完善。

二.Vue基本概念

1.單文件
首先，我們來拋開那些復雜的框架配置，先從單文件開始學習Vue最基本的內容。這里引用了Vue框架的CDN，所以不需要任何配置即可使用Vue。

瀏覽器打開如下：

2.Vue實例
Vue框架中最重要的東西就是Vue實例，它是Vue框架的核心對象。在創建Vue實例時需要傳入一些參數，el參數是Vue實例的作用范圍；data參數是Vue實例使用的數據。在Vue實例對應的元素中，我們可以使用模板語法{{var}}來使用這些數據。

顯示效果：

三.模板語法

1.文本插值
文本需要寫在兩對花括號之間。當然這里其實不止可以寫單個變量，還可以寫組合表達式，例如{{text + new Date()}}。
所有在構造Vue實例時傳入的數據都是可響應的，也就是說只要數據發生改變，那么視圖的數據也會發生改變。如果希望數據不發生改變，需要使用v-once指令。所有v-開頭的都是Vue獨有的指令，這些指令將在后面介紹。

效果如下：

2.HTML插值
有時候需要操作原始HTML，Vue也提供了支持。要插入的HTML代碼需要使用v-html指令來指定，這個指令會將它所在的HTML代碼塊整個替換為要插入的HTML塊。由于可能導致XSS攻擊，所以最好不要隨便替換HTML塊。另外要替換HTML塊的話只能使用v-html指令，如果使用前面的文本插值的話，插入的只是一段文本。
3.屬性
文本插值只能插入文本，如果需要設置和修改HTML屬性的話，需要使用v-bind指令。

效果：

4.計算屬性
有時候程序邏輯比較復雜，可能需要對一個數據進行一些計算和處理。這時候就需要計算屬性了。當然由于模板語法支持表達式，所以也可以直接在{{}}中編寫表達式，但是不管從可讀性還是可維護的角度來說，計算屬性都是更好的選擇。
計算屬性需要在構造Vue實例的時候傳入computed屬性，然后在相應的函數中處理復雜邏輯。計算屬性可以向普通屬性那樣在視圖中使用。計算屬性有個優點就是惰性求值，下面的例子中，toUpper計算屬性依賴于words屬性，只要words不發生改變，那么多次訪問toUpper不會重新計算，而是會使用已有的結果。只有當words發生變化時，toUpper才會相應改變。

效果：

總結

以上是生活随笔為你收集整理的Vue前端框架快速入门的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。