00:00
来。这边呢,就是开发第一个安GS应用,当大家把上面这些了解了以后,诶了解了以后,我们就可以来到我们的项目,这先把这些全关了。大家看一下导哪个啊,接下来你们不是要往前倒项目吗?你们夹了以后,这是不是有个扣的,导这个就行了,没问题吧,这里应该会导,哎,应该会倒,好那我就直接进来了啊,然后打开这个里面,这有三部分。Prepare的表示是写好的。Study是咱们课堂上要去敲的。笔记是给大家整理的安格拉GS的一些笔记啊,然后呢,我们来到study这块。函数分为几部分,GS test还有练习,练习是我们要学习完安格拉GS语法才能去做,而GS这一块我先说一下。
01:02
首先大家看,这有两个文件夹。它们里面分别放置了两个阿拉GS的库啊,而这两个库你看这个就行了,这两个库一个是1.2的,一个是1.5的,我们刚开始会用1.2这个,这叫老版本,它里面有点语法不一样。而后期我们会用这个1.5.5的,这个是一点几里面相对来说比较新的。也说你如果说开发用一点几的版本啊,用这个肯定没问题。啊,因为这两个呢,是想让大家看到一些从它过渡到到它的一些进化的过程。然后下边有一个解query,是因为我们要与解query去做对比。来做比较。再往下我把这个收起来,Test里面,这个就是我们要整的一些知识点啊,都在这里面,都在这这里面放着。没问题吧,好。
02:03
来,咱们从test这儿开始看。看之前呢,我呢先把一个写好的效果给大家看一下,咱们先把这个效果整一整。我呢,就把这些先关了啊,咱整洁一点。效果都是不的。这个应该没问题吧。首先我们能看到的是上面一个输入框,下面这有文本,后边是不是空的,刚开始当我上边的input输入的内容发生改变的时候,下面是不是头部的去显示我输入的内容啊。能看懂吧,那其实这个用原生的也不难啊,现在我们先用解剖来剪一剪。这个呢是写好的,我来到study下边啊,这个j query在这儿。我们在这儿去写一下。大家看一下第一个我已经把什么解块这个库是不是引进来了,接下来我们去写一下应该怎么写。
03:09
是不是?天哪,我讲20分钟了才提醒我。漏了没问题。用第一步是不是要写一个大括号,里边要写什么东西?是不是写他?上来第一步不应该请他吗?那我问一下大家这个的作用是什么?什么什么家的。什么加载完毕?对。说白了,是他。文档加载完毕。那么你们之前是不是还用过一个叫什么。
04:00
在原生的里面,我们上来是不是要写个它温点二号的,那么它的作用是什么?这个是。整个页面加百。那有的同学可能会问,那么这两个的区别不是一样的吗?而且大家之前存在一个误区啊,存在一个误区,这个文档加载完毕是和谁一样,有没有见过这个document点。这个没见过是吗?咱班同学怎么有点懵啊?啊。当你们ready没见过?他表示,我们一块说吧。Dollar佛加一个括号啊,他上来写的这一步不是和分along一样,记住了它的作用和document ready一样,而document.ready表示的是文档加载完毕,就是刚刚有的同学说的是页面的结构加载完毕。
05:09
而问点lo,我这写了一个,整个页面加载完毕。那么整个页面里面包含的可能有。是吧,你比如说图片这些乱七八糟。说白了,页面里面有什么,我加了什么,必须得全部加载能力,那这样的话,为什么这两个谁更快执行?这应该毫无疑问的,他这是不是文档代表的,其实就是什么结构。结构加载完毕。这个要知道,这个有可能是一道笔试题,就是要考大家这个。来吧,我写完发去了,我们先把刚才那个功能实现一下,先把页面的结构去写一下,上面一个input,那么接下来还有个P标签对不对,比如这是您输入的内容。
06:08
后面的XSPA上来是没空的,这没问题吧,我呢先把咱们这个,哎静态页面打开,不就是它吗?接下来我们要实现的和人家的效果同步,当input里面输入内容了,下面是同步给我显示。那接下来怎么做啊?怎么做?你首先你应付的时候输入内容。当它输入内容发生改变的时候,我是不是要去给下面动态的把上面输入内容是填充到下面啊,那最起码我得知道你能想到的是应付这肯定要有个世界。对不对。这没问题吧,那上来我们应该去干嘛,咱们是不是应该先是拿到这个。
07:01
Input input拿到了以后,这是它,然后给他绑定一个世界。用什么世界比较合适?啊,上来时候你能想到这个change。传给他。Function,这没有你吧。那接下来呢?首先它一输入内容,这肯定会调用了。接下来我想的是获取到它输入的内容是不是动态的,塞给他就OK了。没问题吧?那接下来我们首先要拿到它这个内容,比如挖一个value,如何去拿。BA。你们思路能跟得上吗?能吧,这个Y6现在我是不是拿到了,那接下来我们要考虑的是三点那个spend。
08:04
这没问题吧?接下来有个方法叫HTML用过吗?这个应该是用过三乙,它是不是就OK了。来,我们先来看我刷新一下啊,然后我去输入它。下面有变化吗?然后我又点了一下任意地方说明什么。说明我们绑定的时间不对。当你输入的时候,也是在我input文本框的内容发生变化的时候,是不会调用T事件的,什么时候调用啊?失去焦点的时候,所以还不能用什么气,我们应该是用这个叫keep up。K up什么意思啊?键盘也是当你按键按下台行的一个吧,那而这个呢,正好是我们想要的,你比方说我输一个A。
09:05
我咔一出下边是不是就同步出来了啊,所以说你看着啊。这不就没问题了吗?这是用解块RY实现它,哎,用解块RY实现它,然后在这list.value大家上来想这个this的问题啊,其实还有一个,你们为什么没说这个Dollar啊。我们用race的是原生GS里面的race吧,而在结块里面,我是不是可以将这race分装成一个,这叫什么结块对象?分装成铁块对象的目的是什么?使用解困对象的方法。用什么方法?哎,这把不是六了吧,来我们看看。刷新走你。是不是也没问题啊。
10:01
这是用节拍来实现它,这个大家能听懂吗?能听懂,那接下来来我给你们看一把,用安JS如何去实现它,哎,这些东西会有吧。你看啊。大家平时啊,如果说我们开的这种页签多了的时候,你比如说你这是不是有可能想全屏去看它,然后整完了以后,我是不是又想翻回来找一下目录,这个时候你会发现目录是不是收起来了。知道我说的意思吧。然后你比如说我想快速的找到他,知道点哪个吧。不要一个一个去翻,等到你们真实的开发当中,你项目的层次是很深的,这个时候你比如这看到这个没有。你一上去。这应该是有单词的。看到。Scar from source,它会滚动到了吗?你资需要你当前资源的地方,注意看我现在的叶叉是不是在这个解放实线,这然后点一下这个找你,它会快速的去定位,这没问题吧,哎,方便一点啊方便一点。
11:09
好了,我们用解化,这实现了,接下来我来用阿法减S整一遍。注意看下面这,我上来已经提前把安格拉GS这个库引好了,我现在引的是1.2元引说引的是老版本。然后我把刚刚那个功能整整上面语音库的。接下来还是一个P标签,你输入的。内容是。这不静态的页面吗?那接下来。我来去写点东西,你们先不要管是什么NG。APP。因为他刚刚是不是有没有看到这是个空串啊。现在我就不用写啊,不用写我就写了它,接下来我在这写东西叫model。
12:05
我随便写啊。我先给大家把这个功能实现了。Your name。接下来。打开我们当前的页面来看一下。这个功能就实现了。然后你回头再来看一下我们简答,你看到这个和结块这个对比哪个简单一点。简单还是解的简单?很明显是解放人的简单,为什么?我有写一行的JS吗?没写吧?我很明显没有写GS,然后我只是在标签体,体内也是标,这叫标签属性。咔咔就写了三个东西,然后这个功能就实现了,而且细心的同学你会发现一个问题。这个差别其实不大啊,其实你仔细的看我这个安格拉GS这个响应要比他这个要快。
13:07
快那么一点点。哎,主要是我电脑太快了。如果大家电脑卡一点的话,你会发现这个杰瑞的很明显没有我GS这个效果好。来先整出这个效果,就是让大家对这个lgs感兴趣一点啊,现在我问一下来我有去操作大幕吗。咱没有像解块一样,我是不是先拿到一个大对象给他去绑定相应的事件,没有吧,但是我现在很明显,我在我input里面输入的数据是否会自动的流到了下边这个地方。那这个时候你回头再来看一个东西,我们上来讲阿拉GS的时候,他与杰克瑞对比,再想一下这句话。它的主体不再是do,而是页面中动态数据。
14:00
这样的话应该是啊,有一点感觉的。大家接下来的任务是把这个解压了,把当前的这个项目导进来,然后呢,把刚刚那些东西实现了,你先不要管它是什么,哎,先把这个效果实现自己去改了一下,然后需要大家做的事情是安装一下这个插件。这边不是有个插件吗?这一个来我说一下。这有更多工具,这是不是有扩展程序啊,需要大家做的是把这个拖进来就OK了,这没问题吧。这是你们需要做的事情,那再说一个,刚刚咱没说。这是不是有个web设置,这个web设置啊。是什么东西呢?那我来写点啊,你们平时写这个Q标签怎么写啊?
15:04
自己敲是吧,这样。是吗?这是一个。我这个肯定要比你们方便。我们是不是就就挑了三个字母,哎,这这这叫快捷的,也叫代码模板,代码模板,再比如说你比如你们写GS的时候打写log怎么写啊。很有可能是自己去挑他是不是,然后我们onesto给提供了一些快捷的方式。当你调出这个命令,按下K键,它会自动去给你补全你要想要的东西。如何去设它呢?可以加下来,我先把这个视频。
我来说两句