vue和微信小程序的区别

1.生命周期 小程序的生命周期要简单得多,vue的钩子函数在跳转新页面时,钩子函数都会触发,但是小程序的钩子函数,页面不同的跳转方式,触发的钩子并不一样:

onLoad: 页面加载 一个页面只会调用一次,可以在 onLoad 中获取打开当前页面所调用的 query 参数。

onShow: 页面显示 每次打开页面都会调用一次。

onReady: 页面初次渲染完成 一个页面只会调用一次,代表页面已经准备妥当,可以和视图层进行交互。 对界面的设置如wx.setNavigationBarTitle请在onReady之后设置。详见生命周期

onHide: 页面隐藏 当navigateTo或底部tab切换时调用。

onUnload: 页面卸载 当redirectTo或navigateBack的时候调用。

2.数据绑定 vue动态绑定一个变量的值为元素的某个属性的时候,会在变量前面加上冒号:<img :src="imgSrc"/> 小程序:绑定某个变量的值为元素属性时,会用两个大括号括起来,如果不加括号,为被认为是字符串: 

3.列表渲染 小程序:<text wx:for="{{items}}">{{item}} vue: <li v-for="item in items">

4.显示与隐藏元素 vue中,使用v-if 和v-show控制元素的显示和隐藏 小程序中,使用wx-if和hidden控制元素的显示和隐藏

5.事件处理 vue:使用v-on:event绑定事件,或者使用@event绑定事件 小程序中,全用bindtap(bind+event),或者catchtap(catch+event)绑定事件

6.数据双向绑定 在vue中,只需要再表单元素上加上v-model,然后再绑定data中对应的一个值,当表单元素内容发生变化时,data中对应的值也会相应改变,这是vue非常nice的一点。 小程序没有这个功能,当表单内容发生变化时,会触发表单元素上绑定的方法,然后在该方法中,通过this.setData({key:value})来将表单上的值赋值给data中的对应值。

7.绑定事件传参 在vue中,只需要在触发事件的方法中,把需要传递的数据作为形参传入就可以了 在小程序中,不能直接在绑定事件的方法中传入参数,需要将参数作为属性值,绑定到元素上的data-属性上,然后在方法中,通过e.currentTarget.dataset.*的方式获取,从而完成参数的传递

8.父子组件通信 vue - 编写子组件 - 在需要使用的父组件中通过import引入 - 在vue的components中注册 - 在模板中使用

原文地址:https://www.cnblogs.com/huangshan-0809/p/10417316.html

时间: 2024-08-30 12:16:47

vue和微信小程序的区别的相关文章

Vue 和微信小程序的区别、比较

写了vue项目和小程序,发现二者有许多相同之处,在此想总结一下二者的共同点和区别. 一.生命周期 先贴两张图: vue生命周期 小程序生命周期 相比之下,小程序的钩子函数要简单得多. vue的钩子函数在跳转新页面时,钩子函数都会触发,但是小程序的钩子函数,页面不同的跳转方式,触发的钩子并不一样. onLoad: 页面加载 一个页面只会调用一次,可以在 onLoad 中获取打开当前页面所调用的 query 参数. onShow: 页面显示 每次打开页面都会调用一次. onReady: 页面初次渲染

vue和微信小程序的区别、比较

链接:https://segmentfault.com/a/1190000015684864 一.生命周期 先贴两张图: vue生命周期 小程序生命周期 相比之下,小程序的钩子函数要简单得多. vue的钩子函数在跳转新页面时,钩子函数都会触发,但是小程序的钩子函数,页面不同的跳转方式,触发的钩子并不一样. onLoad: 页面加载一个页面只会调用一次,可以在 onLoad 中获取打开当前页面所调用的 query 参数. onShow: 页面显示每次打开页面都会调用一次. onReady: 页面初

vue 开发微信小程序

介绍 mpvue (github 地址请参见)是一个使用 Vue.js 开发小程序的前端框架.框架基于 Vue.js 核心,mpvue 修改了 Vue.js的 runtime 和 compiler 实现,使其可以运行在小程序环境中,从而为小程序开发引入了整套 Vue.js 开发体验. 官方网址:http://mpvue.com/ 原文地址:https://www.cnblogs.com/xiangsj/p/10434803.html

使用VUE开发微信小程序

使用 mpvue 开发小程序,你将在小程序技术体系的基础上获取到这样一些能力: 彻底的组件化开发能力:提高代码复用性完整的 Vue.js 开发体验方便的 Vuex 数据管理方案:方便构建复杂应用快捷的 webpack 构建机制:自定义构建策略.开发阶段 hotReload支持使用 npm 外部依赖使用 Vue.js 命令行工具 vue-cli 快速初始化项目H5 代码转换编译成小程序目标代码的能力 原文地址:https://www.cnblogs.com/vxianfeng/p/9899898.

微信小程序如何像vue一样在动态绑定类名

微信小程序如何像vue一样在动态绑定类名 更新时间:2018年04月17日 14:08:44 这篇文章主要介绍了微信小程序如何像vue一样在动态绑定类名,文中给大家提到了vue与微信小程序的区别,需要的朋友可以参考下 小程序 开发中遇到这样一个问题... 排行榜开发的时候,前三名的样式不同,其余的样式一样.但是都是通过同一元素来遍历的,当时卡了一下.后来发现有module模块化这一概念,于是查了下api,一下子就做出来了. 就是不同名次上边的样式根据实际情况展示效果. 模块化 我们可以将一些公共

MPVUE - 使用vue.js开发微信小程序

MPVUE - 使用vue.js开发微信小程序 什么是mpvue? mpvue 是美团点评前端团队开源的一款使用 Vue.js 开发微信小程序的前端框架.框架提供了完整的 Vue.js 开发体验,开发者编写 Vue.js 代码,mpvue 将其解析转换为小程序并确保其正确运行. 简单上手mpvue 官方提供了一套quickstart模板. vue init mpvue/mpvue-quickstart my-project 安装好依赖之后,执行npm run dev,将会将小程序文件打包进dis

APP与小程序的区别

很多人知道APP但都不知道微信小程序是什么,现在我先来说说微信小程序! 微信小程序,他是微信里最新开发的一个程序,是一种不需要下载安装即可使用的应用,它实现了应用"触手可及"的梦想,用户扫一扫或者搜一下即可打开应用.也体现了"用完即走"的理念,用户不用关心是否安装太多应用的问题. 应用将无处不在,随时可用,但又无需安装卸载. 微信小程序于2017年1月9日凌晨正式上线.张小龙随后在朋友圈发出一条写着"2017.1.9"的状态,同时配有 iPhon

直击根源:微信小程序中web-view再次刷新后页面需要退两次

背景 在上一章(直击根源:vue项目微信小程序页面跳转web-view不刷新)解决了vue在小程序回退不刷新的问题之后,会引出了一个刷新的页面需要点击返回两次才能返回上一个页面 问题描述 在A页面从B页面带了参数返回之后,A页面会刷新,直接导致了,A页面返回上一个页面需要点击两次,其中点击一次时还是A页面. 解决方案 首先第一个想法就是,设置一下退回按钮直接跳到上一个页面去:经过资料查找,回退按钮是没有直接触发函数的,也就是说不能直接控制回退的功能. 在寻找资料时,发现可以间接的触发一个unlo

微信小程序————1wxss和css的部分区别

集成微信提供 的weui进微信小程序wxss 最开始将weui.css 全部复制进入app.wxss里面,发现跑不起来. 搜索了下,常见原因有如下几点: 截止2016.11.14日, wxss和css的部分区别 不支持:first-child这类写法, 不支持:active 不支持:checked 不支持自定义字体 @font-face { font-weight: normal; font-style: normal; font-family: "weui"; .a>.b .a