00:00
好了,各位,在这一小节呢,我们来学习一下里的数据绑定啊,文件和文件夹都准备好了,首先聊一个概念,什么叫做绑定?我们找到之前所写的代码,我们只看28行,你看是不是这么一个意思啊,A标签啊,有一个HF这个属性,但是这个属性的值啊,我得看粉色框这个表达式执行的结果,表达式执行完了,说结果是一,OK,那HR的属性值是有多少啊,就是一,那你觉不觉得红色的和粉色的之间就有一个绑定的关系,对不?你是多少我就是多少,那你想想生活中的例子就是咱俩绑定了,我坐下你就坐下,我起来你就起来,对吧?而且你是靠哪个指令完成的数据绑定啊,V杠办的。说老师那你要这么说,我学过数据绑定啊,对呀,你学过,但只不过呀,你之前是用V-B的实现的数据绑定,还有一个指定也能完成数据绑定,并且做的要比微刚办的还要高级一点,诶那我们通过一个案例呢,去给它引出来,回到课件当中啊,点击1.4数据绑定,先不用看这里的单向和双向啊各位,我们先把红色框里的实现了,左边是一文字单向数据绑定,右边是个input框,里边写了上硅谷三个字啊,一个默认的输入值啊,就一上来就有是吧?哎,而且这三个值呢,是读取了一个VU实例里面动态的数据,诶,然后放在这儿的,好简单写写,回到代码当中,走单项数据绑定,然后呢,是个input框,想给定默认的值是不是得用Y6啊啊,我就一步到位了,读取name前边得用V-B的,那同时你得需要一个比如实例对吧?哎,写好这些配置项走。
01:44
配置好数据好了,OK,右键打开瞧一下效果。单项数据绑定,诶里边有东西了,叫上硅谷打开控制台啊,刷新也没啥错误,找到开发者工具。
02:02
好,点击这个view实例走里边,诶是不是上硅谷啊,来测试一下啊,把这个东西呢改一下叫做上硅谷123,接下来点击保存,瞧这是不是变了,哎,咱早就聊过吗?各位数据只要一发生变化,那么页面当中用到数据的地方是不是自动刷新呀,好。问大家一个问题,你说在光标闪烁的位置,如果我输入一个四,请问这块会不会变成上硅谷1234呢?来看一下啊,输入四,答案是不会。啊,那有些同学说老师,那你这输入的是不是没奏效啊,我输入的东西肯定是奏效的,我这都出现四了对吗?那我给你验证一下,各位来清调这我写一下啊,我获取那个输入框query select,嗯,走是那个input是吧,我拿到它的点Y流值,你看是不是1234是的。但是有些同学就疑惑了呀,老师,那这变了,那这咋不变呢?各位啊,一定要想好,你是把input框里的Y值通过哪个指令叫做V-B的完成的绑定V-B的最大的特点,它是一个单向的数据绑定,也就是说呀,这条线是存在的,数据一变,通过绑定,那页面上这个输入框的Y6值就发生变化,完了你就看到效果了,是吧?这条线是存在的,但是哪条线是不存在的呢?各位粉色,这条线不存在。
03:29
页面的输入框的Y值如果改变了,它不能够回头再影响date中的数据,这条线不存在,这就是V的最大的特点,这回大家明白了什么叫做单向吧,好,那再说一下,有另外一个指令就能完成双向的绑定,也就是页面上Y流值的改变居然还能影响data中的内幕,哎,那我们试一下,回到代码当中啊,把这行的复制,把这单呢给它改成双,然后同学不能再用V纲B了,这块你特别要注意啊,一个全新的指指令啊,叫做V-model model有什么意思啊,有模型的意思是不好了,回到页面看效果,呃,这块儿呢,有点儿没对齐,所以说呢,我写一个这个换行吧,走B2回来。
04:15
一上来吧,同学都是这个样子,你看这有上硅谷是吧,不管你用VB还是v Mo,东西是不是都能从date中跑到页面上去啊好,接下来测试一下啊,我在这儿呢,随便改一下,叫做123点击保存,你看无论你是V-B的V-mode都能实现东西诶跑到这儿主要是它当我输入色的时候,你注意看啊,你观察两个地方,当我在红色的地方输入四,你观察一下蓝色的地方,还有粉色的地方啊,你看一下输入45678,你发现了什么?同学,由于第二个输入框的value值是你通过哪个指令呢,叫做V-model去绑定的,所以说同学这条红色的线呀,是存在的,数据一变页面就变。
05:02
而且它存在第二条线,就是粉色这条线,页面上value如果发生变化,它能回头,诶怎么办?再影响data中的内幕,那问题是橙色框,这是怎么回事儿呢?嗯,它这怎么也变了呢?其实这是一个连锁反应,大家你想想,你在第二个输入框里边输入了值,Y流就变了,Y流变了,这个内幕就变了,那你别忘了呀,页面上有一个地方依赖这个内幕啊,是不是这里啊,那它就也发生变化了呗,对吧,各位这块应该能想懂吧,一个连锁反应吧,是吧?好,那我写到这儿啊,可能有一些同学说老师啊,那就这样吧,以后呢,我就不写这个V杠半的了,我就一直写这个V-model,这多好呀,我到什么地方它都是双向绑定的,同学不行,因为不是所有的元素都能使用V-model这个指令的,你比如说我给大家举一个例子,换行服,我再来一个,这呢写个HR。里边写好固定的数据啊,是你好啊,然后呢,我让它有一个X属性啊,X的值呢,是读取下方的那个上规谷,那当然前面我得来一个V-band的对吧?来回到页面呢,我们先看一下效果,各位走你好啊,右键检查来是不是有X,是不是上硅谷啊说老师那我用V-model不也行吗?那你试试,你写了VGA model回到页面看效果。
06:23
咱别说单向还是双向,同学,你的X已经丢了,并且控制台报错了,我带着你读一下什么错误这块呢,说的是模板编译失败,他说你这有问题,什么问题我就直接把后边的全都给你翻译过来,他说v model不支持这种元素类型,哪种元素类型。HR。老师,那我记住了,VGA model不能用在H2上,不能这么记,太局限了啊,给大家来一波总结,回到这儿呢,首先我们写好注释,叫做如下代码啊,是错误的,因为VGA model这个指令啊,只能应用在表单类元素上,这个表单类元素啊,有的时候呢,我们也称之为输入类元素,哎,就简单说它得有value值才行。
07:16
那你像你的H2同学有Y6值吗?没有,不是说像你想的那样,我想给X双向绑定,那就双向绑定不可以,那你说他为啥要这么设计呢?为啥有这个限制呢?其实也挺好理解的,各位你想想像这种表单类元素,或者说输入类元素,它都是让用户能跟这个元素产生交互的,你说对吧,也就说随着你的输入啊,删除啊,你这个元素的什么值在变化呀,Y6值在变化,而你的这个HR这种标题类的标签,我问各位啊,你说能输入能不能输入是不就没有Y6值,那没有Y6值就证明它不能捕获用户的输入,连输入都捕获不了,请问他如何回头影响数据的变化呢?那是不是就没有意义了呀?哎,这就是人家的设计,所以说这块呢,一定要注意,那你可能就想了,老师呢,输入类元素那都有啥呀,那我给你说几个呗,Input是吧,单选框是吧,多选框是吧,Select框。
08:16
方式吧,多行输入式吧,哎,所以说有很多的表单类元素,那这些元素呢,都有一个固定的特点,它都有什么值,Value值,因为我们的VGA model就是对哪个属性进行说话呢,就是value对吧?你的元素如果没有value,那是不可以的,VGA model不能够工作的是吧?好了回来,那我们在上方呢来一波总结,各位走了,拿我来走粘贴,走缩进呢,我调一下啊,各位好,读一下view中呢,有两种绑定的方式啊,第一种绑定叫做单向绑定,用什么呀?V杠办的数据只能从date流向页面啊,这里边用了一个词儿啊,叫做流向,那再看这个双向数据绑定叫做VGA model,数据不仅能从data流向页面,还可以从页面流向data,是两条线的。备注,双向绑定一般都应用在什么呢?表单类元素上,Input呀,Select呀,好,再看这同学v Mo的冒号value可以简写。
09:16
为V-model,因为V-model默认收集的就是什么呀,Y值,这是一个比较重要的点,哎,那我们看一下各位,也就是说这两行代码都可以用简写方式去写,那我现在的21和22行呢,用的都是什么呀?普通写法写好注释也有简单的写法来走,叫做简写,那怎么简写呢?把这两行呢,先给它复制过来,给它写在这儿,这两行呢,给它注掉,好这么写V-band的简写大家都知道,就是直接写冒号,那V-model呢,由于V-model它默认收集的就是Y值,它不收集别的,所以说你的value省省吧,你的冒号省省吧,这样的话也可以,好,那你回来看一下效果,我先把这行注掉啊,因为这行是不对的,好,空行的多了一个删掉,回到页面刷新看效果,没有警告吧,诶回到开发者工具这儿,那你瞧啊各位这是上硅谷来改一下。
10:16
到123来保存变吧,后边加个456来看是不是依然可用啊,所以说同学一般来说啊,我们用V-B的冒号的时候都用这种方式,我们用v model的时候都用这种形式,一定要注意啊,同学他俩的简写方式是不一样的,V model的简写式删掉冒号和Y,因为默认找的就是Y流,好各位,那这一小节呢,我们停一下。
我来说两句