00:00
好嘞,各位,那在这一小节呢,咱们来学一下旅游当中是如何绑定样式的,也就是我们课件里的这个1.8环节,你发现课件里并没有给我们准备例子,而是直接把这些规则呀给我们写好了,它的意思就是你可以自由发挥一下,因为每个人写的样式都是不一样的啊,那接下来呢,我就要把这些绑定的规则讲给大家,那我得通过例子去讲给大家,对吧?所以说在这儿呢,我就自由发挥点样式啊,打开在这里跟之前准备的结构呢,其实是一样的,你看啊各位容器里边没东西啊,View实例呢也没有创建,对吧,都是一样的,唯独就是在这儿有点小区别,我提前写好了一些样式,对吧?你刚才也看到了,打开一共是几个呢?各位,一共是七个,哎,同学说老师,哎呀,记不住啊,七个我怎么能记住呢?同学,我不去让你记里边的具体实现知道不?我只是让你记一下啥呢?哎,说这个happy,这个样式一加呀,大概那个元素应该变成一个什么样子,记的是效果而不是具体实现,对吧?还好啊,没那么难来。
01:00
我们把这七个样式依次演示给大家看,那在下边儿呢,我写一个div啊,里边写一个test,临时做测试的嘛,然后一个一个往上加啊,这些样式来打开走,首先呢,咱们看第一个啊,叫做basic啊,基本的其实你可以看一下啊,各位你下去可以看一下,你看我写了一个宽,写了一个高,写了一个边框,对不啊,最基本的这些嘛,好了,折叠起来,右键打开走。那你不加样式,它就这样的呗,啊检查,然后呢,往上加样式走,这怎么写呢?叫做class,先把那个basic给它加上走,你看有宽有高了,并且呢,有了一个边框,好再往下看,这三个什么意思呢?分别代表三种心情,Happy,心情愉悦的sad,悲伤的normal,心情不好不坏,一般的,值得你注意的是这三个东西啊,得三选一,也就是说你写了一个元素,得从这三个里面选出一个是吧,不能说同时都应用OK啊,那来我们写一下,比如说呢,我把这个happy给大家加上,你看一下效果啊,来走,你看这个边框,这个背景,这个渐变,是不是挺喜庆的,好把happy删掉,在写谁呢?这个side就是悲伤的对吧?哎,我写了一个绿色的边框,还有一个灰色的这么一个背景是吧?老师,那悲伤为什么要写绿色的边框呢?那你想一想,绿色这个颜色呀,好像挺让人悲伤的是吧?哎,好了,还有一个呢,就是normal,就代表一般的不好不坏嘛,一般般,哎,好了,三选一啊。
02:24
这三个就说完了,再说后边这三个,这三个就更简单了,各位他们三个可以同时使用,就是你写一个div,同时有这三个样式是可以的,好回来再看效果,把这个normal呢给它删掉一点点来艾特硅谷一啊,然后咱看一下效果,把它复制一份啊,因为一会儿还得用走。啊来你看一下各位啊,我要是把这个basic留下来,就是一个没有背景这么一个盒子,加上艾特硅谷一,其实就是把啥加上了一背景对吧?好了继续往上加,加谁呢?艾特硅谷二,这个时候你注意观察,观察什么呢?观察那文字变大了,并且有一个红色的阴影,对不?好了再来艾特硅谷几呢三注意观察啊各位走边框变成圆角的对吗?好,七个样式呢,都给大家说完了,接下来呢,我们操作一下它啊在这儿呢,我有一个要求,这这个test啊,得是一个动态的数据,所以说得写一个内幕,那你得创建一个view实例,走配好内幕是上硅谷完完事了哈,然后这个div呢,不管他以后怎么变,一定有一个最基本的样式,就是basic啊,然后提出我的第一个需求,您听好了,就是这个DIV1上来呢,它有两个样式,一个是基础的basic,一个是心情一般般的normal,当你点击这个div之后啊,这个normal就要变化变成happy愉快的啊,那把初始的那些好normal对吧,然后我的。
03:41
要求是点击它怎么怎么地,所以说你是不是得绑定一个点击事件啊,名字呢,我想好了mod mod本身是不是就有心情的意思呀,好,那你得给它配置一个麦斯啊,然后里边叫做群之目的,请问里边干嘛?我点了这回调里面干嘛拿到这个div,把他身上的normal给它改掉,变成happy是不是就可以了,然后呢,就有一些同学反应比较快了,哎呀,老师我写一个IDE啊,叫做DEMO,然后在这呢,我就这么写了啊,我自己呢去拿到这个div啊,然后呢,点他身上的class name,然后原来不是叫这个basic normal吗?现在换了叫做basic happy,老师我写完了。
04:20
啊,能不能实现呢?这效果其实也能,你瞧一点是不是开心了,但是各位你这么写违规了,为什么你干嘛呢?你看你干嘛呢,亲自在拿到节点吧,亲自是不是操作这个节点啊,你不要自己去动道母,你说对吗?哎,所以说同学你要这样写吧,你把也撤掉吧,对不?哎,你也不用学view里边去绑定样式了是不?所以说同学来给这个删掉点击事件得有change目的得有,但是里边不应该做刚才那事儿这ID呢,其实你也不用给,对吧,那说说怎么办?同学其实就是有一个人在变,谁呢?Normal,谁不变呢?Basic,然后呢,你看着他是这么玩的,各位不变的东西你该怎么写就怎么写,我正常绑定一个样式class basic没毛病吧,那老师变化的东西怎么办呢?瞧着变化的东西,你这么写来冒号class等于我这写A,请问这么写的含义是什么?
05:11
这么写的含义就是这个class属性要动态指定了,对吗?我前边写了一个冒号,那不是V-B的简写形式吗?你这写A,我问你粉色这A呀,是不是当表达式用,那我问一下你的属性里边有A吗?没有,那你需要做的就是把A给它写在这儿不就得了吗?啊老师,那A是什么呢?刚开始是什么normal,那就写normal,好,这个时候你回来调效果,右键检查,各位注意看这basic是不是应用了,Normal是不是也应用了,哎,所以说同学这就是view的一个工作方式,你正常的样式正常写变化的样式,请你用绑定的这种形式去写,而且最终他把这红的和这绿的给你汇总成一个了,全给你变成最终的正常的class形式了,不信你看这儿,刚才咱也看到了,对不啊,然后你还需要注意的是哪儿呢?同学,我不加这冒号啥意思,不加这冒号就不属于绑定,就是你正常给一个元素加的class,然后应用哪个样式呢?A样式,但是不好意思,上边并没有A样式,你说对吧,所以说你。
06:12
要直接这么写呀,好像你得这么玩了,对吧?但是你这么玩也是违规的,为啥你写了1CLASS,你还想再写class,那是不可以的,最终的效果就是你看同学只应用了谁basic,你后边再写的class是不是不奏效了,说老师那刚才怎么奏效呢?刚才是因为多了冒号,多了冒号有何区别呀?加冒号不加冒号能咋的?咱之前聊过了,你不加冒号就是正常指定这个属性,你加上冒号咋的也是指定这个属性,只不过怎么着后边的这些东西是不是当表达式用了,而且最主要的是你加了冒号之后,View就介入去解析这一块,你说对吗?啊,那最终的结果就是把这个和这个咋的汇总了,这是一个细节上的问题,好吧,各位,那别叫happy的是不是得叫A呀?同学就非得叫A嘛,换个名Mo mod啊,目的心情是不是可以在这呢写上它,那你也知道接下来我怎么做了,我点击想让它变成happy,那我只要把这个mood的值从normal变成happy,那页面里面用到的这个地方是。
07:12
就自动变了呀,哎,我们先看一下初始的效果,OK,没毛病,那在这呢写this点谁呢mood等于谁happy完事儿对吧?各位好了,回头来看啊,我点击走,你看书变成happy了,而且最主要的是你观察我整个代码,同学,我自己亲手操作DOM了吗?显然是没有的,我只是把V所维护的一个数据给改了,然后view去帮我操作的这个里面你说对吧?哎,好了,这就写完这个小效果了,那咱总结一下各位这是什么呢?绑定什么呢?绑定class样式,因为我们知道还有style样式对吧?内联的那种,咱先说说这个绑定class样式,然后来几个杠啊,叫做什么写法呢?叫做字符串写法啊老师你这啥意思,啥叫字符串写法啊,你品一品呗,同学啊,我这是不是动态的在指定class,我是不是读取Mo,那Mo在哪呢?Mood是不是在这儿呢?我再问你mood的值,看红色框是不是字符串,是的normal吗?以后就算它变,我问你各位是不是也变成happy字符串或者是什么呢?
08:12
的悲伤的那个字符串,你说对不?哎,好了,那后半句话很重要了,叫做适用于,什么叫适用于,就是你学会的54行这个写法适用于什么场景呢?哎,那我跟你说一下,适用于这种场景就是样式的类名啊,不确定需要动态指定,你琢磨,我知道我肯定得从这个目里读东西,但是读的是啥,我是不是不确定,我是不是得需要动态决定,那怎么叫动态决定呢?你点就怎么地呗,是吧,好,那要是写到这儿吧,其实这个效果吧,也写完了,但是咱升级一下呗,各位,就是我要是这么写,你觉得有一个东西没用上谁呢?就是这个悲伤,你说是吧,完了呢,我提一个需求,你看看你怎么去实现它,你自己也想一下,各位,就是我鼠标点击这个div的时候啊,现在就是很简单,心情一般变成心情愉悦完了,我现在的要求是什么呢?各位就是点击这个div的时候呀,随机切换。
09:05
说不定是哪个三选一嘛,对吧,快乐悲伤一般说不定是哪个,那你说这怎么写。你这么写显然是不行的,你这么写只是往那个happy切对吧,那怎么办呀,这删掉啊同学我说说我的这个想法啊,是这样的,首先你必须呢,得把这三种心情呢做一个汇总,你一共有几个心情,然后你才能从这个心情里面是不是进行随机的这个抽取啊,你不能说你咔拉一个心情是ABC没那样式啊对吧,所以说我这么做啊各位,我准备一个数组,数组里边配啥呢?三种心情还有几个呢?两个复制,这是什么呢?Said,哎,悲伤的好,再来一个这什么呢?Normal一般的,然后同学它的索引值,我问你是不是零完了,它的索引值是不是一完了它的是不是那个二,然后怎么办呀,我随机生成0123个数字里的一个,然后作为AR2的索引值去拿东西是不是就得了呀?所以说接下来诶,就演变成这个问题了,随机生成01233个数字啊,012啊,没有320123个数字中的一个,请问怎么写?哎,这个时候同学反应快,老师我用一个第三方库是吧?哎,那low dash里边提供了很多的那个I,同学咱不说那么高端的那个,咱就自己写一个咋写?其实很简单,你可以借助随机数,同学我直接想卖点random,我问你是不能生成随机数,生成的是哪到哪的呀?是不是零到一的?值得你注意的是同学ma.random生成的随机值包含零,但是不包含谁,但是不包含谁,不包含一,这是一个基本功啊,那你说我写一个乘三是啥意思?
10:39
四个位,也就是说以后它生成的那个东西可能是零点几几几,或者是一点几几几,或者是二点几几几,绝对不可能是三开头,为啥同学,绿色框里的东西永远不可能是一,它无限的逼近一,但是不是一,那你说能是三开头吗?不能,那你说我再来一个向下取整,把这个零点几几几的零,一点几几几的一以及二点几几几的二取出来是不是就可以了?所以说把这一堆东西再来一个M点什么呢?Floor是不是有地板的意思,向下取整嘛,那这回就能随机的生成零、一、二这三个数字了,来,咱测试一下,给这清掉。同学,走,这是几呢?零啊,趁他不注意再来执行一下,走是不是二啊?那趁他不注意再执行一下,还是二,那就随机就巧了呗,他俩一样的,再来一个啊,诶不能出现一吗?等会儿走,哎呦呵,来等会儿啊再来啊,那再来啊,那再来啊,那再来啊,是不是有一啊说老师那你这随机的这个概率同学概率是一样的。
11:40
但是呢,有些同学可能看过一些文章分析啊,说老师都说过mass.random本身这方法就不是那么的公平,本身这个卖点random就局限在哪个区间,咱不说那种东西啊,咱就说正常的应用,同学再来一个走,你看这又是一呢啊,再来零啊,再来一,好了,等会儿趁着不注意再来一个,呃,又是零,那再来一个二对吧?行了,同学,这是随机的,我就不再测试了,那你知道接下来应该怎么办了?同学,为了大家好理解,我来一个index等于这个行吧,然后Z4点什么呢?心情等于啥呀?数组里的第几个不确定,我得问问index是不?哎,其实这个变量的定义的都没啥意义,对吧?直接把这一堆写在这就可以了啊,那为了大家好理解,我就这么写着了。好了,现在是normal,然后接下来开始走。
12:23
是不是happy借助view的开发者工具呢?咱去瞧一眼啊,来,现在是happy,所以说是这个样子的,哎,一走是不悲伤啊,趁着不注意再点一下啊,又happy了,那趁着不注意再来一下,哎,就又normal了,行吧,诶,这个点呢,咱就过了,OK,同学注意这句话哟,特别重要,适用于什么场景?好了,接下来我再提出我的第二个需求,各位MYS折叠起来,不去看它了。第二个需求呢,是这样的,嗯,我先写结构吧,各位,我再整一个div,嗯,写在这儿,那不同的div之间呢,不能让它离得太近,然后我就加一个这个换行啊,在这再来一个,好,然后我的要求呢,是这样的,这个div啊,还是一上来就有一个基本的样式basic,但是这个div的特点在哪呢?这个div以后呢,可能还会用到两个样式,甚至是三个,或者以后呢,还可能给他追加100多个样式。
13:12
也就是说他这个东西不确定啊,我就从这儿开始选了,从这里边开始选啊,我不是准备好了三个吗?我的意思是这个div有可能一个极端的情况,就是他们三个一个都没用,或者另外一个极端是他们三个都用了,或者是中间的情况就是用一不用二三,用二不用一三,或者用一二不用三,明白不?哎,就是随便组合,那这怎么办?同学,你就得用到一个数组的写法,我就直接写了,也好理解啊,还是动态的指定class,但是这回你看着啊,我不让他跟这个Mo去绑定了,让他跟什么去绑定呢?跟这个A去绑定。AR什么意思啊,数组好了,你瞧着我写A2,然后呢,你把它要用到的那样式吧,全都配置在这数组里面,你比如说同学一上来,我想让他艾特硅谷123这三个样式都用,那就写艾特硅谷一好,再写艾特硅谷二好,再写艾特硅谷几呢三是不是写完了,完了你自己去瞧效果你就知道了啊各位你看艾特硅谷123是不是都应用了,右键检查你瞧吗?Basic艾特硅谷123是不是都有。
14:11
啊说老师你这写挺无聊啊,我可以不这么写啊,老师我不动态绑定啊,我这删掉,我也不用这数组我自己亲手写呀,对吧,这是二,这是三,老师我也能实现效果呀,各位,咱一再强调初始化的时候,很多的情况下体现不出来view的威力,现在我就问你同学,用户点了一下这个盒子,要把艾特硅谷三干掉咋办?你要这么写你就没辙了,各位,你只能亲自拿到这个元素,然后你去操作它,对吗?哎,那你想想吧,V根本不帮你保存,那艾特硅谷123呀,你怎么去改呢,对吧?所以说同学动态嘛,一定要体现出来这个词啊,叫做动态,所以说万古不变的这个basic你这么写着,但凡是发生变化的,你都交给view,肯定是没毛病,把这个东西给它解开,Arr给它往这一来是不是就可以了,朱老师,那你这么的就能行,当然行,你瞧着一上来肯定是一样的,但是优点就在这儿,这些东西是不是都是唯有在维护。
15:09
如果有一天你不喜欢艾特硅谷二,你往下一删是不是就完了,你不喜欢三,你一删是不是也完了?当然我现在是借助开发者工具在这直接点的,同学你能不能在这儿再来个按钮啊,叫点我应用艾特硅谷一完在这再来一个点我应用艾特硅谷二,不就是在操作这个数组吗?你比如说同学我现在想加上艾特硅谷三咋办?你点这加号走写啊,当然得是英文的啊,走艾特硅谷集三,你看效果是不是来了。朱老师,那代码同学我给你写一下,走,我得拿到那个VM是吧,我看一下VM,我没拿来拿一下VM,你说咋写VM.ar不就得了吗?瞧着啊同学,我想把艾特硅谷一那个样式给它干掉,现在是三个都有,你瞧艾特硅谷123对不啊,我想把一干掉,那咋写VM.a点啥是不是,我写一个shift shift啥意思?
16:00
移调数组里的第一个元素爱的硅谷一你看是不是没了,那我要再移除呢,二又没了,再移除,那三又没了,老师,那我想用,那怎么办呢?Arr点怎么的push往里一推,推什么由你定艾特硅谷,比如说三走来了吧,圆角,那同学你看这样的写是不是很灵活呀,也就是说各位你听我说啊,以后往这里边推100个是不是都能推,我可以移除掉数组里边的任意一个,你说对不对,我也可以去改任意一个,你说对吗?那你看这样的话多灵活呀,对吧?各位,哎,好了,那把这个呢,给它复制一份啊,叫做绑定什么呢?Class样式A,注意了,不是字符串了,叫做什么呀,数组,因为这是AR嘛,因为AR是一个数组嘛。啊那我换个名字呗,各位直接写AR吧,有点不太好,我叫这个名字class a,就证明这个数组里面存的都是样式的类名,你说对不?哎,然后这个适用于什么场景呢?你注意听我说啊,这个场景挺有意思,我这么给你形容啊,叫做要绑定的样式个数。
17:00
不确定,名字也不确定,你自己体会。个数可能是一个,可能是100个,名字也不确定,以后可能是艾特硅谷98,艾特硅谷666,你说对不?哎,适合用什么呢?这种诶数组这形式,然后这里呢,还有一个注意的小点啊各位就是你也可以这样做。我慢点说啊,你体会一下,就是你不写这个class AR,你把这class AR吧,你亲手给它写在这儿,你说行不行也行,就看你基本功够不够了,各位你说我只要前边加了这冒号,你就啥也别说,粉色框里的东西,你就告诉我它是不是表达式是,那这表达式是啥?是一数组,数组里面包含啥,艾特硅谷一字符串艾特硅谷二字符串艾特硅谷三,那你说这样的话一上来能不能有效果,能,但是你这样写同学意义就不大了,为什么呢?那你看看吧各位,你的view再也不帮你保管,那艾特硅谷123了,那你这一上来就写死了,以后是不是没法动态切换了,对吧,各位,哎哎,我考一下考你什么呢。
18:01
我把引号都删掉。哎,说老师也行,引号删掉也一样,各位可不是啊,你分析一下粉色框,我问你是不是一数组是那vu开始解析的时候问你各位他是不是去寻找艾特硅谷一这个变量啊。老师,什么刚才咋没找呢?哥们儿,刚才你加的引号直接就是值,你说对吗?你在这一加引号,这就是个字符串值拿过来就用了,你不加各位他是不是在这这儿去找艾特硅谷一啊是不?那有吗?没有,那你这里边就得配置艾特硅谷123对吧?也就是说我这写的如果是A,这是B,这是C,那你在这就得写了,你得写一个A,它的值是艾特硅谷一对吧,你在后边可以再补,你比如再来一个艾特硅谷二,再来一个艾特硅谷三,那当然这会得是叫B,这会得是叫做啊这个C对吧?你这么写行不行啊,这回肯定行,这回肯定可以对吧?各位ABC嘛,这都有嘛,那你看效果是不是也可以空制台也没报错吧,你只要不写这ABC,各位你住掉,这都不多说了,ABC是不是都没有定义好,回来解开朱老师,那就这么写呗,这么写同学其实呢,怎么讲也不是特别好,你看你这写一数组对吧,你还得一个一个在这都给他配置好,还都得A写一个K同学有那必要吗?没有哎,所以说演示一下就是可以直接把数组怼。
19:16
写在这儿,但是呢,一般不那么写是吧,把这个解开还是正常的,把这个AR呢,给它放在这儿,OK好吧,各位,然后再接着往下聊,我提出我的这个第二个需求啊,什么需求呢,就是在这儿啊,我还是写一个div,嗯,然后给这呢给它删掉,说说我这个59行的div啊有什么特点,这个59行的div呢,从来就不看别的样式,它只看这两个,就是爱特硅谷一二,注意啊,跟三没关系,跟心情也没关系,它就是动态的哎,去切换这两个,然后有几种切换形式呢?各位是这样的,就是这个59行这div啊,可以有这么几种情况啊,用一不用二。啊,用二不用一,然后呢都不用,然后呢全用同学,那你说是不是就这么几种切换形式啊,哎,所以说你琢磨琢磨同学,59行这div是属于在切换样式的时候,我问你个数确不确定,确定就两个,艾特硅谷一,艾特硅谷二,好了,个数是确定的,我再问你59行的div在切换式的时候,样式的名字是不是固定的,也是只有两个人艾特硅谷几一二,你体没体会出来,59行这个div切换的时候,样式的个数,样式的名字咋的都是确定的。
20:27
啊,但是不确定的是什么呢?各位不确定的就是到底用不用是不,我艾特硅谷一到底用不用啊,艾特硅谷二到底用不用啊,你看这不就是不确定用不用啊啊那这个时候呢,就特别适合用什么写法呢?叫做对象写法好直接写啊走叫做class o BJ啊,当然你叫别的也行,叫QW也行,对吧,哎,我就叫这个class o BJ,然后怎么办呢?看着你得配置一个呀,走它是啥,它是啥对象。说老师那然后我怎么办呀,然后很简单,同学,你确定了你用哪两个样式啊,一或者是二是吧,好了把一拿回来,然后呢,我就引导都没有了,我直接写你肯定能猜出来的,啥意思,我说一啊是false,哎,我说二啊也是false,你告诉我是啥意思,同学。
21:12
艾特硅谷一有两种切换,一个是true,一个是false,啥意思?为false就是不应用,艾特硅谷一为true,那就是应用,所以说你现在看这个div啊,我把它再来一个换行给你写在这儿,你看最后一个div啊,同学,它只有一个basic基本的样式,对不?右键检查。你瞧朱老师,那为什么没有用一和二呢?因为它俩都是false,你来到这,你动态切换一下,点击一下U实例来,同学,这不false,点这个就能切换啊,不用你自己写也行,T rue就是太麻烦,你点这个给它勾一下,同学,你看样式一来了,走这个看样式二来了,对吗?各位啊,好了,那这就是什么写法啊,把它复制叫做绑定class样式的对象写法,哎,那适用于什么场景呢?这就有意思了,看着要绑定的样式个数确定,名字也确定,然后补上后半句,但咋的要动态决定用不用是不?
22:08
哎,你体会体会,你看这个适用场景是很重要的哈,好了,哎,那我们就把这个常见的呢,去绑定这个class样式呢,就给大家说了一下,那同理啊,各位你听我说同理,你也可以在这不写这个class o BJ,哎,我再给你演示一下,你可以怎么写呢,你这么写啊,瞧着。不写这个class o BJ直接把对象怼在这看着啊走,那对象里的key是谁?艾特硅谷一,那到底用不用呢?你比如说我写一个车用不用用,那再来爱的硅谷几呢?二我也想用这么的是不是也行,那你回头看效果呗,都是一样的,但是你这样的话就局限了,我看你还咋切换,来,你给我切换一个,我看看。是吧,各位,你这写死了是true和false是吧?哎,或者是也是true,说老师那我知道怎么做,我这写一个A,我这写一个B啊说A就管at硅谷一,B就管at硅谷二,那你这么写也行,那这配置一个A啊是,然后这儿呢,我再给他来一个这个啥啊,这个false是吧?啊哎,这块是冒号,走好了,说老师那这回就行了,那你看一下吧,一有二没有,那你点的时候,你可以在这把这个诶取消掉就都没了,这个也有,这个也有,是不是可以,哎,但是这么写的少,各位因为啥呢?你看啊,你在这直接写一个对象,它不乱吗?是不,各位,哎,所以说一般呢,我们不用这种写法啊,直接是把这个class OB BG给它配置在这,然后在这写这个对象,这样的话好管理啊,对吧,A删掉,B也删掉,OK,行了,那关于绑定class的这些呢,咱就说的差不多了,我们先停一下。
我来说两句