00:00
下面我们来学习MGS框架的基本语法,那么首先第一个我们来学习数据绑定。数据法律语法呢,它是使用的是一种叫must语法,将变量和表达式包裹起来。这个语法说白了就是括号。啊,一个括号也可以,两个括号也行啊,将表达式或者变量包裹起来,用来绑定文本内容或者是元素属性的。好,下面我们就一起来看一看,到底能干啥啊,一起来见证一下。那么这时候呢,我们打开我们的代码工具啊,首先我们要新建一个新的项目,因为之前旧项目呢,我们已经删掉了,所以说来到项目这里,我们新建一个项目。这个项目呢,我们就DEMO演示就好了,又说明就是影视项目。来测试我们的一些语法。这时候呢,我们选择的就选择native APP了。因为我们这里就不打算开发小程序了,所以说我们主要开发的APP端,而使用native APP端开发的这个项目的话呢,性能是最好的。
01:04
选择空白应用,那么一定要使用MMS开发,点击完成。这个时候他就会在远程云端创建一个项目,并且把创建好的项目检出到本地来,我们解除到桌面上就好了,OK。好啊,那么旧窗口就可以拜拜了,不保存啊,那么新窗口就是我们要写代码的窗口。那么代码的话呢,我们在配下面写,但是这个man.STL呢,我们不打算动它,我们新建一个新的文件夹叫DEMO,在这里面我们写我们的测试用例。来新建一第一个啊,我们叫DEMO,一来完成我们的这个数据绑定语法。那语法细节我们在这写一下,我们要研究的是数据绑定。数据绑定呢,我们一共要了解两个东西,一个是它的语法,第二个是它的作用。好语法的话呢,那么简单来描述啊,就是一个花括号包着我们的一个JS表达式或者变量,对吧。
02:06
或者是两个括号都行,它支持一个括号和两个括号都支持,那么有同学可能学习过view的话就知道,View里面呢是有两个括号的,那么咱们这呢,是一个两个都行。那么通常情况下呢,写一个括号呢,更简单一点,所以实际在应用中呢,我们会写这个一个括号。而它的作用就是用来。绑定。元素的文本内容。或者用来绑定。元素的标签属性。好,下面我们就一起来试试。首先呢,我们把六呢改成save area啊,因为这样的话呢,它才会在那个安全区域中展示,类名的话呢,有没有都无所谓啊,咱们并不需要,这时候我们在这里呢,写一段文字T。对吧,好了,T里面呢,我要写诗的内容啊,此时呢,我们发现这个内容呢,我们在data里面定义。
03:03
Data呢?是用来定义动态数据的,是不是它必须写成函数形式?必须写成函数形式。那么同时还要注意还有一个注意的事项啊,必须写成函数值是返回值,必须是对象。必须是对象,即使你没有写内容,也必须要回归对象。那么很多开发者呢,前期就是因为没有内容把这个东西删掉了,导致它运行是会报错的,要注意必须要返回一个对象。然后在对象里面添加我们要渲染的内容,比如说叫hello,咱们的am。好了,那么咱们呢,在这里就定义这个数据message值为这一个文字,我希望这个message呢在上面展示,诶,那么我们就可以在这里用上这个语法了。括号里面写message。一个括号也行,两个括号当然也OK。
04:02
都行啊,那么这两种语法最终都能渲染出来我们想要的内容。当你一旦写一个表达式在这的时候,对吧?Message它最终呢,会自动的去this.data里面去找这个数据的值,所以大家不用担心啊,不用写什么this data里message直接写message它会自动的去里面找。好了,那么这样呢,我们就能渲染出想要的内容了,这个时候呢,你可以点击这个预览按钮,在这个这边看到这个效果当然是可以的,当然了,我们也建议大家通过真机测试的方式去测试。因为这个预览呢,只能预览一些基本功能,一旦我们将来用上了一些特殊的组件或者一些特殊的语法,那么这个预览就出不来了。所以咱们测试呢,还是建议用真机测试。来,那么用这些测试的话呢,点击这里,我们要手机去扫描这个二维码。对吧,当然你记得要打开APP这个工具啊,去扫码。扫码完成之后呢,这里就会连接上,点击它,它就会把本地代码呢,同步到咱们的这个呃,APP load中,当然我们再点击。
05:09
好同步好了之后呢,咱们就可以看效果,来我们一起来看啊。好,这个时候呢,我们打开效果呢,发现是这个样子,诶怎么是这个样子呢。这时候就要说一下,因为我们在con channel中默认它启动页指的是这个main这个文件,而指定这个main这个文件的话呢,我们写代码是这个DEMO这个文件,所以它自然不会看到我们写的效果。所以说要看到效果的话呢,我们需要把这个面文件改成我们自己的这个DEMO下面的DEMO1这个文件。后缀名写不写都行,点击保存,保存完之后呢,要想看到效果,得右键在这里进行增全量或者增量更新。全量的话呢,它会把所有代码文件全部再发过去,增量的话呢,只会发发送更新的内容。所以说我们如果想它这个更新速度快一点,那么建议大家点这个增量更新。
06:04
好诶,这时候就看到效果了,是不是也是OK的啊,那么我们呢,是建议大家是通过真机测试的方式去看效果的,那么实时预览的话,只能看到一些最最最基本的功能。好了,那么这里呢,我们就完成了第一个作用的一个测试啊,语法和作用都测试了一下,语法呢一个话两个话都行,那么作用的话呢,就可以把这元素的文本内容对吧。好,除了文本内容以外呢,还可以设置元素的标签属性,诶,这时候我们来做一个事啊。假设呢,我们在取一个类名。取个类名,比如说他的名字叫呃,叫red。那么我希望呢,咱们的这个内容的文字变成一个红色啊,写了这个类名的话呢,那我下面必然要写上这个类名,然后呢,给它指定相关的颜色,对吧。同样的改了代码的话呢,我们又要右键增量更新。
07:00
诶,它就变成红色了是不是。好往上走啊,但是这个时候呢,我们现在又有个需求了,现在呢,我有一个class name。是一个动态的一个数据在data里面啊,它的值呢,比方说是green。好了,我呢想把这个class name的值设置给咱们的这个test的class属性,对吧,这个时候它的就不是个引号了,而是用括号里面放着class name。当你用上了我们这个数据绑定语法的时候呢,它实际上里面的数据啊,也是会去data里面找,找到这个class name,所以它实际上渲染的值呢,Class的值是等于green的,是等于green的。好,Class值等于green,那么这个green类名我们也得写一下,不然的话呢,它也是没有样式的。不是说你写一个为green,它就是颜色,就是绿色,不是的,而是你要有对应的类名。对应的样式。好了,改了代码呢,我们同样的又借增量更新一下,那么这时候诶,我们就发现咱们的样式变成了绿色。
08:01
好一个括号也行啊,那么两个括号我们也可以试一下,现在我写成两个括号,再增量更新一下。那么下面这个也是绿色的。好了啊,这就是我们的这个数据表的语法,用来动态展示咱们的这个文本,文本内容,或者是咱们设置这个元素的标题属性都行。那么通常情况下呢,我们用这个数据版的语法更多的是用来展示这个文本内容。好了,以上呢,这个就是我们的数据绑定语法了。
我来说两句