vue和小程序的比较

vue的钩子函数:

beforeCreat: 创建前

created: 创建

beforeMount: 挂载前

mounted: 挂载

beforeupdate: 更改前

updated: 更改

beforeDestroy: 销毁前

destroyed: 销毁

小程序的钩子函数:

onLoad: 页面加载

onShow: 页面显示

onReady: 页面初次渲染完成

onHide: 页面隐藏

onUnload: 页面卸载

vue一般会在created或者mounted中请求数据，而在小程序，会在onLoad或者onShow中请求数据

vue动态绑定一个变量的值为元素的某个属性的时候，会在变量前面加上冒号：

小程序绑定某个变量的值为元素属性时，会用两个大括号括起来

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

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

vue使用v-on:event绑定事件，或者使用@event绑定事件，@eventstop阻止事件冒泡

小程序用bindtap(bind+event)，或者catchtap(catch+event)绑定事件，阻止事件冒泡

vue中如下:

小程序中如下：

vue中的表单元素上加v-model，然后再绑定data中对应的值

小程序中通过thissetData({key:value})将表单上的值赋值给data中的对应值

vue中需要在触发事件的方法中，把需要传递的数据作为形参传入

小程序中需要将参数作为属性值，绑定到元素上的data-属性上，然后在方法中，通过ecurrentTargetdataset的方式获取，从而完成参数传递

有句话说，会使用 vue 开发的程序员就会开发小程序，确实是这样，在我学习 vue 后，再去学习小程序时，感觉很好上手，因为很多语法都是类似的写法。当然，也有很多不一样的。

1声明 data ：用过 vue 的朋友都知道， vue 中声明 data 时， data 必须是函数，不然会报错，原生的小程序就不是这样，直接 data: { } 就ok了。

2绑定数据：绑定动态属性时需要在属性的双引号里使用 {{ }}

3列表循环：使用 wx:for ，在循环题内有隐藏的item代表当前项， index 代表下标

4事件 事件处理函数在page里定义，和onLoad / data等同级

事件的写法：以 bind 或 catch 开头，然后跟上事件的类型，如 bindtap、catchtouchstart

bind事件绑定不会阻止冒泡事件向上冒泡，catch事件绑定可以阻止冒泡事件向上冒泡。

事件的传参：事件传参不能事件处理通过 () 来传递参数，在组件里面通过自定义属性 data-xx="参数名称" 来定义，在事件处理函数里通过 eventcurrentTargetdataset 来获取参数

事件官方文档

5修改data里面的数据

在vue中，修改data里面的数据，直接 this属性 就可以修改了，可是小程序不一样，它需要通过 thissetData({ data: newData }) 来修改，访问data的中的数据用 thisdataxx 来访问；一开始学习小程序的时候，习惯了[vue](>

redirectTo ：关闭当前页(卸载)，跳转到指定页

navigateTo ：保留当前页(隐藏)，跳转到指定页

switchTap ：只能用于跳转到tabbar页面，并关闭其他非tabbar页面,tabbar之间做切换

注意:switchTab只能跳转到带有tab的页面，不能跳转到不带tab的页面！

list页面:

detail页面:

eventtarget指的是当前点击的组件

eventcurrentTarget指的是事件捕获的组件

bindchange 这个事件官方文档中没有写，效果基本和 bindblur 一样，但失去焦点时不会被重复触发，所以一般还是采用 bindblur

小程序对于全局 wxss 组件的继承只能继承 font 以及 color 类型

bind事件绑定不会阻止冒泡事件，而catch会阻止冒泡事件，看官方文档有介绍

在指定的css属性最后带上 ! important 能够加强属性的优先级

wxs 只是与 JavaScript 相似，并非 JavaScript ，所以无法定义 const 常量，得用 var

wxs 存在的意义就是充当 compute/filter 这类功能。

且当使用 wxs 进行数据绑定时，要注意 setData 出来的数据的二次读取，

因为 setData 之前首先会进行一次初始化

wxs编写 :

wxml使用 :

关于 thisdata 与 thissetData 的使用细节

thisdata 使用于同步 *** 作(如 onLoad 加载)，而 thissetData 适用于异步 *** 作(如 wxrequest )

以上就是关于vue和小程序的比较全部的内容，包括:vue和小程序的比较、浅谈原生小程序、关于微信小程序的一些要点等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！