小程序和Vue写法的区别主要有什么不同

1.语法不同:小程序使用的是WXML、WXSS和JS,而Vue使用的是HTML、CSS和JSX。

2.数据绑定方式不同:小程序使用的是双向数据绑定,而Vue使用的是单向数据流。

1)在小程序中需要使用e.currentTarget.dataset.*的方式获取,从而完成参数的传递

2)Vue只需要在触发的事件中,将传递的参数作为形参传入

3.组件化方式不同:小程序的组件化方式是基于模板和样式的,而Vue的组件化方式是基于组件的。

4.生命周期不同:小程序和Vue的生命周期有一些相似之处,但也有一些不同的地方。

1)小程序生命周期:onLoad页面加载、onShow页面显示、onReady页面初次渲染完成、onHide页面隐藏、onUnload页面卸载

2)vue生命周期:data、mouted、beforeupdate、updated、beforedestory、destroyed

5.路由方式不同:小程序的路由方式是基于页面栈的,而Vue的路由方式是基于URL的。

6.开发工具不同:小程序需要使用微信开发者工具进行开发和调试,而Vue可以使用任何支持Vue的开发工具进行开发和调试。

7.显示和隐藏元素不一样

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

2)Vue中使用v-if和v-show控制元素的显示和隐藏

8.父子组件通信不一样:

1)子组件创建不一样:

a,在vue中:编写子组件、父组件通过import引入、conponents中注册、在模板中使用

b,在小程序中:编写子组件、子组件的json文件中,将该文件声明为组件、父组件的json文件中,在usingComponents填写子组件的组件吗及路径、在父组件中直接引用即可

2)父子组件传参不一样

a,在Vue中:父组件中在子组件上通过v-bind传入一个值,子组件通过props接收

b,在小程序中:在父组件中直接赋值给一个变量,在子组件中properties中,接收传递的值

3)父组件想要调用子组件的方法

a,小程序中给子组件添加id或class,然后通过this.selectComponent找到子组件,调用子组件方法

b,Vue中给子组件添加一个ref,通过this.refs.ref的值获取该子组件调用子组件中的任意方法

相关推荐
妄想出头的工业炼药师1 分钟前
后端优化MS mapping
前端
前端那点事5 分钟前
Vue大批量接口请求优化|告别卡顿、超时!前端落地实战指南
前端·vue.js
史迪仔01128 分钟前
[QML] Qt Quick Dialogs 模块使用指南
开发语言·前端·c++·qt
oy_mail17 分钟前
spring-boot-starter和spring-boot-starter-web的关联
前端
空中海30 分钟前
第四章:Vue Router
前端·javascript·vue.js
竹林81830 分钟前
从零集成RainbowKit:我如何在一个周末搞定多链钱包连接并填平三个大坑
前端·javascript
2601_9534656131 分钟前
M3U8 在线播放器:无需安装,一键调试 HLS 直播流
开发语言·前端·javascript·开发工具·m3u8·m3u8在线播放
Ruihong32 分钟前
你写的是 Vue,跑起来是纯 React?这是什么黑科技
vue.js·react.js·面试
风止何安啊35 分钟前
【前端续命术】请求总失败?给你的 AJAX 装上 “不死鸟” 重试 Buff
前端·javascript·面试
qq_120840937135 分钟前
Three.js 工程向:资源生命周期管理与显存回收实践
前端·javascript·orbitcontrols