对比下小程序语法和Vue语法异同
对比之前了解过的Vue，方便加深 了解微信小程序语法。
下面从几个方面介绍Vue和小程序
一，钩子函数
Vue只要跳转新页面就会触发钩子函数，小程序对于不同的页面跳转方式，触发的钩子是不同的。
下面简单说几个小程序钩子函数
onLoad 页面加载时候用，一个页面调用一次。
onShow 页面显示，打开页面时候用，
onReady 页面初次渲染好 时候用，
表示页面已经准备好，可以与视图层进行交付。对界面的设置如wx.setNavigationBarTitle请在onReady之后设置。
onHide 页面隐藏时候用
onUnload
当redirectTo 或navigateBack（两个切换页面函数） 时调用。
在页面加载请求数据时，小程序和Vue类似。Vue是在created 或mounted中请求数据。
小程序是在onload或者onshow时候请求。
二，数据绑定
在Vue快速入门，必备基础知识（一）提过：
v-bind指令可以在名称后面带一个参数，中间用一个冒号隔开。这个参数通常是HTML的一个属性。例如：v-bind:class
格式：v-bind:argument="expression" 下面用这个示范一个分页中的高亮当前页。 有这句话。
推：
vue动态绑定一个变量值作为元素的属性时，会在变量前加 ：
举例：
<img :src ="imgSrc" />
小程序 绑定某个变量值作为元素属性时，用{{ }} 不加括号会被认为是字符串。
例如：
<image src="{{imgSrc}}"></image>
三，列表渲染
Vue代码
<!DOCTYPE html>
<html>
<head>
<title>钩子函数</title>
<script type="text/javascript" src="https://cdn.jsdelivr.net/vue/2.1.3/vue.js"></script>
<body>
<ul id="example-1">
<li v-for="item in items">
{{ item.message }}
</li>
</ul>
<script type="text/javascript">
var example1 = new Vue({
el: '#example-1',
data: {
items: [
{ message: 'Foo' },
{ message: 'Bar' }
]
}
})
</script>
</body>
</html>
小程序：
Page({
data: {
items: [
{ message: 'Foo' },
{ message: 'Bar' }
]
}
})
<text wx:for="{{items}}">{{item}}</text>
前一篇提过：wx:for="{{items}} items是要循环的List
四：事件处理
vue用 v-on:event=“” 绑定事件，或者 @event=“”绑定事件
举例：
<button v-on:click="counter += 1">Add 1</button>
<button v-on:click.stop="counter+=1">Add1</button> //阻止事件冒泡小程序bindtap(bind+event)，或者catchtap(catch+event)绑定事件：
<button bindtap="noWork">明天不上班</button>
<button catchtap="noWork">明天不上班</button> //阻止事件冒泡 五：数据双向绑定
vue有个双向绑定，表单元素上加上v-model，再绑定上data的一个值。当表单元素内容发生变化时，data也会发生变化。
举例
<div id="app">。
<input v-model="reason" placeholder="填写理由" class='reason'/>
</div> new Vue({
el: '#app',
data: {
reason:''
}
})
小程序没这个功能，怎么办？
当表单元素发生变化时，会触发绑在表单上的方法，在方法上，会通过 this.setData({key:value}) 会将表单值赋值给data对应的值实现双向绑定。
<input bindinput="bindReason" placeholder="填写理由" class='reason' value='{{reason}}' name="reason" />
Page({
data:{
reason:''
},
bindReason(e) {
this.setData({
reason: e.detail.value
})
}
})
对于 取值：
vue通过 this.data取值
小程序通过this.data.reason取值。
六：绑定事件传参
vue绑定事件传参比较简单，只要通过在触发事件的方法中，把需要传递的数据作为形参数传进去就好了，
<button @click="say('明天不上班')"></button>
new Vue({
el: '#app',
methods:{
say(arg){
consloe.log(arg)
}
}
})
然而在小程序不能在绑定事件里直接传参。需要将参数作为属性值，绑定到元素上的data-属性上，然后在方法中，通过e.currentTarget.dataset.*的方式获取（e.currentTarget.dataset. 会将连字符转成驼峰elementType），从而完成参数的传递。
<view class='tr' bindtap='toApprove' data-id="{{item.id}}"></view>
Page({
data:{
reason:''
},
toApprove(e) {
let id = e.currentTarget.dataset.id;
}
})
对比下小程序语法和Vue语法异同的更多相关文章
- Webstorm添加新建.vue文件功能并支持高亮vue语法和es6语法
转载:https://blog.csdn.net/qq_33008701/article/details/56486893 Webstorm 添加新建.vue文件功能并支持高亮vue语法和es6语法 ...
- 微信小程序如何像vue一样在动态绑定类名
微信小程序如何像vue一样在动态绑定类名 更新时间:2018年04月17日 14:08:44 这篇文章主要介绍了微信小程序如何像vue一样在动态绑定类名,文中给大家提到了vue与微信小程序的区别, ...
- ToText Basic 语法和 Crystal 语法
本文转自http://www.softwelt.com/Know/KnowDetail-2236860.html ToText 和 CStr 是等价函数. 重载 ToText (x) ToText ( ...
- 移动端 | Vue.js对比微信小程序基础语法
(1)vue 自定义组件与父组件的通信,props:[abb],可以看成自组建的一个自定义属性 (2)vue 模版语法{{}} 只能是在DOM中插入,<div>{{acc}}</di ...
- Webstorm 添加新建.vue文件功能并支持高亮vue语法和es6语法
添加新建.vue文件功能 ①Webstorm 右上角File-Plugins 搜索vue如果没有就去下载 点击serch in repositories ②点击安装vue.js ③安装成功后点击右下角 ...
- 青否云 - 小程序待办事项vue开源系统
青否云最新开源系统:小程序待办事项 vue-demo 青否云 vue demo 下载地址:https://github.com/qingful/vue-demo 官网 http://cloud.qin ...
- 微信小程序WXML页面常用语法（讲解+示例）
(一) WXML 是什么 官方说明:WXML(WeiXin Markup Language)是框架设计的一套标签语言,结合基础组件.事件系统,可以构建出页面的结构 在前面我们就已经提过,WXML,就可 ...
- 支付宝小程序与微信小程序开发功能和语法糖不同
最近开始负责公司webapp数据打通支付宝小程序,之前已经打通了微信小程序,现在根据支付宝小程序的开发文档在之前的模板上面做修改. 在修改模板的过程中,总结一下双方功能和语法糖的不同之处. 框架: a ...
- Blazor和Vue对比学习（基础1.2）：模板语法和Razor语法
Vue使用模板语法,Blazor使用祖传的Razor语法,从逻辑和方向上看,两者极为相似,比如: 都基于HTML 都通过声明式地将组件实例的状态(数据/方法)绑定到呈现的DOM上 都通过指令实现更加丰 ...
- MongoDB（五）mongo语法和mysql语法对比学习
我们总是在对比中看到自己的优点和缺点,对于mongodb来说也是一样,对比学习让我们尽快的掌握关于mongodb的基础知识. mongodb与MySQL命令对比 关系型数据库一般是由数据库(datab ...
随机推荐
- Redis + Springboot + Mybatis插入数据时redis中uid为空
原因 插入时数据库的id会自增,bean对象无法自动生成uid 解决 在mybatis的插入方法中添加useGeneratedKeys属性 useGeneratedKeys 对于支持自动生成记录主键的 ...
- 静态批处理/动态批处理/GPU Instancing /SRP Batcher的详细剖析
静态批处理[1] 定义 标明为 Static 的静态物件,如果在使用相同材质球的条件下,在Build(项目打包)的时候Unity会自动地提取这些共享材质的静态模型的Vertex buffer和Inde ...
- FastAPI依赖注入性能优化策略
title: FastAPI依赖注入性能优化策略 date: 2025/04/12 00:53:48 updated: 2025/04/12 00:53:48 author: cmdragon exc ...
- eolinker响应预处理：传参解决方法（响应数据截取后设置为变量）
特别注意:需要使用全局变量或者预处理前务必阅读本链接https://www.cnblogs.com/becks/p/13713278.html 一.案例1 1.场景描述: 后一个请求需要前一个请求提供 ...
- kettle介绍-Step之Write to log
Write to log写日志介绍 写日志步骤是将输入步骤的信息打印在日志窗口,供用户直接查看 Step name:步骤的名称,在单一转换中,名称必须唯一. Log level:设置日志的显示级别. ...
- 通达OA前台任意用户登录漏洞+RCE漏洞复现
声明 本文仅用于技术交流,请勿用于非法用途 由于传播.利用此文所提供的信息而造成的任何直接或者间接的后果及损失,均由使用者本人负责,文章作者不为此承担任何责任. 文章作者拥有对此文章的修改和解释权.如 ...
- 一个基于 C# Unity 开发的金庸群侠传 3D 版，直呼牛逼！
前言 大家应该都知道 Unity 游戏引擎是基于 C# 编程语言开发的,今天大姚给大家分享一个基于 C# Unity 开发的金庸群侠传 3D 版,该游戏真的是勾起了一代人的慢慢回忆. 项目介绍 JYX ...
- java设置权限过滤器--防止用户未登录访问某些页面
话不多说,上代码!!! package com.store.web.filter; import java.io.IOException; import javax.servlet.Filter; i ...
- Filter与Interceptor的区别
前言 在看springboot项目时,其中的会话持续时,了解到token,session,jwt等方法,但是接着我就了解到过滤器(Filter)以及拦截器(Interceptor),感觉这两个东西真的 ...
- window-docker的容器使用宿主机音频设备
目录 前言 操作配置 前言 你有没有遇到过这种情况? 你兴冲冲地在Windows上用Docker搭了个语音识别项目,准备让容器高歌一曲,或者至少"Hey Docker"一下.结果- ...