00:00
好嘞,各位,那从这小节开始呢,咱们来学一下view里的这个监视属性,刚才学的呀,是计算属性是吧?回到课件当中,哎,就是1.7里的这个啊,那咱这样啊,做一个简单的小例,页面上啊有一个文字叫今天天气很凉爽,然后这儿呢,有一个切换天气的按钮,当你点击这个按钮的时候呀,凉爽这两个字啊就变了,变成什么呢?炎热。然后等你再点这个按钮啊,又重新变回凉爽,也就是说呀,它在凉爽和炎热之间来回切换啊,只有这两种状态,要么是凉爽,要么是炎热,然后每一次天气切换的时候,你看这儿。都会被这儿给捕获到啊,他会告诉你,哎,说天气变了,现在是什么,原来是什么,好吧,咱这样啊,各位先不考虑监视这一块,红色框里的,不管它,我们先实现蓝色框里的一个基本切换,好吧,哎,回到代码当中走,打开这个,然后天气案例是吧,然后跟大家说一下啊,这个细心的同学啊,可能发现了我在写V代码的时候啊,是有一些提示的,哎,其实从上一小节开始就有提示了啊,我是装了一个Vs code里的一个插件啊,给大家推荐一下,是这样啊各位不见得吧,你非得安装我推荐的这个,因为Vs code的这个插件商店里啊,针对V所设计的插件太多了啊,你如果有更好的,你用自己更好的就行,我觉得我接下来推荐这个还不错,我先推荐给你,其实呢,我们在学view的时候啊,一共会用到三个Vs code里的插件,我先给你推荐第一个啊,各位我筛选一下,找到我已经启用的这个里边我搜一下V。
01:35
应该是在最后,哎这儿呢,各位看VIEW3代码片段对吧?这个snaps不是有片段的意思吗?打开,然后插件的名字叫这个插件的作者是他,哎,然后评分还挺高的啊,因为可能有一些插件是重名的,反正我觉得这还不错,对吧?那用了它有什么优势呢?来我们看一下各位,比如说呢,在你去写view这些代码的时候啊,你比如说我看到我直接写new,然后呢VE,然后回车,你看就有这个提示,然后里边呢,你看你写一个comped,你打个com,诶就有提示了,然后比如说你想配置那个方法,你打一个method的,不用拼权啊,就在这method,诶回车就有这效果了,哎,反正建议大家吧,还是装一下,这是一个效率上的问题,好吧,来呢,这块呢给它删掉来吧,咱写写啊,页面上呢有一个H2对吧,叫做今天,哎天气啊,很很杂的不知道写问号下边呢有一按钮,哎,Button叫做切换电气,那你肯定得创建一个view实例,哎,那这回呢,就别再用内幕了,因为我保存的也不。
02:36
不是人的名字呀,不是学校的地址啊,对吧,我保存的是天气到底热不热,而且你注意分析啊,它只有两种状况,要么是凉爽,要么是炎热,所以说在这儿啊,推荐你用一个布尔值去表达天气到底热还是不热啊,那我在这儿呢,就用一个A字hot对吧,然后一上来呢,为真,你说啥意思,就是天气到底热不热呗,这我就不写注释了,各位a hot为真就是热,A hot为false为假,那就是凉爽呗。哎,好了,咱先不做更多的切换啊,不做那么复杂的,好,那这块你也知道怎么写了,不能写问号了,我要直接写is hot同学,你说是啥后果呢?我们看一下啊。
03:12
今天天气啊很真,哎,这不对,因为我们得把这个针呢给它转成炎热,你说对吧,所以说怎么办呢?哎说老师我知道了,这儿呢,我得写一个判断,各位这块不能写if判断,因为咱之前聊过,这个里面要写表达式,If是判断语句,不形成值,不叫表达式,所以说在这呢,同学我们要写那个三元表达式,哎,或者有的时候也叫做三目表达式,对吧,问他一下你热不热啊,他说我热,那就是炎热好了,那这呢再写一个,那不是炎热,哎不是炎热,那就是凉爽呗,好,那我们看一下效果,诶炎热那切换能不能有效果呢?这样我们先借助V的那个开发者工具啊去切换一下点击。一上来为真,那就是炎热,诶我给它改一下,改成假,你看这不就凉爽了吗?好了,那这儿呢,是起作用的,回到代码当中,但是这儿啊,同学这么写呀,稍微有点不太好,因为你这儿是不是又把这个表达式写的过于麻烦了呀,啊咱得这么说啊,同学其实还行,其实还行啊,但是我们既然学了那个计算属性,那我们就用计算属性去做一下吧,也就说这里边的东西,诶我剪切走,然后这儿我直接用一个属性啊,叫做info,就是以后啊我不再自己写判断了,就是今天天气很info呢,是一个计算属性,你帮我维护好,所以说既然是计算属性,你是不是得写那个comput啊,那分析一下吧,今天天气很炎热,还是凉爽,这个文字我是不是就是计算出来展示到页面上给人看一下就得了呀,所以说这个凉爽和炎热呀,只是展示到这个位置,不涉及到在这写个input框,你去改这个凉爽和炎热,所以说这个计算属性是不是得用那个简写方式啊,我就直接写这个info了,好走那里边怎么。
04:54
在家各位,其实跟刚才的逻辑是一样的,对吗?Return,返回,返回什么呢?是不是还是那一堆东西啊,但是值得你注意的是,这一定得加this,对不?各位模板里面你直接读info,你直接读it hot是可以的,但是在这儿是不是得写this呀,因为你得通过VM才能拿到这个it hot来看一下,你不写绝对报错呀,对吧?各位来到这儿看说什么it hot is not DeFined,好了,回来这儿呢,得加上这个this,好,这样的话呢,效果是一样的啊,但是看起来能好一点,好,接下来呢,我是不是得给这个按钮啊,绑定一个点击事件好了,At for click,那给它起个好听的名字吧,叫做change weatherr啥意思,改变天气吗?那这我就得配置一个什么呢?Methods,你看发没发现咱们这些配置像啊一点一点的是不是都用上了,好change weather那里边干嘛呢?各位很简单,你拿到了这个字hot之后,给它取个反,再给它复回去是不就可以了,哎,那这里边怎么写呀,各位我怎么能拿到这个is hot呢?啊,如果你这个之前听。
05:54
那还不错,那你就知道同学,只要你的info写正常函数,只要你的change whether写正常函数,这里的this,这里的this是不是都是VM,哎,所以说在这呢,很好办,this.is hot等于取反之后的is hot,你说对吧,这不就得了吗?哎,回到这儿,我们切换一下天气试试啊,炎热走凉爽再走炎热,是不是能实现一个诶切换的效果呀,好,借助开发者工具呢,我们再看一下,一上来呢,刷新。
06:22
走是出就是炎热,你点击切换的就是false凉爽对吧?好,那如果说我在这停啊,这个小案例呢,就写完了,但是同学这个小案例里面特别适合讲两个东西,一个是坑,一个是技巧,来先说说这坑坑在哪儿呢?瞧着回到代码当中,各位我不用这info了,我这样写,今天天气啊很一般,然后你分析各位红色的是不是模板,在模板中我有没有用到这个A字号的这个数据没有用到,那我有没有用到计算出来的这个info呢?是不是也没有用到,也就是说无论是你直接配置的属性还是计算属性,在你的红色模板当中,你是不是都没有用啊,那这个时候呢,开发者工具啊,可能就会出现一点小问题,我们来敲一下,回到这儿刷新,点击同学一上来是吧,True炎热这是没毛病的,然后你注意看啊,我点击一下切换走。
07:15
同学,我没骗你,我点了,但是你发现这是不是不变呀,那我告诉你啊,是这样的,在刚才我点的时候啊,其实所有的数据啊已经发生改变了,但是开发者工具啊就不给你更新了,因为他觉得页面上既然你也没有用到,那在这儿呢,我就不给你更新了,说老师真的假的呀,我觉得数据是没改吧,数据改了,只不过他不体现了,老师你咋证明呢?很简单,来到这儿呢,我收到这个VM对吧,你收到VM什么东西就都好聊了,刷新一波走,一上来是不是臭炎热,看我点一下走。数据已经变了,来验证数据到底变没变,VM.is hot你瞧是false了,vm.info你瞧是凉爽了,回到这儿它却不变,对吗?诶,这就是我说的那个坑同学,这个问题呀,不是说以后也会有,或许有一天他这个开发者工具更新的时候呀,哎,他就把这个问题解决了,但是现在是有这个小小问题的啊来还有一个呢,就是技巧,各位看着啊,你说我为了实现切换天气,是不是写了个change weather啊,Change weather里面我是不是去修改那个is hot呀,那你觉不觉得整个过程当中啊,我这写click,我这写change weather,我这配weather的,我这写change weather,其实我最想做的一句话就是这个对吧,它才是真正的修改,你说对吧,那我能不能把方法写的再简单点呢?其实这里边是可以的啊,那咱这样啊,先把这一般呀给它拿回来啊,正常写,写上这个info,好,你瞧着我这样做,同学,Methods啊,我都不写了啊,或者这样说methods写,因为里边可能还有别的方法,对吧,但是change weather我不写了。
08:49
说老师,我看你接下来你咋办,我要只写到这儿,那肯定是不行的,这个东西我住掉了,完这还用,那肯定不行,说老师,那你咋办呢?瞧着啊,我把change whether里边应该做的事啊,我直接写在这儿。
09:02
那你得做一个修改,就是模板里边不可能出现this,所以说我把所有的this点都删掉。同学也能实现切换,来瞧一下效果啊,回到页面刷新炎热吧,走凉爽走炎热,说说它怎么办到的啊各位是这样啊,这个艾click后边呀,你可以写一些简单的语句。就是说我现在切换天气,其实完成的功能很单一,代码也很少,就是把这A字号取个反复回去,你说对吧,那你看红色里的是什么呀,模板,模板里面能不能直接读取VM身上的it hot可以啊,那我就可以执行粉色的这个语句,对吧?那一执行咋的,那不就是取反,然后就付回去了嘛,是吧,说老师那我知道了以后啊,我就永远也不写这个method里这方法了,就什么东西啊,我都在这儿做,呃,怎么说呢,也不是不可以啊,你比如说各位啊,我写change whether还是正常写,然后呢,我这里边呢,维护一个X这么一个数据,它是一,然后页面呢得用是吧,你得用一下写上这个X好写完了,然后呢,我切换天气的时候,我不仅要切换天气,我还想让那个X呀做一个累加,我是不是可以写一个加加,哎,那你看一下效果啊,回到这,今天天气很炎热,11.2啊,再1.3,对不?你像这种情况啊,同学你最好就是写这个change weather,因为你做的事呢,同学。
10:22
指一个对吧,除了这个是不是还有这个呢?说老师我就想强行的不写这个change whether,那其实也可以,那来吧,这样做把它复制过来,往这一写,This点是不是删掉啊,那这个this点是不是也删掉啊,好同学,这个执行完了之后写个分号,完了再写X加加啊,你看一下这种效果啊,回来走是不是也能实现,但是同学这么写就不太好了,这么写就乱了,你知道吧,就是你做的事如果很简单,那你就这么写,你但凡还有第二个事儿啊,第二个语句你就不要这样写,那你也这写的老长老长是吧,那不太合适啊,理论上来说啊,你可以把这个东西毁成一行全写在这儿,但是那就不太合适了,还有就是啥呢?各位这里边不是像你想的说,老师我是不是写啥都行啊,不是你看着啊,我现在呢,给你提一个新要求,点击切换天气之后啊,要弹窗,那我这是不是可以写一个alert,那按照咱们的想法呢,老师一点就alert吗?那你看一下是什么效果啊,回到这个控制台,目前没报错,你点一下各位你看他报什么错误呢?他说有一个属性或者是一个方法,谁没找见。
11:22
Alert同学为啥没找见?一定要注意啊,红色的模板里面你是不是用到alert,人家直接去哪找那个alert呀,VM身上说老师VM身上没有,他就那么笨吗?他往外一找,那不就找到window上那个alert,那不就弹窗了吗?各位,这不是说你写了一个函数作用域的查找人这个模板里边配死的,他就去VM身上找alert没有就报错,或者咱这么说,他先去VM身上找alert没有找见怎么办?再去原型上找,就找到了V的原型对象,发现V的原型对象上咋的也没有alert,各位,那这个事儿就结束了,对吧,他就不会再找了啊,他就报错了。
12:02
说老师呢,就是不能写这种东西,对说老师那我好像能猜到怎么解决,我在这加个window不就得了吗?window.alert老师这回就明白了,我告诉他去window身上找这alert,哎,那你自己看看是啥效果,各位一点还是不行,他说啥VM身上没有window对吧。有没有反应快的同学知道怎么解决,其实你可以这样做啊,在这儿window完活,同学,我这么写的含义是不是相当于这么写,Window是不是一个内置的这么一个东西,哎,那我用简写方式啥意思?同学,我把谁放在VM身上了window,那你说这回有没有window,有那有没有alert,有那你说能不能弹窗,当然能啊一点,是不是弹窗了,但是吧,同学,话说回来,你真没这必要啊,真没这必要,OK,所以说在这儿呢,同学我就是跟大家说一下,他能这么写好吧,哎,以后呢,如果说你做的事很简单啊,你就这么写行吧,我把这个呢给大家留下啊,这个取反,然后我再走,把这行呢给你注掉啊,然后把这一行呢给你写成一个正常的写法啊,把这个呢,当然我得解开,这X呢,我不要window,也不往VM身上放,这X呢,诶删掉,然后把change weather呢拿过来给它放在这个位置,好,那这呢给大家写一个注释啊,叫做click啊,或者这么说吧,叫做事件艾符叉叉叉等于。
13:20
写YYY啊,你明白啥意思啊同学,叉叉叉是啥事件名YYY是啥要执行的啊,这个语句在这写一下啊,YYY,哎,可以写一些简单的什么呢语句,哎,语句OK,好了,那这个咱这么写啊,叫做绑定事件的时候写个冒号,哎,YYY可以写一些简单的语句,好了,看一下能不能切换啊,走走走没问题,那这X怎么还存在呢?是因为这会儿我没删,对吧,这会删掉好了,刷新走炎热凉爽,诶,能切换了,好了,那这个案例呢,我们就准备好了,一会儿呢,我们去监视它里边的数据变化,那这一小节呢,我们听。
我来说两句