入门微信小程序开发(三)数据绑定的几种用法

一.数据绑定

与书写HTML页面一样，小程序页面也只能通过多写多练提升。在构建完页面后就出现了一个问题，我们该如何获取组件元素让数据与之关联呢？

在网页开发中，我们同样使用JS操作DOM，包括数据渲染，事件监听等，比如我现在要通过点击一个按钮后，替换段落中的本文信息，使用JS可以这么做：

<p>我是谁？</p>
<button>点我点我</button>

let btn = document.querySelector("button"),
    p = document.querySelector("p");
btn.onclick = function () {
    p.innerHTML = '我是听风是风啊！'
};

没问题，效果虽然实现了，但是类似的操作我们总是得获取并操作DOM，逻辑层与渲染层高度耦合，每一份数据我们似乎都得找到对应的DOM所在，并帮助它们相互关联，这很明显不太友好。伴随发展，angularjs，vue，react的出现，我们知道了MVVM模式的存在，在开发中逻辑层与渲染也得以分离，微信小程序在开发模式上也借鉴了这一点，比如还是上面的效果，用小程序就可以这么做，我们分别在index.wxml和index.js中添加如下代码：

<text>{
  {myName}}</text>
<button bindtap="setName">点我点我</button>

const app = getApp()

Page({
  data: {
    myName:'我是谁？'
  },
  setName() {
    this.setData({ myName: "喷火龙" })
  }
})

     

接下来我们解释下小程序数据绑定到底怎么玩，以及其它几种常见的数据交互方式。

数据绑定{ {}}

熟悉vue等相关框架的同学对于上述例子一定十分熟悉，对于第一次了解这种用法的同学也不用担心，并不复杂，我们来解释下到底什么是意思。

首先看WXML，小程序使用{ {}}表达式来绑定解析JS文件中定义的变量，而在JS文件的data对象中一般用于定义小程序初始化所需数据，比如例子中的变量myName有一个初始值。

Page({
  data: {
    /* 页面初始数据写在这*/
  }
})

接下来就是如何通过点击事件让myName发生变化，在组件button上我们通过点击事件bindtap绑定了一个setName方法，注意，这个方法同样定义在JS文件Page对象中，与data对象同级，以往我们绑定方法一般会给方法名后带括号，小程序的方法绑定并没有括号，比如上面的bindtap="setName"。

Page({
  data: {
    /* 页面初始数据写在这 */
  },
  方法名() {
    /* do somethin