vue.jsvue.js實戰視訊教程12套需要的可以掃描二維碼關注微信公衆号
或者搜尋：cityapes或者搜尋:城市一猿 點選菜單的vue.js就可以下載下傳了
Vue是一個專注于前端UI的架構。它的主要能力是：
- 聲明式綁定。包括資料綁定、事件綁定
- 基于元件的程式設計。讓開發者可以把整個應用分為若幹元件，分而治之
本篇文字會講解聲明式綁定，并且會談及Vue的引入、資料綁定、事件綁定、Vue執行個體、指令。特别的，同樣的案例，我也用來講解Vue最為引以為傲的元件技術。案例是一個微小的叫做counter的應用，看起來是這樣的：
有一個标簽顯示數字0，當點選按鈕“+”，數字會每次加1。
我們會一個案例多種寫法，包括Vue執行個體方案、元件方案。
Vue執行個體
代碼如下。你可以直接儲存代碼到html檔案中，然後用浏覽器打開，如果是IE的話必須是IE8或者或以上版本：
<script src="https://unpkg.com/vue/dist/vue.js"></script><div id="app">
<span>{{count}}</span>
<button @click="inc">+</button></div>
<script>
var app = new Vue({ data () { return {count: 0} }, methods: { inc () {this.count++} } }) app.$mount('#app')
</script>
你可以實際的操作，看到按鈕和數字的互動變化。然後我們來看Vue如何做到的。
首先，必須引入Vue.js庫。我們使用<script>，像是任何古老的js庫或者架構的引入一樣，引入Vue.js。為了友善，我們沒有下載下傳vue.js ,而是使用了vue.js的一個網上提供的拷貝。此拷貝由unpkg提供。接下來的代碼分為HTML标簽和放置于<script>内的js代碼。
随後我們看HTML。它就是有一個div标簽内嵌套button和span标簽，看起來和普通HTML别無二緻。除了{{count}}、和@click屬性之外。形如{{key}}的符号，是一種特殊的記号，表示的含義是：
從該标簽所在的Vue執行個體内的data函數傳回的對象内查找名為‘key’的項目值，把這個值拿來填充{{key}}所占據的位置的内容。
具體到本案例，Vue執行個體内包含了data和methods。進而{{count}}最終定位得到傳回對象，{count: 0}，進而得到值0，并使用0填充到
<span>
标簽的内容上。這就是
<span>{{count}}</span>
的填充過程。
而@click表示的含義是：
把button的onclick事件挂接到對應Vue執行個體的methods對象内的指定方法上。這裡就是inc()方法。
我們已經多次提到了Vue執行個體，每個Vue.js應用都是通過構造函數Vue建立一個Vue的根執行個體啟動的。形如：
var vm = new Vue(option)
參數option是一個對象。我們在此案例看到它有一個data函數成員和一個methods成員。其實它還可以包含模闆、挂載元素、方法、生命周期鈎子。
此案例中，我會通過$mount方法把Vue執行個體和HTML内對應的标簽塊關聯起來。當然，可以不使用$mount方法，而是采用
挂接元素
來指定，兩者是等效的：
new Vue({
el:'#app', ...
但是我更喜歡$mount，因為它可以把：
- Vue執行個體自身的内容
- 它對HTML的關聯
分成兩件事。分開看會更好。
真正神奇的地方來了，這就是Vue的響應式程式設計特性。我們看到inc()方法内隻是修改了this.count這個數字，UI上的<span>内容就會變化呢？我們本來以為的流程應該是：“我們首先修改this.count,然後拿這個修改過的值通過DOM API去更新<span>”。然而{{count}}這樣的資料綁定，不僅僅意味着把this.count的值顯示出來，也意味着當this.count被修改的時候，<span>的内容會跟着更新。這就是響應式程式設計，具體的魔法由Vue内部完成。開發者隻要通過{{}}形式的聲明，告訴Vue說，“我的這塊内容應該顯示Vue執行個體内的某個資料，并且當Vue執行個體資料更新時，這裡的顯示也要更新”即可。
Vue執行個體還做的另外一件事，是托管了data()傳回的資料對象。資料對象的方法本來的做法是：
this.$data.count
因為Vue執行個體的托管，你可以通過
this.count
通路達到data對象的count。這樣的簡易設計，真是讨人喜歡。
再看下@click，它其實是v-on:click的簡寫，就是說本來應該寫為：
<button v-on:click="inc">+</button>
這裡就需要引出一個非常常用的、叫做“指令”的概念。指令是帶有v-字首的特殊HTML标簽屬性。。指令的職責就是當其表達式的值改變時相應地将某些行為應用到DOM 上。
- 指令能接受一個參數，在指令後以“：”指明。
- 指令能接受一個修飾符，是以“.”指明的特殊字尾
- 指令能接受一個屬性值，預期是單一JavaScript表達式
讓我們回顧一下在介紹裡的例子：v-on就是一個指令，它接受一個參數為click，接受的屬性值為inc。語義我們已經在上文提及，就是把onclick事件綁定到inc方法上。
指令的概念非常重要，也是擴充和複用代碼的一種方式，除了我們看到的v-on，還有很多可以使用的指令，比如v-for用于循環複制目前标簽等等。類似{{count}},其實可以使用v-text指令替代：
<span v-text="count"></span>
更多指令我會在後續文章中繼續提及。
元件
在新的vue版本中元件被認為更好的複用代碼和分離關注點的方式。接下來，我們使用同樣的案例，講解元件。我們可以看到HTML代碼：
<div id="app"> <span>{{count}}</span> <button @click="inc">+</button></div>
标簽<span>和<button>其實一起合作，完成一個完整的功能，它們是内聚的；是以元件的基礎概念，如果可以使用一個自定義标簽，把它們兩個包裝到一個元件内會是一種更好的實踐。以此觀念，做完後應該得到這樣的代碼：
<div id="app"> <counter></counter></div>
實際上開發起來并不困難，隻是需要建立一個元件，把本來在Vue執行個體内的方法和資料，移動到此元件内，把在HTML内的兩個标簽也移動到元件的模闆内。以下代碼是可以直接儲存為html檔案，并使用浏覽器來打開運作的：
<script src="https://unpkg.com/vue/dist/vue.js">
</script>
<div id="app"> <counter></counter></div>
<script>
var counter = { 'template':'<div><span>{{count}}</span><button v-on:click="inc">+</button></div>', data () { return {count: 0} },
methods: { inc () {this.count++}} }
var app = new Vue({ components:{ counter : counter }} ) app.$mount('#app')
</script>
這一次，我們見到了新的内容:
- Vue的新屬性template。它的值用來加載html模闆代碼。本案例中，就是放置本來在主HTML内的兩個标簽。需要注意的是，它們之外包括了一個div标簽。因為Vue2.0版本要求作為模闆的html必須是單根的。
- Vue的新屬性components，用來注冊一個局部元件。正是在此處，元件counter被注冊，進而在html标簽内可以直接使用<counter></counter>來引用元件counter的。
盡管這個案例太小了，還看不出太大的好處。但是這樣的元件引入，讓相關性強的html元素和對應的資料、代碼内聚到了一起，這是符合軟體工程原則的、是以是值得鼓勵的行為。
新元件完全可以分離到另外一個script檔案内，進而達到不僅僅是邏輯上的代碼和主html分離，也做到了實體上的分離。
另外，使用template在代碼内些html，還是比較煩人：
- 你得小心的在外層使用單引号，在内部使用雙引号
- 混雜js和html觀感不佳
模闆分離的方式
模闆内的HTML，可以由多種方式從代碼中分離出來，以便增加可讀性。第一種方式采用x-template:
<script src="https://unpkg.com/vue/dist/vue.js">
</script><script type="x-template" id="t">
<div> <span>{{count}}</span> <button v-on:click="inc">+</button> </div></script>
<div id="app"> <counter></counter></div>
<script>
var counter = {'template':'#t',
data () {return {count: 0} },
methods: {inc () {this.count++}}
}
var app = new Vue({ components:{ counter : counter }} ) app.$mount('#app')
</script>
模闆x-template使用标簽script，因為這個類型是浏覽器無法識别的，是以浏覽器隻是簡單的放在DOM節點上，你可以同一般的getElementById方法獲得此節點，把它作為HTML片段使用。
或者使用在HTML5引入的新标簽template，看起來更幹淨些：
<script src="https://unpkg.com/vue/dist/vue.js">
</script>
<template id="t">
<div> <span>{{count}}</span><button v-on:click="inc">+</button> </div>
</template>
<div id="app">
<counter></counter></div>
<script>
var counter = {'template':'#t',
data () { return {count: 0} },
methods: {inc () {this.count++}} }
var app = new Vue({ components:{ counter : counter }} ) app.$mount('#app')
</script>
或者如果元件内容并不需要做分發的話，可以通過inline-template标記它的内容，把它當作模闆：
<script src="https://unpkg.com/vue/dist/vue.js">
</script><div id="app">
<counter inline-template>
<div> <span>{{count}}</span><button v-on:click="inc">+</button></div>
</counter></div>
<script>
var counter = {
data () {return {count: 0}},
methods: {inc () {this.count++}} }
var app = new Vue({ components:{ counter : counter }} ) app.$mount('#app')
</script>
模闆是元件的一部分，它應該是群組件的其他定義内聚在一起。是以，應該盡量避免使用這兩種模闆方案，除非這是一個小應用或者示範程式代碼。
另外可以使用的替代方法：
- render函數。實際上所有的template字元串本來在内部就被編譯為render函數的
- 單檔案元件技術
- 或者vue支援的JSX。
當然，後兩種方法就需要轉譯器和打包工具的配合。比如Babel和webpack的。這些内容，請搜尋參考
- vue.js - advance - render 函數小抄
- vue.js的起步
暫時不在讨論之列。
Render函數式元件
Render函數可以充分利用JavaScript語言在建立HTML模闆方面的靈活性。實際上，元件的HTML模闆最終都會轉換為Render函數類型。我們在“vue.js - 進階 - render函數”中有提及它。對于同一的需求，使用Render函數的代碼如下：
<script src="https://unpkg.com/vue/dist/vue.js">
</script><div id="app">
<counter></counter></div>
<script>
var a = {
data () {return {count: 1}},
methods: {inc () {this.count++}},
render:function(h){// var self = this;
var buttonAttrs = { on: { click: this.inc },
domProps: {innerHTML: '+'},
};
var spanAttrs = {on: { click: this.inc },
domProps: {innerHTML: this.count.toString()},};
var span = h('span', spanAttrs, []);
var button = h('button', buttonAttrs, []);
return h('div',{}, [span,button])}}
new Vue({ el:'#app', components:{ counter : a }} )
</script>
函數render的參數h，其實是一個名為createElement 的函數，可以用來建立元素。此函數的具體說明，請參考官方手冊即可。
vue.js實戰視訊教程12套需要的可以關注微信公衆号搜尋：cityapes或者搜尋:城市一猿 點選菜單的vue.js就可以下載下傳了
![Element 中遠端搜尋的功能實作[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)