微信小程序开发入门与实战(数据监听)
2023-03-14 22:46:27 时间
数据、方法和属性
1、 data 数据
组件模板渲染的私有数据如 👇
/** * 组件的方法列表 */ methods: { addCount(){ this.setData({ count:this.data.count+1 }) this._TiShi() }, _TiShi(){ wx.showToast({ title: 'count是'+this.data.count }) } },
2、methods 方法
在小程序组件中,事件处理函数和自定义方法需要定义到 methods 节点中,
示例代码如 👇
/** * 组件的方法列表 */ methods: { addCount(){ this.setData({ count:this.data.count+1 }) this._TiShi() }, _TiShi(){ wx.showToast({ title: 'count是'+this.data.count }) } },
3、properties 属性
在小程序组件中,properties 是组件的对外属性,用来接收外界传递到组件中的数据。
示例代码如 👇
WXML <text1 max="5"></text1> //默认值是15 这里设置最大值为5,覆盖了最大值 COMPONENT <view>添加的值为:{{count}}</view> <button bindtap="addCount">点击按钮</button> JS /** * 组件的属性列表 */ properties: { max:{ type:Number, value:15 } }, /** * 组件的方法列表 */ methods: { addCount(){ if(this.data.count>=this.properties.max) return; this.setData({ count:this.data.count+1 }) this._TiShi() }, //提示框 _TiShi(){ wx.showToast({ title: 'count是'+this.data.count }) } },
4、 data 和 properties 的区别
在小程序的组件中,properties 属性和 data 数据的用法相同,它们都是可读可写的 区别如 👇
- data 更倾向于存储组件的私有数据
- properties 更倾向于存储外界传递到组件中的数据
测试两者是否相等如 👇
/** * 组件的属性列表 */ properties: { max:{ type:Number, value:15 } }, /** * 组件的初始数据 */ data: { count:1 }, proData(){ console.log(this.data.max); console.log(this.data.count); console.log(this.data===this.properties); }
5、使用 setData 修改 properties 的值
由于 data 数据和 properties 属性在本质上没有任何区别,因此 properties 属性的值也可以用于页面渲染,或使用 setData 为 properties 中的属性重新赋值
示例代码如 👇
properties: { max:{ type:Number, value:15 } }, methods: { addCount(){ if(this.data.count>=this.properties.max) return; this.setData({ count:this.data.count+1, max:this.properties.max+1 }) }, }
数据监听器
1、什么是数据监听器
数据监听器用于监听和响应任何属性和数据字段的变化,从而执行特定的操作。它的作用类似于 vue 中的watch 侦听器。在小程序组件中
数据监听器的基本语法格式如 👇
'字段A','字段B':function(A值,B值){ }
2、监听对象属性的变化
数据监听器支持监听对象中单个或多个属性的变化
代码实习
WXML------------- <view class="ColorBox" style="background-color: rgb({{funllColor}});">颜色的值为:{{funllColor}}</view> <button size="mini" bindtap="RValue" type="default">R</button> <button size="mini" bindtap="GValue" type="primary">G</button> <button size="mini" bindtap="BValue" type="warn">B</button> <view> 颜色的RGB值为:{{rgbValue.r}}-{{rgbValue.g}}-{{rgbValue.b}} </view> WXSS------------- <view class="ColorBox" style="background-color: rgb({{funllColor}});">颜色的值为:{{funllColor}}</view> <button size="mini" bindtap="RValue" type="default">R</button> <button size="mini" bindtap="GValue" type="primary">G</button> <button size="mini" bindtap="BValue" type="warn">B</button> <view> 颜色的RGB值为:{{rgbValue.r}}-{{rgbValue.g}}-{{rgbValue.b}} </view> WXJS------------- // components/text1/text1.js Component({ /** * 组件的属性列表 */ properties: { }, /** * 组件的初始数据 */ data: { rgbValue:{ r:0, g:0, b:0 }, funllColor:'0,0,0' }, observers:{ "rgbValue.r, rgbValue.g,rgbValue.b":function(r,g,b){ this.setData({ funllColor:`${r},${g},${b}` }) } }, /** * 组件的方法列表 */ methods: { RValue(){ this.setData({ "rgbValue.r":this.data.rgbValue.g+5 >255 ? 255: this.data.rgbValue.r+5 }) }, GValue(){ this.setData({ "rgbValue.g":this.data.rgbValue.g+5 >255 ? 255: this.data.rgbValue.g+5 }) }, BValue(){ this.setData({ "rgbValue.b":this.data.rgbValue.b+5>255 ? 255: this.data.rgbValue.b+5 }) }, } })
如 👇
最后
下篇文章再见ヾ( ̄▽ ̄)ByeBye
相关文章
- 人民日报:手机App广告令人不胜其扰要让App清爽起来
- 超过20%用户仍在使用Android第三方ROM
- 闲谈:关于安卓系统权限问题的一些思考
- 微信视频号升级青少年模式!完善弹窗提示、时长限制
- 微信 Windows 3.3.5 正式版发布:群聊 @所有人,各种细节优化
- 微信 iOS 版 8.0.10 正式版发布
- 海淀检察院对腾讯提起民事公益诉讼:微信侵犯未成年人权益
- Android进阶之Kotlin高阶函数和Lambda表达式详细讲解
- 为什么现在我特讨厌 Safari 浏览器?
- 详解安卓应用性能测试方法以及Android SDK中辅助测试的工具使用
- iPhone关机后仍可以定位追踪!网友:手机丢失也不怕了
- Android进阶之Kotlin高阶函数原理和Standard.kt源码详解
- 升级完成!腾讯恢复微信新用户注册
- 手机发热就像全球变暖,没有厂商有办法
- 谈谈 iOS 识别虚拟定位调研
- 微信推出了“先寄后付”服务:快递小哥即拿即走不用等
- iOS版谷歌地图应用带来三个实用新功能
- 关于怎样挑选手机,说说我多年换机的经验
- Android性能优化之从卡顿和ANR来彻底理解内存泄露原理和优化
- 微信突然暂停注册!但微信借钱这新功能太香了