一.簡介

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

二.Vue基本概念

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

瀏覽器打開如下：

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

顯示效果：

三.模板語法

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

效果如下：

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

效果：

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

效果：

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。