Vue.js 簡介
Vue.js是當(dāng)下很火的一個JavaScript MVVM庫累颂，它是以數(shù)據(jù)驅(qū)動和組件化的思想構(gòu)建的髓抑。
其和jQuery最大的不同點在于jQuery通過操作DOM來改變頁面的顯示帆疟，而Vue通過操作數(shù)據(jù)來實現(xiàn)頁面的更新與展示。
所以如果你之前已經(jīng)習(xí)慣了用jQuery操作DOM浩习，學(xué)習(xí)Vue.js時請先拋開手動操作DOM的思維，因為Vue.js是數(shù)據(jù)驅(qū)動的，你無需手動操作DOM驮肉。
當(dāng)然了拇勃，在使用Vue.js時四苇，你也可以結(jié)合其他庫一起使用，比如jQuery方咆。
Vue數(shù)據(jù)驅(qū)動的概念模型
Vue.js主要負(fù)責(zé)的是上圖綠色正方體ViewModel的部分月腋，其在View層（即DOM層）與Model層（即JS邏輯層）之間通過ViewModel綁定了DOM Listeners與Data Bingings兩個相當(dāng)于監(jiān)聽器的東西。
當(dāng)View層的視圖發(fā)生改變時瓣赂，Vue會通過DOM Listeners來監(jiān)聽并改變Model層的數(shù)據(jù)榆骚。相反，當(dāng)Model層的數(shù)據(jù)發(fā)生改變時钩述，其也會通過Data Bingings來監(jiān)聽并改變View層的展示寨躁。這樣便實現(xiàn)了一個雙向數(shù)據(jù)綁定的功能，也是Vue.js數(shù)據(jù)驅(qū)動的原理所在牙勘。
Hello World示例
html代碼
<!--這是我們的View-->
<div id="app">
{{ message }}
</div>
javascript代碼
// 這是我們的Model
var exampleData = {
message: 'Hello World!'
}
// 創(chuàng)建一個的 Vue 實例或 "ViewModel" 并給它賦值給變量vm
// 它連接 View 與 Model
var vm=new Vue({
el: '#app',
data: exampleData,
methods:{
change:function(){
this.message="Hello Vue.js!"
}
}
})
在一個html文件中职恳，我們直接可以通過script標(biāo)簽引入Vue.js，然后就可以在頁面里寫vue.js代碼了方面。
上面示例中我們通過new Vue({})構(gòu)建了一個Vue的實例放钦，在示例中，可以包含掛在元素（el）恭金，數(shù)據(jù)（data）操禀，模板（template），方法（methods）與生命周期鉤子（created等）等選項横腿。
不同的實例選項擁有不同的功能颓屑，常用選項有：
（1）el：表明我們的Vue需要操作哪一個元素下的區(qū)域，’#app’表示操作id為app的元素下區(qū)域耿焊。
（2）data：表示Vue 實例的數(shù)據(jù)對象揪惦，data 的屬性能夠響應(yīng)數(shù)據(jù)的變化。
（3）computed：計算屬性罗侯，詳見官網(wǎng)：計算屬性
（4）methods：方法對象器腋，可以通過 VM 實例訪問這些方法，或者在指令表達(dá)式中使用。方法中的 this自動綁定為 Vue 實例纫塌。
（5）components：組件對象
（6）生命周期鉤子方法诊县，如：created（實例已經(jīng)創(chuàng)建完成之后被調(diào)用）、mounted（el
被新創(chuàng)建的 vm.$el
替換措左，并掛載到實例上去之后調(diào)用該鉤子）
Vue.js常用指令
在Vue項目的開發(fā)中依痊，我們使用的最多的應(yīng)該就屬Vue的指令了。通過Vue提供的以v-開頭的常用指令媳荒，我們可以淋漓盡致地發(fā)揮Vue數(shù)據(jù)驅(qū)動的強(qiáng)大功能抗悍。以下代碼中常用指令的簡單介紹：
<div id="app">
<p v-text="p1"></p>
<p v-html="p2"></p>
<p v-if="p3">p3</p>
<p v-else>p4</p>
<p v-show="p5">p5</p>
<p v-for="p in p6"></p>
<p v-on:click="showP3">showP3</p>
<p v-bind:title="p7">{{p7}}</p>
<input v-model="p8" />
<p v-cloak>{{p9}}</p>
</div>
（1）v-text: 用于更新綁定元素中的內(nèi)容，類似于jQuery的text()方法
//可以使用插值'{{}}'替代
<p>{{p1}}</p>
（2）v-html: 用于更新綁定元素中的html內(nèi)容钳枕，類似于jQuery的html()方法
（3）v-if: 用于根據(jù)表達(dá)式的值的真假條件渲染元素缴渊，如果示例代碼中P3為false則不會渲染p3標(biāo)簽，語法如下:
v-if="expression"
（4）v-show: 用于根據(jù)表達(dá)式的值的真假條件?顯示隱藏元素鱼炒，切換元素的 display CSS 屬性
（5）v-else:必須緊跟在 v-if或 v-show元素的后面——否則它不能被識別衔沼。
（6）v-for: 用于遍歷數(shù)據(jù)渲染元素或模板，如示例代碼中P6為[1,2,3]則會渲染3個P標(biāo)簽昔瞧，內(nèi)容依次為1指蚁，2，3
//可以為數(shù)組索引指定別名（或者用于對象的鍵）：
<div v-for="(item, index) in items"></div>
<div v-for="(val, key) in object"></div>
<div v-for="(val, key, index) in object"></div>
（7）v-on: 用于在元素上綁定事件自晰，示例代碼中在P標(biāo)簽上綁定了showP3的點擊事件
<!-- 方法處理器 -->
<button v-on:click="doThis"></button>
<!-- 內(nèi)聯(lián)語句 -->
<button v-on:click="doThat('hello', $event)"></button>
<!-- 縮寫 -->
<button @click="doThis"></button>
<!-- 停止冒泡 -->
<button @click.stop="doThis"></button>
<!-- 阻止默認(rèn)行為 -->
<button @click.prevent="doThis"></button>
<!-- 阻止默認(rèn)行為凝化，沒有表達(dá)式 -->
<form @submit.prevent></form>
<!-- 串聯(lián)修飾符 -->
<button @click.stop.prevent="doThis"></button>
<!-- 鍵修飾符，鍵別名 -->
<input @keyup.enter="onEnter">
<!-- 鍵修飾符酬荞，鍵代碼 -->
<input @keyup.13="onEnter">
（8）v-bind:用于在元素上的綁定屬性
<!-- 綁定一個屬性 -->
<!-- 縮寫 -->
<!-- class 綁定 -->
<div :class="{ red: isRed }"></div>
<div :class="[classA, classB]"></div>
<div :class="[classA, { classB: isB, classC: isC }]">
<!-- style 綁定 -->
<div :style="{ fontSize: size + 'px' }"></div>
<div :style="[styleObjectA, styleObjectB]"></div>
<!-- 綁定一個有屬性的對象 -->
<div v-bind="{ id: someProp, 'other-attr': otherProp }"></div>
<!-- 通過 prop 修飾符綁定 DOM 屬性 -->
<div v-bind:text-content.prop="text"></div>
<!-- prop 綁定. “prop” 必須在 my-component 中聲明搓劫。 -->
<my-component :prop="someThing"></my-component>
<!-- XLink -->
<svg><a :xlink:special="foo"></a></svg>
（9）v-model:用于在表單控件元素上創(chuàng)建雙向數(shù)據(jù)綁定
示例
（10）其他指令：
v-cloak（這個指令保持在元素上直到關(guān)聯(lián)實例結(jié)束編譯。和 CSS 規(guī)則如 [v-cloak] { display: none }
一起用時混巧，這個指令可以隱藏未編譯的 Mustache 標(biāo)簽直到實例準(zhǔn)備完畢枪向。）、
v-once（只渲染元素和組件一次）
Vue.js組件
組件（Component）是 Vue.js 最強(qiáng)大的功能之一咧党。組件可以擴(kuò)展 HTML 元素秘蛔，封裝可重用的代碼。在較高層面上傍衡，組件是自定義元素深员， Vue.js 的編譯器為它添加特殊功能。在有些情況下蛙埂，組件也可以是原生 HTML 元素的形式辨液，以 is 特性擴(kuò)展。
全局組件注冊
全局組件可以在任意Vue實例下使用
/** 全局組件注冊方式 */
/** js代碼 ==========*/
// 注冊組件箱残，傳入一個擴(kuò)展過的構(gòu)造器
Vue.component('my-component', Vue.extend({
"template":"<div>This is a component! data:{{data}}</div>"
}))
// 或者
// 注冊組件，傳入一個選項對象（自動調(diào)用 Vue.extend）
Vue.component('my-component',{
"template":"<div>This is a component! data:{{data}}</div>"
})
// 實例
new Vue({
el:"#app",
})
new Vue({
el:"#app2",
})
/** html代碼 ==========*/
<div id="app">
<my-component></my-component> //輸出"<div>This is a component! </div>
</div>
<div id="app2">
<my-component></my-component> //輸出"<div>This is a component! </div>
</div>
局部組件注冊
如果不需要全局注冊，或者是讓組件使用在其它組件內(nèi)被辑，可以用選項對象的components屬性實現(xiàn)局部注冊燎悍。
/** 局部組件注冊方式 */
/** js代碼 */
// 注冊組件，傳入一個擴(kuò)展過的構(gòu)造器
var MyComponent=Vue.extend({
"template":"<div>This is a component! data:{{data}}</div>"
});
// 或者
// 注冊組件盼理，傳入一個選項對象（自動調(diào)用 Vue.extend）
var MyComponent={
"template":"<div>This is a component! data:{{data}}</div>"
};
// 實例
new Vue({
el:"#app",
components:{"my-component":MyComponent }//MyComponent只能在#app實例下使用谈山，在其他實例或者組件內(nèi)不會渲染
})
/** html代碼 */
<div id="app">
<my-component></my-component> //輸出"<div>This is a component!</div>
</div>
組件間的數(shù)據(jù)傳遞
組件實例的作用域是孤立的。這意味著不能并且不應(yīng)該在子組件的模板內(nèi)直接引用父組件的數(shù)據(jù)宏怔。
使用 props 選項接收父組件數(shù)據(jù)
prop 是父組件用來傳遞數(shù)據(jù)的一個自定義屬性奏路。子組件需要顯式地用 [props 選項]聲明 “prop”：
Vue.component('child', {
// 聲明 props
props: ['message'],
// 就像 data 一樣，prop 可以用在模板內(nèi)
// 同樣也可以在 vm 實例中像 “this.message” 這樣使用
template: '<span>{{ message }}</span>'
})
然后向它傳入一個普通字符串：
<child message="hello!"></child>
//或者作用v-bind綁定動態(tài)props
<child :message="message"></child>
結(jié)果
使用自定義事件修改父組件數(shù)據(jù)
-使用v-on指令綁定自定義事件
每個 Vue 實例都實現(xiàn)了事件接口(Events interface)臊诊，即：
- 使用 $on(eventName) 監(jiān)聽事件
- 使用 $emit(eventName) 觸發(fā)事件
另外鸽粉，父組件可以在使用子組件的地方直接用 v-on 來監(jiān)聽子組件觸發(fā)的事件。
下面是一個例子：
<div id="counter-event-example">
<p>{{ total }}</p>
<button-counter v-on:increment="incrementTotal"></button-counter>
<button-counter v-on:increment="incrementTotal"></button-counter>
</div>
Vue.component('button-counter', {
template: '<button v-on:click="increment">{{ counter }}</button>',
data: function () {
return {
counter: 0
}
},
methods: {
increment: function () {
this.counter += 1
this.$emit('increment') //觸發(fā)v-on綁定的increment事件
}
},
})
new Vue({
el: '#counter-event-example',
data: {
total: 0
},
methods: {
incrementTotal: function () {
this.total += 1
}
}
});
非父子組件通信
有時候非父子關(guān)系的組件也需要通信抓艳。在簡單的場景下触机，使用一個空的 Vue 實例作為中央事件總線：
var bus = new Vue()
// 觸發(fā)組件 A 中的事件
bus.$emit('id-selected', 1)
// 在組件 B 創(chuàng)建的鉤子中監(jiān)聽事件
bus.$on('id-selected', function (id) {
// ...
})
結(jié)語
本文簡單介紹了Vue.js的MVVM模型和它的雙向綁定機(jī)制，然后介紹了Vue.js常用的選項及指令的用法玷或，接著了解了在Vue.js里面全局和局部組件的創(chuàng)建方式以及父子組件和非父子組件之間的數(shù)據(jù)通訊儡首。通過全篇介紹對Vue.js用法有了大概了解。
