Vue.js入門(一)
目前我司的后端主要是用PHP來寫,發(fā)現(xiàn)我們后端的html+js沒有采用組件的方式來做，導致代碼之間重復率非常高,很難維護，舉一個簡單的粟子，比如現(xiàn)在我們有兩個頁面，創(chuàng)建和修改頁面,這兩個頁面都有一個選擇時間的控件(datePicker),由于我們沒有采用組件化，我們需要分別在兩個頁面的html+js+css里分別寫兩遍同樣的代碼
一旦我修改了創(chuàng)建頁面的選擇時間控件的邏輯，也必然要在修改頁面copy同樣的邏輯，這樣的結果簡單是災難性的!正確的做法應該是用組件化的方式來做，這樣代碼可復用，安全,可維護!
而且我發(fā)現(xiàn)我們的后端現(xiàn)在還是用jQuery來做,但是很遺撼的是jQuery已經(jīng)過時了，具體原因請看這里
簡單的總結一下就是現(xiàn)代瀏覽器的API已經(jīng)足夠好用，加上vue,react等組件化框架的流行，直接操作DOM不再是好的模式!
我發(fā)現(xiàn)如果用當前大熱的Vue來做組件化會是一個很不錯的選擇！
為此，今天花了一些時間學習了一下Vue,廢話不多說，進入正題
什么是vue
Vue.js是一個構建數(shù)據(jù)驅動的 web 界面的庫。Vue.js的目標是通過盡可能簡單的 API 實現(xiàn)響應的數(shù)據(jù)綁定和組合的視圖組件。
Vue的核心是一個響應的數(shù)據(jù)綁定系統(tǒng)，它讓數(shù)據(jù)與DOM保持同步非常簡單,在使用 jQuery 手工操作 DOM 時，我們的代碼常常是命令式的、重復的與易錯的。Vue.js 擁抱數(shù)據(jù)驅動的視圖概念，它用特殊的語法將DOM綁定到底層數(shù)據(jù)，這樣我們只要操作數(shù)據(jù)，DOM便能相應地更新,避免了與DOM的直接操作,讓我們的代碼更容易撰寫,理解與維護
如圖所示,Vue.js主要負責的是上圖綠色正方體ViewModel的部分，其在View層（即DOM層）與Model層（即JS邏輯層）之間通過ViewModel綁定了DOM Listeners與Data Bingings兩個相當于監(jiān)聽器的東西。我們操作上圖的Model部分就相當于間接操作了DOM!
好了，知道了什么是Vue，我們就來學習一下它的使用方式吧
起步
由于是入門級選手，所以未采用vue-cli,直接采用了用scrip這種最簡單的方式引入vue.js
<script src="https://unpkg.com/vue/dist/vue.js"></script>
好了，既然引入了vue.js,那我們來做一個最簡單的粟子吧
//html
<div id="app">
{{ message }}
</div>
//js
var app = new Vue({
el: '#app',
data: {
message: 'Hello Vue!'
}
})
刷新一下，可以在界面上看到以下內容
Hello Vue!
現(xiàn)在數(shù)據(jù)和DOM已經(jīng)被綁定在一起了，所有的元素都是響應式的,不信？打開控制臺，并修改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 上應用特殊的響應式行為，這個指令的簡單含義是說：將這個元素節(jié)點的 title 屬性和 Vue 實例的 message 屬性綁定到一起。
條件與循環(huán)
我們可以通過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我們會發(fā)現(xiàn)Now you see me消失了。
這個例子演示了我們不僅可以綁定 DOM 文本到數(shù)據(jù)，也可以綁定 DOM 結構到數(shù)據(jù)，而且，Vue.js 也提供一個強大的過渡效果系統(tǒng)，可以在 Vue 插入/刪除元素時自動應用過渡效果。
我們也可以用v-for指令來綁定數(shù)據(jù)到數(shù)組來渲染一個列表
<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' })
你會發(fā)現(xiàn)列表中多了一欄新內容。
處理用戶輸入
為了讓用戶和你的應用進行互動，我們可以用 v-on 指令綁定一個監(jiān)聽事件用于調用我們 Vue 實例中定義的方法：
<div id="app-5">
<p>{{ message }}</p>
<button v-on:click="reverseMessage">Reverse Message</button>
</div>
var app5 = new Vue({
el: '#app-5',
data: {
message: 'Hello Vue.js!'
},
methods: {
reverseMessage: function () {
this.message = this.message.split('').reverse().join('')
}
}})
效果如下
從以上可以看到,我們在沒接觸DOM的狀態(tài)下更新了應用的狀態(tài),所有的DOM操作都由Vue來處理了，你只需要處理基本的邏輯就行了:)
另外介紹一個v-model指令，它使得在表單輸入和應用狀態(tài)中做雙向數(shù)據(jù)綁定變得非常輕巧。
<div id="app-6">
<p>{{ message }}</p>
<input v-model="message">
</div>
var app6 = new Vue({
el: '#app-6',
data: {
message: 'Hello Vue!'
}
})
效果如下
用組件構建(應用)
組件系統(tǒng)是 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是寫死的，這樣明顯不合理，我們應該將數(shù)據(jù)從父組件傳給子組件，對此,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>'
})
現(xiàn)在我們就可以用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
我們已經(jīng)將應用分割成了更小的單元，子元素通過props接口實現(xiàn)了與父元素的解藕,如果需要，我們還可以在不影響父元素的基礎上進一步為todo組件改進更多復雜的模板和邏輯
在大型應用中，組件化無疑是解決藕合問題的良藥，通過組件化，不僅能有效實現(xiàn)與外界的藕合，還能做到很好的復用，回到開頭的問題，如果用組件化解決多個頁面重復寫多次相同控件的問題？
我們先定義一個datePicker組件
Vue.component('date-picker', {
props: ['xxx'],
template: 'xxx'
})
定義好了之后，我們就可以在創(chuàng)建和修改頁面插入同樣的date-picker組件了
//創(chuàng)建頁面
<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即可，后續(xù)如果要用其添加比如初始顯示日期時，我們只需要從父元素傳給它即可,有效地實現(xiàn)了解藕
與自定義元素的關系
我們注意到以上的date-picker組件的制定非常類似于Web組件規(guī)范中的自定義元素，實際上Vue的組件就是參考了該規(guī)范，但仍有幾個關鍵的不同:
1.Web 組件規(guī)范仍然遠未完成，并且沒有瀏覽器實現(xiàn)。相比之下，Vue.js 組件不需要任何補丁，并且在所有支持的瀏覽器（IE9 及更高版本）之下表現(xiàn)一致。必要時，Vue.js 組件也可以放在原生自定義元素之內。
2.Vue.js 組件提供了原生自定義元素所不具備的一些重要功能，比如組件間的數(shù)據(jù)流，自定義事件系統(tǒng)，以及動態(tài)的、帶特效的組件替換。
如有興趣，請關注我的公眾帳號:)
