当 vue 遇上 小程序 (1)

原创 uptown 教程 vue 234阅读 2018-07-27 18:16:01 举报

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

1.1、单向绑定

Vue.js

小程序

1.2、双向绑定,面对输入框和 textarea:

Vue.js

小程序 

1.3、绑定属性

class,以选项卡的选中项 on 为例

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

小程序,class前不带冒号,但双引号内 是双大括号结构,大括号内是JS判断语句

style 跟 class 意思差不多:

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  

小程序

后续更新在: [当 vue 遇上 小程序 (3)]

评论 ( 0 )
最新评论
暂无评论

赶紧努力消灭 0 回复