00:00
好的我们继续啊,那我们静态的页面搭建完了以后呢,那这节课呢,我们来看一下小程序的页面语法啊,来到我的课件里面啊。那我们先来看第一个啊,看数据绑定好,那么数据绑定这一块呢,分为这么几个点啊,我给大家列了一下啊,包括如何初始化数据,如何使用数据,以及如何去修改数据。啊,那现在呢,我们先来看啊,如何初始化,初始化的话特别简单,在我们GS中啊,配这个函数里面有个data塔的选项,我们直接在这里初始化来来到我们的代码这一块啊。我们可以把这些关掉,打开我们当前页面的JS文件,在这里呢,大家看有个data的选项啊,并且呢,它的注释写的很清楚啊,叫页面的初始化数据。
01:02
在这里呢,你可以写任何你想要的初始化数据啊,这儿呢,我来一个初始化的测试数据保存一下。好的,那这样的话呢,我们就初始化完毕了,那如何知道我们页面中data有哪些数据呢?打开我们的调试器,那这一把呢,我们再来看一个控制台的选项,叫APP。啊,在这个里面大家看啊,这有对应的页面路径,那么这个呢,是用于标识是哪个页面,而下边这显示的啊,那就是我们当前,诶撤销一下啊,就是我们当前页面的数据,你看message啊,初始化的测试数据,OK,初始化呢很简单啊。那为什么要在这儿初始化数据呢?啊,大家记住我说的啊呃,小程序中页面上使用的动态数据呢?都会问贝塔去要。所以我们任何的数据详情页面用呢,必须想办法放到这个里边。
02:05
那这是这一点,那初始化完了以后呢,我们来到页面去用一下啊。好。来到我的结构里边啊,比如说这个北方汉子,现在我不想用这个静态的数据了,我想用这个message,注意你不能直接去写message,那么直接写的话呢,它其实就是一个普通的文本字符串啊,那现在它对应的其实是一个变量,我们如何让小程序呢,把这个当做变量去解析呢?啊这里我们需要用到这个双大括号表达时,在这个里面写这个message,然后我们再保存一下啊,我们来看。这个时候大家看啊,他就把这个message当做变量解,呃解析,然后呢,去我们GS啊,也是逻辑层里面data中获取到对应的数据,并且显示出来没有问题啊,以上呢,就是这个页面啊。
03:01
呃,数据初始化以及使用,那么这个数据呢,它不可能是一成不变的啊,就是说后期。很有可能我们要动态的去修改这个数据。啊,这里呢,我们得说啊,如何去修改这个数据也很关键。好来,那在这啊这呢有一个allload往下看啊,对应的呢,是生命周期函数中的页面加载的钩子函数啊,下边这些呢,都是对应的生命周期函数啊,一共一共有几个,一共有五个。哎,从这一共有五个,那么这个钩子函数呢,上呃之后呢,专门有一节课我给大家说啊,这里呢,首先大家要知道这个alo是页面一加载呢,它就会执行,那页面一加载就会执行,我做一个打印,而且呢,它是我们页面钩子函数里面最先执行的啊,你看上来是不是执行了。啊,先知道这个啊,它是最先执行的一个生命周期函数,那么接下来呢,我在这里去给他做一件事情啊,就是修改我们这个message的啊状态数据。
04:11
小程序里面如何去修改这个状态数据呢?啊,我们需要用到的语法。哎,用到的语法呢,是z.S贝塔。首先我们要知道,哎,这个是谁,我给大家打印一下啊,打印一下。OK,现在呢,我们看到RA是一个对象啊,你看像这些呢,是它的钩子函数,以及页面的一些啊对应的事件啊,处理函数,那下边我们往下看,呃,这儿呢,有一个得塔的选项,对吧?而且这个data塔这有三个点,那三个点是干嘛的,大家可以想一下啊,首先你要知道啊,现在我们访问的race是当前页面的实例。
05:02
啊,那这个认识。那代表我们当前页面的实例对象啊,那这个呢,我们可以联想一下啊,我们在view react组件里面,咱们是吧,也操作race呀,那么组组件里面的race呢,代表的是当前组件的。实例对象。对吧,不管说是组建也好,还是我们小程序的页面也好,最终呢,都会被实例化啊,你像这个配件最终一定会调用生成它的实例。OK,那这是这个,而我们在这里边要操作的话呢,都是去通过去操作。然后我们往下看啊,大家看这有一个贝塔。刚才我们说了这三个点是干嘛的呢?大家学view RA,包括小程序啊,尤其是学完view以后,你要注意,当我们看到这三个点意味着啥呢?你看啊,我移上去,这有一个提示叫invoke property get,哎,就是去调用什么属性呢?Get属性。
06:11
哎,在VU2里面呢,我们知道啊,我们说VU的二的,呃,源码分析里边有一个啊,就是V如何去实现我们的数据。劫持和代理。对吧,啊,如何实现这个数据劫持和代理。嗯,首先呢。呃,在维U中,它我们初始化数据呢,是在data中,但是呢,最终是不是被组件实力race代理了。而我们操作这个数据呢,就是Z点叉叉叉属性,是不是就可以直接操作呀,那这是因为他把贝塔中的数据劫持代理到它自身上边。而这个劫持代理的过程呢,用到的呢,是我们的object点。什么呀?哎,DeFine property啊,用的是这个解的方法。
07:03
而这个方法里面呢,我们用到的是它的get以及set属性,对不对,呃,Get以及set属性。没有问题啊,那这个get呢,是用于去获取数据对吧。里面有个return啊,Set呢,用来监视当前数据,当你的属扩展属性啊,就是这个叉叉叉一遍,Set会调用啊,正是因为我们能够揭示这个属性,所以view中啊,我们说数据层的数据一遍,我如何去更新视图,那么第一步我是不是要去更新我数据层data中的数据啊?用到的就是这个set方法。那在小程序里边,我们一看到这个,哎,你也就知道了,它底层在编译的时候呢,也是用了什么object.DeFine property,这个时候大家看我一点,其实呢,是去调用get的方法,然后拿到里边的数据。
08:01
哎,那通篇来看的话,这里边在this自身上边呢,并没有什么,并没有这个message属性,那说明啥。说明我们的小程序呢,它并不像我们的view一样实现了数据劫持代理。啊,那也就是说在小程序里面,首先我们要拿到data塔中的数据呢,我们必须是点data塔,然后在点里边的属性。哎,只有这样才能拿到。嗯,我们编一下啊,那控制台呢,应该会有打印啊,你看啊,如果说你直接点message。来,走一波啊。那这个时候大家看到的就是什么N范啊,那说明他并没有劫持代理。OK,那这是这个啊,这是这个啊,这一点呢,我们要注意,那知道了这个以后啊,接下来呢,我们去尝试着修改一下它的数据,哎,This set data。对吧,Message,比如说这个呢,是啊,修改之后的数据保存。
09:07
首先我们看一下页面上啊,能不能显示出修改之后的数据啊,没有问题,大家看已经改了对不对,那接下来呢,还要做一个动作啊,我去cancel.log比如说我在它的后边呢,我去打印一下这个message,我们看一下我们拿到的到底是修改之后的呢,还是修改之前的。往上一点你看啊,修改之后的数据没问题,那说明啥?说明当前this set data。在我们onload也是自身的钩子函数中,它修改这个状态数据。是同步修改。啊,我为什么要说这一点呢?因为我们知道在react里面,哎,React里面,呃,它修改状态呢,是不是用到的是this.set state呀。哎,跟我们现在小程序的这个用法特别像。
10:03
啊,只不过是在我们react里面的state state呢,它在自身的钩子函数中修改呢,是异步的。是异步行为,注意现在小程序是同步的,而react里边呢,它在非自身的钩子函数中修改才是同步的。那现在呢,我们来测一下我们小程序,如果说在非自身的钩子函数中是同步还是异步啊来,那现在呢,我看一个延时定时器在这里,我把这个代码丢进来,然后呢,我让他延迟两秒去修改,我们看一眼。嗯,上来加载两秒以后,大家看修改之后的数据,那说明我们在非自身的这个钩子函数,这不是定时器的回调吗?呃,在非自身的钩子函数中修改它也是。什么呀,也是同步的。
11:02
好了,以上呢,就是关于数据绑定啊这一块小程序里边的语法啊,那因为它比较重要,我给大家总结一份笔记啊笔记,那这个笔记呢,我会把跟rank和不的对比,咱们也都给他写一下啊。啊,那这个呢,作为我们课堂的笔记。呃,现在呢,我去新建一个啊,新建一个。来在这里啊,现在呢,我们要讲的是小程序啊相关OK,我们先说第一个啊叫数据绑定,那数据绑定那这里加上空格吧,好来我们先说啊,我们刚说完的这个小程序啊,首先它初始化数据呢,需要在这个贝塔中。对吧,哎,初始化数据,嗯,然后呢,啊修改数据啊,需要用到的是this.set data,并且呢,他这个呢是呃修改的行为。
12:02
啊,修改数据的行为啊,他呢,始终是什么,始终是同步的。啊,同步的啊,那这是在小程序里面啊,我们再说在view中呢,我们也是在贝塔中呢,初始化这个数据,呃,修改数据的话呢,我们是就是list k啊等于一个value。对吧,那再说在react中啊,他们初始化呢,是在stage中初始化这个状态数据。嗯,如果说有的小伙伴说对于这两个框架技术呢,啊,没有学过啊,咱们上硅谷也有对应的课程,大家到时候可以去看一下,好,那Switch中呢,去初始化我们的状态数据。嗯,然后呢,我们说一下它修改这个数据啊,用到的是this set date,嗯,用法呢,跟我们的set data啊一模一样。好,那在这呢,我得说啊,它在自身的钩子函数中啊,比如。
13:03
哎,RA中呢,它自身的钩子函数啊,就生命周期函数啊,就比component。嗯,然后呢,是比如说我们来一个这个吧,D的帽子,比如说在在它里面啊。那它呢,是什么啊,是异物的,然后呢,非自身的钩子函数。啊中,比如说刚才我们举了个例子,对吧,定时器的回调,嗯,那它呢,是啊同步的,哎,这是它的特点,然后呢,再说一个点啊,既然我们已经对比了,来我们回顾一下在view里面它的数据流。嗯,来在维中数据流到底是单向还是双向。哎,可能有的同学说了,我们view中学的是双向数据绑定,对吧,那这个时候大家要注意啊,我们的view呢,它也是啊是什么是单向数据流也是它默认的啊是model model层留下我们的视图层就是view层。
14:05
只不过你们在五中学习的是它呢,实现了什么叫啊双向数据绑定。对吧,啊,我们经常用到一个指令叫什么v model。去进行页面的双向数据绑定,对不对啊,那这是这个一定要注意我们前端里面啊,像无用react,包括我们的小程序啊,他们都是单向数据流。啊,你包括呃,我们RA里面啊,它的数据流啊也是。什么啊,单向,然后呢,从这个model层,嗯,流向我们的view层。只不过啊,在RA和小程序中呢,它并没有去实现我们的双向数据绑定,那这个呢,我给大家列到这儿。啊,这一点呢,一定要注意啊,一定要注意好了,以上呢,是我们小程序里边啊双向那这个数据绑定的内容,并且呢,给大家总结了一下它跟view和react框架里面的区别,那么这节课呢,我们先讲到这里。
我来说两句