微信小程序与vue的一些区别

1、条件渲染

  • vue使用 v-if v-else-if v-else 指令,如下:

    1
    2
    3
    <div v-if="color=='red'">red<div>
    <div v-else-if="color=='orange'">orange<div>
    <div v-else>yellow<div>
  • wx使用 wx:if wx:elif wx:else 指令,如下:

    1
    2
    3
    <view wx:if="{{color=='red'}}">red<view>
    <view wx:elif="{{color=='orange'}}">orange<view>
    <view wx:else>yellow<view>

2、显示隐藏元素

  • vue使用 v-show 指令,如下:

    1
    <div v-show="color=='red'">red<div>
  • wx使用 hidden 指令,如下:

    1
    <view hidden="{{color=='red'}}">red<view>

3、绑定class

  • vue使用 v-bind: 或简写为 指令,如下:

    1
    <div :class="{ 'class-a': isA }">red<div>

    Javascript代码:

    1
    2
    3
    data: {
    isA: false //当isA改变时,将更新class
    }
  • wx,如下:

    1
    <view class="{{ isA ? 'class-a':'' }}">red<view>

    Javascript代码:

    1
    2
    3
    data: {
    isA: false //当isA改变时,将更新class
    }

4、事件处理

  • vue使用 v-on:@ 指令绑定事件,如下:

    1
    <div v-on:click="counter += 1">Add 1<div>
  • wx使用 baintap 指令,如下:

    1
    <view bindtap="clickMe">click<view>

5、绑定值

  • vue动态绑定一个变量的值为元素的某个属性的时候,会在变量前面加上冒号 ,如下:

    1
    <img :src="imgSrc"/>
  • wx绑定某个变量的值为元素属性时,会用两个大括号括起来,如下:

    1
    <img src="imgSrc"/>

6、绑定事件传参

  • vue绑定事件的函数传参数时,可以把参数写在函数后面的括号里,如下:

    1
    <div @click="changeTab(1)">嚯嚯</div>
  • wx绑定事件的函数传参数时,可以绑定到元素中,在函数中获取,如下:

    1
    <view bindtap="changeTab()" data-tab="1">嚯嚯</view>

    Javascript代码:
    `js
    changeTab(e) {

    var tab = e.currentTarget.dataset.tab
    

    }

7、设置值

  • vue设置test的值可以用,this.test = true ;获取test的值可以用 this.test
  • wx设置test的值要用 this.setData({test:true}) ;获取test的值用 this.data.test

-------------已经触及底线  感谢您的阅读-------------
潘高 wechat
公众号:潘高陪你学编程
如果你觉得这篇文章对你有帮助,或者想给我微小的工作一点点资瓷,请随意打赏。

本文标题:微信小程序与vue的一些区别

文章作者:潘高

发布时间:2018年10月24日 - 22:10:55

最后更新:2019年03月08日 - 11:00:30

原始链接:https://blog.pangao.vip/微信小程序与vue的一些区别/

许可协议: 署名-非商业性使用-禁止演绎 4.0 国际 转载请保留原文链接及作者。