Vue.js學習筆記(一)

2019 年 12 月 22 日
筆記

目前我司的後端主要是用PHP來寫,發現我們後端的html+js沒有採用組件的方式來做，導致程式碼之間重複率非常高,很難維護，舉一個簡單的粟子，比如現在我們有兩個頁面，創建和修改頁面,這兩個頁面都有一個選擇時間的控制項(datePicker),由於我們沒有採用組件化，我們需要分別在兩個頁面的html+js+css里分別寫兩遍同樣的程式碼

一旦我修改了創建頁面的選擇時間控制項的邏輯，也必然要在修改頁面copy同樣的邏輯，這樣的結果簡單是災難性的!正確的做法應該是用組件化的方式來做，這樣程式碼可復用，安全,可維護!

而且我發現我們的後端現在還是用jQuery來做,但是很遺撼的是jQuery已經過時了，具體原因請看這裡

簡單的總結一下就是現代瀏覽器的API已經足夠好用，加上vue,react等組件化框架的流行，直接操作DOM不再是好的方式!

我發現如果用當前大熱的Vue來做組件化會是一個很不錯的選擇！為此，今天花了一些時間學習了一下Vue,廢話不多說，進入正題

什麼是Vue

Vue.js是一個構建數據驅動的 web 介面的庫。Vue.js的目標是通過儘可能簡單的 API 實現響應的數據綁定和組合的視圖組件。 Vue的核心是一個響應的數據綁定系統，它讓數據與DOM保持同步非常簡單,在使用 jQuery 手工操作 DOM 時，我們的程式碼常常是命令式的、重複的與易錯的。Vue.js 擁抱數據驅動的視圖概念，它用特殊的語法將DOM綁定到底層數據，這樣我們只要操作數據，DOM便能相應地更新,避免了與DOM的直接操作,讓我們的程式碼更容易撰寫,理解與維護

如圖所示,Vue.js主要負責的是上圖綠色正方體ViewModel的部分，其在View層（即DOM層）與Model層（即JS邏輯層）之間通過ViewModel綁定了DOM Listeners與Data Bingings兩個相當於監聽器的東西。我們操作上圖的Model部分vue就相當於間接操作了DOM!

好了，知道了什麼是Vue，我們就來學習一下它的使用方式吧

起步

由於是入門級選手，所以未採用vue-cli,直接採用了用scrip這種最簡單的方式引入vue.js

<script src="https://unpkg.com/vue/dist/vue.js"></script>

好了，既然引入了vue.js,那我們來做一個最簡單的粟子吧

<div id="app">   {{ message }}  </div>

var app = new Vue({   el: '#app',   data: {     message: 'Hello Vue!'   }  })

刷新一下，可以在介面上看到以下內容

Hello Vue!

現在數據和DOM已經被綁定在一起了，所有的元素都是響應式的,不信？打開控制台，並修改app.message,介面是不是也變了:)

我們還可以通過以下方式來綁定DOM元素屬性

<div id="app-2">     <span v-bind:title="message">     Hover your mouse over me for a few seconds to see my dynamically bound title!     </span>  </div>

var app2 = new Vue({   el: '#app-2',   data: {     message: 'You loaded this page on ' + new Date()   }  })

效果如下

以上所示的v-bind屬性被稱為指令，指令都帶有前綴v-,以表示它們是vue.js提供的特殊的屬性，它們會在渲染過的 DOM 上應用特殊的響應式行為，這個指令的簡單含義是說：將這個元素節點的 title 屬性和 Vue 實例的 message 屬性綁定到一起。

條件與循環

我們可以通過v-if來控制切換一個元素的顯示

<div id="app-3">     <p v-if="seen">Now you see me</p>  </div>

var app3 = new Vue({   el: '#app-3',   data: {     seen: true   }  })

在控制台里設置app3.seen = false我們會發現Now you see me消失了。這個例子演示了我們不僅可以綁定 DOM 文本到數據，也可以綁定 DOM 結構到數據，而且，Vue.js 也提供一個強大的過渡效果系統，可以在 Vue 插入/刪除元素時自動應用過渡效果。

我們也可以用v-for指令來綁定數據到數組來渲染一個列表

<div id="app-4">     <ol>       <li v-for="todo in todos">       {{ todo.text }}    </li>     </ol>  </div>

var app4 = new Vue({   el: '#app-4',   data: {     todos: [       { text: 'Learn JavaScript' },       { text: 'Learn Vue' },       { text: 'Build something awesome' }     ]   }  })

1.Learn JavaScript  2.Learn Vue  3.Build something awesome

在控制台里，輸入

app4.todos.push({ text: 'New item' })

你會發現列表中多了一欄新內容。

處理用戶輸入

為了讓用戶和你的應用進行互動，我們可以用 v-on 指令綁定一個監聽事件用於調用我們 Vue 實例中定義的方法：

<div id="app-5">     <p>{{ message }}</p>     <button v-on:click="reverseMessage">Reverse Message</button>  </div>

效果如下

從以上可以看到,我們在沒接觸DOM的狀態下更新了應用的狀態,所有的DOM操作都由Vue來處理了，你只需要處理基本的邏輯就行了:)

另外介紹一個v-model指令，它使得在表單輸入和應用狀態中做雙向數據綁定變得非常輕巧。

<div id="app-6">     <p>{{ message }}</p>     <input v-model="message">  </div>

var app6 = new Vue({   el: '#app-6',   data: {     message: 'Hello Vue!'   }  })

效果如下

用組件構建(應用)

組件系統是 Vue.js 另一個重要概念，因為它提供了一種抽象，讓我們可以用獨立可復用的小組件來構建大型應用。如果我們考慮到這點，幾乎任意類型的應用的介面都可以抽象為一個組件樹：

在 Vue 里，一個組件實質上是一個擁有預定義選項的一個 Vue 實例：

// Define a new component called todo-item  Vue.component('todo-item', {   template: '<li>This is a todo</li>'  })

定義好了組件之後，我們就可以在另外的組件模板中將此組件插入:

 <ol>  <!-- Create an instance of the todo-item component -->   <todo-item></todo-item></ol>

我們注意到todo-item的組件的template是寫死的，這樣明顯不合理，我們應該將數據從父組件傳給子組件，對此,vue提供了一個prop欄位：

 Vue.component('todo-item', {  // The todo-item component now accepts a   // "prop", which is like a custom attribute.   // This prop is called todo.   props: ['todo'],   template: '<li>{{ todo.text }}</li>'  })

現在我們就可以用v-bind指令將todo傳到每一個重複的組件中了:

 <div id="app-7">     <ol>     <!-- Now we provide each todo-item with the todo object    -->     <!-- it's representing, so that its content can be dynamic -->     <todo-item v-for="item in groceryList" v-bind:todo="item"></todo-item>      </ol></div>

 Vue.component('todo-item', {   props: ['todo'],   template: '<li>{{ todo.text }}</li>'})var app7 = new Vue({   el: '#app-7',   data: {     groceryList: [       { text: 'Vegetables' },       { text: 'Cheese' },       { text: 'Whatever else humans are supposed to eat' }     ]   }  })

效果如下

1. Vegetables  2. Cheese  3. Whatever else humans are supposed to eat

我們已經將應用分割成了更小的單元，子元素通過props介面實現了與父元素的解藕,如果需要，我們還可以在不影響父元素的基礎上進一步為todo組件改進更多複雜的模板和邏輯

在大型應用中，組件化無疑是解決藕合問題的良藥，通過組件化，不僅能有效實現與外界的藕合，還能做到很好的復用，回到開頭的問題，如果用組件化解決多個頁面重複寫多次相同控制項的問題？

我們先定義一個datePicker組件

Vue.component('date-picker', {   props: ['xxx'],   template: 'xxx'})

定義好了之後，我們就可以在創建和修改頁面插入同樣的date-picker組件了

//創建頁面  <div id="app-7">     <date-picker></date-picker>  </div>    var app7 = new Vue({   el: '#app-7',   data: {   }  })

//修改頁面  <div id="app-7">     <date-picker></date-picker>    </div>    var app7 = new Vue({   el: '#app-7',   data: {   }  })

可以很清楚的看到這種方式，我們只需要維護date-picker即可，後續如果要用其添加比如初始顯示日期時，我們只需要從父元素傳給它即可,有效地實現了解藕

與自定義元素的關係

我們注意到以上的date-picker組件的制定非常類似於Web組件規範中的自定義元素，實際上Vue的組件就是參考了該規範，但仍有幾個關鍵的不同:

1.Web 組件規範仍然遠未完成，並且沒有瀏覽器實現。相比之下，Vue.js 組件不需要任何修補程式，並且在所有支援的瀏覽器（IE9 及更高版本）之下表現一致。必要時，Vue.js 組件也可以放在原生自定義元素之內。

2.Vue.js 組件提供了原生自定義元素所不具備的一些重要功能，比如組件間的數據流，自定義事件系統，以及動態的、帶特效的組件替換。