微信小程序学习2.js基本使用之数据绑定

微信小程序自学Demo地址

对于小程序数据绑定，学习一种新语言也让我重新认识到了一门语言的新特性，学习不仅会充实自己，也会使我们从中获得快乐

小程序 的绑定我们来看代码，这里我们以项目中输入姓名为例

  
    {{actualName}}
    {{userName}}

从这个标签里可以看出，我们创建了一个父视图class为objectClass，下边用到了text标签和input输入框这个标签，内部数据直接写了一个字符变量actualName和userName

既然是变量，我们就要赋值，首先看下界面

image.png

actualName对应的是姓名这个文案，请输入为input标签的placeholder默认文案，当然当用户输入文字后的text就是我们的userName。我们来看下js里边的实现代码

image.png

界面初始化的时候，会把当前路径下的js一同执行，所以我们赋值就放到js里边，这里用户点击input标签输入文本我们用userName这个变量接受，当然初始化的时候如果后台有就直接赋值，没有就写个空字符串，如上图所示

在input的绑定方法实现赋值即可

  // 用户姓名
  nameClick: function(e){
    this.setData({
      userName: e.detail.value,  
    })
  },

看小程序官方文档可以知道，官方是不建议我们直接操作data进行处理数据逻辑的，因此用到了setData方法，比较简单理解。