微信小程序学习之数据绑定,事件绑定,事件传参与数据同步的学习记录

数据绑定,事件绑定,事件传参与数据同步

    • 1. 数据绑定
      • 1.1. 在data中定义数据
      • 1.2. 在wxml中渲染数据 (mustache语法)
    • 2. 事件绑定
      • 2.1. 事件
      • 2.2. 常用的事件
      • 2.3. 事件对象的属性列表
      • 2.4. target 和 currentTarget的区别
    • 3. 事件传参与数据绑定
      • 3.1. 在事件处理函数中给data中的数据赋值
      • 3.2. 事件传参(通过自定义属性的方式)
      • 3.3. 获取事件传递的参数值
      • 3.4. 文本框与data之间的数据同步
        • 3.4.1. input输入框事件及获取即时的输入框数据
        • 3.4.2. 文本框与data数据同步的小demo

1. 数据绑定

数据绑定的基本原则:在data中定义数据,在wxml中使用数据

1.1. 在data中定义数据

在data中定义数据,找到页面对应的.js文件,然后把数据定义到data中即可。

pages/list/list.js

// pages/list/list.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
    // 字符串类型的数据、
    info:'init data',
    // 数组类型的数据
    msgList:[{msg:'hello'},{msg:'world'}],
    numberA:Math.random()*10,
    ImageSrc:'./kl.jpg'
  },
  //.....
})

1.2. 在wxml中渲染数据 (mustache语法)

mustache语法,插值表达式
将data中的数据绑定到页面中渲染,使用mustache语法即双大括号{{}}将变量包起来即可。
{{要绑定的数据名称}}

mustache语法可以动态的绑定内容和属性,例如:

<!-- 将当前页面的.js文件中的data中的info属性取出来 -->
<view>{{info}}</view>
<!-- 将当前页面中的.js文件中的data中的ImageSrc属性取出来-->
<image src="{{ImageSrc}}"></image>

mustache语法,还可以做一些基础的运算加减乘除,以及三元表达式

<view>{{3+2}}</view>
<view>{{3-2}}</view>
<view>{{3*2}}</view>
<view>{{3/2}}</view>
<view>{{3>2 ? '3大于2' : '3小于2'}}</view>
<view>{{numberA}}</view>
<view>{{numberA>5 ? '大于5' : '小于5'}}</view>

在这里插入图片描述

2. 事件绑定

2.1. 事件

事件即从渲染层到逻辑层的通信方式。通俗的说就是你在前台页面做了什么,需要触发哪些行为。

在这里插入图片描述

2.2. 常用的事件

类型绑定方式事件描述
tapbindtap 或 bind:tap手指触摸后马上离开,类似HTML中的click事件
inputbindinput 或 bind:input文本框的输入事件
changebindchange 或 bind:change状态改变时触发

2.3. 事件对象的属性列表

当事件回调触发时,会收到一个事件对象event

list.wxml

<view>
  <!-- 为button按钮绑定一个tap事件,且事件名叫btnTapHandler -->
  <button type="primary" bindtap="btnTapHandler"></button>
</view>

list.js

// pages/list/list.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
   //......
  },

  // 绑定的事件函数  且将event对象传入,并且在控制台打印输出
  btnTapHandler(e){
    console.log(e)
  },
})

控制台输出:

在这里插入图片描述

属性列表如下:

属性类型说明
tyreString事件类型
timeStampInteger页面打开到触发事件所经过的毫秒数
targetObject触发事件的组件的一些属性值集合
currentTargetObject当前组件的一些属性值集合
detailObject额外的信息
touchesArray触摸事件,当前停留在屏幕中的触摸点信息的数组
changedTouchesArray触摸事件,当前变化的触摸点信息的数组

2.4. target 和 currentTarget的区别

target 是触发该事件的源头组件,curretTarget是当前事件绑定的组件。
例如下面的例子:

list.wxml

<view style="background-color:lightgreen;" bindtap="outerHandler">
  <button type="primary">按钮</button>
  <text>文字</text>
</view>

list.js

// pages/list/list.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
   //......
  },

  // 绑定的事件函数  且将event对象传入,并且在控制台打印输出
  outerHandler(e){
    console.dir(e.target)
    console.dir(e.currentTarget)
  },
})

在这里插入图片描述

  1. 当我们尝试点击(触摸按钮时),会输出下面的内容
    在这里插入图片描述

  2. 我们触摸text组件时,会输出下面的内容
    在这里插入图片描述

  3. 触摸view组件时,输出下面的内容
    在这里插入图片描述

对比得出,e.target就是你触摸的组件,e.currentTarget就是你当前事件绑定的组件(view)
点击内部的按钮时,点击事件以冒泡的方式向外扩散,也会触发外层view的tap事件处理函数。

3. 事件传参与数据绑定

事件传参与数据绑定几乎和vue差不多

3.1. 在事件处理函数中给data中的数据赋值

例如:点击一个按钮,将data中的某个数值加一,同时页面中的数据也通过插值表达式动态渲染出来并且实时变化。

list.wxml

<view>
  <text style="text-align: center;margin-left: 100px;">{{count}}</text>
  <button bindtap="countAdd" type="primary">点我+1</button>
</view>

list.js

// pages/list/list.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
   count:0
  },

  countAdd(){
    this.setData({count:this.data.count+1})
  },
  //....
)}

在这里插入图片描述

3.2. 事件传参(通过自定义属性的方式)

在微信小程序绑定事件时,绑定的是事件名,所以无法通过绑定事件时传递参数,但是可以通过自定义属性来传递参数 data-* 的方式

错误的事件传参

<button bindtap="btnTapHandler(123)">点我传递参数</button>

上面的这种写法,会让微信小程序误以为 “btnTapHander(123)” 是一个函数名,从而去该页面所在的.js文件中查找是否存在 名为 “btnTapHander(123)” 的函数。

正确的事件传参:

<!-- data-* *是data中存在的数据名 {{123}} 将被解析为数字123,即参数的值 -->
<button bindtap="btnTapHandler" data-number="{{123}}">点我传递参数</button>

3.3. 获取事件传递的参数值

在事件处理函数中,通过event.target.dataset.参数名即可获取具体的参数值。

例如,获取上面的按钮传递过来名为number的参数值

btnTapHandler(e){
  // e 为事件对象
  // dataset 也是一个对象,包含了所有通过data-* 传递过来的参数
  console.log(e.target.dataset)
  // 获取自定义属性number的值
  console.log(e.target.dataset.number)
}

在这里插入图片描述

3.4. 文本框与data之间的数据同步

3.4.1. input输入框事件及获取即时的输入框数据

input 输入框 的事件可以通过bindinput来绑定,然后数据获取则通过函数回调event对象,再通过event.detail.value来获取输入框即时的数据。

事件绑定 (list.wxml)

<view>
  <!-- 注意事件名别和内置的函数名重名 -->
  <input bindinput="inputHandlerA"/>
</view>

数据获取 (list.js)

inputHandlerA(e){
  console.log(e.detail.value)
}

在这里插入图片描述

在这里插入图片描述

3.4.2. 文本框与data数据同步的小demo

例子:input输入框输入数据,页面同时刷新,输入框也刷新

  1. 定义数据 (list.js)
Page({
   data: {
     msg:'你好!'
  },
})
  1. 渲染结构 (list.wxml)
<view>
  <text>{{msg}}</text>
  <input value="{{msg}}" bindinput="inputHandlerA"/>
</view>
  1. 美化样式 (list.wxss)
/* pages/list/list.wxss */
input{
  border: 1px solid #eee;
  padding: 5px;
  margin: 5px;
  border-radius: 3px;
}
text{
  padding: 5px;
  margin: 5px;
  border-radius: 3px;
}
  1. 绑定input事件处理函数 (list.js)
 inputHandlerA(e){
    this.setData({
      msg:e.detail.value
    })
  },

默认效果:
在这里插入图片描述

尝试输入或者删除重新输入的效果:
在这里插入图片描述

效果验证,数据同步即时刷新


本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/36634.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

基于LLM大模型开发Web App生成器

随着越来越多的代码生成模型公开可用&#xff0c;现在可以以我们以前无法想象的方式进行文本到网络甚至文本到应用程序。 本教程介绍了一种通过流式传输和渲染内容来生成 AI Web 内容的直接方法。 推荐&#xff1a;用 NSDT设计器 快速搭建可编程3D场景。 1、在 Node 应用程序中…

按日,周,年统计,无的数据补充0

需求&#xff1a;按日-周-年统计。统计涉及到3张表数据。 写sql。先把3张表数据摘取出来&#xff0c;只需对3张表的时间做分组统计即可。 按日统计 select DAY(dateff) as time,IFNULL(count(id),0)as num from(select create_time as dateff,id as id from cz_taxi_orders…

通过列排斥能比较两组迭代次数

( A, B )---3*30*2---( 1, 0 )( 0, 1 ) 让网络的输入只有3个节点&#xff0c;AB训练集各由6张二值化的图片组成&#xff0c;让差值结构中有6个1, 行分布是0&#xff0c;1&#xff0c;1&#xff0c;1&#xff0c;1&#xff0c;2列分布是2&#xff0c;2&#xff0c;2.统计迭代次…

【单片机】msp430f5529 万年历,数字时钟,矩阵键盘修改时间,7针OLED显示,内部温度读取

文章目录 功能实物图原理图一些程序片段矩阵键盘内部温度读取将年月日转为星期 功能 1 显示万年历&#xff0c;利用内部RTC模块 2 按键修改时间 3 显示芯片内部的温度数值 实物图 原理图 一些程序片段 矩阵键盘 https://qq742971636.blog.csdn.net/article/details/1316505…

OpenCV使用ellipse()函数来绘制一个椭圆

/*** void ellipse(* InputOutputArray img, // 图像* Point center, // 椭圆原心* Size axes, // 椭圆x轴长度的一半,y轴长度的一半* double angle, // 椭圆旋转角度* double startAngle, // 起始角度* double endAngle, // 终止角度* const Scalar& color, // 椭圆颜色*…

Hexo博客部署腾讯云服务器

✅作者简介&#xff1a;大家好&#xff0c;我是Cisyam&#xff0c;热爱Java后端开发者&#xff0c;一个想要与大家共同进步的男人&#x1f609;&#x1f609; &#x1f34e;个人主页&#xff1a;Cisyam-Shark的博客 &#x1f49e;当前专栏&#xff1a; 前端相关 ✨特色专栏&…

华为Harmony应用开发初探

HarmonyOS是一款面向万物互联时代的、全新的分布式操作系统。在传统的单设备系统能力基础上,HarmonyOS提出了基于同一套系统能力、适配多种终端形态的分布式理念,能够支持手机、平板、智能穿戴、智慧屏、车机等多种终端设备,提供全场景(移动办公、运动健康、社交通信、媒体…

<Linux开发>驱动开发 -之- Linux I2C 驱动

&#xff1c;Linux开发&#xff1e;驱动开发 -之- Linux I2C 驱动 交叉编译环境搭建&#xff1a; &#xff1c;Linux开发&#xff1e; linux开发工具-之-交叉编译环境搭建 uboot移植可参考以下&#xff1a; &#xff1c;Linux开发&#xff1e; -之-系统移植 uboot移植过程详细…

springboot服务端接口公网远程调试,并实现HTTP服务监听

文章目录 前言1. 本地环境搭建1.1 环境参数1.2 搭建springboot服务项目 2. 内网穿透2.1 安装配置cpolar内网穿透2.1.1 windows系统2.1.2 linux系统 2.2 创建隧道映射本地端口2.3 测试公网地址 3. 固定公网地址3.1 保留一个二级子域名3.2 配置二级子域名3.2 测试使用固定公网地址…

三个视频怎么合成一个视频?分享简单好用的合并方法

通过将多个视频合并成一个&#xff0c;可以将分散的内容整合在一起&#xff0c;形成一个连贯的故事或主题。这对于制作影片、剧集、纪录片或视频日志等需要综合多个片段的项目非常有用&#xff0c;可以产生更连贯和流畅的观看体验。那么怎么将视频进行合并呢&#xff1f;给大家…

外部中断实验(stm32)

目录 EXIT的相关代码exit.cexit.h LED的相关代码KEY的相关代码BEEP的相关代码main.cGPIO 跟中断线的映射关系图 说明&#xff1a;以下内容参考正点原子资料 EXIT的相关代码 exit.c void EXTIX_Init(void) { EXTI_InitTypeDef EXTI_InitStructure;NVIC_InitTypeDef NVIC_InitS…

pycharm如何给一串中文快捷加引号(方法二)

点击上方“Python爬虫与数据挖掘”&#xff0c;进行关注 回复“书籍”即可获赠Python从入门到进阶共10本电子书 今 日 鸡 汤 商人重利轻别离&#xff0c;前月浮梁买茶去。 大家好&#xff0c;我是皮皮。 一、前言 前几天在Python白银群【此类生物】问了一个Pycharm基础的问题&a…

数据结构--哈夫曼树

数据结构–哈夫曼树 带权路径长度 结点的 权 \color{red}权 权:有某种现实含义的数值&#xff08;如:表示结点的重要性等) 结点的带权路径长度 \color{red}结点的带权路径长度 结点的带权路径长度:从树的根到该结点的路径长度(经过的边数&#xff09;与该结点上权值的乘积 树的…

【玩转循环】探索Python中的无限可能性

前言 循环可能是每个编程语言中使用比较多的语法了&#xff0c;如果能合理利用好循环&#xff0c;就会出现意想不到的结果&#xff0c;大大地减少代码量&#xff0c;让机器做那些简单枯燥的循环过程&#xff0c;今天我将为大家分享 python 中的循环语法使用。&#x1f697;&am…

Neo4j图数据库的使用笔记

Neo4j图数据库的使用笔记 win系统安装Neo4j图数据库 安装准备&#xff1a; neo4j-3.4.0版本的zip包 找个目录解压安装zip包 启动neo4j 下载neo4j-3.4.0版本的zip包 可以去neo4j官网下载&#xff0c;也可以去微云数聚官网下载。 微云数聚是neo4j在国内的代理商。 解压到…

满汉楼项目

满汉楼项目 1. 满汉楼介绍 满汉楼是一个综合餐饮管理系统&#xff0c;其主要分为&#xff1a; 人事登记&#xff1a;各部门人员信息登录管理&#xff1a;员工号、姓名、职位、密码菜谱价格&#xff1a;菜谱及价格报表统计&#xff1a;统计销售额成本及库房&#xff1a;名称注…

flutter聊天界面-聊天气泡长按弹出复制、删除按钮菜单

flutter聊天界面-聊天气泡长按弹出复制、删除按钮菜单 在之前实现了flutter聊天界面的富文本展示内容&#xff0c;这里记录一下当长按聊天气泡的时候弹出复制、删除等菜单功能 一、查看效果 当长按聊天气泡的时候弹出复制、删除等菜单&#xff0c;可新增更多按钮 二、代码实现…

2023/7/8总结

Tomcat 启动&#xff1a;双击bin目录下的startup.bat文件停止&#xff1a;双击bin目录下的shutdown.bat 文件访问 &#xff1a;http://localhost:8080&#xff08;默认是8080&#xff0c;可以修改&#xff09; git的使用 打开git bash git config --global user.name "名…

OpenCV读取一张深度图像并显示

#include <iostream> #include <opencv2/imgcodecs.hpp> #include <opencv2/opencv.hpp> #include

服务端研发提测模板

test环境分支自测通过 提测邮件标注test环境分支 【xxxxxx需求】服务端研发提测了&#xff0c;快去测试吧!