当 vue 遇上 小程序 （1）

  第一次看小程序代码，就有种哪里见过的感觉，页面标签：<view>、<text>;像 React Native，数据绑定：<text wx:for="{{city}}" data-index="{{index}}" wx:key="index">{{item}}</text>,像Vue.js，走出来，怎么看都像个混各种血统的小孩。时至今日，在写小程序的时候，还是会不自觉想用 Vue.js 的语法，为防套用，我习惯用笔记将两者对比起来，标出差异。

1.1、单向绑定

· Vue.js

<template>
  <div>   
    <span v-for="(item,inex) in city" :key="index">{{item}}</span>
  </div>
</template>
<script>
    export default {        
        data(){
            return{
                city: ["北京", "上海", "广州", "香港"]
            }
        }
    }
</script>

· 小程序

<!-- A.wxml -->
<view>
      <text wx:for="{{city}}" wx:key="index">{{item}}</text>
</view>

<!-- A.js -->
Page({
  data: {  
    city: ["北京", "上海", "广州", "香港"],    
  } 
})

1.2、双向绑定，面对输入框和 textarea：

· Vue.js

<template>
  <div>   
      <p>{{iptTxt}}</p>
      <input type="text" v-model="iptTxt">
      <p>{{txtBox}}</p>
      <textarea cols="30" rows="10" v-model="txtBox"></textarea>
  </div>
</template>
<script>
    export default {        
        data(){
            return{
                iptTxt:"",
                txtBox:""
            }
        }
    }
</script>

· 小程序 

<!--A.wxml-->
<view>  
    <text>{{iptTxt}}</text>  
    <input bindinput='bindIpt' value ="{{iptTxt}}" placeholder='search'></input>
    <text>{{txtBox}}</text>
    <textarea bindinput='bindTxtBox' value="txtBox"></textarea>
</view>
 
<!--A.js-->
Page({
  data: { 
    iptTxt:"",
    txtBox:""   
  },
  bindIpt(e){
    this.setData({
      iptTxt:e.detail.value
    })
  },  
  bindTxtBox(e){
    this.setData({
      txtBox:e.detail.value
    })
  }  
})

1.3、绑定属性class，以选项卡的选中项 on 为例

· Vue.js 

class前带冒号，双引号内单大括号结构，大括号内是对象结构：{on:true}，多个class时：单独再加  class="title"，或者：:class="{title:true,on:index === tabIndex}"

<template>
  <div>   
     <span v-for="(item,index) in city" :key="index" @click="tab(index)" :class="{on:index === tabIndex}">{{item}}</span>
  </div>
</template>
<script>
    export default {        
        data(){
            return{
                city: ["北京", "上海", "广州", "香港"]，
                tabIndex:0
            }
        }
    }
</script>

· 小程序

class前不带冒号，但双引号内 是双大括号结构，大括号内是JS判断语句 if(tabIndex === index){ return 'on'}，多个class时：class="title {{tabIndex === index && 'on'}}">

<view>
  <view>
    <text wx:for="{{city}}" wx:key="index" data-index="{{index}}" bindtap="tab"  class="{{tabIndex === index && 'on'}}">{{item}}</text>
  </view>  
</view>
 
 
<!-- A.js -->
Page({
  data: {  
    city: ["北京", "上海", "广州", "香港"],   
    tabIndex: 0
  },
  tab(e){
    this.setData({
      tabIndex:e.currentTarget.dataset.index
  })
})

style 跟 class 意思差不多：

<!-- vue -->

<span v-for="(item,index) in city" :key="index" @click="tab(index)" :style="{'color':'orange','background':index == tabIndex &&'#ddd'}">{{item}}</span>

<!--小程序-->
<text wx:for="{{city}}" wx:key="index" data-index="{{index}}" bindtap="tab" style="color:orange,'background':{{index == tabIndex &&'#ddd'}}">{{item}}</text>

1.4、点击事件、传参、设置变量

Vue.js ，在事件前加@：@click、@dblclick、@keydown.enter 等等；

 

小程序，则以bind 或 catch开头，然后跟上事件的类型：bindtap、bindlongpress、bindtouchcancel、bindtouchstart、bindtouchmove、bindtouchend ，响应顺序：bindtouchstart > bindtouchmove(如有) || bindlongpress(如有)  > bindtouchend > bindtap；

* catch 事件绑定可以阻止冒泡事件向上冒泡，如：

<view bindtap="closeMenu"><view catchtap="toggleMenu">toggle</view></view>

 

当在函数内调用变量时，vue：this.tabIndex ，而小程序：this.data.tabIndex

 

· Vue 

<template>
      <div>
        <span v-for="(item,index) in city" :key="index" @click="tab(index)">{{item}}</span>
    </div>
</template>
<script>
    export default {        
        data(){
            return{
                city: ["北京", "上海", "广州", "香港"],
                tabIndex:0
            }
        },
        methods:{
            tab(index){
                this.tabIndex = index;
            }
       }
    }
</script>

· 小程序

<!-- A.wxml -->
<view>
  <view>
    <text wx:for="{{city}}" wx:key="index" data-index="{{index}}" bindtap="tab">{{item}}</text>
  </view> 
</view>
 
<!-- A.js -->
Page({
  data: {  
    city: ["北京", "上海", "广州", "香港"],   
    tabIndex: 0
  },
  tabcard(e){
    this.setData({
      tabIndex:e.currentTarget.dataset.index
  })
})

后续更新在： [当 vue 遇上 小程序 （3）]