00:00
大家好,我是学习园地的特约讲师高洛峰,上节课咱们看到will里边的K这个唯一标识,那大家理解一下就可以啊,那正常的时候我们在用的时候就直接把K加上就行了,如果你们加上那个ES Li的加不加都可以,但是呢,最好是把它加上啊,不仅可以解决我们效率的问题,对吧,渲染的时候效率的问题也可以解决我们一些类似于缓存这样的一个问题,那这节课呢,我们在学习一个新的语法,那这也是,呃,我们前边一直在用,但是呢,没有具体给大家讲这个V-model这个指令。呃,这个指令呢,通常应该说它就是跟我们表单在一起使用的,负责双向绑定数据的非常有用的一个指令,那前面呢,咱们用过,但是没有讲,那这节课呢,咱们就把这个V-model没弄明白,那我们在用表单的场景呢,是比较多的,比如说用户登录注册,那后台添加数据,那这些呢,都离不开表单的这个操作,对吧?记着跟表单一起使用双向绑定的来,我们还是直接上代码来说这个。那上两的例子我给大家也备份了一份,那么看一下什么是双向绑定,前面呢,咱们用过就不用多说了,比如说既然是跟表单在一起用的,我们来一个input表单对吧?那我们在这里边直接用一个V-model m Mo dl直接绑定上我们这个数据,我们下边不有ta一个mst吗?那我们就直接绑定这个数据就可以了。那什么是双向绑定,我这块给你换行,这块我再用差值的方式把这个MSG给你放在这块来,你看表单里边,这里边默认有的数据,这里边数据变化,你看表单里边也跟着变化,那表单里边变化,表单里边变化,那下边这个数据也跟着变化,这就叫双向绑定。
01:36
双绑定,那双向绑定有什么好处,那如果不用双向绑定的时候,我们是单向绑定,什么是单向绑定呢?你比如说我们把这个复制一份。我们来粘贴一下,假如说我来模拟一下单向绑定,也就是我们只要将这个值变化的时候,那这个值跟着变化,表单里边值跟着变化,但是呢,呃,表单里边的值变化的时候,不让我们,呃,这个值跟着变化,你看我们怎么写呢,我们学用那个V杠放的这个指令,那我们用语法堂对吧,简写,比如说V6值,V6值等于MSG,因为任何属性都可以这么绑定嘛,那现在呢,就是一个单项绑定,所谓的单线绑定,来我们刷新一下,你看一下。
02:17
只我们这里边只改变的时候,你看表单变化,但是表单里边怎么改变的时候,你看我们下边不变化,你回车它也不变化,对吧?这是单线盲定,那么如果不再不用微杠,呃,Model的这样的情况,那我们能不能模拟双向绑定呢?也可以,你看这样呢,是单线绑定,单线绑定呢,我们现在想办法让表单里边数据变化的时候,对吧?我们让这个数据也跟着变化,对吧?现在数据变化能让表单里数据变化了,那怎么办呢?表单里边变化,想要数据变化就得加事件对吧?这是里边没有的对吧?不是里面没有,事件里没有这样的,呃,这种双向绑定的这样的一个机制,那我们这个呢,违法model呢是非常方便的,当然咱不用违法model了,你看表单里边变化有一个事件,那我们用语法堂艾特符里边有一个input事件。
03:00
你看input事件,那也就意味着我们这个input的输入值变化的时候,当然这里边你可以直接写语法,也可以调用一个方法,比如说呃,Change an改变这个方法,当然这个方法我们需要在哪定义啊,需要在这定义,这里边可以直接写语法啊,只是我告诉你这里边可以做一个方法,这个咱前面讲过就不多说了,你甚至你看如果我们这里边输入数据,那就会调用这个方法,就会调用这个方法,那调用这个方法的时候,你看我们假如说里边写上一行a.logg来,我们刷新一下。当然,这数据太长了,我们清空清空这数据,我这里写上ABC,你看。输数据实践称。ABC刷新一下。Input change写写没写错,这个在这太挡住了,往下点啊。In啊,这俩不一样,所以呢,它没变化对吧?这样,那我们这块来一个ABC,你看下边就掉了,我写三个字母掉三次,写四个字母掉四次,对不对,那掉了,我如果能拿到表单,这个表单里边值,那我在这里边肯定能给这个附上值对吧?那这里边赋值的语法肯定很容易了,这是MSG等于什么值就可以了,对不对,等于ABC对吧?那假如说我这里边随便写个哈,你看我下边复制的也是ABC对吧?这个值也变化了,那我怎么拿到表单里面数据呢?也很容易,记不记得,我们如果不存参数的话,这里边默认可以接收一个事件对吧?接收一个事件,那这个事件里边就有一个方法,默认的这个事件里边就有一个,呃,他。
04:42
Get target get里边的va,嗯,Target get,我们是这target是什么?我们去打印一下啊。这里边这边C,呃,它get,这是evet,点它get.rog你看我们打一下这个ABC,你看它是一个对象,对象里边包含这个这个元素看到了吗?包含了这个元素,那我们只要是拿到这个元素里边的值就行了,你看VE。
05:14
来,我们这边来一个看ABC。这块这个ABC你看这里边就会有A有B有CC打印出来了,对不对,那我们直接将这个里边规流你付给它就可以了,这样的话我们就用我们的办法来实现了双向绑定ABC,你看变化,那当这个值变化里边写着哈,保存一下,你看两个值也会变化,也是双向绑定这样的方式,当然我们可以不如果不用方法的话,我们再给你复制一份啊。复制一份,然后呢。这个方法你留着,你写过代码都给你留着,这以后你可以复习,那我们这里边直接用,比如说用嗯,MSG。等于什么呢?等于咱们说在这块可以直接使用ET,对不对,它里边的target get.video v,你看是一样的。这写上ABC,你看hello,一样的可以实现我们的效果,这边变窄一点吧,把然代码都超出来了,看不清了,对吧,是一样的,所以呢,这是用我们手工的方法实现这种双向绑定,手工的方法实现双向绑定,那我们再来看一下手工实现方法绑定呢,肯定没有这种跟我们实现的要方便,对吧,还是用一个model这样的多方便呢,对吧,第二一行。
06:23
你看ABC刷新一下model msg,嗯。ABC,你看可以变化,刚才没有刷新啊,所以呢,这种是最方便的,不用我们一个一个去了,当然我们除了在音步的表单里用,其他表单里面也可以用,那我先不着急说这个,咱们再看一下we model还有一些修饰符,有这么几个修饰符,比如懒加载的修饰符,还有number修饰符,还有tree修饰修饰符,那这些修饰符是干嘛的?我再给你一个试一下,你看比如说我们在这里边每次一个变化,你想下它都相当于类似于程序渲染,下边跟着变化,效率不高,对不对?那我们一般的呢,比如说做验证或者做什么的,对吧?我们需要回车的时候变化,而不想让它现在变化,所以呢,我们就需要在这块加一个懒加载lazy,你看它就这三个对吧,Lazy。
07:09
相当于懒加载,也就是在这块,我们现在在输入ABCA,我们现在保存一下,我们就刷新一下。不是这块保存这保存一下,然后我们刷新一下。分析一下,你看我这块ABCDEF没有变化对不对,那我们回车之后下边才跟着变化,就是这个作用不让我们实时的双向绑定,而是我们有一个操作之后再双向绑定,当然这种效果我们用这个也可以模拟把这个变成什么,变成比如说安回车的事件什么之类的,我们一样可以做到啊,这是懒加载,那除了懒加载我们还有。几个方式,比如说我们这里边输入的类型,假如我要输入数字nub number类型,Number类型,Number类型呢,那这里边这个为什么没给我们实时刷新,不管它了,你看。输入这个数据,把这个去掉啊。表一下,你看输入其他字母现在是输入不了的,只能输入number,只输入number是可以绑定的,但是呢,我们输入number的时候,我们打印一下这个类型啊type,呃,Of type of,我们看一下,保存一下。
08:12
你看它是字符串类型的,虽然我们输入的只能限制我们输入数字,但是输入的数字也是字符串类型的,那有的说那不是因为你这块输入的默认的是字符串吧,那假如说我这块默认是零整形对不对?整形你看这的确是number,但是我们输入的输入的只要我们输入数字啊,你看输入的数字它还是字符串,虽然默认我们刷新一下默认是number,但是我们输入数字它还是字符串。当然了,是字符串也没关系,我们在用成语的时候,我们把拿到它的时候,我们用什么,用PR sent去转换也是可以的,对不对,但是呢,V model它有一个可以直接帮我们转换,也就是这块点number你看。我们刷新一下,这里边是number类型,我现在输入数字,它也是number类型,所以number类型比如说你做加法运算,就是两个数字的相加,就是两个数字相加,而不是说两个字符串连接了,只是类型,咱们只有相同类型的,咱们在一起操作,才这样才有意义嘛,对不对,默认是字符串类型的,所以呢,这是这个作用。
09:05
复制一下。再粘贴一下这个留着有一个这个修饰符,那还有一个,当然这里边也可以用,嗯,串行去标志啊,串行去标志,你看我这里边输入。嗯,刷新一下。嗯,输入你看,当然这块只是打印,打印这个类型啊,只是打印这个类型,那如果我们这块加上这个类型这块我们再复制一份。把这个去掉,类型都去掉,你看这块我们只要我们输入数字,说数字一回车在变化,也可以通过这种串型的方式去操作啊。这是没问题的。那我们再看一下。诶,这只是复制了一个,还有一个当然也可以在这个上边我们串行操作去做啊,还有一个去干嘛的呢,专门是去除它两边空格的这块,这个也就是如果不加这个,不加这个的话,那我在这里边输入数字的时候发现一下啊。
10:07
你看这里边儿,我可以两边空格,但是空格这不是字串,我得把这个。呃,去掉这去掉吧。这两我都去掉,小新一下,你看这里边,嗯,把这个改成past t,比如说我们输入用户名的时候对不对,比如说hello对吧,前面是字符串提示啊,Hello输入的时候,那后边可以有很多空格,那用户输入的时候,比如用户名里边前面带空格,有可能就从数据库里边匹配不到,通常我们的手动的去干嘛呀,去把这空格给去掉,也是用tri GS tri后台PP里边也有tri去去掉,那在这里边,你看这前面这块也有空格进来,原来是连在一起的,你看现在有空格,当然了,多个空格在浏览器里边会解释一个,但是传到服务器里边可不是一个是一堆,对吧,那这样误删入的两边有空格,中间有空格都删不掉啊,那我们就可以用直接一个TR保存一下。你看我们刷新一下,这里边儿写上ABC对吧,你看我前面不管加多少空格,你看它前面是没加的,因为把我们空格给去掉了。
11:08
这是我们呃,这几个修饰符的作用,比较简单啊,记着V-model可以双向绑定,然后还可以修饰符去帮我们处理一些事情,对吧,这些事情都比我们接来做了,维康model直接帮我们做了,但是这里边呃,我们已经体现出来它的一个好处了,对不对,但是呢,表单的类型有很多,表单类型有很多,不光是这几个,对吧,你比如说。单选框,单选框复选框下拉列表对吧,还有呃副文本之类的,当然副文本和这个input的是一样的啊,那其他有特殊的,在咱表单列边有特殊的单选块,多选块和呃下拉列表,这几个都是特殊的,那我分别给大家做一下实验看效果,比如说我现在。做一个呃,两个单引号吧,Label LA level,我这加个for,这里边做两个单选框,一个是input类型,我们是video对吧,假如说我们就选择呃性别吧,那这里边如果有两个单元框,必须得起内是一样的对不对,否则呢,肯定是没有排斥的关系,然后V数值,只要这块比如说难,然后或者是状态零一都可以啊,零一都可以我们提交给服务器的,那这块既然有这个,那我们肯定得起个ID啊。
12:24
ID我们就随便起个万吧,随便起个那这块绑定这个万这个level知道什么意思吧,这样的话,我后边写一个字的时候,比如说比较难,你看。我们保存一下,这样的话,我们不一定就点这个圈有效,我们点这个难也有效,你看点难也有效,因为它俩是绑定在一起了,那附小框一般有这个单选框一般有多个,而且是排斥的关系,排斥关系这个必须是一样的,这样的话两个才能选择其一对不对,但ID不能加,到时候改成写入to吧,如果你不用level的话,你就不用了,写入to,然后这会我们改成语,当然了,一般你可以用零一或者用英文单词啊,别别用汉字,我这块只是为了演示让你用一下这个汉字。
13:05
你看。两个就是排斥的关系,选这个选这个选这个,当然你名字这块,假如这块是一不同不同的话,那你刷新一下,那两个都可以选单独的是一组,因为它是名字相同,是组的概念,一组中它是排斥的关系,所以这个名字要相同啊。那它这个有什么好处呢?你看这个绑定,这个双向绑定怎么做呢?你看我们这块有微流值对不对,那如果我们在这里边做了一个性别。啊,把这去掉啊,我们来一个ex性别,那比如说默认就是先我就先写个空字串,默认先写空字串,然后呢,我们这会使用V-model绑定这个性别,当然这两个排斥关系,我们都用这个V-model Mo t model绑定这个性别ses,这样的话我们在下边放个行一二,然后我们用差值输出一下这个情节,因为你能看到是不是双向板定,我选择难的时候。
14:00
你看下边就是男选择女的时候,下边就是女。就相当于把我们这个值和我们这个性别绑定了,我们选中它就是男,选中就是女的。对吧,那这块选中的时候,他就会把值传给这个,然后我们把它比如说提交给这个表单,我们再提交给服务器的时候,就带着这个值过去了,就知道用户选择是哪个,往数据库加入的时候就不会加错了,对吧。那它还有没有些其他的用法呢?你比如说加上V-model的时候,其实呢,它就跟这个名字一样,因为他们两个是绑定的相同的一个变量,所以呢,它就具有这个name的格式,它具有同组的概念,所以这个你就不用加了,你看不用加一样可以是排斥的关系,这新下你看男女男女看到了吧,那默认的话,我们比如说我们要这里边CH这个,那我们刷新的时候,它是默认选择的,对吧,默认选择,但默认选择的时候,你看我们默认选择,但下边这个值没默认选择对吧?所以我默认值加上v model的时候,在单引框里边也不用它了,怎么怎么办呢?我们只要在这块加上什么值男,你看默认他就是男,扎心,如果我这块改成女A。
15:05
关注快点吧。改成女,你看默认就是女这个地方,所以呢,这个是我们单选框应用的一种方式,那除了单选框。你看它用这格式啊,它有几个作用,一个双向绑定,另外默认值它也可以处理,那除了默认值,它可以有同组的概念,看到了吗?这是单选框,那我们再给大家看一下复选框,副选框,比如说我们做的一些标签对吧?嗯,同样我这个拿过来,同样拿过来,那我就随便用abcd吧。嗯,A这是A类型,选择附小块CH拆boss,然后嗯。这里边儿。嗯。值不用它我们这块不选块,假如说我们选择Java Java,那这块是标签TTS。你看这个复选框分两个,分两种情况,如果直接是布尔型的,你比如说咱们经常做的在提交网站提交,呃,注册的时候一般都有一个同意对吧,协议同意协议有一个这样的情况,那这块呢,不绑定这个你看啊,如果是点同意协议这样的话,前面会有一个复选框,我们不绑定的时候,你看是这样。
16:23
这块我们换个号,第二分开对吧,通常我们用这样的表单点击同一协议,前击同一协议的时候,一般我们都是一个布尔值,布尔值把这个值提交给服务器就点击了就是真,不点击了就是假,对吧?那我们在这块做一个变量,已经绑定了,必须得跟数据里边有变量,比如说是否同意A,呃,GR re1这个。你看啊,默认比如说是假,那这块写假的话没有用,对不对,那我们把这个波尔行值真假值我们放在后边吧,这块嗯,A这块刷新一下,你看这是假,当选择的时候呢,双向绑定,让它是变成真,那提交过去的值不就是真吗?那这块我们只要加一个V-model v model等于什么呢?这个值等于这个值如果只有一个的话,它就是一个波形,我选中。
17:15
诶,这个选中它没有变化,咱看一下嗯。假值看我这块,如果是真绑定。刷新一下。你看刷新一下,如果我这边不行,值直接是真的话,那么怎么的AMO这如果是真的话,那默认是不是就直接选中了,那选择假,你看这就变成假,再选择真真假绑定就可以了,刚才是没刷新。看到了,这是有一个值的情况,绑定这一个值,那当然我们附小号它是有多个的,有多个的,那我们也不用起内嘛,也不用说变成同组的,用这个v model是一个意思啊,那我们同样。附这一份,假如说有多个,我们就拿这个爱好标签来说吧,比如说绑定标签tags,比如说我们选择在上传文章的时候,我们选择这个文章符合哪些标签,对不对?这里边就不加这个了,加上假如说我们选择的是Java的课程。
18:08
呃,负选块这A这块定的是BA相同啊BA,然后我们这块复制几个两个三个四个,然后。七。D。正好来一个C。D。Java,然后这块我们标签Java这块,比如说我们是Python这块,我们是will。我这块是PP。嗯,四个你看下边有了,但是我们前边最好是加一个什么,这上面是没关系的啊,加一个括号下来了知va Python这个当然了,我们这里边每一个里边得对应一个微流值对吧,之后我们也是Java。这块维度值我们对应的是呃,Python。
19:00
这块我们加一个值,当然是一个可以数字,然后代表状态,没有这块是PP。现在我们绑定同一个标签,但是这标签我们在这里面没声明,那这个这个标签就得是一个数组text,那我们直接起个空数组就可以了,起个空数组,那我在这个地方显示这个速度啊,换一个行第二,然后我们用差值X,那我双向绑定我选中的选中的。啊,这个是它数组啊,没问题,它打印的这块是直接打印的,数组是空嘛,所以有个中号啊,那选中的值选中这个就会把这个值选中的放到这个数组里边去,所以有多个值对应的是一个数组,你看选择Java,选择Python,选择will对吧,我把Python去掉,看选择这个是绑定的,这样的话我们连内幕名都不用写了,因为它跟我们那个单选框是类似的,起个这个就相当于内幕名了,就帮助我们把内幕名给取取出来了,你看这里边外边这跟没关系啊,它跟这个微流值对应的,你看我里边是小写的,外层是大写的,故意是这样的,对不对,所以呢,是把V柔值。
20:01
给我们添加到这个数组里边,所以我们想选出什么标签。假如在页面里边,我假如说这个我们添加一篇文章,它属于Java里边的,也属于前端里边的,对吧,属于VIVO里边的,那这两个标签我们就可以提交给服务器,那服务器接收到这个值就会是一个数组,便利把它插到数据库。这是我们复选框。去应用的时候怎么使用,那当然我们也有下拉列表,比如说这些标签的方式我们用啊下拉列表我们再使用一下,假如说下拉列表示select select对吧,然后这里边op选择这个值,假如说Java这块Java几个。嗯,然Python py ho,然后P,然后这块vuee。这块react REC,那这块我们把这个值改成T和Python。PP。
21:00
嗯,Voe,然后re ACB,我存一下。SE。啊,写错了,然后B2括号,你看这里边如果我们选中的时候,那默认的是什么呢?不是复选,是单选,我只能选一个,默认只能选一个,默认是单选,那如果默认是单选的话,只能选一个的话,那我们这里边声明这个是我们声明的是不是标签了,假如我们这块要选择学的语言language language选择语言对吧,那假如说是空的,那我们绑定上。跟这个标签绑定上,因为这里边儿选择的跟我们一个值绑定上,那比如说我们起内幕的时候,通常在这起,对不对,在这起,然后我们的值在下边,那我们这绑定的时候就得在整个select这块去绑定,所以呢,我们需要在这块加上不用起name了,Wear model可以代表name绑定language l language,你看。
22:01
然后我们下边换个行ER,然后我们输入什么呢?嗯,这块用插槽的这个插值的方式,把这个language LA放到这块来。你看这里边选择Java,选择PP选择。VE下边是不是就跟着变为uee,所以你选中哪个,我们这个值就会跟着变化,双向绑定嘛,它就会变成哪个变成哪一个,那么我们在往服务器提交的时候,就是用户选中的就可以了,但是你看这默认选择的时候,预刷新默认是空,为什么呢?因为我们还可以给他默认值,你比如说这里边如果我写的是跟这里边值是对应的,它有个默认选择,这块默认选择正常不也是这个吗?C,呃,SSEEED这样是默认选择,对吧,你看。但是我们加V卡model,它这个就不好使了,因为它渲染的时候把这个去掉了,怎么办呢?你看假如说我想的是PP是默认的选择,或者V默认选择,那我就加vuee保存,你看默认就是vuee选择的选择,PP选择Java对吧?所以你这值里边是默认值是什么?那么我们单选框选择的默认值就是什么,是这样的,那单选框它还有一个就这个下拉列表选择框,它还有一种用法什么呢?多选,多选多选的时候呢,我们只要在这个地方加上M,加上这个词,多的这个词,那我们这块就变成多个词,那按住CR,我们就可以怎么选多个。
23:24
比如说按住CTRL选多个对吧,那按住shift呢,我们也可以选多个。你看按shift也可以选多个,你看多个的话,只要是我们这加多个,它就自动把这个勾变成什么了,变成数组了,因为用一个嘛,对不对,变成数组了,那我这里边。换一个词LAS language对吧,那这块默认让它是一个数组,因为多个咱们就是一个数组就可以了,所以它手工的加一个,那上面这个呢,跟它也有区分,这加个S上面是单数,中面是负数,那这两个就不一样了,你看选择选择刷新一下。选择Python t,诶,我是不是加错位置了。
24:03
Long。Model LAS没起错呀,这块下边。Congress。指甲,然后选择一个,再选择没有变化呢,这里边我们加上。算了,加上一个字串也行。那。诶,这里边我再加上一个,当然跟这个属性没关系,我再加多个的话,我们加上size,不然它没显示,比如说六个,我们把六个都显示出来,这样的话有多个就可以了,看一下为什么。这个没有生效。布置一下双向绑定language。我听一下。刷新一下。
25:00
按住CTRL键,选多个。对呀,它现在还是在使用这个默认的vuee啊,不是这块没有效啊,是这块忘改了对吧,这个地方忘改了,你看Python选多个对吧,这是速度。就可以了,你可以按住shift键,可以挑着它组合选对不对,他都过来,然后我们一起提交给服务器就可以了。那这就是V-model你看。从头给大家看一下,它是双向绑定对吧?然后呢,有这么多修饰符,两加载的修饰符,Number修饰符,可以去空格的修饰符,还可以串行去用,然后呢跟表单怎么配合使用对吧?三个作用跟表单双向绑定,可以代表同组对吧?又不用起内幕了,那默认值写上的时候还可以直接默认值,所以呢,违章model这功能都在都在对不对。然后跟复选块在一起使用,它可以是一个代表布尔型,选中就是真,不行就就是假,所以同一协议这样的单个用,那复选块呢,有的时候们也可以多用,如果多用的话,它就是一个速度,对吧。数组这里面绑定这个值,它都会加到这个数组里边选中的对吧,做标签咱们用的,然后呢,下拉列表可以单选下拉列表和多下拉列表。
26:06
那其他的呢,就没有特殊性了,就跟test的那个呃是一样的了,专绑定,所以我们在用呃表单的时候一定要用这个V-model这就是我们V-model的具体的几个地方跟大家说,呃跟大家讲完了。嗯,那到这儿呢,咱们的呃,VE的模板语法也几乎咱们讲完了,当然了也有没讲到的地方,在后边的课程中或者项目中咱们用到的,我稍后再给大家说啊,大家也可以参考手册,因为有一些没讲到也是不常用的,大家不看也可以,也没关系,不一定说所有的语法都掌握,大家能掌握更好啊,那有一些的确是不常用,你比如说像咱们这个呃下拉列表,下拉列表其实这功能呢,就不怎么常用,对吧,你用不用都行,很少有用到,但是有用到的时候啊啊这就是我们这节课内容,那下节课呢,我们再通过呃前面学的模板语法,咱们串在一起做一个综合的应用。
我来说两句