小程序和vue的区别
最近开发了一个比较完整的小程序项目,打算总结一下,小程序开发和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的区别的更多相关文章
- uni与小程序,vue的区别
标签区别 uni使用小程序的标签,vue使用web端的标签 标签名变化的: 标签描述\类别 vue uniapp 文本 span\font text 链接 a navigator/ router-li ...
- 只会Vue怎么开发小程序?vue和微信小程序的到底有哪些区别?
写了vue项目和小程序,发现二者有许多相同之处,在此想总结一下二者的共同点和区别. 一.生命周期 先贴两张生命周期图对比下: vue生命周期 小程序生命周期 相比之下,小程序的钩子函数要简单得多. v ...
- 微信小程序与手机APP区别
微信小程序与手机APP区别 ------------------<><><><>------------------ 微信小程序自去年年初,张小龙放话要 ...
- 深入分析:微信小程序与H5的区别
作为前端工程师,从前端的视角,为大家分析下微信小程序和HTML5与之间的主要区别 第一条是运行环境的不同. 传统的HTML5的运行环境是浏览器,包括webview,而微信小程序的运行环境并非完整的浏览 ...
- 几张图带你轻轻松松了解小程序和APP的区别
微信"小程序"的公测一开放,立即在朋友圈刷屏无数,仿佛人人都在互联网圈.但是因为微信限制,程序还不能发布使用,所以也极少人看到真正的小程序是怎么样的. 小程序驿站专注微信小程序的开 ...
- Vue+koa2开发一款全栈小程序(3.vue入门、Mpvue入门)
1.Vue-cli 1.新建一个vue项目 打开cmd 官方命令行工具 npm install -g vue-cli //安装脚手架 cd到你想要存放demo的目录下,然后 vue init webp ...
- 微信小程序与Vue js数据渲染对比
//小程序 Page({ data: { items: [] }, onLoad: function(options) { this.setData({ items: [1,2,3] }) } }) ...
- 小程序和Vue利用swiper实现icons分页显示--动态计算
这里发现小程序实现步骤,Vue与之类似 先上效果图: <view class="icons"> <swiper indicator-dots="true ...
- 微信小程序页面跳转区别总结
redirectTo.navigateTo与switchTap区别 用了这么多天的页面跳转 该总结下了 redirectTo:关闭当前页,跳转到指定页:navigateTo:保留当前页,跳转到指定页: ...
随机推荐
- C++性能榨汁机之无锁编程
C++性能榨汁机之无锁编程 来源 http://irootlee.com/juicer_lock_free/ 前言 私以为个人的技术水平应该是一个螺旋式上升的过程:先从书本去了解一个大概,然后在实践中 ...
- django管理系统代码优化-分组(二)
django管理系统代码优化-分组(二) 后续进行代码更新,优化 一优化的内容 优化前代码:https://www.cnblogs.com/pythonywy/p/11345626.html 路由进行 ...
- 【Android】笔记
一.环境搭建 1. 下载JDK, JRE , 设置JDK 和 JRE环境变量 , PATH C:\jdk1.6.0_15\bin; JAVA_HOME C:\jdk1.6.0_15 重启电脑, ...
- 14.SpringMVC核心技术-类型转换器
类型转换器 在前面的程序中,表单提交的无论是 int 还是 double 类型的请求参数,用于处理该请求 的处理器方法的形参, 均可直接接收到相应类型的相应数据,而非接收到 String 再手工转换. ...
- C++手动调用析构函数无效问题排查
在学习C++的时候,都知道不要手动调用析构函数,也不要在构造函数.析构函数里调用虚函数.工作这么多年,这些冷门的知识极少用到,渐渐被繁杂的业务逻辑淹没掉. 不过,最近项目里出现了析构函数没有被正确地调 ...
- DataTable序列化及反序列化Json
添加Json解析引用 using Newtonsoft.Json; 实现方式一:普通转换 private void button1_Click(object sender, EventArgs e) ...
- 【Git】五、远程仓库
前面4节将的都是本地的git操作,这节开始讲合并到本地分支后,如何与远程仓库做交互 -------------------------------- 提要 //生成本地ssh密钥 $ ssh-keyg ...
- spark streaming消费kafka: Java .lang.IllegalStateException: No current assignment for partition
1 原因是: 多个相同的Spark Streaming同时消费同一个topic,导致的offset问题.关掉多余的任务,就ok了.
- springboot2集成activiti出错
报一个反射错误 java.lang.ArrayStoreException: sun.reflect.annotation.TypeNotPresentExceptionProxy 解决方案:http ...
- 洛谷 P3119 [USACO15JAN]草鉴定Grass Cownoisseur (SCC缩点,SPFA最长路,枚举反边)
P3119 [USACO15JAN]草鉴定Grass Cownoisseur 题目描述 In an effort to better manage the grazing patterns of hi ...