• 2.小程序-数据绑定


    初始化数据:
        1.页面.js的 data 选项中
        index.js 文件中代码展示:
    // pages/index/index.js
    Page({
     
     
    /**
    * 页面的初始数据
    */
    data: {
        message:'初始化测试数据'
    },
     
     
    /**
    * 生命周期函数--监听页面加载
    */
    onLoad: function (options) {
        console.log('onLoad()');
        // 页面加载最先执行的函数,类似vue中的created/mounted获取数据
        // 这里来修改一下 message 初始化的数据,语法:this.setData
        console.log(this) // this 代表当前页面的实例对象
        // vue/react 里的 this代表当前组件的实例对象
        // vue 如何实现数据的劫持和代理的,即可以this.XXX 而小程序则使用 this.data.XXX
        console.log(this.data.message)
        // 同一个函数中修改是同步的,react里同一函数内修改是异步的要想同步需要在另一个函数中写;
        // this.setData({
            // message : '修改之后的数据'
        // })
        // 看修改是否在其他函数中是否也是同步的
        setTimeout(()=>{
            this.setData({
                message : '修改之后的数据'
            })
            console.log(this.data.message)
         }, 2000)
    },
     
    使用数据:
        1.模板结构中使用双大括号 {{message}}
        2.注意事项:小程序中为单项数据流 model ---> view;
    index.wxml 文件中代码展示:
    <view class="indexContainer">
        <image class="avatarUrl" src="/static/images/nvsheng.jpg"></image>
        <text class="userName">G『 s 』</text>
        <view class="goStudy">
            <text>{{message}}</text>
        </view>
    </view>
    修改数据:
        1.this.setData({message:""}, callback)
        2.this 打印出来是一个 对象;
     
    数据绑定和修改对比小程序  Vue  React
        1.小程序
            1.data中初始化数据
            2.修改数据:this.setData()
                1.修改数据的行为始终是同步的
            3.数据流:
                1.单向的:Model ---> View
     
        2.Vue
            1.data中初始化数据
            2.修改数据:this.key = value
            3.数据流:
                1.Vue是单向数据流:Model ----> View 
                2.Vue中实现了双向数据绑定:v-model
     
        3.React
            1.state中初始化数据
            2.修改数据:this.setState()
                1.自身钩子函数中(componentDidMount)异步的
                2.非自身的钩子函数中(定时器的回调) 同步的
            3.数据流:
                1.单向:Model ---> View 
     
    官网的位置:框架---> WXML 语法参考--->数据绑定
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
  • 相关阅读:
    函数之返回值
    函数之初识函数
    三元运算符
    枚举enumerate
    模块
    迭代器
    斐波那契
    leetcode155 最小栈
    leetcode94 二叉树的中序遍历
    leetcode20 有效的括号
  • 原文地址:https://www.cnblogs.com/guo-s/p/14452480.html
Copyright © 2020-2023  润新知