對比之前了解過的Vue，方便加深 了解微信小程序語法。
下面從幾個方面介紹Vue和小程序
一，鈎子函數
Vue只要跳轉新頁面就會觸發鈎子函數，小程序對於不同的頁面跳轉方式，觸發的鈎子是不同的。
下面簡單說幾個小程序鈎子函數
onLoad 頁面加載時候用，一個頁面調用一次。
onShow 頁面顯示，打開頁面時候用，
onReady 頁面初次渲染好 時候用，
表示頁面已經准備好，可以與視圖層進行交付。對界面的設置如wx.setNavigationBarTitle請在onReady之后設置。
onHide 頁面隱藏時候用
onUnload
當redirectTo 或navigateBack（兩個切換頁面函數） 時調用。
在頁面加載請求數據時，小程序和Vue類似。Vue是在created 或mounted中請求數據。
小程序是在onload或者onshow時候請求。
二，數據綁定
在Vue快速入門，必備基礎知識（一）提過：
v-bind指令可以在名稱后面帶一個參數，中間用一個冒號隔開。這個參數通常是HTML的一個屬性。例如：v-bind:class
格式：v-bind:argument="expression" 下面用這個示范一個分頁中的高亮當前頁。 有這句話。
推：
vue動態綁定一個變量值作為元素的屬性時，會在變量前加 ：
舉例：
<img :src ="imgSrc" />
小程序 綁定某個變量值作為元素屬性時，用{{ }} 不加括號會被認為是字符串。
例如：
<image src="{{imgSrc}}"></image>
三，列表渲染
Vue代碼
<!DOCTYPE html> <html> <head> <title>鈎子函數</title> <script type="text/javascript" src="https://cdn.jsdelivr.net/vue/2.1.3/vue.js"></script> <body> <ul id="example-1"> <li v-for="item in items"> {{ item.message }} </li> </ul> <script type="text/javascript"> var example1 = new Vue({ el: '#example-1', data: { items: [ { message: 'Foo' }, { message: 'Bar' } ] } }) </script> </body> </html>
小程序：
Page({ data: { items: [ { message: 'Foo' }, { message: 'Bar' } ] } }) <text wx:for="{{items}}">{{item}}</text>
前一篇提過：wx:for="{{items}} items是要循環的List
四：事件處理
vue用 v-on:event=“” 綁定事件，或者 @event=“”綁定事件
舉例：
<button v-on:click="counter += 1">Add 1</button>
<button v-on:click.stop="counter+=1">Add1</button> //阻止事件冒泡小程序bindtap(bind+event)，或者catchtap(catch+event)綁定事件：
<button bindtap="noWork">明天不上班</button>
<button catchtap="noWork">明天不上班</button> //阻止事件冒泡 五：數據雙向綁定
vue有個雙向綁定，表單元素上加上v-model，再綁定上data的一個值。當表單元素內容發生變化時，data也會發生變化。
舉例
<div id="app">。
<input v-model="reason" placeholder="填寫理由" class='reason'/> </div> new Vue({ el: '#app', data: { reason:'' } })
小程序沒這個功能，怎么辦？
當表單元素發生變化時，會觸發綁在表單上的方法，在方法上，會通過 this.setData({key:value}) 會將表單值賦值給data對應的值實現雙向綁定。
<input bindinput="bindReason" placeholder="填寫理由" class='reason' value='{{reason}}' name="reason" />
Page({
data:{
reason:''
},
bindReason(e) {
this.setData({
reason: e.detail.value
})
}
})
對於 取值：
vue通過 this.data取值
小程序通過this.data.reason取值。
六：綁定事件傳參
vue綁定事件傳參比較簡單，只要通過在觸發事件的方法中，把需要傳遞的數據作為形參數傳進去就好了，
<button @click="say('明天不上班')"></button> new Vue({ el: '#app', methods:{ say(arg){ consloe.log(arg) } } })
然而在小程序不能在綁定事件里直接傳參。需要將參數作為屬性值，綁定到元素上的data-屬性上，然后在方法中，通過e.currentTarget.dataset.*的方式獲取（e.currentTarget.dataset. 會將連字符轉成駝峰elementType），從而完成參數的傳遞。
<view class='tr' bindtap='toApprove' data-id="{{item.id}}"></view>
Page({
data:{
reason:''
},
toApprove(e) {
let id = e.currentTarget.dataset.id;
}
})