vue项目和微信小程序之间有哪些区别

　　介绍

这篇文章主要介绍了vue项目和微信小程序之间有哪些区别,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获、下面让小编带着大家一起了解一下。

前言

写了vue项目和小程序,发现二者有许多相同之处,在此想总结一下二者的共同点和区别。相比之下,小程序的钩子函数要简单得多。

写了vue项目和小程序,发现二者有许多相同之处,在此想总结一下二者的共同点和区别。

<强>一、生命周期

先贴两张图:

vue生命周期

小程序生命周期

相比之下,小程序的钩子函数要简单得多。

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

<李>

onLoad:页面加载

一个页面只会调用一次,可以在> <李>

昂秀:页面显示

每次打开页面都会调用一次。

<李>

onReady:页面初次渲染完成

一个页面只会调用一次,代表页面已经准备妥当,可以和视图层进行交互。

对界面的设置如wx。setNavigationBarTitle请在onReady之后设置。详见生命周期

<李>

onHide:页面隐藏

当navigateTo或底部选项卡切换时调用。

<李>

onUnload:页面卸载

当redirectTo或navigateBack的时候调用。

数据请求

在页面加载请求数据时,两者钩子的使用有些类似,vue一般会在创建或者安装中请求数据,而在小程序,会在onLoad或者昂秀中请求数据。

<强>二、数据绑定

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

1只,& lt; img : https://www.yisu.com/zixun/src=" imgSrc "/>

小程序:绑定某个变量的值为元素属性时,会用两个大括号括起来,如果不加括号,为被认为是字符串。例:

1只,& lt; image  https://www.yisu.com/zixun/src=" {{imgSrc}} ">

<强>三,列表渲染

直接贴代码,两者还是有些相似

<强> vue:

1只,& lt; ul  id=癳xample-1"祝辞,, 　　2只,& lt; li  v=癷tem 拷贝items"祝辞,, 　　3只,{{,item.message }},, 　　4只,& lt;/li>,, 　　5只,& lt;/ul>,, 　　 　　7只,var  example1 =, new  Vue ({,, 　　8只,el: & # 39; # example-1& # 39;,,, 　　9只,数据:,{,, 　　10只,物品:,,, 　　11只,{,信息:& # 39;foo # 39;,},,, 　　12只,{,信息:& # 39;酒吧# 39;,},, 　　13只,), 　　14只,},, 　　15只,})

<强>小程序:

1只,页面({,, 　　2只,数据:,{,, 　　3只,物品:,,, 　　4只,{,信息:& # 39;foo # 39;,},,, 　　5只,{,信息:& # 39;酒吧# 39;,},, 　　6只,),, 　　7只,},, 　　8只,}),, 　　 　　10只,& lt; text  wx:为=皗{物品}}“在{{项}}& lt;/text>

<强>四,显示与隐藏元素

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

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

<强>五、事件处理

vue:使用v:事件绑定事件,或者使用@event绑定事件,例如:

1只,& lt; button  v:点击=癱ounter  +=, 1“祝辞Add  1 & lt;/button>,, 　　2只,& lt; button  v: click.stop=凹剖?=1“祝辞Add1,,//阻止事件冒泡

小程序中,全用bindtap(绑定+事件),或者catchtap(抓住+事件)绑定事件,例如:

1只,& lt; button  bindtap=皀oWork"在明天不上班& lt;/button>,, 　　2只,& lt; button  catchtap=皀oWork"在明天不上班& lt;/button>,,//阻止事件冒泡

<强>六、数据双向绑定

<强> 1。设置值

在vue中,只需要再表单元素上加上v模型,然后再绑定数据中对应的一个值,当表单元素内容发生变化时,数据中对应的值也会相应改变,这是vue非常不错的一点。

1只,& lt; p  id=癮pp"祝辞,, 　　2只,& lt; input  v模型=皉eason",占位符=疤钚蠢碛伞?类=& # 39;原因# 39;/祝辞,, 　　3只,& lt;/p>,, 　　 　　5只,new  Vue ({,, 　　6只,el: & # 39; #应用# 39;,,, 　　7只,数据:,{,, 　　8只,原因:& # 39;& # 39;,, 　　9只,},, 　　10只,})

但是在小程序中,却没有这个功能。那怎么办呢?

vue项目和微信小程序之间有哪些区别