00:00
大家好,我是学习地的特约讲师高若,上节课我们学习了赛二的方法,那赛二方法呢,是VIEW3种专门新增的方法,因为在WILL3种我们新增了组合API,也就是这个conversation API,那comp conversation API的入口那就是setup,那我们学习setup,要知道它的调用时机,因为啊,什么时候它自动调用的,它跟生命周期不一样,在所有生命周期之前,那也就是在创建实力之前调用的,所以呢,里边没有Z,这咱们说了,然后函数参数有两个,一个purpose,一个上下文contextest。有这两个参数,咱们简单用一下,然后还有返回值,返回值呢也是比较重要的,那这节课我们接着看,那既然学学习了使用塞塔的方法是入口文件,那我们就要知道咱们学习的所有他给我们提供的组合式,给我们提供的这个API都要写在这个入口里面,那这节课呢,我们就来学习一下。嗯,Conversation常用的API有哪些?当然这里面列的也不全啊,那但是这些呢是常用的,来我们把例子新做在我们的一个新的一个菜单里面,也就用路由我们新做一个菜单,那我们这里边再做一个,呃,上节课咱们做的叫菜单,那这里边我们就常有一天新建一个。
01:10
啊,VE组件我们叫做C啊。喜欢说法。Com常用的API我们就这个啊,但是命名是比较随意的,只要知道就行,然后这里边儿我们,嗯,这里边写常用API。常用API的应用最好把它放到呃he里面。一里边。放在这,当然你需要样式的话,你可以在这写啊,你比如咱不需要呢,我就不在这写了,所有的最好来一个根的元素,这样的话我们写起来会比较方便。好放在这里边,然后呢,我们需要在路由里边,我们添加一个路由。这块复制一个。粘贴一下。这个我们换下行,然后我们叫,嗯,跟这个一样名吧,Com API这块我们改成。
02:01
Comma API,然后我们把这块导入改成com API就可以了。然后呢,我们需要在菜单里面加入,在菜单里面加入那。在我们的APP这个里面,正好我们再加一个。这块写上。常用API逗号写上,改成to,把路径改成commapi,保存一下。我们把这个也拿过来看,熟心放在这块,让它有一个呃,分割线长尾片,我们点击长尾片,这里边就有长尾片,当然下边的警告是我们那个全属性带来的这个,呃,没有关系啊。韩伟间。那我们现在在这里边看一下,我们说所有的入口这里边太多了,我们先把这些都其他用不上的,我们就把它关掉吧。啊,关掉所有在里边,那我们现在只修改这个常用API,在这里边去修改,那只在这里边写就行了,所以呢,我们这里边需要一个set up,一个入口文件,把所有的API都放在这里边,放在这里边,那这里边除了通过API,当然是帮我们解决一些逻辑的问题,在这里边咱们说了不用有那些像will有的条条框框的限制,对吧,比如说数据不用生命在date里啊,对吧,不用处理那些,所以这里边可以随意的生命变量,比如说nu等于一,然后呢,可以随意的声明方法,比如light啊F。
03:27
卖随便的一个方法在里边,咱们看一下。嗯,直接等于咱们直接一个箭头方法吧。一个箭头函数在这里边,比如说我这里边打印一下Nu.LG打印这个。那如果我这些方法想在我们的模板里边去应用,想在模板里应用,但是现在咱们还没用上任何的一个API,只是一个入口,但说这里边儿你看原生的变量对吧,原生的方法你都可以在这里边声明。都可以在这证明对吧,是没有关系的,那如果咱们说了setup有四种,咱们应用调用时机对吧,然后呢,这次指向参数,咱这里边先用参数,还有一个就是返回值,如果我们在这里边写的变量,因为不是我们在date里边写的这样的变量。
04:12
返回值对吧,不是在这里面写的,直接在setup里面写的。对吧?在这写变量,如果我想要这个变面中使用,也就在模板中使用,那我们必须把它返回,方法使用的时候我们需要返回,变量使用的时候我们也需要返回,当然这种的是原生的变量,对吧?原生变量那我们返回,当然呢,得返回多个,返回n nu一个对吧,返回呃,My fun。这个方法,那返回这个方法之后,我们才能够在这个上面去使用,比如说。这圆生子。呃,谁呢?差值叫做nu。这个然后我们换一下行保存一下,你看这块原生的是不是这个值是一就给我们拿过来了,对不对,然后我们还可以调用方法。
05:02
调用方法,那调用方法我们也用差值,或者是你绑定的地方也都可以调用my fun,但不需要三参数,那我们就不存调用,保存一下。你看这块现在直接是把这个原生的这个方法,所有的方法就给我们返回来了,对不对,我们并没有说直接掉到。这个方法看到了吧。因为我们现在就是把这个给他一个变量,对吧,变量的类型是不是有一个方法类型,所以是这样,所以我们在这块想调用方法的时候,对吧?因为我们不是在事件里边调用的时候,直接调用的时候,你必须得加什么,加括号调用,调用的时候你看下边这块是不是打印个一对吧,这是调用,不然的话它让变量去给我访问,那这就说明什么一个问题,就是这是原生的,我们只要在模板里边用,不管用变量也好,还是用方法也好,那我们必须return回去,这点大家要清楚,这是return的,在他return的作用。那另外原生的这个数据我们不是响应式的,是做不了响应式的,比如说我们在调用这个方法的时候,调用这个方法的时候,你看啊,我把这个数据的值给改掉,你比如说nu的值加加定一下。
06:07
你看变成二了,但是呢,我调这个值之后,上面的值改变了吗?没有改变,但下面打印的时候这个值变了对不对,所以呢,原生的方法的时候是。原生的变量是没有显应式的,那如果我们想让这个变量是响应式的,那我们就需要干嘛呀,我们就需要引入什么Co API里边的方法,那有一个什么方法呢?在这里边如果我想声明一个变量是响应式的一个数据,那我们就需要把这个数据ref。过起来也就是我们这里边儿。得if函数用来给定的值创建一个响应式的数据对象,对吧,它返回值是一个对象,那也就是我们在这块你看。呃,我这个我不在这个数据里边改啊,我在这数据里面这样的话,因为我把原生值给你留着,比如说let声明一个NU21个变量等于ref括号,这里边我生明一个二,证明个二,当然我这个变量如果页面上想用,我是不是在这块的nu在都在后边新加的就在后边写NU2是不是得返回去才可以啊返回去那这个现在能不能用呢?如果我们现在用的话,肯定是出错了,你看这边一访问出错的,为什么?因为我们所有用到。
07:18
这个嗯,组合式API,因为API就是一个方法嘛,对不对,用到组合式API就当学的API setup里边用到的,咱们马上要新学的API的时候,我们一定要在什么import我们要引入,从哪里引入呢?From从VE,记住这个V是小写的。因为系统里边给我们提供的vuee这个就是小写的,在哪能看不出为小写的,比如说主入口文件,你看这就是引入的时候,引入vuee里边这个方法是不是就是小写的对不对?所以我们在这里边应用的时候,应用这里边任何方法的时候,都是在vuee里边的,这原来的这里边也是在vuee里边,对吧?那我们新加的组合APIV3里面,我新加的里边的所有的API也都在这里边,那你叫ref,那我们就叫ref就行了。
08:00
那里边可以有多个,这这这里边是金森格式引入的,把它解构出来,直接这样的一个方法,这样的话我们再刷新一下,你看就没有错了,对吧,那没有错了,这个ref是不是响应式子呢?是不是响应式的呢?那我们就看一下这块我们嗯这块ref的变量,那我们用差值NU2。问一下,你看这个值是二对不对,那现在是不是响应式的,那我们就看更改一下。那我们先在这里边,我们先做一个方法,先做一个方法。啊,在它下边我们新做一个方法什么呢?我们叫做呃,MMYMU2这样的方法,然后呢,我做这个方法了,是不是这个方法我就得在return里边把它返回去这个方法对不对,那my fun2。把它返回去,然后页面上是不是就可以调用了,对吧,就可以调用了。这块关引号,那调用的时候它也不打印值,那我就相当于偷偷调用对不对,页面反是不会显示,我就改变这个值,那这里边写上my fun2就会调用到什么,调用到这个方法,当然了,别忘了加什么,别忘了加括号对不对,那括号里边比如说我加个加个55对吧,我想传个参数改这个值,所以在这里边我们需要接收一个参数,一个N,那新的值vae vae。
09:21
新的va新的值对吧?把这新的值传到这里边来,那这里边我们想怎么处理呢?是不是就把nu我们先打印一下这个啊,你先打一下看一下这个值,那原来我们付给的是一个数字对不对,那这个数呢是整数,就是数字类型,那现在我付给这个的时候,它不是数字类型了,我们nu2.rog,你看点答一下。你看到了吧,给我们打印的是这些东西,对吧,它是一个对象类型,有一个唯一的一个属性,就是这个reading这个,所以呢,它是一个对象类型,你可以用type of那些东西看一下它的类型啊,它是一个对象类型,所以呢,如果想引用在这个里面,如果在上面引用的话,直接用就可以了,直接用就可以了,在模板里边。
10:04
他会直接找到它的响应式的数据,那如果在程序里边,在这里边如果想用if里边修改它的值,或者读取它的值,比如说我读取它的值,那使用什么,只用啊log点,那就得NU2,它是一个对象,里边有一个唯一的属性,就是V0。看这样,那我们打印一下,你看这个打印的是不是就是二就能给我们打印出来了,对吧,当然这块我们先22吧,给你看一下,不然跟原来那个重复。去掉再重新刷新一对,你看22这个二是上面这个打印的,22呢,就是这个打印对不对,那可以通过这个V流去获取值,所有在程序里边,记得在模板中应用的时候,在模板中应用的时候直接使用。直接使用它就是响应式的,对吧,那如果在这个地方用。在我们程序里边去使用,那我们就得用上什么V6来使用,那如果附上新值NU2点,V6也得这样去赋值,等于ne w v rue,是不是用我们传进来的新值,那传进来的新值是不是这块传的是55,那这样的话我们就可以把它的值改掉。
11:08
你看改成55了,那这个值是不是也变了,变成小式的了,所以。这个API的作用就是将我们声明的值变成什么,变成响应的数据,那原来的数据呢,是什么?是原生的数据,如果不用它声明是原生数据能用,但是它不是响应式的,而如果你需要响应式的,那咱们用VE声明式的,一定要用响应式的,所以呢,这样的。变量只用于你在程序里边直接使用对吧,而不用于响应式数据,如果有响应数据用它,那它什么类型都可以声明,但是呢,它能不能声明对象呢?因为它本身就是对象人为流值对不对?声明数组什么都可以,但是如果是对象类型,比如说声明字符串啊什么的都都行啊,如果是对象类型,我们需要引用另外一个比较常用的,因为这里一个一个声明。另外一个什么变量呢?比如说我们如果想声明对象类型的,那我们用比如说obj这个对象啊,比如说我们叫一个用户吧,User,一个对象数据,我们用re用这个API,然后里边是对象类型,我们传什么对象类型都可以,你比如说。
12:18
那我们在这块当然了,我们用了一个这个A,我们就需要干嘛,我们就需要把这个API一定得从vuee里边拿出来,对不对,不然的话,这个页面没有这个API,因为它只是一个组件,对不对,所以呢,必须得引入这个re,通过它引入这个API,那么我们现在才能用,那这里边就可以声明任何对象了,比如说名字对吧是。假装MK。意外对吧,然后年龄。是,嗯,28岁,然后性别,比如说呃,男,那就随便写一个男,对吧,这样,那如果我想要这个对象,想要这个对象在我们页面里边使用的时候,当然了通过它声明的对象,不是我们直接声明对象,通过它声明对象也具带具有响应式的,记着对象用它声明,除了对象其他的类型你可以怎么的,你可以用它来声明,这是两种形式,它我们提供两个API,可以将我们声明的数据变成响应式的,那这种声明呢,就变成响应式的了,那我们可以干嘛呀。
13:22
我们可以在这里边。可以在这里边返回去这个user对吧,返回user是一个对象,那我们在程序里边就可以使用这个user对吧,对象,然后我们这换一行,那之后加上是re对吧中的对象,工作对象,那现在假如说我想访问这里边的,如果我直接写userr,那么直接反应的就是user对象,你看就是user对象内容,如果我想用里边的值,比如说user里边的内容或者是对吧。呃,User里边的,User里边的年龄,那我直接这样打印就可了。M28对吧,通过它。
14:01
他中的对象不是对应吗?他中的对象是这样的形式去用的。你看因为他返回的是对象嘛,对吧,返回对象。那有的说,那这个对象能不能转换成其他的,不用对象,我直接访问name和age年龄,这种可不可以呢?也可以怎么可以呢?那我们可以干嘛呀?我们可以用另外一个API,用另外一个API,什么API呢?你比如说。我们这里边儿啊。用上假如说。这是一个对象,我们把对象展开,一个一个返回就可以了,你比如说我们不返回user,我们返回什么呢?我们返回user里边的name。返回优势里面。对吧,然后我们返回user里边的H,你看我们返回这两个。那我们在用的时候就可以直接在这块。正好。呃,我把它注释一下。注释一下啊,然后我在下边儿,你看如果我这么返回,那我就可以直接用什么name,然后这块我直接用age。
15:09
我这块啊,user.name。User点你看。嗯,这样的话还不行。这样的还不行,你看啊,虽然我这边是user,但是它是这个里边的,看到了吧,这样的话还直接呃,不让我使用。你看为什么不让我使用呢?因为我们在这里边用的时候,它不能变量和值是一个,其实它原型是这样的user.name然后这样的它有键和值对不对,那我们现在就把它当成什么,当成值见如果得这么写对不对才可以。不能不能反过来写,你看啊,这样去帮我完成,你看这样L们K28也是可以的,但是呢,如果我们这样导入,一是我们导入的是非常的多,对吧,导入的是非常的多,另外呢,这种导入的方式呢,它没有响应式的,那我们用有没有简便的方法呢?有,我想把它都导出去,我们有一个方法是什么?前面咱们讲ES6的时候讲过,点点点展开运算符user,就相当于我把user展开了,这里边展开了放到这里边来,也就是这里边反问不也是对象吗?对不对,就相当于把这里边对象三个值放到这里边了,所以也是一样的。
16:17
你看。也是一样的,阿开28相当于把它展开了,但是呢,我们如果直接就这么去展开,这个数据就不是响应式的了,数据就不是响应式的了,那我们先不展开一下,我们先验证一下这个数据在里边是不是响应式的啊,是不是响应式的,你看我们先不展开,一会再给你展开,那是不是响应式的,那我们看一下怎么做啊,嗯,你可以通过一个设置方法,这里边儿我再给你用一个,呃,双向绑定吧,双向绑定。方向绑定,我把这个先去掉啊。然后把这个打开。你看因为现在咱是对象里边的属性方式吧,对不对,保存一下。这个。啊。这个打开了user name user这个我这里边是不是没把user给返回,对不对,咱们又恢复原来的程序了,把user返回。
17:07
这号你写逗号啊,有所返回还是这个对不对,那做强势的咱们怎么能看强势的呢?那我们不管是用re EF API给我们返回的数据,还是用对象里的成员给我们返回数据,我们都可以用微干model做显示的,那比如说我在这块加上。嗯,加上一个什么了,嗯,表单吧,Input,因为那个双向绑定,双向绑定都使用的是input,对不对,Test,那这里边V杠,Model modl,我这里边绑定一个,如果你是绑定if的变量,比如说nu,对吧,这样是可以的。你看我们刷新一下。然上边我加一个括行,括行这个是,嗯,这边写上是NU1,这个一,咱们前面是详式的对不对,你看这里边写上三。嗯,NU1,我们看一下NU1在哪块。
18:01
N nu没有样,NU2双线保定NU2,我们这块声明的if是NU2,对不对,是这块的,所以不是一样,这个没变化,二这块我们改成NU2。对,你看风向绑定的,那我们这块它现在里边只默认就是55了,对不对,那这块。诶,这个值不要我们输入,你看五十五五十五啊,因为我们改完之后,这里边儿就要一个设置的这个方法啊,我把这个这个去掉。不知道新绑定。你看上面是不是可以变化,那对象里的也可以双向绑定,对象也可以双向绑定,那我们在下边,比如说对象里边user里边的name,然后input里边我们we杠,Mo model绑定user里边的name user.name然后换个行。我们再绑定一下user里边的年龄。Agag,然后我们这块user里边的。
19:04
啊,AGE,这是双向绑定,咱们前面学过v model,你看把原来的值拿过来了,对不对,现在上面28和这个也拿过来了,Our monkey,你比如说there。磁块点com,那上面这个值是不是就变化了,然后28对吧,也也这0000999,你看上面也跟着变化,因为双向绑定了,如果是显示数据双向绑定,你这里变化上面就变化了,咱不用每一个都写方法,用这种双向绑定的方式,建议看到这个变化了那。现在如果我现在在解构一个这个值,我现在就留着你看啊,我在解构一下,怎么解构呢?我把这个前面加上点点点。这样的话,我们就相当于把这里边儿的内容全部对吧,展开到这里边。那到这里边,现在我们在使用的时候,就不用什么,就不用用点了,直接用name就可以了,直接用name就可以了,这里边儿直接用name。这里边直接用name,你看保存一下什么效果呢。
20:03
啊,直接用name age。诶,这里边。出错是在?内幕属性没有定义。哎,这有那吗。这有内幕,然后把它完全展开。Model,那这个双向绑定是它应该是不是因为它这么变成不是响应式的了,所以改变不了。这款啊。我把它这个注掉,然后把这个打开。这样的话,这个程序我看一下啊。可以了,你看那。现在22这块,那我想应的数据是放在哪儿,是放这块的,这块现在怎么大,是不是就没有想式变化,那没有想着变化怎么办呢?那我们再引入一个新的API。怎么办?这种直接结构不行,那我们怎么解构呢?我们在这个里边用到一个叫to refs这样的一个方法,把这个user结构。
21:04
你看加了一个这个方法,结构就解构的时候,意思是我要你留你保留你想式的数据去结构,相当于是这样的一个一个转换,那引入了这个API,那我们就必须在上边怎么着把这个API是不是得导入啊不res。这样你看同样是这样的,现在我再改MK111,这样变化了吧,二十八零零零零零零是不是也变化了就可以了,所以呢,这是。呃,通过他就可以把我们对象里的成员。拆成单独的一个变量,相当于在我们页面中使用。才能变量使用,那用到的就是这种API。这种一天帮我们数据录出来啊。形式的,那其实呢,还有几个细节的一个用法,几个细节用法,比如说。那我们通过它可以像这些是像这样声明的是原始数据对不对,那if声明的这种呢,是响应式数据,然后我们用relative声明的也是响应式数据,那然后这种呢,还可以把它展开对不对,那我们能不能将这个。
22:07
详细数据再转回什么原始数据呢?那如果再转回原始数据,说实话用法不多,但是我们可以做到怎么转回原始数据,再说几个细节,因为咱们现在在尽量学这些API嘛,对吧,所以呢,就直接在这个立上做了。你比如说再转回原数据,怎么转呢?只用read only only将我们这个user。附上比如说我们的let。嗯,User这样。或者是一个新的一个变量都行,就是两个变量,那个重明了话,比如说USER2,这样的话,我们就将这种响应式的数据,包括iff的,通过这种方式就能够帮我们这个把我们这个user变成什么,变成不是响式原生数据了,数据就不能变了,用法不多,所以这里边我也不给你试了,那你和不用这个与太声明是一个意思对不对,这个用法不多,但是我们要用read only一样,也得需要在这块等着。
23:05
给我们转过来,Redo值也得引入进来,也就用一个API引入一个。这些几个是比较常用的。当然有的时候我们在使用ref的时候,我们是不是需要用到什么,需要用到点微流值去改变,对不对,那我再给你看一个一个方式,什么方式呢。你看N2这个,我们可以把它里边的值对吧,放入到结合到这个里面去,比如说nu不是结合到这里啊,结合到这个里边。你比如说在这里边,我们用nu。假如你年龄吧,你看啊,我这边NU2。这样的话就可以把什么,就可以把我们的普通的变量引入到这里边,那if在这里边生命的变量,那我们现在在改变AM2的时候,你看在这块啊,现在看那个好不好使,你看上面还是这个N2还是可以用的,对不对,那我们在程序里边修改的时候,在程序里边修改的时候,比如说我在这里修改。
24:06
原来用N2的时候,是不是得用微流值啊,对不对,如果把N放二放在这里边了,就不用微流值了,就不用微流值了。直接在这里边儿你看。可以这样去做。直接user里边的,其实一个意思嘛,对吧,User里边age对吧,因为呃。这样吧,这个A我们看留着28。28留着,那我们这块直接NU2,你看相当于A2A2对不对,这样的话,我们直接A2是不是就把这个放进来了,对吧,那在这里边咱用这个N2的时候,那我们直接调用user里边的NU2,如果把这个。用if声明的这个接口声明的这个API声明的放到这里边去,我们就不用维度值了,那就把维度值相当于给我们转换了,直接比如说加加就可以了。直接加价减减直接都没用,不用维度值去使用,对吧,或者是直接赋值等于比如说1000。
25:04
这样可以吗?也是响应式的,但是你可以具体去去试一下啊,但这方法我没有没有调用,所以呢,你看不出这样的一个使用的一个方式,如果你调用一下你就知道了,对吧,也是应式的,就不用被录制,但是没有那必要对吧,那你这种放进来,你和直接在这里边声明一个新的变量有什么区别啊,那如果有结合使用的时候,你就可以结合使用。那我们还有一个也是不太常用的啊,就是什么,就是引入一下is,什么ref,就是判断什么呢?判断用它声明的这个变量是不是什么,是不是对象。是对象的话,我们用点位度值不是对象的,就是原生的对不对,判断N是不是用它生明的,那也就是这里边,比如说我来声明一个NU3,那你可以等于什么用通过呃这个判断A。Ref判断谁呢?判断NU2,它是不是对象,如果是对象的话,那我们可以让nu。
26:03
对吧?问号NU2,嗯,点如果是对象的话,就得用V6对不对,我们附上一个心值等于比如说44对吧,否则的话,那我们就直接给NU2。比如说NU2,呃,我们附上一个,呃,55吧。是这样就可以了,也就是判断它是原生的还是响应式的对吧?是响应式的它就是对象,不是响应式的就不是对象,对不对?是对象我们怎么做,不是对象我们怎么做。这里面只是举例子,用的也不多。一般的我们如果用数据的话,咱说了原生的只在这里边写程序的时候要用来调用去使用,对不对,如果想在模板里面使用,我们要么用这种声明,对吧,对象用这个API声明,让它变成强势的。好。嗯,有点乱啊,大家再总结总结,那咱们这里边长哪边一共学过了这么多,这里边最后两个是不常用的,你可以不去记,根本嗯不太用得到,那常用的就是什么,就是它总结一下说明什么,这个API用来将呃字符串布尔形,整形,整八勾形这样的非对象的类型。
27:12
把它转成形式的数据,当然vega model的双向绑定都是一样的,对吧,然后用它上面的数据,如果在setup里边,就程序里边操作的时候一定要点V流去设置值和点V流取值,因为它是一个对象了。那在模板里面应用的时候呢,是直接用这个,不用点维度直接用就行了,用呃来用它声明的主要是声明对象的声明对象的响应式数据,那用这个是把它声明的这个对象解构返回出去,这样的话我们就不用对象点去访问了,在模板里边直接使用对象中的成员这种方式访问就可以了。Read only就是把什么响应式的数据给我们,再转回原型的数据,原生的数据不响应式的,那这个呢,是判断if对吧,是原生的还是什么,还是用它处理过的响应的数据。
28:02
判断它是不是用它处理过的AK处理过的一个变量。就是这些常用的API。大家可以做个实验,然后咱们再结合程序用就行了,这里边儿重点一定要记住的,前三个一定要知道是干嘛的,那后边咱们写程序我都会用到,一直用这个前三个对吧?当然这两个作用几乎是差不多的,用的最多的就是这个,一般我们都放到对象里边去,对吧,然后再解构出去。在那种展开结构处去返回,对吧。因为我们大数据都是对象的形式。
我来说两句