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

news/2024/7/20 2:09:38 标签: vue.js, 小程序, 前端

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的值获取该子组件调用子组件中的任意方法


http://www.niftyadmin.cn/n/5219470.html

相关文章

MyBatis-Plus 代码生成器达梦数据库 生成失败

使用MyBatis-Plus 代码生成器生成代码,数据库使用达梦数据库,提示 “dm.jdbc.driver.DMException: 当前光标不在结果集上” 解决方法,手动注入达梦query器 // 数据源配置DataSourceConfig dsc new DataSourceConfig();dsc.setUrl(url);// …

计算机视觉面试题-03

1、简单介绍一下sigmoid,relu,softplus,tanh,RBF及其应用场景 这里简单介绍几个激活函数及其应用场景: Sigmoid 函数(Logistic 函数): 公式: s i g m a ( x ) 1 1 e …

Pytorch深度学习实战2-1:详细推导Xavier参数初始化(附Python实现)

目录 1 参数初始化2 Xavier参数初始化原理2.1 前向传播阶段2.2 反向传播阶段2.3 可视化思考 3 Python实现 1 参数初始化 参数初始化在深度学习中起着重要的作用。在神经网络中,参数初始化是指为模型中的权重和偏置项设置初始值的过程。合适的参数初始化可以帮助模型…

YOLOv8独家原创改进: AKConv(可改变核卷积),即插即用的卷积,效果秒杀DSConv | 2023年11月最新发表

💡💡💡本文全网首发独家改进:可改变核卷积(AKConv),赋予卷积核任意数量的参数和任意采样形状,为网络开销和性能之间的权衡提供更丰富的选择,解决具有固定样本形状和正方形的卷积核不能很好地适应不断变化的目标的问题点,效果秒殺DSConv 1)AKConv替代标准卷积进行…

第二十三章 解析PR曲线、ROC曲线、AUC、AP(工具)

混淆矩阵Confusion Matrix 混淆矩阵定义 混淆矩阵是机器学习中总结分类模型预测结果的情形分析表,以矩阵形式将数据集中的记录按照真实的类别与分类模型预测的类别判断两个标准进行汇总。其中矩阵的行表示真实值,矩阵的列表示预测值,下面我…

笔记62:注意力汇聚 --- Nadaraya_Watson 核回归

本地笔记地址:D:\work_file\(4)DeepLearning_Learning\03_个人笔记\3.循环神经网络\第10章:动手学深度学习~注意力机制 a a a a a a a a a a a a a a a a

Intellij Idea 断点小圆变成灰色怎么处理

场景1:变成了灰色实心圆 原因 断点变成灰色通常表示该断点处于失效状态。这可能是由于无意中点击了debug调试下方的“mute breakpoints”按钮导致的。 解决方案 依次点击设置小图标->View Options->Mute BreakPoints. 点击后 Mute BrakPoints左侧显示✔ 符号…

H5 uniapp 接入wx sdk

uniapp因为要兼容小程序等,会重写wx对象,导致引入的jweixin-1.6.0.js中对象不生效。 综合网络资料,有两种解决方案: 一,通过npm工具引入 npm install jweixin-module --save 实际上是借用了wx的另一个对象jWeixin …