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

简介: 小程序和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的值获取该子组件调用子组件中的任意方法


相关文章
|
5月前
|
JavaScript 前端开发 算法
Vue 3 和 Vue 2 的区别及优点
Vue 3 和 Vue 2 的区别及优点
|
4月前
|
JavaScript 前端开发 API
Vue 2 与 Vue 3 的区别:深度对比与迁移指南
Vue.js 是一个用于构建用户界面的渐进式 JavaScript 框架,在过去的几年里,Vue 2 一直是前端开发中的重要工具。而 Vue 3 作为其升级版本,带来了许多显著的改进和新特性。在本文中,我们将深入比较 Vue 2 和 Vue 3 的主要区别,帮助开发者更好地理解这两个版本之间的变化,并提供迁移建议。 1. Vue 3 的新特性概述 Vue 3 引入了许多新特性,使得开发体验更加流畅、灵活。以下是 Vue 3 的一些关键改进: 1.1 Composition API Composition API 是 Vue 3 的核心新特性之一。它改变了 Vue 组件的代码结构,使得逻辑组
1447 0
|
10月前
|
JavaScript 前端开发 API
Vue 3 中 v-model 与 Vue 2 中 v-model 的区别是什么?
总的来说,Vue 3 中的 `v-model` 在灵活性、与组合式 API 的结合、对自定义组件的支持等方面都有了明显的提升和改进,使其更适应现代前端开发的需求和趋势。但需要注意的是,在迁移过程中可能需要对一些代码进行调整和适配。
432 60
|
11月前
|
JavaScript API 开发工具
vue2和vue3版本区别
【10月更文挑战第4天】
|
12月前
|
JavaScript
在 Vue 3 组件通信方式中,Provide / Inject 与 Vuex 的区别是什么?
在 Vue 3 组件通信方式中,Provide / Inject 与 Vuex 的区别是什么?
410 65
|
12月前
|
小程序 前端开发 中间件
ThinkPHP 配置跨域请求,使用TP的内置跨域类配置,小程序和web网页跨域请求的区别及格式说明
本文介绍了如何在ThinkPHP框架中配置跨域请求,使用了TP内置的跨域类`\think\middleware\AllowCrossDomain::class`。文章还讨论了小程序和web网页在跨域请求格式上的区别,并提供了解决方案,包括修改跨域中间件源码以支持`Origin`和`token`。此外,还介绍了微信小程序跨域请求的示例和web网页前端发送Axios跨域请求的请求拦截器配置。
ThinkPHP 配置跨域请求,使用TP的内置跨域类配置,小程序和web网页跨域请求的区别及格式说明
|
11月前
|
JavaScript 前端开发 开发者
Vue v-for 进阶指南:in 与 of 的区别及应用场景 | 笔记
Vue.js 中的 v-for 是强大的遍历指令,但其中的 in 和 of 关键字往往被开发者忽视。尽管它们的用法相似,但适用的场景和数据结构却各有不同。本文将详细探讨 v-for 中 in 和 of 的区别、适用场景以及在实际开发中的最佳使用时机。通过理解它们的差异,你将能够编写更加高效、简洁的 Vue.js 代码,灵活应对各种数据结构的遍历需求。
449 6
|
11月前
|
缓存 JavaScript
Vue 中 computed 与 method 的区别
【10月更文挑战第15天】computed 和 method 是 Vue 中两个重要的选项,它们在功能和特点上存在着明显的区别。理解并合理运用它们的区别,可以帮助我们构建更高效、更具可维护性的 Vue 应用。在实际开发中,要根据具体情况灵活选择使用,以满足不同的需求。
203 2
|
小程序 JavaScript
Taro@3.x+Vue@3.x+TS开发微信小程序,使用轮播图
本文介绍了使用 Taro 和 Vue 创建轮播组件的两种方法:一是通过 `<swiper>` 实现,二是利用 Nut UI 的 `<nut-swiper>` 组件实现。
373 2
Taro@3.x+Vue@3.x+TS开发微信小程序,使用轮播图
|
12月前
|
前端开发 JavaScript 开发者
React 和 Vue.js 框架的区别是什么?
React 和 Vue.js 框架的区别是什么?

热门文章

最新文章