對比下小程式語法和Vue語法異同
對比之前瞭解過的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.*的方式獲取，從而完成引數的傳遞。
<view class='tr' bindtap='toApprove' data-id="{{item.id}}"></view>
Page({
data:{
reason:''
},
toApprove(e) {
let id = e.currentTarget.dataset.id;
}
})