【微信小程序】数据绑定_初始化

🏆今日学习目标：数据绑定

😃创作者：颜颜yan_

🎉专栏系列：微信小程序开发实战

实现数据绑定

如何让data中的数据在页面中显示呢，小程序采用数据绑定的机制来做数据的初始化和更新。

小程序的脚本逻辑是运行在JSCore中，JSCore是一个没有DOM的环境，它完全抛弃了DOM结构，我们只能使用数据绑定来做数据的相关操作。

不同于AngularJS的双向数据绑定，小程序仅实现了从逻辑层传递到渲染层的数据绑定，反之则不可以。

小程序使用Page方法参数里的data变量作为数据绑定的桥梁，直接写在data里的数据，被称为数据绑定的初始化数据。

小程序的数据绑定方式有以下两种，接下来我们来看看吧~

初始化数据绑定

初始化数据绑定通常将这些数据直接写在Page方法参数的data对象下面。

post.js

如下，我们先在post.js中添加一个临时变量作为测试数据，包括以下内容。

/**
     * 页面的初始数据
     */
    data: {
        date:"Nov 9 2022",
        title:"那个不为人知的故事",
        postImg:"/images/post/unknow-story.jpg",
        avatar:"/images/avatar/avatar-5.png",
        content:"超人气作者Twentine(无量渡口)经典之作，直击心底深处的柔软。这是杨昭和陈铭生的故事，这是卧底缉毒警察的故事。 你始终不曾离去，你永远在我心底。",
        readingNum:10989,
        collectionNum:1867,
        commentNum:999
    },
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.
  • 13.

post.wxml

接下来，对post.wxml文件做一些改动，就可以让wxml能够“接收”这些初始化数据。

小程序使用Mustache语法双大括号{ {}}在wxml组件里进行数据绑定。