【微信小程序】一文学懂小程序的数据绑定和事件绑定

简介: 【微信小程序】一文学懂小程序的数据绑定和事件绑定

1.数据绑定


数据绑定的基本原则:

  1. 在 data 中定义数据
  2. 在 WXML 中使用数据


在页面对应的 .js 文件中,把数据定义到 data 对象中,然后把data中的数据绑定到页面中渲染,使用 Mustache 语法(双大括号)将变量包起来即可。

<view>{{数据名称}}<view>


使用案例:

首先在data中定义数据,然后在wxml中通过Mustache语法把数据渲染到页面上。

data: {
    info:'helloworld',
  }
<view>{{info}}</view>

1.1.png


Mustache 语法的应用:

  • 动态绑定内容
  • 动态 绑定属性
  • 运算(三元运算、算术运算等)


1.1动态绑定内容


在 data 中定义数据:

1.2.png


在wxml中使用数据:

.1.3.png

1.2动态绑定事件


页面数据如下:

1.4.png


页面结构如下:

1.5.png

1.3三元运算


页面数据:

1.6.png


页面结构:

1.7.png

1.4算术运算


页面数据如下:

1.8.png


页面结构如下:

1.9.png

2.事件绑定


2.1什么是事件


事件是渲染层到逻辑层的通讯方式。通过事件可以将用户在渲染层产生的行为,反馈到逻辑层进行业务的处理。

1.10.png

2.2小程序中常用的事件


类型

绑定方式

事件描述

tap

bindtap 或 bind:tap

手指触摸后马上离开,类似于 HTML 中的 click 事件

input

bindinput 或 bind:input

文本框的输入事件

change

bindchange 或 bind:change

状态改变时触发


2.3事件对象的属性列表


当事件回调触发的时候,会收到一个事件对象 event,它的详细属性如下表所示:

1.11.png

2.4 target 和 currentTarget 的区别


target 是触发该事件的源头组件,而 currentTarget 则是当前事件所绑定的组件。举例如下:

1.12.png


点击内部的按钮时,点击事件以冒泡的方式向外扩散,也会触发外层 view 的 tap 事件处理函数。此时,对于外层的 view 来说:

  • e.target 指向的是触发事件的源头组件,因此,e.target 是内部的按钮组件
  • e.currentTarget 指向的是当前正在触发事件的那个组件,因此,e.currentTarget 是当前的 view 组件


2.5 bindtap 的语法格式


在小程序中,不存在 HTML 中的 onclick 鼠标点击事件,而是通过 tap 事件来响应用户的触摸行为。通过 bindtap,可以为组件绑定 tap 触摸事件,语法如下:

1.13.png


在页面的 .js 文件中定义对应的事件处理函数,事件参数通过形参 event(一般简写成 e) 来接收:

1.14.png

2.6 在事件处理函数中为 data 中的数据赋值


通过调用 this.setData(dataObject) 方法,可以给页面 data 中的数据重新赋值,示例如下:

1.15.png

2.7 事件传参


小程序中的事件传参比较特殊,不能在绑定事件的同时为事件处理函数传递参数。例如,下面的代码将不能正常工作:

1.16.png


因为小程序会把 bindtap 的属性值,统一当作事件名称来处理,相当于要调用一个名称为 btnHandler(123) 的事件处理函数。

1.17.png


可以为组件提供 data-* 自定义属性传参,其中 * 代表的是参数的名字,示例代码如下:

最终:

  • info 会被解析为参数的名字
  • 数值 2 会被解析为参数的值


在事件处理函数中,通过 event.target.dataset.参数名 即可获取到具体参数的值,示例代码如下:

210.18.png

2.8 bindinput 的语法格式


在小程序中,通过 input 事件来响应文本框的输入事件,语法格式如下:

通过 bindinput,可以为文本框绑定输入事件:

1.19.png.


在页面的 .js 文件中定义事件处理函数:

1.20.png

2.9 实现文本框和 data 之间的数据同步


实现步骤:

  1. 定义数据
  2. 渲染结构
  3. 美化样式
  4. 绑定 input 事件处理函数


定义数据:

2.1.png

渲染结构

2.2.png


美化样式:

2.3.png


绑定 input 事件处理函数

2.4.png

目录
相关文章
|
1月前
|
存储 JSON 小程序
微信小程序入门之新建并认识小程序结构
微信小程序入门之新建并认识小程序结构
46 1
ly~
|
2月前
|
存储 供应链 小程序
除了微信小程序,PHP 还可以用于开发哪些类型的小程序?
除了微信小程序,PHP 还可用于开发多种类型的小程序,包括支付宝小程序、百度智能小程序、抖音小程序、企业内部小程序及行业特定小程序。在电商、生活服务、资讯、工具、娱乐、营销等领域,PHP 能有效管理商品信息、订单处理、支付接口、内容抓取、复杂计算、游戏数据、活动规则等多种业务。同时,在企业内部,PHP 可提升工作效率,实现审批流程、文件共享、生产计划等功能;在医疗和教育等行业,PHP 能管理患者信息、在线问诊、课程资源、成绩查询等重要数据。
ly~
74 6
|
26天前
|
小程序 JavaScript API
微信小程序开发之:保存图片到手机,使用uni-app 开发小程序;还有微信原生保存图片到手机
这篇文章介绍了如何在uni-app和微信小程序中实现将图片保存到用户手机相册的功能。
401 0
微信小程序开发之:保存图片到手机,使用uni-app 开发小程序;还有微信原生保存图片到手机
|
1月前
|
XML 小程序 JavaScript
小程序入门之项目配置说明和数据绑定
小程序入门之项目配置说明和数据绑定
37 1
|
2月前
|
小程序 JavaScript
微信小程序学习之数据绑定,事件绑定,事件传参与数据同步的学习记录
本文介绍了微信小程序中的数据绑定、事件绑定、事件传参与数据同步的基本概念和使用方法,包括如何在data对象中定义数据、使用mustache语法在wxml中渲染数据、绑定和处理事件、事件对象属性、事件传参以及实现输入框与data数据的同步。
微信小程序学习之数据绑定,事件绑定,事件传参与数据同步的学习记录
|
3月前
|
小程序 JavaScript 前端开发
微信小程序开发时数据是否是双向数据绑定的
微信小程序开发时数据是否是双向数据绑定的
|
3月前
|
缓存 开发框架 JavaScript
人人都能看懂的鸿蒙 “JS 小程序” 数据绑定原理 | 解读鸿蒙源码
人人都能看懂的鸿蒙 “JS 小程序” 数据绑定原理 | 解读鸿蒙源码
|
21天前
|
移动开发 小程序 数据可视化
基于npm CLI脚手架的uniapp项目创建、运行与打包全攻略(微信小程序、H5、APP全覆盖)
基于npm CLI脚手架的uniapp项目创建、运行与打包全攻略(微信小程序、H5、APP全覆盖)
145 3
|
28天前
|
小程序 API
微信小程序更新提醒uniapp
在小程序开发中,版本更新至关重要。本方案利用 `uni-app` 的 `uni.getUpdateManager()` API 在启动时检测版本更新,提示用户并提供立即更新选项,自动下载更新内容,并在更新完成后重启小程序以应用新版本。适用于微信小程序,确保用户始终使用最新版本。以下是实现步骤: ### 实现步骤 1. **创建更新方法**:在 `App.vue` 中创建 `updateApp` 方法用于检查小程序是否有新版本。 2. **测试**:添加编译模式并选择成功状态进行模拟测试。
40 0
微信小程序更新提醒uniapp
|
3月前
|
小程序 前端开发 Java
SpringBoot+uniapp+uview打造H5+小程序+APP入门学习的聊天小项目
JavaDog Chat v1.0.0 是一款基于 SpringBoot、MybatisPlus 和 uniapp 的简易聊天软件,兼容 H5、小程序和 APP,提供丰富的注释和简洁代码,适合初学者。主要功能包括登录注册、消息发送、好友管理及群组交流。
101 0
SpringBoot+uniapp+uview打造H5+小程序+APP入门学习的聊天小项目