最近开发了一个比较完整的小程序项目,打算总结一下,小程序开发和vue开发的代码上的区别

1.小程序的路由写在app.json文件里,vue写在route.js里

2.小程序用 src="{{path}}" 绑定标签属性,vue用 :src="path" 绑定标签属性

3.小程序用 wx:if="{{lenth>5}}" 来条件判断,vue用 v-if="lenth>5" 来条件判断

4.小程序用 wx:for="{{array}}" 来遍历列表,默认数组的当前项的下标变量名为 index,默认数组当前项的变量名为 item;vue用 v-for="(item,index) in array" 来条件遍历列表

5.小程序用wx.navigateTo()或wx.rediretTo()跳转页面,vue用this.$router.push()或this.$router.replace()跳转页面

6.小程序绑定事件传参这标签里加data-变量名="参数值"的属性,事件回调方法取参时使用e.currentTarget.dataset.变量名的方式获取参数值;vue绑定事件传参直接在标签里的事件回调方法后加参数,如@click="callbackName(参数值)",事件回调方法取参数只要声明function加上参数名,如callbackName:function(变量名){ },方法体里就可以用变量名直接使用该参数

7.小程序用<block></block>配合wx:if或wx:for来渲染包含多个元素的内容,vue用<template></template>配合v-if或v-for来渲染包含多个元素的内容

8.小程序里给data的属性赋值需要使用this.setData()方法来更新,不能用'='直接赋值;vue给data里的属性赋值可以直接用'=',如this.a=true

9.小程序防止事件冒泡把bindtap改为catchtap就可以了;vue防止事件冒泡用添加事件修饰符来实现,如@click.stop

小程序和vue的区别的更多相关文章

  1. uni与小程序,vue的区别

    标签区别 uni使用小程序的标签,vue使用web端的标签 标签名变化的: 标签描述\类别 vue uniapp 文本 span\font text 链接 a navigator/ router-li ...

  2. 只会Vue怎么开发小程序?vue和微信小程序的到底有哪些区别?

    写了vue项目和小程序,发现二者有许多相同之处,在此想总结一下二者的共同点和区别. 一.生命周期 先贴两张生命周期图对比下: vue生命周期 小程序生命周期 相比之下,小程序的钩子函数要简单得多. v ...

  3. 微信小程序与手机APP区别

    微信小程序与手机APP区别 ------------------<><><><>------------------ 微信小程序自去年年初,张小龙放话要 ...

  4. 深入分析:微信小程序与H5的区别

    作为前端工程师,从前端的视角,为大家分析下微信小程序和HTML5与之间的主要区别 第一条是运行环境的不同. 传统的HTML5的运行环境是浏览器,包括webview,而微信小程序的运行环境并非完整的浏览 ...

  5. 几张图带你轻轻松松了解小程序和APP的区别

    微信"小程序"的公测一开放,立即在朋友圈刷屏无数,仿佛人人都在互联网圈.但是因为微信限制,程序还不能发布使用,所以也极少人看到真正的小程序是怎么样的. 小程序驿站专注微信小程序的开 ...

  6. Vue+koa2开发一款全栈小程序(3.vue入门、Mpvue入门)

    1.Vue-cli 1.新建一个vue项目 打开cmd 官方命令行工具 npm install -g vue-cli //安装脚手架 cd到你想要存放demo的目录下,然后 vue init webp ...

  7. 微信小程序与Vue js数据渲染对比

    //小程序 Page({ data: { items: [] }, onLoad: function(options) { this.setData({ items: [1,2,3] }) } }) ...

  8. 小程序和Vue利用swiper实现icons分页显示--动态计算

    这里发现小程序实现步骤,Vue与之类似 先上效果图: <view class="icons"> <swiper indicator-dots="true ...

  9. 微信小程序页面跳转区别总结

    redirectTo.navigateTo与switchTap区别 用了这么多天的页面跳转 该总结下了 redirectTo:关闭当前页,跳转到指定页:navigateTo:保留当前页,跳转到指定页: ...

随机推荐

  1. ingress安装配置

    Traefik Traefik 是一款开源的反向代理与负载均衡工具.它最大的优点是能够与常见的微服务系统直接整合,可以实现自动化动态配置.目前支持 Docker.Swarm.Mesos/Maratho ...

  2. bzoj2152 聪聪可可 (树形dp)

    大意: 给定树, 随机选两点, 求两点距离是3的倍数的概率. 树形dp入门水题, 枚举每个点作为lca时的答案即可. #include <iostream> #include <qu ...

  3. uni-app的H5版使用注意事项

    使用方式 打开uni-app项目下的vue文件 点击菜单 运行->运行到浏览器->Chrome 在Chrome內打开调试模式(右键->检查)开启设备模拟,模拟移动设备(如果UI变形刷 ...

  4. CUDA中使用多维数组

    今天想起一个问题,看到的绝大多数CUDA代码都是使用的一维数组,是否可以在CUDA中使用一维数组,这是一个问题,想了各种问题,各种被77的错误状态码和段错误折磨,最后发现有一个cudaMallocMa ...

  5. java引用传递,值传递

    2个interger的引用对象传给一个swap方法在方法内部进行交换 1.1 java中方法参数传值方式 java中方法传参数都是值传递的,只不过根据参数的类型是引用类型还是非引用类型 引用类型传递的 ...

  6. 使用SSH命令行远程登录运行在CloudFoundry上的应用

    当我试图用如下命令行采用SSH远程登录到运行在CloudFoundry环境下的应用时, cf ssh -N -T -L 9229:127.0.0.1:9229 jerry-demo-server 遇到 ...

  7. 文件的空间使用和IO统计

    数据库占用的存储空间,从高层次来看,可以查看数据库文件(数据文件,日志文件)占用的存储空间,从较细的粒度上来看,分为数据表,索引,分区占用的存储空间.监控数据库对象占用的硬盘空间,包括已分配,未分配, ...

  8. 十八,helm的原理及基础使用

    目录 helm介绍 核心术语 helm安装 helm安装 Tiller安装 创建tiller相关的rbac helm使用 添加chart源 helm常用命令: 基础命令 自定义chart 一.char ...

  9. 修改office2019安装位置,自定义安装需要的功能

    更新:2019.5.30楼主本人本次重装系统后装office2019再次测试,没有任何问题,没认真看文章,自己胡乱一同操作,导致各种问题的,出了错就就瞎评论,说博主误导人,对你们这种人就是呵呵.左转不 ...

  10. oracle 初试 hint

    最近在研究oracle的视图问题,本来想全转成 物化视图(materialized view)的,这样可以极大提升系统的响应时间,无奈工作量太大,所以就研究了SQL优化的问题. 我这个普通视图 有36 ...