 |
VOOZH | about |
|
VOOZH | about |
相信大多數前端開發人員，都使用過Angular、React或者Vue.js。他們都通過數據綁定的方法，提升了開發效率。而現在，無論在Angular，React，還是Vue.js中，都能非常方便的通過野狗，來實現快速開發。下面，給大家介紹下Vue.js，以及如何在Vue.js中使用野狗。
Vue.js的開發初衷2013年末，我還在Google Creative Lab工作。當時在項目中使用了一段時間的Angular，在感嘆數據綁定帶來生產力提升的同時，我也感到Angular的API設計過於繁瑣，使得學習曲線頗為陡峭。
出於對Angular數據綁定原理的好奇，我開始 「造輪子」，自己實現了一個非常粗糙的、基於依賴收集的數據綁定庫。這就是Vue.js的前身。同時在實際開發中，我發現用戶界面完全可以用嵌套的組件樹來描述，而一個組件恰恰可以對應MVVM中的ViewModel。於是我決定將我的數據綁定實驗改進成一個真正的開源項目，其核心思想便是 「數據驅動的組件系統」。
— — Vue.js創始人 Evan You
MVVM 數據綁定MVVM的本質是通過數據綁定連結View和Model，讓數據的變化自動映射為視圖的更新。Vue.js在數據綁定的API設計上借鑑了Angular的指令機制：用戶可以通過具有特殊前綴的HTML 屬性來實現數據綁定，也可以使用常見的花括號模板插值，或是在表單元素上使用雙向綁定：
<!– 指令 –>
<span v-text=」msg」></span>
<!– 插值 –>
<span>{{msg}}</span>
<!– 雙向綁定 –>
<input v-model=」msg」>
插值本質上也是指令，只是為了方便模板的書寫。在模板的編譯過程中，Vue.js會為每一處需要動態更新的DOM節點創建一個指令對象。每當一個指令對象觀測的數據變化時，它便會對所綁定的目標節點執行相應的DOM操作。基於指令的數據綁定使得具體的DOM操作都被合理地封裝在指令定義中，業務代碼只需要涉及模板和對數據狀態的操作即可，這使得應用的開發效率和可維護性都大大提升。
圖1 Vue.js的MVVM架構
與Angular不同的是，Vue.js的API里並沒有繁雜的module、controller、scope、factory、service等概念，一切都是以「ViewModel 實例」為基本單位：
<!– 模板 –>
<div id=」app」>
{{msg}}
</div>
// 原生對象即數據
var data = {
msg: 『hello!』
}
// 創建一個 ViewModel 實例
var vm = new Vue({
// 選擇目標元素
el: 『#app』,
// 提供初始數據
data: data
})
渲染結果：
<div id=」app」>
hello!
</div>
在渲染的同時，Vue.js也已經完成了數據的動態綁定：此時如果改動data.msg的值，DOM將自動更新。是不是非常簡單易懂呢？除此之外，Vue.js對自定義指令、過濾器的API也做了大幅的簡化，如果你有Angular的開發經驗，上手會非常迅速。
如何在Vue.js中使用野狗了解了Vue.js之後，我們看看如何實現Vue.js與野狗的實時數據交互。
1、如果使用<script> 全局引入： 如果Vue 存在會自動安裝。
<head>
<!– Vue –>
<script src=」https://cdn.jsdelivr.net/vue/latest/vue.js」></script>
<!– Wilddog –>
<script src=」https://cdn.wilddog.com/sdk/js/current/wilddog.js」></script>
<!– WildVue –>
<script src=」https://cdn.wilddog.com/libs/wild-vue/1.0.4/wildvue.min.js」></script>
</head>
2、在模塊化環境中，比如CommonJS
npm install vue wilddog wildvue –save
var Vue = require(『vue』)
var WildVue = require(『wildvue』)
var Wilddog = require(『wilddog』)
// 在模塊化環境中需要使用 user 安裝
Vue.use(WildVue)
var vm = new Vue({
el: 『#demo』,
wilddog: {
//簡單語法
//默認作為數組綁定
anArray: new Wilddog(『url/to/my/collection』),
// 也可以綁定一個查詢
// anArray: new Wilddog(『url/to/my/collection』).limitToLast(25)
// 完整語法
anObject: {
source: new Wilddog(『url/to/my/object』),
// 可選，作為對象綁定
asObject: true,
// 可選，提供一個回調
cancelCallback: function {}
}
}
})
<div id=」demo」>
<pre>{{ anObject | json }}</pre>
<ul>
<li v-for=」item in anArray」>{{ item.text }}</li>
</ul>
</div>
上面的例子會綁定一個Vue實例的anObject 和 anArray 到相應的野狗數據源。另外，Vue實例也可以使用 $wilddogRefs property：
// add an item to the array
vm.$wilddogRefs.anArray.push({
text: 『hello』
})
另外，你也可以使用 $bindAsObject 或 $bindAsArray 方法綁定一個Wildog ref：
數據歸一化vm.$bindAsObject(『user』, myWilddogRef.child(『user』))
vm.$bindAsArray(『items』, myWilddogRef.child(『items』).limitToLast(25))
在綁定數組中的每一條記錄中都會包含一個 .key property,用來表示這條記錄的key。 所以，如果你有書記在 /items/-Jtjl482BaXBCI7brMT8/ ， 這條記錄會存在一個 .key:」-Jtjl482BaXBCI7brMT8″。 如果value是簡單數據類型（boolean,string,number）會保存在.value property 中。如果value 是對象，value對象中每個property 都會直接存放在記錄中：
{
「items」: {
「-Jtjl482BaXBCI7brMT8」: 100,
「-Jtjl6tmqjNeAnQvyD4l」: {
「first」: 「fred」,
「last」: 「Flintstone」
},
「-JtjlAXoQ3VAoNiJcka9」: 「foo」
}
}
The resulting bound array stored in vm.items will be:
寫在最後[
{
「.key」: 「-Jtjl482BaXBCI7brMT8」,
「.value」: 100
},
{
「.key」: 「-Jtjl6tmqjNeAnQvyD4l」,
「first」: 「Fred」,
「last」: 「Flintstone」
},
{
「.key」: 「-JtjlAXoQ3VAoNiJcka9」,
「.value」: 「foo」
}
]
1、野狗Vue.js項目以及文檔的Github地址：
2、如果有任何問題，可加野狗官方用戶交流群，。裡面有野狗工程師以及全國各地的開發小夥伴。