00:00
好嘞,各位,那从这小节开始呢,我们一起去学一下view里的这个时间处理很重要的一个基础点啊,因为大家想想,就咱平时写完的这网页,基本上都得跟用户产生一个交互,你说对吧?啊,你比如说我点了按钮它怎么样了,我按下回车它怎么样了?这儿呢,咱就不墨迹了啊,回到课件当中,点击1.6时间处理,我们会做很多的小效果啊,因为事件处理这个里面相关的知识呢,是比较杂的啊,慢慢来,先做两个简单的效果,回到代码当中,打开准备好的文件,我呢先写一个欢迎词啊,写个HR叫做欢迎来到上硅谷学习,然后我想让上硅谷三个字啊,是动态的,那我就得这么写是不,随后就得准备一个view实例,上硅谷好,右键打开瞧一下效果啊。OK,没问题,控制台呢,也开好刷新,接下来啊,我提出一个需求,就是在这儿要有一个按钮。按钮的名字叫做点我提示信息,你点了这个按钮之后啊,它就会弹窗,弹窗的内容是同学你好四个字,好,回到这儿开始写,准备好这个按钮名字呢,叫做点我提示信息,接下来我就得给这个按钮绑定一个点击事件对不?各位好,在view当中要给一个元素绑定事件,你得用到一个指令,同学你看我都说是指令了,你应该有所反馈,一定是V杠开头的,对不?哎,叫什么名呢?V-on冒号click,同学说说这是什么意思啊?V-on好理解,是当什么什么时候,那当这个元素什么时候呀?诶,Click很明显是事件名,当这个元素被点击的时候,那点击的时候干嘛呀?你帮我去执行一个回调函数,那回调函数叫什么名呢?你得告诉我,对吧?给它起个名字叫做show info。这段代码的含义就是。
01:51
当你点击这个button元素的时候,它就去帮你找名为受音否的函数去调用,哎,就这意思,那问题是你写这函数了吗?没有,哎,那写一下吧,好,一个最简单的方式啊,你可能会想到老师,我定义一个不就得了吗?在这我alert不就可以了吗?哎,写上同学你好,这不就搞定了吗?那你回头看看它是什么效果,走报错同学读一下,他说有一个属性或者是一个方法叫做受音否,没有定义。
02:23
有一种感觉,他好像并不能看得到你粉色框写的这个收银否,这是为什么呢?说说啊,红色框里的各位是view u的模板,绿色框那叫啥来着?View实例同学,红色框里面只能用view实例所提供的东西,而不能直接用到粉色框里的这些,所以说你得把粉色框塞到绿色框的实例里面去才可以,好,那不是直接塞的,你得用一个配置项把事件的回调给它配置进去,那这个配置项叫什么名字呢?来把它记住,Method思同学,Method是不是有方法的意思,那它的复数形式什么意思呀?就是在粉色框的这个位置可以配置很多事件的回调啊,你比如说受音否呢,就算作一个把它剪切走空行删掉,往里边一放就可以了,缩进调一下,当然形式你得改对不对?受音否,这function是不是就不用了呀?对象里面配方法吗?直接写方法名,小括号划括号是不是就可以了?好,这回回头你再看一下效果,各位刷新来点。
03:23
有效果吧,好了,确定这就是一个最简单的事件绑定,那这里边呢,还有一些其他的问题值得我们去聊一聊,首先第一个问题,同学,这受音否呀,能不能接收到参数,我们试试啊,我拿几个变量接abcd,然后在这儿呢,我先不让它弹窗,哎,我先做一个conslo输出ABC,还有这个D,好回到这刷新点击同学你发现啊。BCD后三个是不是都是安de find,那么发现A是不是有值,你仔细观察一下,他写了一个东西叫做most event啥意思呀?诶,就是那个事件对象,这个东西大家应该都熟悉吧,原声里面是不是也有,你点了一个按钮,然后人帮你调那函数默认是不是给你传了一个东西叫做事件对象啊,哎,叫event,还记得他身上都有啥吗?各位啊,比如说跟大家说说啊,Event身上有这么一个属性,咱们经常用叫做target拿到啥?
04:19
拿到发生事件的那个事件目标,说白了就是拿到这按钮是不?你看一下我一点按钮是不是出来了,那你拿到这个元素了,你可以做很多的事儿,你比如说拿到元素里边的那个文字in test是不是可以回到这儿,只要我一点,那就是A点,我提示信息是不好啊,再聊另外一个问题,就是这个受音符里的list呀,他是谁输出一下啊,看看this它是谁呢?刷新走。舒老师,这是谁呢?那你看看呀,这不就是有实例那个VM吗?说老师你怎么验证啊,可以验证,回到代码里,我可以先把这个VM给他收到,随后在这我输出这么一个东西是不是就可以了呀,回到这。
05:00
一点为真吧,哎,好同学,那把这些东西呢,给它删掉,在这呢注掉,后边呢,给它写一个注释,叫做此处的list是VM,以后咱就不那么多废话了,一说VM谁都懂啥东西啊,唯有实例对象好。啊说老师那就定死了呗,这个里边的Z就肯定是VM呗,诶也不是,同学,如果你把受音否给它写成这种形式,我告诉你啊,那可就危险了,同学,受音否是不是一个方法是,但是它是不是用箭头函数所定义的呀?那这个时候你瞧瞧这个this它是谁啊,各位刷新走谁window说老师这是为什么呀?那咱说说啊各位,当你去点击这个按钮的时候呀,View又发现,哎哟,我得帮你去执行这个受音否,于是乎呢,他就来到这儿去调用这个受音否,并且帮你传了一个event。如果你还写成了一个箭头函数,那各位它就没有自己的this了,它就往外找了,一找就找到了全局的那个window是吧?所以说同学我们有一个原则,就是像受音F否这种函数,它是不是接受了view的管理,说老师啥叫接受了view的管理啊?你看大兄弟,你是不是把受音否写在了人家new view的时候,作为一个配置项传进去了,那这就是属于view所管理的函数。所以说这里边有一个小小的原则,就是所有被管理的函数最好都写成什么呀?普通函数不要写成什么呢?箭头函数老师我写了能咋的也不会报错,你写了的后果就是那个this就再也不是VM了。
06:35
同学说老师不是就不试呗,我感觉window也挺好的,目前感觉还不错,以后可能就会出问题,OK,哎,在这儿呢,给它注掉,所以说这块呢,给它改成正常的这个啊,不用记笔记啊,我在上方呢,其实已经都整理好了这个笔记,一会儿我们一起去看啊好舒老师呢,这就绑定完了呗,这回一解开功能就实现了,嗯,但是啊,还有一个简写方式你没学到,好同学看着啊,就是这行代码我复制一下。
07:01
你不要觉得说老师是冒号,可丽可不可能?冒号直接写是谁的简写形式啊,V杠半的对不?哎,那说说它是怎么简写,看着啊各位,我直接写一艾符就可以了,V-on冒号全都省略,然后直接写艾福click,瞧效果啊,在这刷新走行不行?诶也是可以的,好吧,哎,说老师那以后是不是用这个用的多呀,那肯定是好来,那再来一个,这叫做点我提示信息一,那我给他改个名字叫做受音否一,这也叫做受音否一,可以吧,这会儿再来一个叫做点我提示信息二,这个呢,叫做受音否二,接下来我提出一个更高级的需求,就是在点击这个信息二的时候。确实得呀,调这个兽音O2,但是我想让他给这个兽音O2啊,传一个数字进去,比如说传一个66进去。啊,你考虑考虑怎么做,我先写着代码啊,把这一堆呢给它复制一份,别忘了这写一个小逗号,好折叠起来,这个看完了啊这块呢也叫做受音否,但是只不过它叫做二,跟这个是对应的是吧,点击这个按钮就叫它,它呢就在这儿,那为了做一个区分呢,我在这这么写,这叫做同学你好一,这叫做同学你好二,嗯,哎呀,这么写这么写有点歧异哈,各位同学你好二啊这这不能这么写啊,那这么写啊叫做同学你好一个感叹号,那这呢就让它是两个感叹号好吧,哎,行,给它折叠起来啊,这不小心这侮辱人了是吧?哎,好,回来看一下效果啊,现在信息一肯定没毛病,那信息二呢肯定也可以是吧?哎,两个感叹号同学完成我刚才所说的那需求,就是调这个受音FOR2的时候,我不仅仅要收到event,我还要收到一个数值,比如说是66。
08:42
说老师你这需求可挺奇葩,一点也不奇葩各位,页面上有一个学生信息后边有一个按钮叫删除,那你点击删除的时候,各位你是不是得把这个学生的ID给人家传进来啊,这个需求太正常了,也就是说事件的回调要接收点其他程序员想传的参数,那太正常了,这个需求那怎么办?
09:02
它的写法是这样,在受音符二后边啊,你直接写小括号,哎,然后里边你就写吧,你想什么东西,就跟你调函数是一样,写法66传进去了吧,舒老师呢,这回这就能收到了,对,看着啊,Number我就能收到试试吧,那把这呢,再给他来一个输出colo输出谁呢?这个number,那你瞧一下效果啊,回到页面刷新。点击提示信息二,诶66是不是收到了,哎同学你看能不能传参数,能,但是这里啊同学就得有一个需要你扭转的地方,你看这啊各位,我第一个回调指定我是不是没加小括号,但是我指定第二个回调的时候,我是不是诶加了这个小括号啊,所以说各位啊,你一定要知道,就是这个小括号加也行,他不加也行,那什么时候我不加呢?你不想传参你就不加呗,老师,那我想传参传参那你就加呗。是吧?哎,那这个点我提示信息二的意思,其实就是当你去点了这个按钮,然后呢,他帮你去执行这些东西,那一执行那66那不就传进去了吗?是吧?但是这样做呀,同学有一个bug就出现了,你把谁搞丢了呢?Even搞丢了,你再也不能用43行这东西了,Even点他给他点in the test对不。
10:16
舒老师,没准那even就在后边待着呢,我再拿ABC我去接一下呗,行,你试试啊,Number输出的同时再来这几个C,好瞧效果啊,刷新走有吗?没有说老师,那这怎么办呀?哎,View也想到这儿了,那不能说你一传参就把给搞丢了呀,是这么设计的,你可以在这个位置写个逗号,用Dollar符event占个位,同学,这就是属于关键词了啊,人家去解析这段东西的时候,会扫到这个Dollar符event,然后呢,就把event给你传进来了,那也就是说你这边的A呀,其实就已经是谁了,那个event,不信你瞧。走,你看66是不是鼠标时间,哎,所以说同学这样的话会更灵活是吧,老师,那我想把它放在前边可以呀,那我就放在这儿,好写一逗号,那我后边传66行啊,那这样的话就是你前边其实就是谁了event,你后边其实收到的是谁呀,Number,也就是说你这写的顺序就是这儿所收到的这个顺序啊好,那我输出event的同时在输出number,那这A呢,我就删掉好了,各位你瞧效果走event没丢,你想传的东西是不是也进来了呀?哎,OK,这就是如何传参,我把这alert呢正常写,然后我把这个呢也给它不住掉了,留在这儿吧,好吧,好折叠起来,然后在这呢写一个括号啊,叫做不传参。
11:37
哎,在这写一个叫做传参,但这里边儿有一个细节上的问题,同学,我想跟你聊聊,可能你会想到这啊。同学,我想问的是,这个受音否一,这个受音否二最终跑哪去了?我告诉你各位,其实最终啊也在VM身上,不信你瞧,打开啊控制台输出VM同学瞧瞧吧。
12:00
首先有内幕呢,是一定的,对不对,看蓝色框里的东西,你瞧受银否一,受银否二,对不,但是区别在哪呢?你听我说各位啊,这个name啊,是做了数据代理的,因为这个name从根上来讲,其实是来自于这理的,对不对?哎,是做了数据代理的,但是这个受INFO1和受INFO2各位它是没有做数据代理的。比如说你滑到最后,同学你一定会看到name的get和,但是你并不能看得到那个受FO1和受INFO2的get,因为那两个东西咋的他不做数据代理,老师这俩为啥不做数据代理啊?同学你听听这词儿,数据代理,数据代理是为了让你的数据能够安稳的跑到页面上去,对不?那你像这个内幕,人家为什么要做数据代理?很简单,有一天我的上硅谷改成上硅谷二,我跳下回车,页面是不是得跟着变呀,你这就是属于数据对吧?那你像这两个呢,就是属属于你写完就定完了,你写完了这方法就这样了,以后就等着别人去调就得了,这方法以后咋的不改,所以说同学人家没有必要咋办,做这个数据代理是不?哎直接就写在这就可以了啊,你看这是很直接给你的同学数据代理的特点,你还没发现吗?有东西,但是我不直接给你,你得点去,完了get在工作,那你看这儿啊,同学你点开走,是不是给你了,直接给你的多直接呀,哎,然后呢,就有一些同学可能会想到老师啊,我想这么做,我把这兽银二啊拿。
13:22
我不放在method里面说,老师,我好像有这么一个感觉啊,来,你撤回来说老师,其实我这之所以能用兽音否一,我这能用兽音否二,不就也是因为这个受音否一和受音否二也出现在了VM身上吗?老师,我把兽银FOR2配置在当时我写的data配置项里面,那最终不也会跑到VM身上吗?那不也能用吗?来,咱试试看看能不能用吗?拿回来,其实啊,我跟大家讲是能用的,你看一下是不是写在这了,嗯,回答同学你先别看VM身上是什么情况,一好不好用好,二好不好用好说老师那以后就这么写吧,这method我就把它遗忘掉,嘿,我就全往data里边放,不行,你这样的话会让view很累很累,为啥?你看一下VM你就知道了,各位我把这个呢清掉输出VM,你自己瞧瞧啊,位走受音否一呢,是属于直接拿过来就给你用,但是同学你瞧没瞧,他把这个受INFO2又错误的给你做了一次数据代理,也就是说受INFO2需要数据代理吗?不需要,但是由于你错误的把一个方法写在data塔里了,那我问你同学咋的了,那是不是人家知就写了一个数据代理啊,你往下看有受音符二的get s,但是这玩意有意义吗?没有意义了以后这个函数。
14:38
只是给别人调,而不是去改,你说是不?哎,所以说这是一个细节上的问题,同学你没发现吗?只有配置在data里的东西,人家才会做数据劫持,哎,当然我们还没讲啊,后边会讲,然后还会做什么呀,数据代理对不对?所以说这个东西咋的?哎,拿走吧各位,把它写在这儿,人家的MYS这个配置项是有意义的,对吧,为什么要设计这个呀?哎,好了,那这个呢,只是一个事件的基本使用,那我们呢,来一波总结,走读一下这几句话,哎,说你用V杠、on或者是at符都能绑事件叉,叉叉呢是事件名,哎,事件的回调要写在methods对象中,最终呢,也会出现在VM上,Methods中所配置的函数不要用建头函数,否则this就不是VM了,Methods中配置的函数都是被view所管理的函数,This的指向都是谁?VM,我这儿呢还写了一个或组件实例对象,等到后期我们讲组件的时候呀,你就会发现那个this呢,也可能是组件实例对象,好第五个艾福。
15:38
直接写DEMO和你写艾特福Li榜事件写了一个小括号event效果呢,其实是一致的,哎,大家你品味品味,我这么绑事件,我不说传,他也是不是能给我传一个event,那我这么写就是我告诉他得给我传一个event,对吧?啊,效果一致,但是后者也就是说这个东西咋的更灵活,它可以传递更多的参数,好,那这小节呢,我们停一下。
我来说两句