00:00
Hello,大家好,我是霍长亮,那么今天咱们这节课要跟大家讲的是关于UNIAPP中啊数据绑定的基础的语法,其实咱们在前面的课程呢,我们讲了微信小程序的数据绑定,那么微信小程序呢和YouTube APP其实是有很多类似之处的,所以说如果你学完了前面的课程啊,再来听这节课就是非常简单了。好的,那么第一点呢,是关于它的一个入口文件啊,咱们在之前呢,这样啊,我把它先删除掉,然后咱们重新带给大家。实战啊,从开头搭建,这样的话对于新手来说可能更好理解一些。关闭。好,我们在这里新建一个,新建一个项目,然后我们选择APP。然后选择默认模板啊,因为咱们要讲课嘛,做一下演示,所以选择的是默认模板二杠一啊,这个为了好记,这是第二个,这是第一个,然后呢,我们在下面点击这里的创建。
01:14
OK,它这里呢,会进来非常快啊,然后在这我们点击。这里有一个配置点Jason啊,我们之前都说过嘛,凡是和Jason相关的,在这套课程里面都是和配置相关的,那么我们在这就可以看到数组中的第一项表示应用启动项,那么它的启动项是什么啊?我们找到配置这个页面啊。好,找到ind叉这个文件夹,然后找到indx,那么它就是相当于是启动文件啊,我们也可以点击这里的预览啊,进行一下预览,看一下它的效果,任何一个程序呢,我们都需要先学着找一下它的入口啊,你就好像说我们之之前经常拿语言来做例子。我们在写一元的时候,它也是需要有一个入口,一元出口什么啊,是这个启动窗口对吧,或者说是启动子程序,那么你只找到了入口,你还能知道第一步执行什么。
02:12
所以说我们在做APP开发啊,用这个UNAPP的时候也是先要明白以后你要看别人的源码,你也先要先看啊,因为他有可能在这进行了调整啊,人家要是把这个位置改了,改成别的啊,到时候你说你诶为什么我的首页跟他看到的不一样,对吧,这个是可以改的,那么我们根据这里才能找到。你所看到的这套源码,它所对应的首页是哪里啊,这是第一点关于这个入口文件,第二点呢,就是关于这个运行调试,说我们想要把它运行调试看一下效果,我们在这呢只是一个预览,对吧?还有很多种方式可以进行运行调试,那么在哪可以运行呢?看这里有一个运行啊,我们点击啊,就好像我们的小程序录音机的开始按钮,让点击,这个时候它就会有很多的显示,对吧?呃,这个呢,就是在浏览器啊,谷歌浏览器。
03:09
啊,我自己安装的也是谷歌浏览器,然后你如果说安装的别的浏览器呢,理论上也可行,但是我建议使用谷歌,为什么你比如说你用360之类的,他广告实在是太多了,一会儿一个弹窗,一会儿一个弹窗,顺便的在这吐槽一下360啊,他这就是既当裁判又当运动员,别人弹窗他能给拦截,但是自己的弹窗他可不拦截。那么我们在使用浏览器选择的时候,如果说你要是做开发,我建议啊还是使用谷歌干净清爽好,那么我们在这儿呢?可以点击一下进行,然后它会跳转到这个。谷歌浏览器的一个展示的页面。好,那么这是第二点,关于一个运行,一个运行的展示,好的,那么下面呢,我们就要进入重点了啊,就是关于一个数据绑定,其实也不算是难点,因为我们之前的课程也讲过了,在微信小程序里面,我们要讲还记得这个吗?两个大括号表示什么?表示的是变量对不对?那么在这里。
04:16
显示title,那title对应的是什么?对应的是下面这个初始化的值,对不对?这个呢,就是初始化啊,在这里写一下。现数据初始化。数据初始化啊,这个呢,就是数据初始化,那我们想要更改,我们直接在这里改。然后我们点击一下保存。对吧,这个题也就跟着变了。所以说这。讲数据绑定的时候啊,非常简单,你只要知道数据绑定,诶就是在这加上一个大括号,那说我要是没有前面这些标签,没有这个text标签行不也可以对吧,我直接就来个大括号。
05:04
然后拍到。保存。对吧,它也会出来,区别呢,就是没有前面这些样式而已,没有这个样式而已,但是它一样会出来的啊。好的,这个呢,就是关于一个啊,数据绑定的一个最简单的理解方式,当然说咱们这节课不可能光讲到这儿,还是要再往前面深挖一点啊,深挖一点。这点呢啊,我们在这里之所以使用方法,而不是使用对象是是因为选项。啊,这个呢,是一个小的知识点啊,其实你就直接按照这个格式去背就行啊,不要用这种冒号啊,那么我们用方法就是我能想到的最佳的选择方式。
06:14
啊,那我们想要复杂一点,比如说咱们想要动态的修改啊,这个标签上的这个属性,这个我把它先删除掉。后面这块就没了,对吧,然后呢,我们在这加上一个属性,那么在。我们以前讲HTML的时候,直接class等于什么什么就完了,但是在UNAPP里面啊,咱们就需要加上一个冒号,那么这个冒号呢,它的全部。完整其实是微钢棒的,然后包叉叉叉啊,比如说我写一下。对吧,这个呢是一个半完整的模式,那么它真正完整的模式是什么?是非常棒的,咱把它带删除掉。
07:04
没敢放。然后。对吧,那么这个呢,和我们刚才所写的是一样的,就是说这个微杠棒可以删除掉的啊,在正常来讲,它是一个缩写啊,你可以把它删除掉啊,有它就相当于是在告诉你,诶,我是打算把它弄成一个动态的值啊,如何如何的,心里得有数对吧?大概明白了它和。有它和没它的区别就好啊,你就记住了,你要写全称呢,就把它都写上,你要把它删除掉呢,只要后面有一个冒号啊,大家也能看得懂。好,那么我们在后面啊,可以写一个class等于的一个名字。那么在这呢,这个变量对吧,还没有呢,那我们需要在下面给他讲一个变量,比如说。这杆我们打算写个class对吧?
08:00
SS。啊。然后冒号。引号啊是单引号。那么在这里呢,我们就已经有了一个class,那么我们就可以把这个class name。点击一下库存,把它写到这里。然后呢,在这又有一个新的问题了,哎,有同学说,诶老师,那你上一次讲咱们小程序的时候,不是还要有一个大括号吗?对吧,那这就一个新的区别了,你如果说在小程序微信小程序里面,你这嘎作为一个变量,你就需要有打括号,但是呢,我们现在讲UNAPP你可以不加大口,因为你前面有一个8CLASS里,那么系统就会认为,诶这已经是一个动态的一个变量啊,所以说你这里可以不加这个大括号啊,在这个啊UNAPP里面,这也是一个小的技巧。然后呢,我们读这行代码对吧,Class等于class name,这个class name是咱们自个写的,你写张三,你四亡五兆六或长量都无所谓,对吧。
09:04
它等于它,那么它到这之后也需要给它变成一个属性,变为一个值对吧。在这呢,这个类咱们可以写一个,比如说。对吧,然后能保存看一下效果。好好到现在啊,刚刚。在这我们还是打开网页看一下,打开御警看一下。我应该已经在浏览器里面打开过了哦。啊,对吧,好,我们现在刷新一下。检查,然后我们找到这个位置。这款我们看上面这个class,它就有一个。A对应的这个类,那么这个A是什么?就是我们刚刚在原码里面。
10:03
写的A的减,那如果说你这这个位置你写的。加几个一,然后点击下保存。然后这边刷新一下。然后再来查看。对吧,那么他也就会变成。后面加了几个一,这里面呢是同步的。换言之呢,咱们在这里所写的这个类名,其实啊,你也可以自定义的啊,就像我常说的,你写张三李四或商量都可以啊。啊,当然,咱们正常书写的时候,你肯定不能后面加一堆数字,那太丑了。啊,那我们如果说想要再给他增加一个事件,该怎么点啊事件呢?比如说我们想来个点击啊,点击之后它会弹出一个什么框啊,或者说是出现一个呃,调试输出啊之类的,对吧,那么我们该如何在这里。
11:06
咱们再来一个。没啊。对吧,当你鼠标点到这里的时候啊,它就会有一个提醒啊,绑定事件监听器啊,得得得得,大家自己去看吧。然后这里有一个啊。B杠这里。一杠二的啊。想好报号和例子。那么它呢,大概意思就是说一个点击啊,当点击的时候会触发一个什么什么什么。事件。好啊,我们现在双击。之后在这边呢,就可以看到有相关的事件名啊,比如说是啊,这个是组件被点击式触发,然后下面的是手指触摸后触发啊,这个是手指触摸后超过350毫秒再离开触发啊,这个呢是。
12:16
手指触摸后马上离开,手指触摸动作被打断,如来电提醒弹窗啊,这个手指触摸动作结束,手指触摸后移步啊,手指触摸后开始,这个就是看你将来的一个个性化的需要啊,你就记住是在这里进行选择,然后呢,我们最常用的其实就是这两个,呃,一个就是触摸后马上离开,还有一个就是呃被点击时触发,绝大部分的都是被点击式触发,所以说我们就选择。然后呢?他马上就会让你再选择一个啊,就是说这个世界名是什么啊,我们在这里呢,可以再起一个事件名称。比如说ODN。
13:01
啊,那这个open它也是一个名字对吧?所有的名字你完全都可以自己去自定义,你叫什么都可以,那么我们在这里写了一个名字,就是当点击的时候会跳到open所对应的这个时间,那这个open我们就需要在下面也给他一个。方法在方法这里。习惯性的保存一下。
15:04
我们现在再刷新一下,诶,我把这个窗户打开的,然后我再刷新点。现在窗口也很小,那我就把它。算了,就先这样吧,然后我们一会儿还是需要再仔细看的啊,在这里我们刚才说刷新一下。之后刷新之后,我们做一下点击。啊。你点击之后就会出现了一个日志的提醒,那么这个日志是怎么来的呢?就是我们刚刚在这里所写的,那你后面也可以随便改,对吧。然后只要保存。
16:01
这边呢,再刷新,然后再点击。看到吧,这里也就跟着改了,那么我们在做调试的时候,在网页中进行调试啊,就可以用这种方式来进行查看,它呢,和我们语言里面的这种啊调试输出。是一个意思对吧,都是为了,都是为了进行一个过程的一个调试啊,比如说帮帮助我们查一下将来诶哪里有了报错啊,都用这种方式可以。啊,这个就是一个简单的一个事件的一个绑定,然后就像我之前说的嘛,那么它也有一个缩写。对吧,那么它的缩写呢,就是at啊,V-on呢可以用at,然后这个V杠棒呢,可以用冒号啊,这两种方式都可以,但是你要是刚开始新手学的话,你怕出来混了,那你就直接都写上,反正这个在UNI克里面,你只要敲个V,它后面就都出来了,也省得你自己的也不算麻烦啊。
17:06
啊,那么讲到这里呢,我们再回忆一下上节课啊,就上上上上上上节课讲的关于微信小程序里面的啊,这个数据房间,我们还涉及到了一个叫做动态对吧?什么叫动态,你比如说我这边都已经加载完了,对吧,我不点它,我就是等它,比如说过了三秒钟之后,诶,让这些字变成一个另外的字,那么这个功能该如何实现呢?啊,这就涉及到一个新的东西了啊,动态绑定对吧。好,我们回忆一下。我们回忆一下咱们当时啊,写小程序,写微信小程序的时候,这个功能,我们用了一个什么什么命令啊,Set time对吧,我输入。正常我们应该输入一个set,它就会能直接展现出来整段代码才对,S。
18:03
对吧,在这。找个双击,然后在后面呢。我们。打一个括号,它自然就会提醒出来,对吧,这个程序所对应的命令是什么,还记得吧,后面。是一个时间啊,单位是毫秒,比如说我们写一个3000,前面呢,就是你3000之后要干啊,3000毫秒也就三秒钟之后你要干什么,对不对啊,我们在这呢,和上一段课程一样,可以写一个箭头函数啊,箭头函数是什么,咱们之前也都跟大家讲过啊。然后一个等号。箭头。给大括号。对不对,这个的意思就是3000秒之后要执行什么命令,那什么命令写在哪呢?就写在这里。
19:01
那么我们现在就要把它的值进行一个改变,那这个改变该怎么写?我们可以直接写this啊,这个this呢,在这里指的是什么?就是指的上面这个date啊,他那里面不是有title吗?那我们在这里面就可以直接点,然后就能够找到title。一开始没有啊。有了对吧。然后这个T的值我们就可以来个等号,等于什么?有说。这里是等待三秒钟之后出现的信息。好的,那我们现在再来保存一下,然后在这头我们来听一下。
20:00
123。对吧,那么它就会变成我们这里所展示的这些,那就像我一直所说,这里的内容你是随便可以改的,对吧?啊保存一下,然后再来刷新一下一二三点对吧,这个呢,就是关于一个动态事件的一个。方法啊,呃。我们后期呢,肯定还会遇到有很多类似的。东西啊,到时候呢,也会比这些更复杂,现在我们只有两个,而且其中一个还是我们自己刚刚写的,那么你后期的可能会有很多啊。好的,那么我们再继续思维扩展一下,对吧,你比如说咱们刚才讲了。你点击之后它怎么样,它只是输出一个日志对吧,咱们现在又点击了更改它的title,那么我们把这两个结合在一起呢?啊,如果说我们点击之后想要输出日志,同时更改泰斗怎么简也非常简单,咱直接把它上面copy下来不就完了吗?
21:13
这是点二。T等于。啊,单引号在一言里面定那个常见常常亮是双引号。然后我们在这儿可以写一个,这里是点击之后的变化,好我们现在再来保存一下,然后你这套刷新一下。123变啊,它这里已经变了吧,我们来点击一下啊,它又会变一下,其实我们在这里也能看到它有一个日志输出,对不对啊,这个呢,就是一个结合啊,我们需要明白想要更改啊,只是用一个this点什么什么就可以更改了,因为它和他在同。
22:05
一个STEM里面我们直接写个this,那么this翻译成英语就是这啊这这这是什么,这就是他啊,对吧。觉的就是它它这里面所有的title啊,Class name啊,在这里面也都可以用,对吧。那我们一直都在说,在这里一杠棒的我们可以把它删除掉啊,用一个冒号来代替V杠棒的冒号,然后这个V-on冒号的也可以用一个T来代替。那我们现在再来保存一下,我看一下效果变化。123变。然后我们点击对吧,点击之后这里也会出来,所以说这两种方式都是一样的啊,就是说这个你写V杠放的冒号和。直接写成冒号,这是一个意思啊,它是一个缩写啊好,那这节课呢,主要跟大家讲的就是关于一个数据绑定啊,同时也介绍了一些常用的小的啊语法啊,感谢大家关注,我是霍长亮。
我来说两句