學vue需要哪些基礎（vue從入門到精通教程）

自從Facebook2013年推出React框架以來，基於UI元件的前端框架越來越流行，主要得益於元件的重用性，資料狀態的管理等特性。

谷歌也推出了基於元件的第二代Angular框架，致力於開發全平臺應用——Web、移動 Web、移動應用、原生應用和桌面原生應用，其最為核心的特點是：MVC、模組化、自動化雙向資料繫結、語義化標籤、依賴注入等等。

後期之秀Vue.js，其作者尤雨溪在谷歌就職時建立並於2014年釋出，自發布以來，由於其設計靈活，方便整合到現有專案中，並能輕鬆構建複雜的應用程式，因此Vuejs大受歡迎，現在成為三大前端主流框架之一。

為什麼選擇Vue?

在你閱讀本文時，你一定疑惑為什麼選擇Vue，以下的幾個理由是不是能打動你選擇Vue？

1、很容易整合上手 到現有專案。你可以在現有的網站中輕鬆整合Vue,無需引入新的工具設定複雜的流程，如果你習慣使用jQuery，那你也很容易上手Vue的。

2、基於** 元件** 的架構。允許應用程式模組化，元件化，方便快速構建現代化的單頁面應用程式（SPA）。

3、生態的完整性。幾乎你能想到的外掛，你都能在社羣裡找到。更重要的是，其重要的的庫比如路由，狀態管理等都是有Vue官方團隊進行維護，不像React生態，官方並不是很積極的提供解決方案。

4、 廣泛的使用 。從國外的GitLab到國內的阿里巴巴，尤其國內越來越多公司的使用，讓其成為國內前端必備技能。同時Vue.js成為PHP流行框架Laravel的預設前端庫。由於其使用的廣泛性，未來會有更多的人去投入到這個框架中，讓其生態更加強大，收益最大的就是我們每位開發者。

開始之旅

首先說明下，通過本篇Vue.js基礎知識的學習，筆者將帶著大家完成如下圖所示的練習：

主要實現以下功能：

1. 完成頁面效果的佈局
2. 引入Vue框架，實現資料的渲染
3. 點選表頭，實現資訊按照表頭的屬性進行排序

引入Vue

為了方便大家快速入門Vue, 本篇文章用最簡單的JS檔案引入方式來引入Vue框架，下篇文章筆者將詳細介紹用構建的方式建立vue專案，如下所示新建一個index.html檔案引入Vue檔案：

注：引入開發版是為了方便我們進行開發和除錯，生產環境應該引入vue.min.js版本

接下來我們建立Vue例項，程式碼如下：

new Vue({ el: "#main"});

此段程式碼的意思就是宣告Vue例項，並查詢DOM的id等於main的元素，用於接下來的資料內容呈現。

載入資料

為了讓上述Vue的例項，載入資料，我們需要提供資料。Vue內提供data屬性，用於載入資料來源。data屬性是響應式的，當這些屬性的值發生改變時，檢視將會產生“響應”，即匹配更新為新的值，並影響UI的顯示。

接下來我們在data屬性裡新增一些資料，在實際的應用場景，你會通過介面請求資料，為了方便演示，我們寫死一些資料，示例如下：

new Vue({ el: "#main", data: { heading: "前端達人開發部", employees: [ { "firstName": "amelia", "lastName": "austin", "photoUrl": "https://www.qianduandaren.com/demo/vue/img/women/1.jpg", "email": "[email protected]", "phone": "(651)-507-3705", "department": "Engineering" }, { "firstName": "bobbie", "lastName": "murphy", "photoUrl": "https://www.qianduandaren.com/demo/vue/img/women/2.jpg", "email": "[email protected]", "phone": "(925)-667-7604", "department": "Management" } ] }});

模板語法{{}}

現在我們有了資料，就需要進行介面資料的渲染和呈現，我們需要使用模板語法——一雙大括號 ( {{}} )，進行資料繫結。如下段程式碼所示：

{{ heading }}

你可以在這雙大括號裡包含任何有效的JavaScrip程式碼，如下所示，我們在其包含了一個運算語句：

The price is: ￥{{ price * 1.20 }} (inc. VAT)new Vue({ el: '#app', data: { price: 25 } });

雙括號區域將會顯示

The price is: ￥30 (inc. VAT)

在例項中，介面呈現前執行了JS語句的運算並將值進行顯示。

指令

實現更復雜的頁面程式，不能只是簡簡單單的資料呈現，因此Vue的模板語法還包含迴圈和條件顯示的邏輯指令，讓我們更好的處理頁面展現邏輯。指令的職責是，當表示式的值改變時，將其產生的連帶影響，響應式地作用於DOM。（類似AngularJS的ng-*指令）

v-for

前面我們介紹了載入資料的示例，你可能猜到了我們需要使用迴圈遍歷的方式遍歷集合用於資料的展現，v-for指令的作用就是遍歷資料集合中的每項內容，如下段程式碼所示：

 {{ employee.firstName }}{{ employee.lastName }}{{ employee.email }}{{ employee.phone }}{{ employee.department }}

從上述程式碼我們可以看出，我們在tr的屬性裡，新增了v-for指令，其代表在此DOM區域內進行迴圈，我們在此迴圈顯示了僱員的資訊。在這裡我們將圖片的src屬性寫死了，下面我們很快會介紹到用新的指令進行替代。

與react一樣，在Vue中渲染列表時，強烈建議您為每個元素提供一個唯一的鍵。這有助於Vue框架在新增和刪除元素時進行優化。你可以使用 :key 指令定義唯一的鍵值：

<tr v-for="user in users" :key="user.id>

如果實在沒有唯一的鍵值，你可以使用陣列索引，示例程式碼如下

..

v-if

另一個常見的指令就是條件渲染，v-if 只有當data屬性或表示式的計算結果為true時，使用該指令才會導致Vue呈現元素,如下段程式碼所示：

...No employees found

上述程式碼如果employee為空，則會顯示 No employees found 的資訊，這對於我們日後呼叫API載入資料的邏輯處理十分有用。

有v-if指令，自然會有v-else-if指令處理更復雜的條件處理，如下段程式碼所示：

...No employees found

從上述程式碼中，我們加入了一個 isLoadingData 屬性，這在我們動態載入資料的邏輯處理十分有用，因為是非同步載入資料涉及網路延遲等問題，資料載入前需要有個資訊提示使用者資料正在載入中。

v-bind

有時候，你需要將資料繫結到html元素的屬性上，例如url上的href屬性，img的src屬性。

還記得我們上面的例子，我們渲染資料時把img屬性寫死了，現在我們可以使用v-bind指令進行資料繫結，程式碼如下：

除了上述寫法外，我們可以用更簡短的語法，只需要在屬性前使用:字首即可，程式碼如下：

v-model

Vue還支援表單雙向繫結的概念，允許我們通過表單輸入動態更改資料的內容，如下段程式碼所示：

Text is: {{ text }}new Vue({ el: '#app', data: { text: 'Good golly, Miss Molly' }});

從上面的示例中，v-model指令將資料繫結到表單輸入框內，我們更改輸入框的值，p標籤區域的內容也隨之改變。

v-on

我們可以使用v-on:繫結事件監聽器，事件型別由引數指定。表示式可以是一個方法的名字或一個內聯語句，如果沒有修飾符也可以省略。

如下段程式碼所示，邏輯簡單，點選按鈕，將資料heading的屬性更改為Hello World，我們實現了內聯語句的繫結：

Click Me

除了使用 v-on:click 語法外，我們可以使用更短的語法進行繫結——@click， 在上面的例子我們實現了屬性的更改，我們還可以繫結自定義使用者方法，如下段程式碼所示：

new Vue({ el: "#main", data: { status: "" }, methods: { updateStatus(event) { const buttons = ['left', 'middle', 'right']; this.status = `You clicked the ${buttons[event.button]} button.`; } }});Toggle Me!{{ status }}

上述程式碼，我們將mousedown事件繫結了updateStatus方法，用於幫助使用者確定是點選了滑鼠左鍵還是右鍵，同時我們新增了第二個事件監聽contextmenu.prevent,用來阻止滑鼠右鍵預設的上下文選單行為。類似的還有其它常見事件修飾符：

.stop：阻止事件冒泡。

.prevent：阻止瀏覽器預設行為，比如頁面滾動等。

.capture：翻轉事件傳播方向，本來事件是按照最內元素到外元素執行的，叫事件冒泡，capture正好相反，讓元素從外到內傳播事件。

.self：元素只在繫結的元素上執行。

.once：繫結的事件只執行一次，之後失效。

Methods

Vue物件裡專門有Methods的屬性，方便我們自定義相關的方法，並在模板裡很容易的呼叫，正如上個示例，我們是這樣定義方法的：

methods: { updateStatus(event) { const buttons = ['left', 'middle', 'right']; this.status = `You clicked the ${buttons[event.button]} button.`; }}

Computed

有時候你需要自定義相關的方法監聽計算模板中的資料並進行相應，如果你想避免不必要的方法開銷，你可以使用Vue的”計算屬性“方案。

一個計算屬性其實就是一個函式，用來快取和返回資料。其函式依賴一個資料項，資料項發生改變，其函式就要重新運算，進行新的資料輸出。

為了實踐這個屬性，我們在資料項裡增加一個排序欄位屬性，如下所示：

data: { heading: "Staff Directory", sortBy: "firstName" employees: [ ... ]}

接下來，我們在標題列裡新增點選處理事件，以便更改sortBy的屬性，如下段程式碼所示：

AvatarFirst NameLast NameEmailPhoneDepartment

最後，讓我們在Vue屬性中，新增一個計算屬性，該屬性根據鍵值進行資料排序，如下段程式碼所示：

computed: { sortedEmployees() { return this.employees.sort((a, b) => a[this.sortBy].localeCompare(b[this.sortBy])) }}

接下來我們更改v-for區域的程式碼，將我們的計算屬性新增進去，示例程式碼如下：

...

由於Vue語句提供的魔法糖，輸出資料sortedEmployees被快取，當sortBy屬性改變時，sortedEmployees的值將會重新計算。

完成後的程式碼

基於前面的知識內容，我們最終完成的index.html程式碼如下：

Vue Staff Directory - Jump Start Vue.jsh1.ui.center.header { margin-top: 3em; }{{ heading }}AvatarFirst NameLast NameEmailPhoneDepartment {{ employee.firstName }}{{ employee.lastName }}{{ employee.email }}{{ employee.phone }}{{ employee.department }}new Vue({ el: "#main", data: { heading: "前端達人開發部", sortBy: 'department', employees: [ { "firstName": "amelia", "lastName": "austin", "photoUrl": "https://www.qianduandaren.com/demo/vue/img/women/1.jpg", "email": "[email protected]", "phone": "(651)-507-3705", "department": "Engineering" }, { "firstName": "bobbie", "lastName": "murphy", "photoUrl": "https://www.qianduandaren.com/demo/vue/img/women/2.jpg", "email": "[email protected]", "phone": "(925)-667-7604", "department": "Management" }, { "firstName": "kristin", "lastName": "terry", "photoUrl": "https://www.qianduandaren.com/demo/vue/img/women/3.jpg", "email": "[email protected]", "phone": "(021)-544-1184", "department": "Sales" }, { "firstName": "brandon", "lastName": "griffin", "photoUrl": "https://www.qianduandaren.com/demo/vue/img/men/1.jpg", "email": "[email protected]", "phone": "(509)-317-9506", "department": "Management" }, { "firstName": "tammy", "lastName": "gibson", "photoUrl": "https://www.qianduandaren.com/demo/vue/img/women/4.jpg", "email": "[email protected]", "phone": "(815)-727-0663", "department": "Support" }, ] }, computed: { sortedEmployees() { return this.employees.sort((a, b) => a[this.sortBy].localeCompare(b[this.sortBy])); } } });

小節

本篇文章的內容就到這裡，接下來給大家留個作業題（答案將在下期文章進行公佈），基於本文的例子，我們增加一個輸入框，實現僱員資訊的檢索功能（輸入僱員的全名或名字的部分內容，顯示資訊結果）。在下篇文章裡，我將繼續介紹如何工程化的構建Vue專案和Vue相關的工具，敬請期待。

更多精彩內容，請微信關注“前端達人”公眾號！