当 vue 遇上 小程序 (1)

vue 专栏收录该内容
19 篇文章 0 订阅

  第一次看小程序代码,就有种哪里见过的感觉,页面标签:<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)]

 

  • 1
    点赞
  • 0
    评论
  • 1
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

©️2021 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值