对比之前了解过的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语法异同的更多相关文章

  1. Webstorm添加新建.vue文件功能并支持高亮vue语法和es6语法

    转载:https://blog.csdn.net/qq_33008701/article/details/56486893 Webstorm 添加新建.vue文件功能并支持高亮vue语法和es6语法 ...

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

    微信小程序如何像vue一样在动态绑定类名 更新时间:2018年04月17日 14:08:44   这篇文章主要介绍了微信小程序如何像vue一样在动态绑定类名,文中给大家提到了vue与微信小程序的区别, ...

  3. ToText Basic 语法和 Crystal 语法

    本文转自http://www.softwelt.com/Know/KnowDetail-2236860.html ToText 和 CStr 是等价函数. 重载 ToText (x) ToText ( ...

  4. 移动端 | Vue.js对比微信小程序基础语法

    (1)vue 自定义组件与父组件的通信,props:[abb],可以看成自组建的一个自定义属性 (2)vue 模版语法{{}} 只能是在DOM中插入,<div>{{acc}}</di ...

  5. Webstorm 添加新建.vue文件功能并支持高亮vue语法和es6语法

    添加新建.vue文件功能 ①Webstorm 右上角File-Plugins 搜索vue如果没有就去下载 点击serch in repositories ②点击安装vue.js ③安装成功后点击右下角 ...

  6. 青否云 - 小程序待办事项vue开源系统

    青否云最新开源系统:小程序待办事项 vue-demo 青否云 vue demo 下载地址:https://github.com/qingful/vue-demo 官网 http://cloud.qin ...

  7. 微信小程序WXML页面常用语法（讲解+示例）

    (一) WXML 是什么 官方说明:WXML(WeiXin Markup Language)是框架设计的一套标签语言,结合基础组件.事件系统,可以构建出页面的结构 在前面我们就已经提过,WXML,就可 ...

  8. 支付宝小程序与微信小程序开发功能和语法糖不同

    最近开始负责公司webapp数据打通支付宝小程序,之前已经打通了微信小程序,现在根据支付宝小程序的开发文档在之前的模板上面做修改. 在修改模板的过程中,总结一下双方功能和语法糖的不同之处. 框架: a ...

  9. Blazor和Vue对比学习（基础1.2）：模板语法和Razor语法

    Vue使用模板语法,Blazor使用祖传的Razor语法,从逻辑和方向上看,两者极为相似,比如: 都基于HTML 都通过声明式地将组件实例的状态(数据/方法)绑定到呈现的DOM上 都通过指令实现更加丰 ...

  10. MongoDB（五）mongo语法和mysql语法对比学习

    我们总是在对比中看到自己的优点和缺点,对于mongodb来说也是一样,对比学习让我们尽快的掌握关于mongodb的基础知识. mongodb与MySQL命令对比 关系型数据库一般是由数据库(datab ...

随机推荐

  1. Scanner的进阶使用——数字的输入

    1.用Scanner输入数字(整数和小数) 1.定义一个整数变量 2.建立扫描器 3.使用if 4.建立电脑接收数据 5.设置else(那么)语法 6.关闭Scanner

  2. Win10资源管理器导航窗格显示/隐藏项目-注册表

    一.隐藏快速访问 HKEY_LOCAL_MACHINE\SOFTWARE\Microsoft\Windows\CurrentVersion\Explorer HubMode(类型:REG_DWORD) ...

  3. Crealens.ai 免费体验GPT-4o 生图+吉卜力风格化

    自己的一张日常照片,能在几秒内变身为一幅充满童话感的吉卜力风插画?90%的人不知道,如今只需一句话,就能在 ChatGPT 里实现"AI 生图"--这就是 GPT-4o 生图功能的 ...

  4. java基础之关键字（this、static、super、final、 权限修饰符）

    一.this的含义 this:代表所在类的当前对象的引用(地址值),即对象自己的引用. 记住 :方法被哪个对象调用,方法中的this就代表那个对象.即谁在调用,this就代表谁 this的三种运用: ...

  5. python，设置windows系统时间

    老笔记本纽扣电池没电了,每次拔掉电源再重新开机时间就对不上了,然后写个python脚本开机后执行对时吧 脚本直接网上复制的,比较简单,貌似时访问www.baidu.com获取头信息里的时间,然后设置为 ...

  6. Java程序员的Go入门笔记

    系列文章目录和关于我 0.背景 3年java开发背景(因此这篇文章的特点是:比较适合java程序员doge),业余时间有了解过一些go,如今主要技术栈是go,此篇主要结合go语言圣经和团队内go项目, ...

  7. [亲测]ThinkPHP中where方法中变量不解析的解决方法

    2018年5月4日 01:15  血的教训,今天做一个项目,需要批量更新数据,所以where中必须用变量.发现where里的变量不解析并且会直接报错,然后通过搜索发现可以在双引号中的左右加号中包裹变量 ...

  8. 【work记录：c++web聊天服务器】解决了聊天窗口的问题|修复了"没有区分好友或者群聊的聊天窗口"的bug|修复了"群聊消息undefined"的bug

    日期:2025.4.24 学习内容: 解决了聊天窗口的问题 修复了"没有区分好友或者群聊的聊天窗口"的bug 修复了"群聊消息undefined"的bug 个人 ...

  9. Asp.net core 少走弯路系列教程（一）了解 W3C

    前言 新人学习成本很高,网络上太多的名词和框架,全部学习会浪费大量的时间和精力. 新手缺乏学习内容的辨别能力,本系列文章为新手过滤掉不适合的学习内容(比如多线程等等),让新手少走弯路直通罗马. 作者认 ...

  10. 信息资源管理综合题之“SPD属于知识管理工具那一类 与 管理工具与知识库的区别 以及 使用知识地图是否可以用SynchroFLOW替代”

    一.案例:1995年10月,微软开发了一项"技能规划与开发(SPD)"的计划,他们把每个系统开发人员的工作能力和这些特定工作需要的知识制作成地图,让那个员工与团队间的配合更加默契, ...