vue和小程序的区别、比较

生命周期 

vue生命周期和小程序生命周期

vue的钩子函数在跳转新页面时，钩子函数都会触发，但是小程序的钩子函数，页面不同的跳转方式，触发的钩子并不一样。

onLoad: 页面加载
一个页面只会调用一次，可以在 onLoad 中获取打开当前页面所调用的 query 参数。
onShow: 页面显示
每次打开页面都会调用一次。
onReady: 页面初次渲染完成
一个页面只会调用一次，代表页面已经准备妥当，可以和视图层进行交互。
对界面的设置如wx.setNavigationBarTitle请在onReady之后设置。详见生命周期
onHide: 页面隐藏
当navigateTo或底部tab切换时调用。
onUnload: 页面卸载
当redirectTo或navigateBack的时候调用。
数据请求

在页面加载请求数据时，两者钩子的使用有些类似，vue一般会在created或者mounted中请求数据，而在小程序，会在onLoad或者onShow中请求数据。

数据绑定

//vue数据绑定
<div id="app">
    <p>{{ message }}</p>
    <div v-html="message"></div>
    <div v-bind:class="{'class1': use}">
      v-bind:class 指令
    </div>
    <div v-bind:id="'list-' + id">菜鸟教程</div>
    <p v-if="seen">现在你看到我了</p>
    <pre><a v-bind:href="url">菜鸟教程</a></pre>
</div>

//微信小程序数据绑定
<view> {{ message }} </view> //内容
<view id="item-{{id}}"> </view> //组件属性(需要在双引号之内)
<view wx:if="{{condition}}"> </view> //控制属性(需要在双引号之内)
<checkbox checked="{{false}}"> </checkbox> //关键字(需要在双引号之内)
<view hidden="{{flag ? true : false}}"> Hidden </view>  //算数运算
<view> {{a + b}} + {{c}} + d </view>
<view wx:if="{{length > 5}}"> </view>
<view>{{"hello" + name}}</view>
<view>{{object.key}} {{array[0]}}</view>
<view wx:for="{{[zero, 1, 2, 3, 4]}}"> {{item}} </view>
<template is="objectCombine" data="{{for: a, bar: b}}"></template>
<template is="objectCombine" data="{{...obj1, ...obj2, e: 5}}"></template>

从上面可以看出，小程序的变量绑定都用双大括号来包围的，如果不加括号，为被认为是字符串，
而vue只有文本内容才用到双大括号

vue动态绑定变量会在前面加冒号， 而小程序不需要加冒号，需要两个双大括号括起来

列表循环遍历 

//vue遍历
<div v-for="(item, index) in dataArray" :key="index" v-if="index<5"></div>
//微信小程序遍历
<view wx:for="{{dataArray}}" wx:key="index" wx:for-item="item" wx:if="{{index<5}}"></view>

 条件判断

//原生js 条件判断
if (time < 10) {
    greeting = "Good morning";
 } else if (time < 18) {
    greeting = "Good day";
 } else {
    greeting = "Good evening";
 }

//vue 条件判断
<div id="app">
    <div v-if="type===A">A</div>
    <div v-else-if="type===B">B</div>
    <div v-else-if="type===C">C</div>
    <div v-else>NOT A/B/C </div>
</div>

//小程序 条件判断

<view wx:if="{{length > 5}}"> 1 </view>
<view wx:elif="{{length > 2}}"> 2 </view
<view wx:else> 3 </view>
    

模板组件 

vue组件
<div id="app">
    <runoob></runoob>
</div>
 
<script>
// 注册全局组件
Vue.component('runoob', {
  template: '<h1>自定义组件!</h1>'
})
// 创建根实例
new Vue({
  el: '#app'
})
</script>

//单文件组件
<div id="app">
    <runoob></runoob> //调用组件
</div>
 
<script>
// 引入和注册组件
 export default {
      components: {
        'runoob': () => import('@/components/runoob/runoob'),
      }
    }
</script>


小程序模板
<template name="msgItem">
  <view>
    <text> {{index}}: {{msg}} </text>
    <text> Time: {{time}} </text>
  </view>
</template>
<template is="msgItem" data="{{...item}}"/>

<!-- index.wxml -->
<include src="header.wxml"/>
<view> body </view>
<include src="footer.wxml"/>

 显示与隐藏元素

vue中，使用v-if 和v-show控制元素的显示和隐藏

小程序中，使用wx-if和hidden控制元素的显示和隐藏

 事件处理

//vue：使用v-on:event绑定事件，或者使用@event绑定事件,例如:
<button v-on:click="counter += 1">Add 1</button>
<button v-on:click.stop="counter+=1">Add1</button>  //阻止事件冒泡

//小程序中，全用bindtap(bind+event)，或者catchtap(catch+event)绑定事件,例如：
<button bindtap="noWork">明天不上班</button>
<button catchtap="noWork">明天不上班</button>  //阻止事件冒泡