对比下小程序语法和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;
  }
})

对比下小程序语法和Vue语法异同

猜你喜欢