00:00
好嘞,各位,那这一小节呢,咱们给大家讲一个特殊的标签属性,诶它的名字呢,叫做ref,其实之前啊,你学过一个特殊的标签属性叫做T,大家还记得吧?诶,它很重要,这个ref呢,可比这个K啊要简单太多了,那这ref是干嘛用的呢?来咱代码上写写啊,打开src,那是这样啊各位如果说这一小节的内容我依然往这里边写,就整个脚手架都讲完了,所有的代码都写在这儿,同学,最终你就没法看了,彻底乱了,一堆功能,一堆组件都在这儿啊,那所以说怎么办呢?我想了这么一个办法,各位把它折叠起来,我把这src呢,给你备份一下CTRLCCTRLV,然后我给它一个好听的名字,首先给它编个号零一_src,再来个下划线,然后呢,我给你起一个名字,告诉你这个src里边讲什么了,那咱想想吧,讲什么呢?我给大家分析了脚手架的结构,哎,我给大家说了这个render配置项是干嘛的啊也。
01:00
告诉大家了,如何去个性化的定制你的脚手架,所以说呀,我给这src呢起这么一个名字,就叫分析脚手架,可以吧啊,以后就是每讲一个新内容,都会形成一个全新的src,大家下去拿到我的代码,哎,说老师我就想从头开始看,那你就把他的名字改一下,把他的名字改成src,然后你在npm run serve就可以看了,OK,好,打开这个src,这回我就可以随意的去操作了,那接下来啊,我要做一件事儿,就是从这儿到最后一个文件,两个文件夹,两个文件全都删掉啊,然后自己呢重新写,当然我一删掉啊,这会儿肯定得报错,所以说先给它停掉吧。各位啊,来开始写src里边都有什么呀,有命点JS是这样啊,我们在这一小节呢都删掉,从头写一写,你等到下一小节的我就不再墨迹了,OK,哎,在这儿呢,让大家呢,再呃,加强一下这个记忆来,里边还得有app.view里边肯定还得有个文件夹啊,叫做components是不?
02:00
存组件的呀,说老师那个静态资源的文件夹呢,咱现在不用,那就不写呗,哎,给它关掉,同学,mid.js里边都写什么来着?首先inport view,对吧,引入这个你要用的这个框架,随后呢,还得引入所有组件的外壳组件是不是app.view啊,那就是这个,然后干嘛呀,得关闭掉view那个提示是不是?哎,简单写view.con.production type,嗯,把它的值呢调成false OK,准备性工作做好了,那接下来呢,是不是得创建view实例啊?哎,写一个VM,那这里边我也不需要数据,那就不写了,那你知道里边写什么?RDR是不是得用这个render啊?哎,唯独在这用一次,然后是H,然后是箭头函数,然后再写H,走,里边写APP,对吧?各位这儿一定得记得改哦,不是root了,是APPOK,这就写好了啊,那注释呢,咱也写上啊走,现在我写这个mean.gs以后就直接拿过来用了啊,所以说把注释写好,叫做引入view啊,然后再在这儿呢,再写一个,嗯。
03:00
走,又是小写的啊,在这呢是引入APP好,在这呢再写叫做关闭view的那个生产提示,关闭view的生产提示,OK,这呢也写好处是叫做创建VM,只有这一次啊,以后就不再写了,OK,把它关掉再说APP里边怎么写?呃,APP你要想写吧,其实你得琢磨明白,你接下来那个组件叫什么名,那这样吧,我先创建一个组件,行吧,各位随便写一个,比如说叫做school.v里边怎么写,大家还记得吧,尖括号V,哎,利用我给你推荐那个插件呢,批量的生成这些代码,走,你里边随便写点东西啊,展示学校的两个信息啊,一个是学校的名称,插值语法,写一个内幕,再来一行叫做学校的地址,这块呢也得换一下address OK,写完了,那接下来呢,缩进调一下,在这儿给组件起个名字吧,叫做school,反正建议大家啊。
04:00
这个首字母用大写的,嗯,完这名字呢,也让它是大写的,嗯,来走里边配置什么呀,数据呗,Data,如果你安装了那个插件,同学你调到这儿,调到第二个data,敲回车,你看就是人家知道你是在组件里面配置data,上来就给你写一个函数,而且是普通的这种函数,上来就给你写个return,对吧,好了,直接写name,写叫做上硅谷,好了,再来一个address啊,简单写了就北京就得了,或者写一个北京,哎,昌平,OK,嗯,死固组件准备好了,说老师样式呢,那写点呗,来,So,给它简单写一个吧,Class,嗯,比如说呢,叫做DEMO,随便写一个,把它复制一份,然后在这写一个DEMO,写的好看一点吧,也叫school啊,但你别把这个和这个搞混了,它俩是两回事啊,一个是组件名,一个是样式名,在这写上school,嗯,写个什么样式呢?给个背景色吧,啊,比如说给他一个别这颜色了,太刺眼了,不灰色,OK,写完了关掉,随后呢,写了一个APP监口号V。
05:00
同学啊,越来越像公司真实开发的场景了啊,都是点vu文件了,好了,接下来怎么办呢?首先你要知道APP是干嘛的是吧,还得汇总所有的组件,所以说谁得过来呢?这个school从哪儿引入呢?当前目录下的components下的谁呢?School OK,准备好了,在这儿呢,也写好注释啊,叫做引入school组件缩进呢,调一下好,在这儿呢,配置它的名字叫做APP,然后接下来怎么办?是不是得注册组件,然后把这个school呢给它拿过来,诶同学你听我说啊,这儿咱就别再写那render了,OK,在这儿你就正常写components,在这就正常写那个组件标签就可以,唯独VM,哎,唯独这你写个软点,OK,行,这不磨叽了,关掉,然后配置完了,那上边怎么办呀?啊,写个div,对吧,你必须得有一个根元素啊,完了写school,这么写行不行?行,咱之前还说过同学自闭合是不是也行,但是自闭合你在非脚手架里边容易产生问题,但是我想问的是,现在是不是是脚架?
06:00
那是脚手架就可以这么写呀,OK,好,为了做测试,咱来给他写三个,之前咱不是说过吗?到脚手架里边自闭合标签就不会引起那个问题了,什么问题啊,说导致后续的组件不能渲染,咱试试啊,我整三个school OK,写完了样式呢,那就不写样式了吧,对吧,就是汇总他们三个吗?OK,写完了来给这块呢,给它关掉,那整体你捋一捋吧,各位,这是mid.gs啊,引入这两个配置一下这个APP,然后render写的这个,这两个组件没啥说的了,来运行一下,看看它能不能启动呢?NPM是so,自己最好写一遍啊各位,以后咱就不一点一点写了,在这儿呢,是唯独这一次,嗯,in.JS里的东西很固定,哎,可能有同学问啊,说老师这public你不再给我存一份,各位啊,这个东西我就不给你存了,为啥说呢?你看这public就是一个图标,完了就是一个对吧,Atml文件,所以说这我就不给你存了啊,就一直都用这个,知道不就是你的脚手架想运行各位src和public这俩文件夹你跑不了。
07:00
但是我们所学的知识都在src里呢,OK,好了,同学,启动了是吧?按住CTRL点一下,嗯,没啥问题,同学,你看三个school组件是不是都渲染了呀?好,打开控制台刷新没啥错误,借助V的开发者工具看一眼啊,这是谁?VM,这是谁APP下属的school school,每一个都有自己的数据对不?好了,接下来开始说咱们要讲的这个ref,那回到我的APP组件当中啊,我给你加点功能,同学留一个得了行不?哎,知道他们没影响就可以了,删掉上边呢,给你加个功能,加个啥呢?加个欢迎语吧,写个H1,嗯,然后呢,同学,哎,这么的,好久没用这些指令了是吧?来用个指令V-text里边写什么呢?写了一个message啊,那就得要求你这里边有数据对不对?哎,那我就配置一个data,然后是message,嗯,写个什么呢,叫做欢迎学习view,来个感叹号,OK了吧,各位回头看效果啊,走,欢迎学习view,然后呢,回来我在下边呢,给你加一个按钮,这样。
08:00
按钮是什么功能呢?你听好了,你只要点了这个按钮,它会把H1这个盗M元素输出,哎,那我就写一下啊,叫做点我输出上方的上方的DOM元素,OK,那同学你不得给人家一个点击事件呢,艾福click,然后等于这块呢,有一个小坑,各位啊,有的时候你可能在这会有点疑惑,我跟你说一下啊,我先把这儿呢关掉,同学你看现在文件我保存了吗?我没保存还拿走,我没保存好,你看着克Li给一个回调就叫做show展示嘛,展示什么展示do对吧,Show do,然后呢,同学你看我保存现在这个代码其实就有问题,你给这个按钮绑定了一个回调,叫做收到,但是你有收到这个回调吗?有这方法吗?没有,所以说这时候回来啊,你看他在这儿呢,就会报一个错误,说老师咋这么多这个错误呢,你看发现啊,刚才我写MSG的时候他也报错了,现在啊,同学你看刷新一下,你看有没有错误,有确实有错误,因为我确实犯错了吗?但是你看回来啊,我。
09:00
把我这错误解决,不就是因为没有这收到吗?哎,我让他有瞧着各位啊,在这儿呢,我写一个MYS好,我配置一个收到吗?刚才说没有,那我配置一个呀,然后在这呢,Crlo输出个什么呢?艾符同学,这回代码对了吧,你看着啊,我摁一下CTRLS同学保存了,这回这代码是一点问题都没有的,但是回来你看啊,有一种感觉好像依然在这报错呢,实际上各位它是没有刷新控制台,目前这个脚手架它不刷新控制台了,控制台里的东西他给你保留,所以说有的时候需要你自己,诶手动刷新一下,按CTRL加R,或者你自己点这这回明白了吧,各位好,走,然后关于这些配置项啊,各位顺序真的是无所谓的啊,无所谓的,比如说我最后写这个data,或者什么时候写,这都无所谓,但是一般来说吧,会把它用到的组件呢放在这儿啊,告诉我你是什么名字,再告诉我你有什么子组件,剩下这些你就随便写了是不?哎,就是条理能清晰一点,好各位那输出这个do吧,对,就第三行,第三行啊,这do输出那咋办?
10:00
说老师这输出,说老师你怎么能有这种需求呢?你怎么能输出这个do呢?同学,是这样啊,在真正开发当中啊,咱说用了view,同学,我们的目标是不是就尽可能的不去自己操作do,但是有些特殊的情况,我就得操作一下DOM吗?那你想操作do,首先你是不是得拿到这个DOM呀?哎,那可能有同学说了,老师我明白给他整个ID呗,对吧?ID比如说叫做h he啊,这不就可以了吗?或者叫做title头,随便写一个老师这还能难倒我呀,在这那不太简单了吗?Did是吧?document.get element by ID拿到这个title,这不就可以了吗?啊,说老师你看功能实现了呀,来到这一点。同学,拿没拿到,拿到了你接下来对它进行什么操作是不是都可以啊,啊,但是呢,同学话说回来,回到代码中,你说你这么写是不是不太好?同学你感受一下,你毕竟是在view里面,你明晃晃的在这写document.get element,在这调原生的do操作是不是不太好呀?嘿,所以说各位view呢,给你提供这种方式,View的意思是呢,反正原生的HTML里边呢,ID可以给一个元素打标识,啥叫打识?就是我给你身上贴个ID,回头我用你的时候,我可以获取你啊对吧?原生HTML里面用什么呢?用ID,那么view里面同学有一个更好的办法,哎,就是不用ID,用什么呢?用这个属性叫ref,哎,同学我是不是写ref了呀?嗯,说老师,那还能这么拿吗?那肯定不能了呀,啊,哪有这个API呀,说document.get element by ref同学,你这写的是什么鬼啊,对吧?这个东西是view提出来的,完你前面写的是一个原生的do操作,不可能有这方法的。所以说这。
11:40
的同学你删下去,哎,说老师,那你这就属于给他打标识了,但是我拿不到的呀,那有啥用啊,同学你能拿得到,来我问一下光标闪烁的位置的this是谁?你还记得吗?VC对吗?各位,顺着这个VC你一定能找到H1这个DOM元素,哎,来,我们看看它藏在哪个里面呢?啊,在这儿你看还是残留着刚才的刷新一波就好了,来各位我点了啊,走,你输出的是什么?哎,VC组建实力对象打开,诶,谁的VC啊,哪个组建的实例对象啊,当然是app.vi啊,我在哪个里边写的东西嘛,是吧?各位,OK,这个时候你注意看,顺着这个VC出发,你找它身上有这么一个东西叫Dollar符,Re FS,然后你打开,同学,诶,有title吧,Title的值呢,打开就是你想要的那个H1那个真实的DOM元素,那所以说同学你知道接下来应该怎么办了,回来在这输出的是this,点到了符ref。
12:40
S点谁呢?Title,哎,就简单说,同学原生操作你得用ID获取的时候,你得document.get element by ID,那么在view里面不用ID,用ref,那怎么获取呢?在VC身上的Dollar服rap,哎,都给你收集好了,来咱看一下效果啊,刷新一波点走,你是不是也能拿到啊?那有些同学说了,老师啊,不就是ID的替代者吗?诶这么说没毛病,就这么回事,说老师那我要再写一个呢,诶你比如说我给这个按钮本身呢,我也加个ref,诶叫做BTN,老师,那这回那你瞧瞧吧,来我给你输出这个re,直接给你输出它啊,你看看效果吧,刷新一波走,你同学里边有两个东西对不?BTN和啥抬头,也就是说你给哪个标签加的ref,那么VC这个组件实例对象就帮你收集哪个元素,OK啊说老师那简单,那这我会了,但是这里啊有一个细节上的问题,各位你瞧着你说如果我给这个组。
13:40
组件标签加个ref呢,比如说叫做SCH啊,我不写ooll了啊,怕你误会我就写这个SCH,那这是什么后果呢?是不?各位你看h heg属于什么HTML标签,这个button也属于HTML标签,这是属于什么标签啊各位,这可叫组件标签,我给一个组件打了re,诶,这回我能拿到什么呢?来咱们试试啊,在这直接Dollar f.SCH我们看一下啊各位回到这儿刷新点了啊,走你。
14:15
什么呀,VC组建实力对象,那么是哪个组建实例对象啊,这会你可要知道了,各位,我这回拿的可不是APP这个组建的实例对象,而是school这个组建的实力对象,你体会体会,你给谁打的ref嘛?老师,我给我给我给啊,那所以说z.Dollar服refs上这个SCH就是这个故组件的实例对象,我把它删掉,让大家看的再明白一点,来同学刷新一波点,这里边有三个东西,这个真实盗米元素,这个真实道米元素,这个SCH是什么?是school组建的实例对象,老师你怎么证明啊,打开就能证明同学有address有内幕,你说他是谁?当然是死故组件对不?哎,舒老师的ID好像也能办到吧?是这样的啊各位,要是对于传统的HTML这种标签来说呀,怎么讲你ID和ref呀,它真的是没有什么差别,只是一个写法上的差别,但是对于组件来说,诶,那可不一样了哟,兄弟你瞧着。
15:16
我不用re EF,我给组件打个ID,那我打一个ID,同学这块我是不是就可以诶用这种方式获取SCH啊,那同学你说这回获取的是什么呢?来我们试试啊各位回到这儿啊,刷新一波走,你同学打开,你说这是什么呀?这是不是死故组件所对应的完整的盗墓结构呀?哎,你品位品位各位我给谁加的ID,死故组件标签,那然后这个ID就跑到了谁的身上呢?就是死故组件最外侧的那个根元素上,也就是说这块上,你看这个div之前我只写了个class,那你看现在呢,是不是多了个ID啊,那你再通过那个document.get element by ID,你拿的当然是整个这个school那个大的div吧,是不是?你看他俩还是有区别的,哎,但如果说你在这用的ref,那我们就知道了吧,各位来那在这输出那就写呗,Z点到符refs点谁呢?SCH,你看你这回拿的可就是组建实力对象了,对不刷新。
16:16
一波走,哎,在这儿呢,各位可能说老师拿着没用呢,拿着有什么用啊,你拿到这个school的组件实力对象了,你不就是做个输出吗?那你这有什么用呢?同学,你等咱们讲到组件间通信的时候,你就发现了,得到一个组件的实例对象啊,有的时候真的是太重要了啊,在这儿呢,咱们先知道诶有这么一个东西就可以,好吧,各位,我把这些输出啊都给大家写上来,走走第一个输出的呢,是这个title头啊,然后是这个按钮本身也输出是吧,你点的是按钮啊,这里边还输出这个按钮,那这呢是SCH写一个注释,这会儿获取到的是真实DOM元素,哎,走,那这儿呢,也是真实倒墓元素呗,哎,那这儿呢,获取的你可就要知道了,叫做s ch school组件的实例对象,我们嘴中的VCOK,同学,笔记早已经给你准备好,打开ref属性被用来给元素或子组件注册引用信息。同学这。
17:16
句话是我从官网粘过来的啊,说的很官方,你读一读,被用来给元素指的是谁,就是什么atl啊,Span button啊,哎,这种纯粹的atl元素,或者是谁子组件同学,为啥人说子组件?同学,你琢磨琢磨,你在一个绿色的组件里面居然能写另外一个组件的组件标签,就已经确定了他们的父子关系,你觉得呢?各位你品味品味,你能在一个绿色的这个APP组件里面,哎,它的结构里面你居然能写出来school,那就证明他俩已经是上下级关系了,你能有机会找到这个school标签,能给他加这个ref,就证明你已经在它的负极结构里了,你说是不是这意思?哎,所以说你看人官网说的一点毛病没有,对吧?很准确,子组件注册引用信息,说啥叫注册引用信息啊,老师打个标识回头我能找到你ID的替代者就得了啊。然后被应用在atml标签上时候,获取的是真实道元素,应用在组件标签上啊,获取的是谁组建实例对象啊,打标时你这么打或者这么打得到呢,你这么得到,OK,这就可以了,诶按照我们的惯例,同学这一小节讲完了,那所以说CTRLCCTRLV在这儿给它改个名,这得怎么写零二了,诶然后是。
18:30
下划线src走叫做ref属性,OK是吧,各位好,这一小节我们停。
我来说两句