微信小程序学习(四):模板语法、数据绑定、数据监听

1、声明和绑定数据

  • 小程序页面中使用的数据均需要在 Page() 方法的 data 对象中进行声明定义
  • 在将数据声明好以后,需要在 WXML 中绑定数据,数据绑定最简单的方式是使用 Mustache 语法(双大括号)将变量包起来。
  • {``{ }} 内部可以做一些简单的运算,支持如下几种方式:
    • 算数运算
    • 三元运算
    • 逻辑判断
    • 其他...
javascript 复制代码
Page({
  // 在小程序页面中所需要使用的数据均来自于 data 对象
  data: {
    id: 1,
    isChecked: false,
    school: 'xxx',
    obj: {
      name: 'tom'
    }
  }
})
html 复制代码
<!-- 如果需要展示数据,在 wxml 中需要使用双大括号写法将变量进行包裹 -->

<!-- 展示内容 -->
<view>{{ school }}</view>
<view>{{ obj.name }}</view>

<!-- 绑定属性值,如果需要动态绑定一个变量,属性值也需要使用双大括号进行包裹 -->
<view id="{{ id }}">绑定属性值</view>

<!-- 如果属性值是布尔值,也需要使用双大括号进行包裹 -->
<checkbox checked="{{ isChecked }}" />

<!-- 算术运算 -->
<view>{{ id + 1 }}</view>
<view>{{ id - 1 }}</view>

<!-- 三元运算 -->
<view>{{ id === 1 ? '等于' : '不等于' }}</view>

<!-- 逻辑判断 -->
<view>{{ id === 1 }}</view>

<!-- 在双大括号写法内部,只能写表达式,不能写语句,也不能调用 js 的方法 -->
<!-- <view>{{ if (id === 1) {} }}</view> -->
<!-- <view>{{ for (const i = 0; i <= 10; i++) {} }}</view> -->
<view>{{ obj.name.toUpperCase() }}</view>

2、修改数据

  • 小程序中修改数据并不能直接进行赋值,而是要通过调用 this.setData 方法才能实现
  • 将需要修改的数据以 key:value 的形式传给 this.setData 方法。
  • this.setData 方法有两个作用:
    • 更新数据
    • 驱动视图更新
javascript 复制代码
Page({
  // 页面的初始数据
  data: {
    num: 1,
    userInfo: {
      name: 'Tom',
      age: 10,
      gender: '男'
    },
    animalList: ['Tom', 'Jerry', 'Spyke']
  },
  updateData() {
    this.setData({
      // key 是需要修改的数据
      // value 是最新值
      num: this.data.num + 1,
      userInfo: {}  // 用一个新对象替换原对象,数组同理
    })
    
	// 修改对象中的多个属性
	this.setData({
	  'userInfo.name': 'Jerry',
	  'userInfo.age': 100
	})
	
	// 修改数组中的属性
	this.setData({
	  'animalList[2]': 'Tyke' 
	})
  }
}

3、数据绑定-简易双向绑定

在 WXML 中,普通属性的绑定是单向的,例如:

html 复制代码
<input value="{{ num }}" />

如果使用 this.setData 来更新 numnum 和输入框的中显示的值都会被更新为值。

但如果用户修改了输入框里的值,却不会同时改变 data 中的 num

如果需要在用户输入的同时也将 data 中的数据修改 ,需要借助简易双向绑定机制。

此时可以在对应项目之前加入 model: 前缀即可,例如:

html 复制代码
<input model:value="{{ value }}" />

如果使用 this.setData 来更新 numnum输入框的中显示的值都会被更新为值。

如果输入框的值被改变了, data 的数据也会随着改变。

4、数据监听

数据监听器可以用于监听和响应任何属性和数据字段的变化,有时,需要在一些数据字段被 setData 设置时,需要执行一些操作。那么就可以使用 observers 数据监听器来实现。语法如下:

javascript 复制代码
Component({
  data: {
    num: 10,
    count: 1,
    obj: { name: 'Tom', age: 10 },
    arr: [1, 2, 3]
  },
  observers: {
    // key 是需要检测数据
    // value 是一个函数,函数接收一个形参作为参数,是最新的值
    num: function(newNum) {
      console.log(newNum)
    },
    
    // 数据监听器支持监听属性或内部数据的变化,可以同时监听多个
    'num, count': function (newNum, newCount) {
       console.log(newNum, newCount)
    }
    
    // 监听器可以监听子数据字段
    'obj.age': function(newAge) {
      console.log(newAge)
    },
    
    // 如果需要监听所有子数据字段的变化,可以使用通配符 ** 
    'obj.**': function(newAge) {
      console.log(newAge)
    },
        
    'arr[0]': function (val) {}
  }
})
相关推荐
牧羊狼的狼1 小时前
React 中的 HOC 和 Hooks
前端·javascript·react.js·hooks·高阶组件·hoc
知识分享小能手3 小时前
React学习教程,从入门到精通, React 属性(Props)语法知识点与案例详解(14)
前端·javascript·vue.js·学习·react.js·vue·react
魔云连洲3 小时前
深入解析:Vue与React的异步批处理更新机制
前端·vue.js·react.js
mCell3 小时前
JavaScript 的多线程能力:Worker
前端·javascript·浏览器
超级无敌攻城狮5 小时前
3 分钟学会!波浪文字动画超详细教程,从 0 到 1 实现「思考中 / 加载中」高级效果
前端
茯苓gao5 小时前
STM32G4 速度环开环,电流环闭环 IF模式建模
笔记·stm32·单片机·嵌入式硬件·学习
excel5 小时前
用 TensorFlow.js Node 实现猫图像识别(教学版逐步分解)
前端
是誰萆微了承諾6 小时前
【golang学习笔记 gin 】1.2 redis 的使用
笔记·学习·golang
gnip6 小时前
JavaScript事件流
前端·javascript
赵得C6 小时前
【前端技巧】Element Table 列标题如何优雅添加 Tooltip 提示?
前端·elementui·vue·table组件