对比之前了解过的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; } })