钉钉小程序和vue对比

一、数据绑定

vue:

	<img :src="imgSrc"/>

钉钉:

	<img src="{{imgSrc}}"/>

二、列表渲染

vue:

	<ul id="example-1">
  		<li v-for="(item,index) in items" :key="index">
    		{{ item.message }}
  		</li>
	</ul>

钉钉:

	<view class="container">
  		<view a:for="{{list}}" key="{{item}}">
  			当前循环的自身：{{item}}
  			当前循环的索引：{{index}}
  		</view>
	</view>
	Page({
  		data:{
    		list:['1', '2', '3', '4'],
  		}
	});
	

三、显示隐藏元素

vue: v-if v-else-if v-else
钉钉: a:if a:elif a:else

四、事件处理

vue:
通过@click绑定点击事件并且能够直接在方法中传入参数

	<button @click="clickHandle('hee')"></button>
	<button @click.stop="clickHandle"></button>//阻止事件冒泡

钉钉:
通过onTap绑定点击事件，但是不能直接在方法传入参数，需要通过data-来传递，例如data-user-name="hee"，然后通过e.currentTarget.dataset.userName获取当前事件对象上绑定的参数（表单的值为e.detail.value）

	<button data-user-name="hee" onTap="clickHandle"></button>
	<button catchTap="clickHandle"></button>//阻止事件冒泡
	
	Page({
  		clickHandle:function(event){
    		event.target.dataset.userName=== 1 // - 会转为驼峰写法
  		}
	})

六、数据双向绑定

vue: 只需加上v-model

	<div id="app">
    	<input v-model="reason" placeholder="填写理由" class='reason'/>
	</div>

	new Vue({
  		el: '#app',
  		data: {
   			reason:''
  		}
	})

钉钉:
通过this.setData(username:e.detail.value)来给username赋值
通过this.data.username来获取值

	<text>表单输入的内容：{{username}}</text>
    <input onInput="inputHandle"></input>

	Page({
  		data: {
  		  	username:''
  		},
  		inputHandle(e){
    		this.setData({
      			username:e.detail.value
    		})
  		}
		});

七、缓存（钉钉）

操作	同步	异步	描述
存储	dd.setStorageSync	dd.setStorage	数据存储在本地缓存中指定的 key 中的接口，会覆盖掉原来该 key 对应的数据
读取	dd.getStorageSync	dd.getStorage	获取缓存数据的接口
清除	dd.clearStorageSync	dd.clearStorage	清除本地数据缓存的接口
删除	dd.removeStorageSync	dd.removeStorage	删除缓存数据的接口
获取相关信息	dd.getStorageInfoSync	dd.getStorageInfo	获取当前 storage 的相关信息的接口

八、自定义组件

钉钉开发文档: 自定义组件