00:01
哈喽,各位小伙伴们,那接下来啊,咱们要讲一下的微港model的一个深入。那我相信啊,很多小伙伴对于VGA model应该不陌生了,对吧?那咱们呢,也去做一下笔记,就是谁呀,VGA model。那首先说VGA model。它是哎,它是VE框架中。的一个指令。那么它主要是结合表单元素一起使用。那表单元素呢,有很多,比如说文本框可以。对吧,比如说复选框或者是单选按钮都可以。等等吧。那么它主要的作用是什么呀?它主要的。作用是收集表单数据。所以说V-model呢,在工作当中,或者是学习当中,他所扮演的角色呢,是很重要的。
01:03
而且呢,咱们今天讲完VGA model你也得知道它也属于哎组建。通信方式的一种。只不过咱们以前啊,没有接触过而已。但是今天你得知道,微港model它还可以做一件事,就是组建通信方式。那咱们呢,先看一下的VGA model的一个基本使用。那首先说,咱们应该知道V-model可以实现数据的双向绑定。也就是说,组件的详细数据可以流向页面。那用户可以通过一些行为,一些事件再去修改详细的数据,对不达到收集表单数据的功能。那咱们呢,先去看一下的VGA model的一个基本使用,那咱们找一下子应该是model t下的这个model t这个组件。咱们先看一下它的结构。
02:00
那虽然说在这里呢,有一个H2。对不,这不显示了什么深入微model,以及有一个音input和一个死SPASPA显示的是叉叉叉。对吧,这个结构是没有问题的。那老师呢,想先做第一件事儿,比如说用户在这里面输入数据,那右侧这个死单同步的进行展示。那其实这就是属于V-model的基本使用了,对吧,就是表单数据的收集嘛。那咱们呢,可以去做一下。那咱们呢,先来一个小时术语对。那当然你得return回一个啥呀?2e to return一个对象。比如说啊,咱们来个名字叫做MSG,这个咱起个名吧,叫做我爱你塞北的大学。那老师呢,在这里呢,要做一件事了,那就是啥V港model,哎,V港model v谁啊VMSG。那咱们呢,运行一下子也去看一下。
03:01
咱们应该知道,微港model可以实现数据的双向绑定。比如说组件自身的响应式数据,咱们可以看一下是不是可以流向页面。这是没问题的,而且当用户通过一些行为,他可以修改小时数据。这是没问题。那当然说老师,那这个叉叉叉和这个表单元素里面那个文本内容同步,那很简单,那这块就是谁MSP。你看,那这不就是属于VGA model的基本使用吗?收集表单数据。对不?哎,这是没有问题。但是呢,这里呢,到这儿为止,只是V-model的一个基本使用。咱们接下来呢,得深入的去学习一下子v model。那老师呢,在这儿呢,我再给他来一个HR吧,HR来一个水平线。咱们也来一个HR,咱们写一下就是V-model实现的原理啊,当然咱们现在所学的是V2。
04:09
你看老师呢,接下来呢。做一个效果跟上面几乎是一模一样的,但是老师不用微岗model也可以实现,你看老师怎么玩啊,你看咱也是来个音谱。没问题。对不?哎,那你看老师这么玩冒号歪流。那这块要注意这种写法是属于什么,是不是属于数据的单向流动。这是咱们前面所学的嘛,数据的单向流动,这是没问题。那咱们看一下。对吧,那当然用户,当用户通过一些行为,他是没办法修改这个详细数据,因为咱们没有写。对吧,现在冒号Y流它只能实现数据的单向流动。你看接下来老师做这样的一件事,我给他绑定个事件,叫做艾特input事件。
05:04
这个事件呢,可能有很多同学啊,是第一次接触老师呢,在这儿呢,做一下笔记。那首先说,哎,首先。原生的道当中啊,哎,原生的道当中。是有这个叫on input的事件。On input事件。因为咱们学原生盗墓事件的时候就学过那点对吧,Click double click鼠标系列的对吧?还有什么,呃,Focus,但是你要注意还有一个事件,叫做on in put的事件。对不,他呢?经常。结合表单元素一起使用。哎,表单。元素一起使用。它主要作用是什么呢?就是当。呃,当表单元素的文本内容。哎,内容发生。
06:00
变化的时候,那么就会触发一次回调。朱老师,那这和这和那个change事件这不很一样吗?很像吗?但是你要注意change你是不是得从那个文本框,你得向外面,你得点一下,对吧,你得楞一下,他不需。你看那老师呢,其实就是给这个input标签原生的down嘛,绑定了一个原生时间叫on input的时间,老师做一件事什么事。啊,就是当文本发生变化的时候,老师要重新给MSG赋值,赋的值为什么呢?为当前事件对象的这个target的value。那你会发现啊,这个效果跟上面的几乎就一模一样,你看啊,你看现在数据可以单向流动,当用户的行为是不是也可以修改详实数据。那这不就是所谓的数据的商业绑定吗?对吧,那咱为了模拟更像一些,你在这儿可以放一个SPA。
07:01
对不,那这里面也放个谁MSG。所以说在这你看咱可以看一下这效果,这不就是一样的。虽然老师在底下没有,通过微杠model是不是也可以实现?所以咱们得知道一件事,什么事?就是VE2版本当中咱们可以通过谁啊,就是通过value流。与input的事件。实现怎样实现V岗model的功能?对不,所以这件事你得知道。OK吧,好了,这是它。接下来呢,老师呢,想带着你们呢,更加深入的学习。深入学习V-model干什么呢?实现父子组件,哎,父子组件数据同步。那也就所谓的实验上,是不是实现父子组件通信呢?对吧,哎,组件通信就是通过v model。
08:01
你看咱们先做这件事。老师呢,在当前的这个组件当中啊,这是个副组件,Model test当中是不是引入了一个子组件叫cost input,以及也注册了,但老师没有。那这回呢,咱用一下找你CTRLC。那这块老师呢,也给他来一个HR吧。对吧,那咱用一下这个自定义标签。哎,也就是说组建实例。走,那咱们先看一下结构。刷新看一下。那在底下呢,咱们呢,可以看到这个灰了吧唧的这个,那这不就是咱那个叫costum input的事件。它的结构当中吧,老师想给他再加点儿东西,加个什么,加个input。啊,加个input的标签,那咱们这回呢,回手再看一下,这是没问题的。OK吧,一定要注意老师接下来要实现什么?实现父子组件通信,而且要实现父子组件的数据进行同步。OK吧,那你看啊,接下来咱一点点来啊,你看老师做的第一件事儿,你看这。
09:05
冒号买的。Va或者叫冒号。Value。为MSG老师问的第一个问题是什么?就是底下的这个冒号Y流。它到底是什么?到底是什么?你看啊。在顶上这个原声到input标签身上,咱是不是写了一个冒号Y流,这是不是叫数据的单向零动,给咱们的原声到input是不是绑定了一个响式的这样的一个属性。但是你要注意,这是一个组件标签,咱给他写了一个冒号,Y6等于MSG,这是啥?这块一定要注意,哎,这可是prop啊,这可是prop,干什么是父子?而父子组件通信呢?对不对,对吧,这块一定要注意,这可是一个proper,那就说父组件给我子组件是不是传递数据了,那我子组件是不是可以接受,没问题,那咱来呗。
10:08
Prop。那子组件就接收接收谁,那咱是不是叫Y0。你看接下来老师,老师要做一件事,什么事,你看这看这,这个input是不是属于原声道。老师在这儿也给他来一个叫啥Y。为什么为啊为value。但是你要注意这个Y6是。你知道老师要说啥吗?是prop吗?这可不是啊。这是个原生道标签啊,这是给原生道标签是不是绑定了一个详是属性,叫做Y流值,是不是父亲传过来这个Y流。对吧,咱们可以看一下,这是没问题。对不对。对吧,接下来来咱们再看。回到父组件这啊,你看老师在子组件这又来一个叫I input。那你要注意啊,老师要问的是at input。
11:02
到底是什么?到底是什么?是什么?那一定要注意啊,底下这个I input,它不是并非。哎,并非原生do的音,Input的事件。对,不,因为你发现它明显绑定的不是原生到标签身上,而是一个组件标签身上。那这属于什么?是不是属于叫做自定义事件?这能懂不?这能懂吧?老师想做一件事,当子组件触发自定义事件的时候,我要修改父组件当中这个MSG为什么为自定义事件传过来这个参数even。但是你要注意,子组件并没有触发这个自定义事件,那什么时候触发呢?很简单,就是当用户在子组件内部的这个音谱当中输入内容内容的时候,我会触发自定义事件。
12:01
只不过这个自定义事件叫什么?叫做input事件?那咱们回到子组件这里有人在这儿。老师要给他绑定一个事件叫at input,那你要注意这个input是什么时间。这个老师让你们去缓一下的。这块呢,一定要注意艾音这个at音这块一定要注意老师写一下子。就是这个冒号Y有质啥,这是这是动态的属性。对不?而你这个I的input是啥?I的input是不是应该是?呃,给原声道。原声道。绑定原生的是不是盗墓时间?对不?这块一定要看懂,那就说当用户触发了音步的事件,我要做一件事,什么事。刀一面。对不?你要触发哪个事件?很简单,是不是自行事件,是不是叫input?你传什么?我要传的是Dollar第。
13:05
Target点。那这个不就是你当前这个表单元素那个Y值吗。对不,那咱们可以看一下子走,可以看一下来看一下。是不是可以实现父子组件数据同步?你看啊,这是父组件,因为父组件身上是不是才有这个MSG,是不是可以实现父子总监数据同步。对不对。这没问题吧?啊,这块一定一定要注意,而你这种写法是可以简单简化去写的。你看这个老师给你写啊,就是这种写法,你可以简化去写。怎么写呢?直接变成谁为高帽的?对不,V-model v谁MSD,你看效果是一样的。可以实现父子组件数据同步,你看一下是一样的。对不?对不对,对吧,咱们可以看下负组件这个数据是是是一模一样。
14:05
所以说从今天开始,你得知道一件事,什么事,微港model啊,咱们以前是不是经常在表单元素使用,是不是使用,但你要注意在非表单元素当中可不可以使用,可以,但你得注意实现的原理是啥。对吧,他可以干什么?这件事儿你得知道,因为咱们在后台管理系统项目当中,经常在非表单元素身上,或者在一些呃,人家已经封装好的组件身上,经常写味道model。你得知道是怎么回事儿。对不?所以这块呢,一定要注意一件事,什么事,We model。它的实现的原理,哎,原理是什么?是通过Y流与音谱的时间。哎,音铺的事件实现。对不,而且还需要注意,还需要注意。可以。通过V-model实现父子组件数据的同步。
15:02
什么叫同步?父亲是啥?我是啥?对不,所以你自己看一下吧,对不对。这是子组件的区域啊,这是不是父组件,你看嘛,是不是可以实现父子组件数据同步。所以说这件事儿你得学会了。
我来说两句