微信小程序与vue语法的比较

1.事件定义区别

【1】vue事件绑定：

<button @click="dl">登陆</button>

<input type="text" @input="input"/>

vue用@来绑定事件

【2】微信小程序绑定：

<button bindtap="dl">登陆</button>

<input type="text" bindinput="input"/>

微信小程序原声写法前面加bind后面加事件名

2.事件函数传值

【1】vue事件函数传值：

<button @click="dl(index)">登陆</button>

vue传值直接写在函数括号中

【2】微信小程序事件函数传值：

<button bindtap="dl" data-index="{{index}}">登陆</button>

微信小程序传值需要用data-自定义名字={{需要传递的值}}

3.if语句

【1】vue的if语句：

<div v-if="index == 1">1<div>
<div v-else-if="index == 2">2<div>
<div v-else>3<div>

if语句前加 “v-”

【2】微信小程序if语句：

<view wx:if="{{index == 1}}">1<view>
<view wx:elif="{{index == 2}}">2<view>
<view wx:else>3<view>

微信小程序if语句前加 “wx:”，而且判断内容需要用 {{双大括号}} 包起来，第二行的else-if，直接省略成elif

4.关键字引用

【1】vue的关键字引用：

<img :src="src" />

vue中属性名前面加 “:” 或者 v-bind

【2】微信小程序关键字引用：

<image src="{{src}}" />

微信小程序中只需要属性值加“{{}}”包起来就行

5.for列表渲染

【1】vue的for列表渲染：

<block v-for="(item,i) in list" :key="i"><div>{{item.text}}</div>
</block >

vue的for语法=(每一项数据名，索引名) in 数据名

【2】微信小程序的for列表渲染：

<block wx:for="{{list}}" wx:data-item="item" wx:data-index="idx" wx:key="idx"><div>{{item.text}}</div>
</block >

微信小程序的for里只写数据名，如果需要修改当前元素的数据名：wx:data-item=“自定义的数据名” 如果需要修改当前元素的索引名：wx:data-index=“自定义的索引名” 默认数据名是item，默认索引名是index

欢迎留言补充！

微信小程序与vue语法的比较相关推荐

视频教程-uniapp开发仿阿里飞猪旅游微信小程序，vue中高级课程-Vue
uniapp开发仿阿里飞猪旅游微信小程序,vue中高级课程五年互联网实战开发经验,全栈工程师,熟悉主流前端开发技术,js,vue等,后端技术方向在python,node,曾先后就职于阿里云,阿里影业 ...
小程序和vue语法对比_React语法开发微信小程序 Demo
前言从16年微信小程序内测的时候至今,微信小程序用实践证明了自己的创新和价值,微信小程序的规则也在社区的影响下变得更加完善. 但是不得不说,用惯了VSCode,官方的开发工具确实不怎么好用.之前没有 ...
微信小程序原生常用语法 1
微信小程序的教程学习目标如何创建小程序项目小程序项目的基本组成结构小程序页面由几部分组成小程序中常见的组件如何使用小程序如何进行协同开发与发布小程序的宿主环境小程序标准开发模式 1.申 ...
微信小程序——基于vue的框架mpvue
起手式:必要的开发环境工欲善其事必先利其器!在开始写代码之前,请确保你已经安装了必要的开发环境和工具,以下是几个必需的和可选的工具: 1)node.js 现在,前端工具链基本都依赖Node.js,所 ...
微信小程序（WXML语法、WXSS样式、事件系统、WXS脚本语法）
三.微信小程序视图层框架的视图层由 WXML 与 WXSS 编写,由组件来进行展示.将逻辑层的数据反应成视图,同时将视图层的事件发送给逻辑层. ●WXML(WeiXin Markup languag ...
微信小程序和vue双向绑定哪里不一样_浅析Vue 和微信小程序的区别、比较
写了vue项目和小程序,发现二者有许多相同之处,在此想总结一下二者的共同点和区别. 一.生命周期先贴两张图: vue生命周期小程序生命周期相比之下,小程序的钩子函数要简单得多. vue的钩子函数 ...
微信小程序 nodejs+vue校园学生社团管理系统
前后端分离,后端给接口和API文档,注重前端,接近原生系统,效率更好原生小程序写起来太麻烦,比如绑定一个啥输入框事件.. pages 主要dex文件中可布局底部的tab页面,通过v-if判断显示不同 ...
基于微信小程序+SSM+Vue+Node实现智慧旅游商城系统
作者主页:编程千纸鹤作者简介:Java.前端.Pythone开发多年,做过高程,项目经理,架构师主要内容:Java项目开发.毕业设计开发.面试技术整理.最新技术分享一,项目简介随着互联网的趋势 ...
微信小程序 nodejs+vue网上购物商城系统
软件:idea/eclipse/vscode/pycharm/wamp 前后端分离,后端给接口和API文档,注重前端,接近原生系统,效率更好原生小程序写起来太麻烦,比如绑定一个啥输入框事件.. pa ...

微信小程序与vue语法的比较

1.事件定义区别

2.事件函数传值

3.if语句

4.关键字引用

5.for列表渲染

微信小程序与vue语法的比较相关推荐

最新文章

热门文章