00:00
大家好,我是学轩地的特约讲师高若梦,上节课我们学了V的模板语法,差值和指令啊v will的模板语法呢,还是有很多的,那记住差值使用是这种方式,那指定的是V杠开头的,那这节课我们来继续学习VIVO的模板语法绑定属性好,我们现在直接上代码给大家讲解,打开这个,打开我们的代码,那我们把这个代码啊,我已经给你复制了一份啊,叫appr,那我们打开这个DEMO ctrl a ctrl c复制过来。到这里面来,再CTRL一下。把这个删掉啊,别到时候写错位置。选选定性,然后把这个。CRVCRV控制一下,把这个关掉。我听一下。你看这里边就跟着变了,数据清空了,咱们用最基础的一个语法,比如说我们在学插值的时候,在这里边用了MSG,你看这里边就直接可以显示,那有的时候我们有一些属性也需要动态获取数据,不光是在内容这动态获取数据,那有一些什么样的属性,我们经常用的,比如说我们有一些像。呃,像图片标签,比如说我们T标签吧,T标签这里边写着啊,这是一个PA的测试,你看我们鼠标一放上去,这出现了,这是一个测试,对不对,那还有我们的图片标签,比如说img图像标签,我们找了一个图片的地址。
01:17
随便找个图片啊,复制图片地址来,你粘过来,这是马粘过来发过来。你看。保存一下对吧,这是图片标签,还有比如说我们A标签。A标签假如说正好来一个加上,嗯,学习原地,然后我们在这里边加上一个。地址,HTTP冒号。嗯,这块写上3w.mo.com保存一下。你看这块地址,那像这样的,除了我们中间内容这个地方我们是需要使用什么,我们需是用差值来来用,那我们假如说这个地方假如说也是动态的,根据不同标签显示不同提示,假如跟内容一样提示,那我们能不能把这个原封不动的复制过来,我们放到这儿呢?
02:05
你看。这是不可以的,如果直接放到这来,这是第二个啊,你看我鼠标一放上去,它这里边儿是普通的开头是不解析的,跟上面一样,那大括号在这块。那我就说为什么不解析见过这样语法,对,的确是有的模板里边是支持这样的语法呢,只要是插动态内容是这样对吧,比如说像smart啊或者什么样的模板是可以的,但是嗯,Will这样不支持属性,有专门属性的一个处理方式,怎么处理方式呢?就是我们前边加上V2。嗯,冒号绑定。接着是绑定,绑定之后,那这个属性它里边的内容就是一个解析的一个变量,那说这个变量那个变量就不要用这个大括号了,你看一用大号就错了,对吧?所以呢,我们如果加上这个,我们就直接放在这块,就相当于这个双引号里边执行的。就可以解析的跟差值一样,对吧,这双引号的作用就跟那个大括号作用是一样的,但是单引号也行啊,因为我们绑定了,有了这个指令,有了这个指令这里边就是我们的语法了,可以直接写了,现在你看我鼠标一放到这块。
03:05
就可以了。那还有一种方式是什么呢?是语法糖的方式,就是经常开发人经常去说的语法糖,就是把这个去掉,直接冒号语法糖,糖不就是甜头吗?对不对,另一个甜头,你看这才是一个字符,那我这边需要写这么多字符,对吧?所以呢是一个甜头,这语法糖其实就是简写,这是简写方式,两个效果是一模一样的,你看现在保存一下,鼠标一放上去一下,出现黄色图标,效果是一模一样的,对吧。那像这样的动态属性绑定的时候,那我们像这些我们都可以绑定了,里边我们起一个变量,比如这块是img s RC,但这变量呢,可能是从接口里边我们获取过来的,对吧。从接口里面获取过来之后加一个关注。嗯,100像速100加不加这个高度。也是100。100,那当然了,这个呃,变了没有,这里边我们用,这里边是基层格式,所以我们括号分开,我们在里边再声明一个啊,Imgs RC冒号,你看这个图片地址我们加过。
04:04
还较来把这通信地址。物质图形地址你就切过来啊,然后放在单引号或双引号里边都可以,对吧,来保存一下。呃,图片imgsrc啊,当然这最后一个不需要那个,呃双引号对吧。7万交易他应该没有刷新,诶可以啊啊当然了,你看我如果直接写src,它还是什么,还是这个戒指src我没有加什么,没有加预返航,你就没有绑定那个属性,你现在你保存一下,你看一下。就变了对不对,直接就变了,一定别忘加这个,不加这个它就没什么嘛,和这个有什么区别对吧?那同样链接地址也是可以的,那我这块比如说换成是一个呃,UR都是从接口里边动态获取的数据,跟我们HTM标签去显示对吧?那我这里边就加上括号,加上URL括号正好HTTPS冒号3w.K点。保存一下,那这块就变了,鼠标一放在这你看。现在没有变化这块,为什么?因为我们又忘记绑定了,对不对,绑定完之后鼠标就放在这块,你看看这个位置。
05:04
是不是就可以变化了,所以都需要绑定,那其他的属性,像这属性我们都可以绑定,都可以绑定,那一旦你这么一绑定,那其实里边就变成的是什么,就是变量了,就是变量了,对吧,那现在我们刷,现在我们加上这个冒号,绑定这个属性之后,你看。这个。它这块是直接以字符串形式显示的啊,那我们这块可以变成一个变量,比如说呃。塞吧,随便加一个。加一个,然后我们在这个位置。加一个一。这块我们也用什么。你看加上这个所有的属性你都可以去绑定,那里边都可以变成动态的值,对吧,都是用这个100那这块如果加上像素的话,你也可以这样加上值,因为它整体是一个变量嘛,对吧。刷新一下诶这块,因为这里边是不需要加这个值的,不要加这个变量,因为它不是样式就不加了100。
06:03
对吧,直接显示就可以了,那比如说这会改成200,你看变变化,你看直接变化了,变成变量的形式了,任何属性都可以去绑定。那咱们用的绑定这个最多的绑定属性,除了这些有意义的属性,动态获取数据,数据的从数据库里边获获取数据,改变图片呢,改变URL啊,咱们经常用这样的绑定方式,那么咱们样式和类,这也是用法最多的一种绑定方式,比如说。嗯,我这来一个B压标签吧,换个行。这块当然第二标签你是看不来的,对不对,那比如说我来一个div,这里边生明一个盒子对吧,这块就有一个盒子了,那我平时咱们平时写样式是个style加这个样式对不对,里边写上宽度100个像素对不对,高度。100个像素对吧,然后呢,嗯,背背景颜色是呃鲁板蓝色的。然后嗯,字体颜色我们来的是比如说red红色。对吧,你看这颜色好的ACK加啊,少写了一个,你看变个颜色这样的一个盒子是不是就出来了。
07:08
那如果我们前面加冒号,那肯定是出错的,因为呢,你一加冒号的话,为保存它会把里边看成全是变量对吧,绑定了,所以呢,我们如果加冒号的方式,当然这个属性太多了,我们把这个读一下,然后我们复制一下,你看如果一加冒号的话。那这里面还是肯定都是R出错的,对不对,我现在用一个属性去写。反正这里边我们都需要去改变,那这里边能写的语法,你比如说我们来一个字体大小吧,放嗯,Size啊,SIZE10个像素保存一下,你看这也是出错的,因为它把这两个当成变量了,对不对,里边根本没有这样的变量,所以我们怎么办?我们外边可以加一个单引号,把它变成一个字块,你看。对吧,这样的S就可以了,这里面只有一个自己的尺寸在100万大点给你看出来。这。你看一下这个这个效果啊。
08:01
就会量,那你这么写又有什么意义呢?根本没有意义,如果加上这个里边就意味着用变量对吧,用变量你可以用一个变量,可以用一个变量,那这个变量呢,我们在这里边生成出来,比如说。就是嗯,建值对的这一个形式嘛,当然直接用字符串的很少,用自符串,你直接用这种方式就行了,所以我绑定属性里边一般有两种语法,一种是数组的语法,一种是对象的语法,对象语法这样的啊,那个一个大括号,不是差值的两个大括号,记得两种语法,那我们先我先给你用一个数组的语法,那数组的语法在这里边,我们使用的时候你就可以加上什么加上啊,如果这个里边我们加上单引号,比如说ABC对吧,Fo还是这样写fo这size,然后这里边十个像素,然后再来一个B加背景颜色,呃,我们来一个re,红色的吧,随便写啊,你看保存一下你那背景颜色红色对吧,自己尺寸十个像素。看到了吧,这是可以的,这是数组普通字符串的这样的写法,但是我们这么写也没什么意义,也没有用上变量,对不对,如果这里边我们想用上变量的话,我们可以把整体作为一个变量。
09:09
整体作为一个变量。然后呢,放进来也可以单独把这个位置变成变量,那我们一个一个试一下,比如说如果我把整体做成变量,那我们就比如说自己的尺寸FN体自己的size子吧尺寸,那我们这块加上FNT啊,SIZE10个像素对吧,是这样去加这个变量,然后背景颜色BG color背景颜色,然后我们加上BC给GR背景颜色我们来一个呃,绿色这样去加,那这样去加的话,我们在这块加的时候你就不能。怎么办了,不能用这个了,如果直接使用这个变量,那你就放set,不是放set,这是我们自己写的这个变量啊,然后这块如果加变量的话,就变成什么BG color。是这样。你看刷新一下。
10:00
这个你看变了对不对,这颜色绿色字体是100吧,省省得你看不到变化对不对,100字体变化,这就有了,这是这个变量,那我们说还可以怎么变变量呢?还有一种方式,做变量的方式,你还可以这样去做,比如说呃。就是嗯,就可以试这种方式了,就是我们说单纯的一个值作为变量的这种方式,对吧,都可以,就是数组的一个方式,这样的话,我们就前边还是用这个字符串,用连接的方式,其实是一一回事儿,就相当于我们这里边这样。结账都是一个意思啊,但是。用起来加上,比如说我们是一个变量尺寸size,那么去加上一个对不对,当然我们这块得有什么,得有一个,呃,Size的一个属性,比如说什么,我们写上50个。50。这样的一个尺寸,当然我们后面还加什么,后边还得加上。PS。嗯,加上我这块。
11:01
括号零,减。我这有空用一下。可以处理没问题啊。这样吧,我把我这个50它是整数这样。哎,算了,这种方法就不给大家用了,因为用的极少极少的这样的一个方式,极少的一个方式就被大家用了。这还是有问题在。按下这个错误提示。建我这会儿用到了这个。剑和直难道有中文?在属性应该是长度不要用。你看在这个属性这个不要我用啊,因为其他地方有这个属性,当然不用这个了,这是数组的一种方式啊,通过数组你可以用这种变量的方式,对吧,还有单个变量方式,这种方式用的也不多,对吧?当然我们记得绑定属性的时候,里边尽量用用变量,这样才有意义,如果不用变量的话,和我们直接写style什么区别,没有区别,对不对,对吧?这里边我们加宽度。
12:06
假如说是100个像素存在,它是两个属性是可以并存的,这些属性不会覆盖,如果相同的属性肯定会覆盖啊,它会在这个后边去加两个是可以存在的,这指后边动态加的,对吧。前面有冒号,这边前面没有冒号,这这点区别已经知道了,那还有一种就是什么,就是我们的类的属性,类的属性用法比这个呃style用法还要多一多一层,怎么多一层呢,比如说。我们这块这么写一下,呃,还是做一个div,我们BOS2BOS2,然后把上面这些呃给你注释一下,不然的话。你看看不到这里边有这个效果啊,那类的属性,我们平常加类的时候是这样,Plus等于对吧,这里边有类名,比如说我们是叫Y这个类,那类在哪声明呢?我们可以在下边声明,它这个模板是从下往上执行的,所以嗯,可以看得到这个加一个Y这个,比如说我们加上BACK。
13:01
背景颜色。就直接加背景吧,背景是红色的,你看我们加上,这样的话就加上背景了,对吧,加上Y,那当然我还可以写多个类,你可以叫很多名to。字体的尺寸是30个像素,然后我们只要加上这里边就有。平时是增加的对不对,那现在我还可以在后边再单加,或者是将原来这个改掉,如果我一冒号的话,那这里边就是变量对不对,那原来的你也可以存在,我们再新加一个新的属性,比如说冒号class。就把这个用这个语法长的方式,简写方式,就把这个给绑定了,就可以绑定一些动态的属性,那也是几种方式,如果在这块我直接写一个字符串,写字符串,比如说我如果直接写Y。我把这两个删掉一下。那如果我直接写万的话,它相当于在这里边找万的对象,对吧,根本没有万这个对象,那假如说我这块加上这个呃,万的对象,那它的字符串的值呢,就是这个呃,Y,你看我如果一这么加。
14:05
当然了双引号了,你看是不是也可以加上了,这样是找这个变量对吧,那果我这块找to的话,它就是找不到这个变量,肯定是没有这个变量对不对,那如果我这块加上单引号,记得这个区别啊,加上单引号就直接执行里边就范,你看没有这个Y是没关系的。去掉。你看。是没关系的,它是也不出错的,对不对?那如果我直接这么写,就用字符串的语法,那我和直接写这样等于one有区别吗?没有区别对吧?万就是我们加个背景为红色吗?对吧,是没有区别的。如果直接这么写,和这样是一样的。加之后加加粗吧,记得现在。保存这不是变大了吗?能够加上对不对,所以呢。直接这么写和这是一样的,所以这样是不需要的,对不对,那我们这里面可以干嘛呀,也可以用数组的方式。也可以用数组方式,数组方式你写上什么类,当然也是字符串和变量两个是一样的,假如说我有两个类在这里边,我如果不加这个,我写Y,那就找万的变量,写to就找to的变量,对吧?这保存怎么办?根本没有这个万和to,这两个变量是空的,所以这里边也加不上,但它没出错,对不对?那我如果加上one和two,那就相当于。
15:16
给我们怎么呢?给我们在这里边加上one和two这两类了,和这块加one和two一样,你还不如这个方面对吧,如果用这个,所以呢,咱们一定是用什么用字符串的这样的方式,就是用从字符串方式,用变量的方式才是我们正确的做法。变量的方式,那用变量的方式万,因为它这块值内加一个就放进去对不对,但是我现在没找着这个万个two的样子,所以这块我加一个Y等于。On这个字符串对吧,这样的话我们改变类名,通过程序改变也好,或者服务器发布的数据里边带这个也好,To冒号。大多数。然后这块加上括号。你看是这样,这是数组的方式,那除了数组的方式,我们还有什么方式呢?还有对象的方式,对象的方式是我们最常用的,因为数组的方式有多个类,你给一个里边加上都是服务器传过来的,你就可以用这种方式去传,对吧?或者是本身就是一个数组的变量,那你在一个里边去写也是可以的,放上一个变量,这两个都执行,你比如说我这里边,呃,这么去写啊,假如说加一个AT里边加一个,这里边我这么去写,这里边写个数组加上Y。
16:23
To对吧,只是数组格式嘛,对吧,那我们在这块直接就不用这个了,因为它是绑定的方式,里边能直接进行变量。啊是ACTVT啊写的是这个。那这俩是一样的对吧,直接这个变量就是对应的数据,所以它支持数据这种模式,把变量放上去。对吧,这是变量列加单引号加单引号就不用这种方式写了,那还有一种方式是什么?用的最多的方式什么呢?对象的方式。对象的方式使用这种方式,那对象方式和数组又有什么区别呢?那我这块如果放万的话。他不是说把Y翻译过来成一个字符串类名放在这块,那也没意义,因为就设置这个加类还是不加类嘛,对吧,加不加这个Y类。
17:06
或者是加不加这个to这类,那它要求的是布尔型的值,如果它这个布尔型的值它是真值对吧,那正常我们这个对象的写法是什么,什么写法前面是名称对吧,后边是值,比如is y。A度。啊。现在是什么没有没加对不对,那我这里边再加两个变量,它是不尔形的,认为如果这个值是真的,那它就会加到这,如果这个值是假,它就不往这加,那我们这块随便加一个,你比如说A,当然你可以通过这个元素这块去查看啊,当这个元素这块我们啊元素。找到就拉下了。拔下来,我们找到divp里边。嗯。哪个度数在这,你看这个是万个数可以加,你看这个类啊,第三个咱们现在没加的对不对,你看我加上一个is万,嗯,T处。然后我们加is to也是一个真值。
18:05
那我们。打开这个。怎么你看样式已经加上去了,但是你看万克库加上了,那真假值就为了加不加这个,那我正好改成一个假,比如说F变成假值,一保存你看字体就变小了。这里边儿。看一下就只剩1万了,对不对,如果这块变成价值。啊,同样这个样式也没有了,那这个里边样式都是空的了。两面都是空的对吧,当然这块你有一个或什么的,他这块肯定。啊。但是这个类咱们下面没有,但是你看这元素里边会加上这个原来的意思还在对不对,然后把这个改成数。看一下就可以了,那我们通常用这种方法是最多的,用上对象的方式,用真假值,我们一般的比如说伸缩式的菜单啊,或者是一些特效啊,对吧,什么滚动的图片啊等等,都是经常加上一个样式,它就多一个特效,去掉样式就没有特效,所以用程序控制这个波尔型真假就可以了,这波尔型真假,当然控制这波尔型真假你还可以有一个,比如另外一个方式,比如说这不就万注吗?如果要属性名和值一样,假如说我这块不是A级万度,假如说是Y啊,前面有了。
19:21
前面有个万。行吧,那我就把这个改成。一样的属性是。直接改成了或者是这。正好改成1万。给下边。Is to,你看如果是一样的,一样的类型,你看如果是一样的类型,那怎么办?你看我这里边啊,嗯。因为现在是没有这个,没有这个类对不对,如果是一样的,那我们怎么办?直接加一个就行了,这是不是杰森跟我们支持的这种属性名和属性值一样的情况下,这么写就行了,所以我们改万和two is y is two这个值就可以了,当然这里边没有这个,呃,Is one这个,那你再我就随便写一个吧,你比如说写一个。
20:10
啊A,嗯,DEMODEMO这个类随便写一个,DEMO这个类就这里边就写一个,那意味着什么,意味着我这块也有一个什么DEMO,第2DEMO这个类,比如说宽度100像素,高度100像素,背景颜色咱们是GR绿色的,对吧,加上这个。点进去啊。然后呢,在这块,我这里面再加一个什么,再加一个DEMO true你看。呃,万后边啊之后删掉。喂。你看boss就可以了,加一个变量,如果你名称和值是一样的,就这样,所以呢,经常你看到class那里边为什么加上这这种啊,对不对,M啊,或者是呃,加上受啊,或者是什么其他的A受啊,有好多这样的一些变量,为什么说总有这些东西呢?就是因为我们变量和类名和我们类名对应的布尔值是相同的。
21:13
所以说它的值变量用程序操作是真,那就加上这个类,是假就不添加到这个类里边,所以这是我们经常写特效的一个最主要的一个方式。用这种方式是最多的,因为累嘛,你加上类它就有效果,去掉就没有效果,通过这种加上去掉,用波尔行的方法是咱们操作最多的一种形式。那数组和这个对象除了有这种形式,那我们还可以有什么形式呢?你比如说我们这个,呃,复制一份。这一份。放在这那。这个数组的方式我们也过来。复制一半。不管数组方式还是对象方式,那我们都可以有一种简写方式,如果写的太多的对吧,我们不把逻辑放在这块,一两个四五个顶多的对吧?如果太多的话,尽量别放在这块写,怎么去写呢?我们把它生明的方法里边,比如说在这方法里边我们加上嗯,Get。
22:07
Style样式的这样的方法对吧,那就说明了,那我们直接返回数组的方式。直接返回一个速度就可以了,你比如说返回。这样。在这个位置。返回这个数据就行了,那如果是对象的方式,那我们直接来个get OBD返回对象的方式,样式对象返回样式AR数据吧,返回样式对象。啊,T,嗯,样式TY Le样式obj就缩写一下,然后这里边都支持这种格式啊,那咱们就可以把业务逻辑都写在这个里边了。你不管是呃,上面那种对象的方式,还是上面这种对象的方式都可以。这样的话,我们就把操作放到方法里面,你可以用样式操作呀,就用事件操作,用什么操作都可以了,那这里边两边有了,那我们需要在这块就得直接,因为这里边执行的就是类似于语法的部分嘛,对不对,和差值是一样的,放变量也行,其实调用函数也行,那我们就盖的什么,嗯,这个是对象类的方程类的方式对象。
23:13
嗯。数组的方式。然后这块。当然调用方法你加上加上括号啊,事件的时候我们可以不加这一个直接复值,这里边我们加上调用在立项的方式。嗯,One two one two没有定义,为什么没有定义,因为你加到方法里的,方法里边还是万吗?不是了,这点万了,变量变成了方法里边一定要加这个。这里边儿。前面这个生命的属性那个没关系,你这里边儿这个一定是。这这样。效果是一样的。对吧,这样去加上去当然了。除了class这种方式,像类这种方式,我们也可以加上数组,比如说这个数组的方式我们一样也可以,数组方式也好,或者是对象方式也好,对吧,我们一样可以用上这种方法,当然数组我们也可以用这个,就这样之后我们也可用对象这块,好,我给大家写个,那我再给大家写个吧。
24:12
嗯。就在这啊。嗯,这几个应该没写对象的方式啊,那样式这这块我们也可以用对象的方式括号,但是它对象方式呢,就是什么键和值了,对不对?对象方式支持这种语法,SI这种语法,你看支不支持,然后这里边加上一个值,和我们单独写是一样的对象属性,你看看一下知不知这种语法分面试一下啊,比如说100个像素,这里边来一个hello。你看错了对不对,那我们给它加上单引号呢。加单引号。B项属性值嘛。你看哈,是不是就有了。只有一半,那如果不加代号,咱说了,其实键对象不就键和值嘛,键和值呢,我们通常这样用拖峰的方式,有的因为有的变量不是不止这个,如果不用倒线的话,用通峰的这样的处理方式啊,它也是支持的。
25:11
你看hello,对吧,也是支持的,这种通峰的运行方式,当然可以加多个值,加多个值,假如说背景颜色练习可加ing背景杠power。加颜色这种方式我们用的也是比较多的,比如说这块我们加re红色的。对吧,或者是你了,给你个变化的值,你看一下都是可以的。这是绑定样式类属性这三种各种格式啊都支持的,你就记得和我们差值一样,这块放的是变量值和简单的语法,那我们呢,用这种绑定或者简写方式,在这里边也是一些简单的变量和。一些简单的语法,那语法呢,一般都是什么?字符串,数组对象或者是直接调用方法都是可以的,那这种方式呢,我们一样也是可以调用方法,把它写到方法里边,直接调用也是可以的。语法是统一的,只是看你根据不同的业务情况,看你用哪种比较方便,对吧,那同时加这种的时候,原来那种还在对吧,这里边儿咱们用的最多的就是这种方式。
26:11
嗯,绑定类的方式,然后呢,用霍尔行值真假值决定这个类加不加到这个元素里边来,这是最多的啊,这就是我们这节课给大家讲的什么模板语法绑定属性有这么多。
我来说两句