00:00
好嘞,各位可以说是历经了千辛万苦吧,哎,我们终于把组件相关的概念呢跟大家铺垫的差不多了,那么在这一小节呢,咱们就正式的去聊一聊view里边的这个单文件组件应该怎么去写,18呢,折叠起来,右键新建一个19下划线单文件组件,咱们这样啊,慢点来,我尽可能把那些需要死记硬背的东西,通过引导的形式,让你很自然的把它记住来吧,既然聊到了这个词单文件组件,那就意味着各位我要写出这种文件了,什么什么什么什么,诶,点view之前我就跟大家铺垫过这事儿,我说单文件组件的后缀啊,都是点view结尾的。那同学问你个小问题呗,你觉得就这种点V文件,我直接交给浏览器,浏览器能不能运行,哎,肯定是不能运行,就有点像什么呢?各位,如果你写了一个点文件,哎,写了一个样式,你说你把这个东西交给浏览器,浏览器认识吗?肯定也是不认识的,我知道啊,或许以后有一天这浏览器升级了,对吧,特别迎合我们开发人员爱恩,可以直接运行这种点view点,但是至少现在还是不行的,其实同学啊,你笨想这个点view文件一看就是view团队所打造的一个特殊文件,对吧?浏览器知道那是个什么呀?啊所以说同学你想让你的Les文件可以运行,你得经过处理和加工,把你的S变成什么点CSS文件,浏览器是不是就认识了,那么我们的这个点view啊,同学也是同理的,你得把你的点view文件经过一番处理和加工,诶把它变成什么呢?最纯粹的GS文件,诶浏览器就认识了啊说老师那也就意味着接下来你。
01:42
写完的这些代码都得经过处理和加工呗,是的,说老师那我怎么处理,我怎么加工啊,说一下各位有两个渠道啊,第一个渠道呢,你得借助这个人来我写一下,同学你应该学过叫web pack,对吧,你自己呢,去找一些loader哎,找一些插件啊,然后给他完成整个编译的流程,自己搭建一个工作流是不是可以啊啊这种方式呢,同学就比较麻烦,而且呢,你搭建的那个工作流啊,它不一定非趁啊还有另外一个渠道,哎,就是第二个借助view官方啊,给我们提供的脚手架,其实所谓脚手架呀,各位就是view团队,人家拿着webpa,人家用了很多的load家用了很多的插件,给你打造完的这么一套工作流,你直接用就可以了,哎说白了,人家帮你搭建的整个webpa那个编译的环境啊,所以说同学你说我们选择哪个,那当然是用这个呗,但是你听我说啊,各位在这一小节我们不去涉及任何脚手架相关的东西,在这。
02:43
第小节我们就想跟大家把一个事儿聊好了,就是这个点view文件里边的代码具体怎么写,至于说你写完的东西怎么编译,怎么去运行,那是下一小节我们把脚手架请过来的事儿了,OK,好了,哎,同学,接下来呢,我要创建组件了,我要创建这么一个组件啊,叫做学校组件,那你说得叫什么名呢?school.view对吧?各位,哎,那你听我说,你给点view文件起名字的时候有一套规则,这套规则我之前就跟你说过,就跟那个组件名的规则是一模一样的,如果你这个组件是一个单词组成的,那么第一种写法就是直接纯小写school.view那么第二种写法就是来,各位你知道是吧?S大写school.view啊,这是一个单词组成的,如果是多个单词组成的同学,那第一种写法就是来走着,比如说叫做MY-school.view还有另外一种,哎,就是这么写,叫做大驼峰是吧?M大写,MYS大写。
03:43
ololl.view啊,最好不要再出现什么别的写法了是吧?老师我来个下划线是吧,我来个小驼峰,尽可能都不要出现,同学说一下,一般在开发当中呢,我们习惯选择这种方式和这种方式诶,也就是说始终保证了它那个名是大写的,为什么呢?跟那个开发者工具里边的呈现呀能呼应上,大家还记得吧,你给你那个school组件起的名字是小写的school,但是到人家开发者工具那边直接就给你变成了大写的s school是不?各位哎,所以说接下来呢,在我整个编码过程当中啊,我也尽可能的采用这边的第二个和这边的第二个,但不是说这么写就错,是不右建新建一个啊,开始写了啊,大写的solol.view好同学,我们主要研究这个点,View文件里面到底怎么写东西?
04:32
哎,你可能会想,哎,老师跟GS是不是一样啊,我上来就能写一个let a等于一说老师这不就定义一个变量吗?同学,你仔细看,它有高量吗?连高亮都没有,那就证明点view文件不是你的,点JS不能直接写这个JS脚本,哎,舒老师,那这么的,我写个结构,我写个div啊,来你写吧,写个div来看着同学有高亮吗?没有,所以说点view文件也不是你所认知的那个点atl也不能写结构是不同学我在这呢就不墨迹了,直接告诉大家这里边的东西应该怎么写,我们回顾一下组件的定义,组件的定义是什么呀?
05:09
实现界面局部功能代码和资源的集合叫组件,对不各位,所以说一个标准点的组件来说呀,应该有三个元素,第一个呢是它的结构啊,第二个呢是它的样式,第三个呢,是它的一些具体的数据啊,交互啊等等一些反正GS相关的东西,对不各位,所以说同学为了迎合组件这三个比较常见的属性,那么点view文件给你设计出了三个标签,哎,第一个标签同学看着啊,T plaate,你见过这个东西对吧,我说是标签,所以说你得templatet,那有开始是不是就得有结束,OK,这个templatet里边写什么呢?来同学我给你写一个注释,叫做组件的结构,哎,好,还有另外一个标签,各位不是他培的,诶叫这个叫做SCRIPT啥意思?脚本,那这里边写什么呢?哎,叫做组件交互,相关的代码交互。
06:09
相关的代码,那这个交互里边其实就包着什么呢?比如说组件所用到的数据呀,啊,比如说这个一些方法呀啊等等吧,对吧,各位好,这里边还允许你写一个标签,哎,叫做style标签,走stylele好在这也得写一个结束的,把这单词复制过来走你哎哟回来啊,是这个好,那里边怎么写呢?你就直接写你的样式嘛,把它写在这儿,叫做组件的样式,但是可能细心的同学啊发现了,说老师你这文件这不对呀,是吧,他连个高亮都没有,我不会就这么写代码吧,肯定不会。同学知道为什么没有高亮吗?那是因为Vs code的,就咱们这个编辑器根本不认我这种点view文件,Vs code的默认他认识谁呢?认识常见的atml,哎,这种CSS,这种点JS,如果你想让你的Vs code的认识这种点view文件,各位你得安装插件,不见得你非得安装我接下来推荐的插件,我给你推荐的。
07:09
我觉得还可以的是吧,来同学安装这么一个插件去,哎到这个插件中心里边去找,叫什么名字呢,叫waiter vet,诶这个呢,反正还不错,他有很多的版本啊各位,反正我用的是哪个呢?我用的是这个啊就什么0.3 3.1完了,作者是这个人,你看一下作者是这个人,哎什么什么无说老师为什么用它呢?你看这下载量来走,你安装这就安装完了,同学安装完了之后啊,你就可以把它关掉了,然后这时候呢,回来,哎同学你看所有东西来,我问你是不是都有那个高亮效果了呀,哎,你保存一下好了,回到这儿说老师那你这里边报错呀,说说报错是因为什么啊,各位组件的结构,那就意味着这里边得写一些什么div,乱七八糟的,那你说你这注释能这么写么?哎,不能,那怎么写呢?来各位删掉删掉,选中这一堆,按下你正常写注释的那个快捷键啊,不同的人不一样,我这就是crl shift杠,哎,同学你看就是结构的那种注释,然后这里边不应该写脚本吗?之所以他没报错,是因为正常脚本。
08:09
不也这么注释吗?那这呢,那就不对了呗,样式的注释你得这么给它选中走,这么去写样式的注释对不对?保存同学你看一切正常了,哎说老师那我是不是能写点别的呀,你比如说我把它复制啊,我再来一个,我写个啥,我写个哈哈,哎同学不行对吧,说老师这是怎么回事,这是刚才受到你这的影响了啊,你把它删掉,同学,哈哈,我问你有高亮吗?没有高亮那就证明同学点view文件里面不能随便写标签,他支持的标签是这三个template script,还有撤回来谁呀,咱们那个style你写别的他也不认,而且运行的时候还会报错是不?各位哎,那你看看同学组成组件的三个最核心的东西都有地方写了,这是啥结构,这是啥样式,这是啥呀,交互,哎,其实写到这儿啊,各位,请大家允许我轻轻的踩一下他,我要踩他一脚,谁呢?就是非单文件组件,嘿,老师,他招你惹你了,你为什么要踩他呀?来,你看看我踩他的是。
09:09
是有道理的啊,打开各位我问一下啊,咱们就拿它举例子,所有绿色框里的东西是不是固组件,那我问你的是这块是不是写的是死固组件的结构,那这里边粉色框里的这些是不是可以说是死固组件的交互对吧?交互在这儿呢?完了,这是数据什么的,对不对?同学我问你个事儿,死固组件的样式呢?老师,当时你没写呀,那现在我想写那咋办?我就想给这div对吧,来个class名呢,就叫DEMO,你告诉我咋办。同学,你觉不觉得你就得滑到页面的上方,你得在这个位置写个style,完了写点DEMO,完了给他来一个什么背景啊啥的,什么orange橙色,对不说老师那不是啊,我可以不写在这啊,哎,我可以这样写啊,新建一个school对吧?点CSS老师有啥不行的对吧?来这里边的东西走你啊,这个删掉来了school.css粘贴老师OK了呀,对呀,我独立出来了呀,这个点CSS不控制别人啊,就控制school啊,但是同学你觉不觉得你违背了组件的初衷啊,组件的定义是什么?哎,我们快速的说一遍,是不是实现局部功能代码和资源的集合,那同学你看看啊,说有一天呀,人家想用你一个死库组件,正常来讲是这个东西一折叠,整个死固组件的结构、样式、交互等等一切的东西是不是都在这里呢?那结果你还得告诉人家说,哥们儿,我那样式吧,没弄进去我那样式吧,你还得再引入这么一个东西,同学就显得乱,对不?所以说同学非单文件组件有一个。
10:40
弊病就是样式不能跟着组件走,对不?哎,所以说给它删掉,那我们这个就没有这弊病,为啥说呢,同学给你style标签了呀,是不?各位来吧,开始写一写,那这样各位我呢把之前定义school组件的这段代码啊,我拿过来给它拎出来复制,然后呢,打开我这个文本编辑器打开啊然后呢,我把这些东西清掉,诶清掉,然后把那个组件呢给它粘过来,然后呢,这样各位屏幕呢一分为二,我把目录呢也关掉,我把这个东西呢放在左边,哎就是原来非单文件组件我是这么定义的,现在要写啥单文件组件来走,你各位咱就看看啊,非单文件组件里边的这些东西对应到这个里边都应该怎么写,各位首先一个东西你知道怎么写,就是这个,这是个结构,哎,直接CTRLX带走,Template就删掉吧,写在这个里面是不是就可以了,嗯,走,而且我们还知道一个事儿,各位什么事就是template这个标签最终是不参与结构编译。
11:40
的,也就是说最终下来还是干干净净的,里边的这个对不对,绿色框的这个是这意思不OK,那这儿呢,同学写着呗,反正我需要这个样式,OK,结构带过来了,那接下来呢,是不是还得把组件的交互拿过来呀,所谓的交互啊,各位咱得说好了,所谓的交互就是包含着这个组件所用到的数据啊,Methods方法呀,Comp的计算属性啊,Watch监视啊,哎就都包含了,知道吧,都算交互,所以说同学剩下的这些玩意儿都属于来剪切走,都属于啥,都属于交互,哎,所以说关掉它吧,打开这同学东西往里边一粘,哎,然后呢,空行删掉,缩进一条来这块呢,给它删掉,好,这是data,好,这是MYS,写完了吧,那还差点啥呢?是不是还差这样式啊,那给他补一个吗?在这儿直接写,而且注意个位它是有提示的,你瞧点DEMO,比如说我想写那个背景色,哎,那你说我就可以来再写一个bacc background color,来一个orange。
12:40
你看这都是有提示的啊,但这里啊,有一个小细节问题,大家发没发现,就是刚才在这儿,你看着我写这个点DEMO的时候,点DEMO正常来说我写左边的画括号,它自动给我补齐,右边的为啥没有补齐呢?是因为你安装完这插件之后啊,你没有给它进行一个重启VS扣的这么一个动作,来咱重启一下,各位我把这关掉回到桌面上,然后右键再重新打开重启一下,然后你发现啊,它就比较好用了啊,你看着当我写的时候,我写这个点DEMO,我写左边的,你看右边自动补齐是吧?好了,来把东西给它粘过来啊,重复了来,那就把它删掉,这么写OK了吧,同学,你代码写到这儿啊,你听我说有一个不对的地方,哪儿不对呢?各位,就是这块,你这个脚本直接写是不行的,说老师这为啥呢,我不懂,同学我引导大家一波,你说你终归写的是什么东西,是不是组件,那同学是不是以后可能你自己引入一下你去用,或者别人引入别人去用啊,那同学你就看看你整个红色框里边的这些代码,人家别。
13:40
人引入的时候,同学是不是得通过这个关键字去引入,叫做import,各位这就看你模块化的东西啊,你熟不熟了,对吧,各位人家得引入,一引入之后发现同学你这个组件什么也没有暴露,那是不对的,所以说同学在这里边绿色框里边,你加上一句话就可以了,哪句话呢,就是暴露。
14:01
哎,同学,我不知道你这个ES6模块化这个技术你过不过关啊,如果不过关自己下去赶紧去复习复习好同学,那我就开始给你写了,一共有几种暴露方式,三种,我先说第一种,你可以这么写aport,往这一写,完事儿同学,这叫什么暴露,这叫分别暴露。还有另外一种选择各位把它删掉对吧,在最后给它补上这么一个东西走,叫做aport,完了在这呢,写一个花括号,把谁丢里边去school同学,这叫什么暴露,这叫统一暴露。还有一种方式叫做什么默认暴露,怎么写ault default,然后写谁呢?School对吧?说老师,那我选择哪一种暴露方式把这些东西暴露出去呢?随你的便,不用记得那么死。同学这儿真没有那么绝对,你爱用统一就统一啊,爱用默认就默认,对不对?各位,但是一般来说,你听我说,我们在这儿呢,都用这个默认暴露,为什么呢?各位,因为有些时候呀,当我们暴露的东西啊,是一个的时候,我们往往喜欢这个默认暴露,因为我们都知道,如果你用了默认。
15:02
暴露去暴露东西引入的时候比较简单,你就直接写import什么什么什么什么,你起个名,然后写一个from哪里哪里是不是就可以了,但凡你使用了分别暴露或者是统一暴露,你都得这么写呀,Import花括号什么什么什么玩意儿,然后扩回对吧?哎,然后扩回,然后from哪哪哪对吧,同学,哎,所以说一般呢,我们在这都喜欢这个,哎,就是默认暴露,那你不觉得写的有点麻烦吗?啊,整个中转变量school完了,还得is part default school没那个必要吧,所以说把它剪切走,然后怎么办?哎,直接把这一堆东西就给它删掉,不用那个中转变量直接跟上port default直接写内容是不是就可以了,对吧?各位还可以再优化一个地方,各位就是你这个组建创建的吧,有点太麻烦了,你还在这亲自的调用view点,我们都知道各位,这个view.instant是不是可以省略,我之前可说过这事儿啊,我说可以省略,只不过咋的,我们为了学组件相关的概念,我一直没给你省没。
16:02
省略呀,是吧?所以说接下来各位这里边写的配置项直接拿走,然后点extend by来不用再去调用了,那暴露什么呢?直接暴露组件的配置对象对吧?这是什么呀?数据这是什么呀?Methods,那如果想写的更完美一点,各位你就得这么写了,前边再来一个什么呢?Name这个配置项大家还记得吧?来缩进呢,调一下name,诶,那我这也调一下,再往前一下粘过来的,可能那个缩进有点不对啊同学,Name来给组件起个名字,同学看这叫啥school.view最好你跟外边那个文件名保持一致,也叫school,说老师那我要补的呢,哎,我就叫做ABC呢,同学,那你看你这种行为呢,就比较诡异,别人看你一个文件,哎呀,小张定义了一个school啊这个组件,然后结果在这儿呢,你强行写了个ABC,那我们都知道开发者工具最终给你呈现这个组件的时候,你知道叫什么名,人家这么给你呈现了大写的ABC,是不是不太对?哎,所以说同学一般来说跟。
17:02
这个文件名最好保持一致,School是吧?说老师我不写能怎样呢?同学,我们都知道不写的后果对吧?如果你不写的话,那可能别人去注册这个组件的时候就随便给你起名了是吧?哎,就是最好写一下叫做school OK,同学,恭喜你,一个单文件组件写完了啊,原来的这些东西该怎么写就怎么写,哎,什么computer啊,什么watch methods啊,该怎么写就怎么写。OK,同学,你看看啊,多么的清晰,这个temp的里边是组件的结构,这个是组件的数据交互等一切用到的东西,对不对?哎,包括配置组件的名字,那这里边是什么呢?组件的样式,同学你看看一个标准的组件是不是形成了呀,空行给它删掉,那我这只是写了一个啥school组件,那各位我还想再写一个组件,哎,叫做student组件,那我得怎么写呢?那就在它的基础上,CTRLCCTRLV对吧?然后右键改个名,写上ste student.view好了,回到这儿改一改吧,同学不叫学校名称了。
18:02
简单写啊,叫做学生姓名对吧?然后在这儿呢,同学我问一下能不能不写样式,可不可以不写这个style标签,可以啊各位,如果你的组件真的是没有样式,那就没有必要写他呀,那这儿呢,我也可以不写呀,对吧,各位,哎,学生学生姓名,那这儿呢是学生年龄写好啊学生这个年龄,那这儿呢就直接写name了,那这呢就是age了是不是?走哎同学这要改成name了,那你回头来这儿看,好像也没有必要叫school name了,因为本身就是两个组件了嘛,对吧?来走着内幕,那你这儿换了,你这也得换吧,你这也得换吧。哎呀同学呀,这儿有内幕,这儿有内幕他俩可不是一回事儿啊,这是组件名,这儿呢它奏是个数据啊对吧,各位好,回来,接下来这呢也得改name幕是吧,拿过来name name幕这儿呢也是name,我看这儿改没改啊,这也改了,OK,回来各位,那这个来姓名别叫上圭谷啊,叫张三是吧,那这块叫做年龄写个age,嗯,多大呢,比如说18岁,OK,是不是写完。
19:02
各位啊,这别叫学校名了,这删了没这功能行吧,也没methods OK,最简单的一个组件可以吧,那这会儿还得改对不?S student d OK,整体看看啊,学生的姓名、年龄,Name age name age名也改完了,OK,也没样式,搞定了。同学,如果你还想再写下去,那你就复制粘贴呗,一直改呗,对吧?各位,好了,组件呢,定义的差不多了啊,没有必要再写第三个了,各位,接下来有一个组件必须得有,这个组件老重要了,之前我就跟你聊过,它叫做app.view同学们还记得它的功能吗?哎,就是汇总所有的组件,对不对?咱之前说一人之下万人之上对吧?好了,开始写里边的东西,那同学你说如果我再一点一点写这个T,是不是有点忒麻烦了呀?对吧,一点点敲,所以说各位这里边是有快捷键的,如果你安装了刚才我推荐的这个人vet,那么同学你就可以这么玩了啊,瞧着打一个尖括号,再。
20:02
一个V就可以了,当你敲下回车,这一套东西就都来了,对吧?结构交互样式,而且aport foot都给你写好了,但是就有一个地方不太好哈,这个缩进没给你调,哎,调一下就可以了,说老师那我安装了别的插件,那是啥呢?那这我真不知道了,对吧?你看一下别的件那个文档里边是怎么说的呗,啊OK,同学,那来给它起个名字,Name叫什么呢?APP对吧?然后同学你得明白APP的作用,APP是干嘛的呀,汇总所有的组件是不是?所以说各位在APP里边你肯定得做这个事儿,叫做引入组件,OK,你都得引入谁呀,两个,一个是school,一个是student,那来吧,开始import引入谁school from哪呢?当前目录下的school,各位这儿呢,我就不再说很多的话了啊,这呢就是一个正常的ES6里的模块话的引入,如果真不熟,自己下去再看看,好吧,各位,那还得再引入一个人,谁呢叫做这。
21:02
个student student,其实吧,各位咱多聊一句,如果你真的是啊,说老师我架不太熟啊,我这什么东西可能都不太熟,甚至都甚至都不能说不熟,你可能都不怎么会说老师我直接搞框架,其实同学怎么讲呢?很多的东西你都是在死记硬背,你天天就看老师import跟个单词,你也写import跟个单词,突然有一天老师inport后边跟个花括号,你不知道了是吧,前知识得够啊各位来在这儿student引入组件了吧,但你仔细看他们都是暗色的,颜色特别暗,为啥?因为引入了,你没有去用它们对吧?那怎么用啊?哎,同学,注册一下不就得了吗?怎么写来着,还记得吗?哎,走,叫做components,那怎么注册呀,如果笨重点写,那就这么写呗,School冒号school,嗯,那再来一个student冒号,Student对吧?那为什么不精简点写呢?是吧?各位OK,注册完了吧,哎,那接下来呢,慢慢捋,同学接下来呢,引入引入了是吧?在这定义的我引入了,然后我也注册了,那接下来呢,是不得在APP这个组件的结构里面用上这两个标签呢?哎,那是不是得来到这儿啊,说老师那我就写了啊,School走,你再来个student走,你妈你这就犯错了呀,咱说过模板里边必须得有一个根元素,所以说各位咋的,你来个div,人家外边这个同学你听我说,你别指着他这个东西,我跟你讲它就是做个分格,说的再直白点,如果外边没有那tempate同学,人家整不明白你这粉色框的到底属于脚本还是属于样式明白。
22:32
不,这个tempate的就是属于一个分隔,最终呢,它也会被脱掉,脱掉之后里边的东西必须有一个根元素,OK,好了,同学写一个词故,哎,那我这么写行不行呢?我让他自闭合行不行?行说老师你不是说这么写有问题吗?这么写同学在非脚手架里边有问题,但是在脚手架里边它就没问题了,是吧?各位,哎,这随你的便啊,我先这么写着吧,来走,还有谁呢?Student OK写完了,那同学有没有样式呢?想让他有那就有,对吧?你在这加一个什么样式啥的,那现在不想写,那就删掉呗,好了,保存同学APP是不是准备好了,就是截止到目前啊,我有一个school这个组件,我就不再敲了,在这儿呢?School组件还有谁呢?Student组件还有谁呢?APP组件,同学是你有一堆组件,嗯,是组件里边啊,你也选出来一个老大,谁呢?APP,但是我就问你同学所有的组件是不是都得听从这个人的分配,叫VM呀,是吧,各位,所以说你得创建VM,那么在脚手架开发的时候,我们怎么去创建?
23:33
那个VM呢,你不要妄图把创建VM的代码写在这个里边,同学,只要这个文件是点view结尾的,这个里边一定你不会写出这种代码,你有一个view,这是不可以的,因为点view文件就是组件,组件可不是这么来的,是不是?各位,哎,那所以说呢,我们一般来说在这创建这么一个文件啊,看好了,叫做min.jsin什么意思啊,哎,就是主要的,有的脚手架里边呢,还叫做index,哎,有的脚手架里呢,你比如说react可能就叫做app.gs那在这呢,我们的view选择了这个名字叫做点GS啊,那这里边你知道我要干嘛了,各位school和student你不配跟我这儿对话,对吧?谁有资格跟我这个mean.js里的VM对话啊?APP说老师那两个人呢,那school和student呢,他们是跟APP在对话,是这意思,不IOK,来开始各位引入谁APP,那不得引入吗?当前目录里的app.view是吧?来,回到这儿,当才我引入。
24:33
School和student的时候啊,有些同学可能就说,哎,老师你没写后缀啊,是这样的,各位在脚手架里面这个点view写也行,不写也行啊,那我就先写着吧,点view好了,回到这同学引没引入,引入了接下来怎么办?是不是得创建view,那就new一个实例走,你里边都写啥呀?各位啊,想想吧,首先你肯定得写这个东西,就是components,或者说写一个更重要的人吧,同学就是要为哪个容器服务,EL我们之前一直这么写井号wrote,对吧?这个东西肯定缺不了,还有一个人同学肯定也缺不了,谁呢?Components同学,这回你听我说,我不用再注册别人了,我注册一个大的组件啊,组件中的leader我注册一下就可以了,谁呢?APP这么写是不就得了?
25:20
啊,周老师难道他不需要一点自己的数据吗?那你想写也可以啊,对吧,那就写呗,Data,但是在这儿我不需要啊,是不同学明白这些人的含义,这是真真正正写功能的,写效果的,这个也是,这个人呢,他就是作为一个汇总对吧?他当然也得有结构,那没有结构就没有机会写组件标签嘛,那这个人呢,那是属于大哥级别的VM对不对?各位哎,告诉我服务哪个容器,告诉我那个组件领头的是谁,是APP,这就可以了。那同学现在还有一个问题,什么问题,就是容器呢,容器呢,你一直说,哎呀井号漏的容器在哪啊?哎,所以说各位要是标准化开发的时候,我们还得创建一个文件叫做index.html,那里边要干嘛呀?来慢慢来吧,同学在这儿改个名叫做测试一下啊,或者这么说吧,叫练习一下单文件组件的语法,哎,简单练习一下好。
26:20
好同学,在这里边写个div准备啥ID为root啊,Rot的div准备好了吧?嗯,那接下来呢,你想让你这个命点GS运行,那你是不是得引入它呀?哎,OK,那在哪引入呢?对吧?说老师我在这引入吧,在这引入啊不太合适,为啥呢?同学咱之前说过,在给你讲那个内置指令的时候啊,咱说这个的时候就是clock是吧,咱说引入那个外部脚本的时候,同学是这样啊,如果你要是在这儿你去引入那个meanin.GS就会造成一个什么问题呢?这个m.GS里面他去拿结构,结果发现结构还没出来呢,是吧,各位,哎,所以说你要真想引入,你是不是得拿过来在整个body的最下方去引入啊,先让什么呢?哎,先让这个模板出来,哎,然后再引入,OK,引入完了是不?但是还有个小问题,同学,你的m.GS里面,我问一下是不是用到了这个人呀,哎,但是你引入了吗?没有,所以说怎么办呀,那就只能靠这atl。
27:20
吧,只能靠这了,同学在用你的命点GS之前你最好,诶用这个最好引入谁呢?点点杠翻出去GS下的view view先就位,命点GS再就位,对不对?各位啊,还差点事,差啥,你看看你的VM咋写的,说了服务这个容器啊,注册了,同学你说服务root没毛病,你注册没毛病,但是你就差一件事儿,我问一下你写过这种东西没?APP写过没?没写过,没写过一切都是零对吧?APP没有机会出来,那么APP下属的school和student就全废了,出不来了,所以说怎么办?各位回到这儿,你说这个容器里边我得怎么写呀?各位是不是得这么来一个APP对不好,然后呢,走是不是标签呀,哎,这么写是不就行了呀?那如果说这个容器里边我就是不想写东西,就是不想写这个容器,我就想让它干干净净,你说得咋办?
28:20
我们之前可是聊过的各位,我说这个容器里边可以不写模板,你可以通过另外一个配置项咋写,就是在这写这个东西叫做templateate,还记得不?哎,同学你看看不怪,我们之前讲那个非单文件组件的时候,我一直让你练吧,你要不练在这的同学配置项很多的,而且还很相似,对不来templateate,那这里边怎么写呀,那就简单了呀,各位,之前我们写过,你把那个APP啊给它写到这儿不就得了吗?走是吧,各位,那这回你的容器里边彻底是不是什么都不用写了,写好注释,这叫做准备一个容器,所以说同学们我们大概捋顺一下这个逻辑啊,我一会儿要打开的呢,是index.atml对不对?各位好嘞,一个容器准备准备好,准备好了,那同学view就没就位,就位了,然后一切的开端啊,是不是都在这儿呢?所以说我们有的时候管这个命点GS啊叫入口文件,哎,你体会体会入口文件一切的事儿,一切的活都是从这开始的。那然。
29:20
后呢,就进入了m.JS,然后就开始去引入谁APP点,然后呢,诶就来到这儿了,还说我看看你这个APP吧,APP里边有结构,哎,又引入了这个school student,哎引入了也注册了,这也用了,OK是吧?然后呢,同学其实他引入的时候啊,就开始读取这个文件了,哎,他说第十行你引入了school,那我看看school吧,来到这儿这些东西全都执行了school,诶回到这儿就就位了,然后发现呢,你11行又引入了student,于是乎来到这儿,哗,这一堆执行完了,然后回到这儿,诶student就就位了,随后呢注册,随后呢整个模板,诶解析完毕,那随后呢,各位来到mean里边,那你说这句话是不是彻底执行完了呀,那执行完了之后呢,那你就去new这个view了,而且最给力的是你new view的时候,当时在这先引入的view,那所以说mean里边我问各位,嗯,能不能new view啊,可以有没有EL,有引没引入,引入了注没注册,注册了组件标签写没写,写了服务于哪个容器,我还说明白了各位那你。
30:20
说在这个容器里边是不是就出现了我想要的东西啊,哎,说老师那快点吧,咱们赶紧试试,右键打开。说老师啊,哼,我失望了,哎同学看一下报错啊同学他报错呀,就对了,你读读这啥意思呀,说不能够使用什么import怎么怎么的,同学,这个的意思就是浏览器不能直接支持ES6的模块化语法,那咋办呀?同学,其实就是这个东西啊,浏览器不支持哪呢?其实你在mean mean.js里的第一句啊,你就废了,就是CH同学你想想点view文件浏览器能直接运行吗?不能iport语句浏览器认识吗?不认识,哎,所以说各位在这儿我只是把一个大概的形式给大家写一下,我跟你讲啊,一旦你把这些代码你给它放在了脚手架里面,瞬间它就运行起来了,来我们总结一波啊,各位打开一个组件,看看组件里面怎么写,Template里面写结构啊,Script里面写脚本,脚本包含着给组件命名啊,哎,配置数据啊,配置什么计算属性啊等等那些东西啊,当然呢,还有一个就是什么呢。
31:31
DELL,哎,这里边呢,配置的是样式,然后APP组件是汇总所有组件的,哎,然后我们借助这个点GS呢去创建实例,并且指明为哪个容器服务啊,那页面呢,在这呢,叫做index.html同学,所以说这两步就是这一步和这一步呢,我引入的其实意义都不大了,你觉得呢,各位,因为这个东西实际上是不能运行的啊,只要放到脚手架里它就好了,OK,好,大家下去呢,自己呢也先练练这个形式,然后一会儿呢,我们切到脚手架的时候,你也测试一下,看看自己那个东西啊,写的对不对,好,那这一小节呢,我们。
我来说两句