00:00
下面我们来学习VGA model指定。Vega model的语法呢,就是vega model等于咱们的一个JS表达式。它的作用呢,是用来数据的双向绑定。什么是数据双向绑定呢?那我们首先要介绍一下什么是数据单向绑定。我们之前用的这个一格的语法,它其实就是单向绑定,给一个属性绑定一个值,这是单项。那么我们来演示一下。我们可以整一个input标签,对吧,这是一个input啊,它的类型的是一个文本T,好了,我们可以给value,它的value值指定一个值,比如说值为一,那么最终渲染的时候,它的这个显示的内容呢,它的值就是这个一一对吧,有个一步它值为一没问题。但是呢,这种值就是不是动态的,它是写死的值是一,那假设呢,我们有个数据叫number啊。
01:02
它的数据就是我们要显示的内容。我们在这定义内容,这里要注意,就是input它的里面要渲染的内容必须是字符串啊,所以说我们这个一必须写成字符串的形式,然后呢,我们要动态把那个number这样写,注意不是动态的啊。这样写呢,没用上任何语法,它的key就是value,值就是number,这样写它最终渲染的值就是number。不是我们想要的,我们想的是它number,最终去这个data里面找到这个数据,最终渲染的是一,所以这时候就得用V慢的语法。用长平伽八的语法呢,它就会去data塔里面找这个number的值,最终渲染成一对吧,那么这个是数据单向板定。或者单向数据流数据由咱们的贝塔流向的页面对吧。是不是数据有。咱有下页面,那么此时我们也可以改这个输入框的值,对吧?我们点击可以弹出一个内容,我们改输入框的值,我们改了输入框的值,但是这个number的值并不会变。
02:11
特点就是我们可以在下面再展示一个文本。再展示一个文本,这个文本呢,就展示这个number的值啊,如果number发生变化,那么下面这里也要发生变化,当然它肯定没变的,我们来看啊。当我们在上面输入框的输入内容的时候,下面的这个number并没有变,所以这一点就说明咱们的number的值,当我input发生变化的时候,Number的值并不会变。啊,并不会变,这是单向的,那么接下来我们就来看双向的啊。来刷相等刷新等的话呢,这里就要变成V-model啊,V-model法定这个number的值,此时我们刷新增量成现象再来看啊。我们来到第二个输入框,我们在第二个输入框输入内容的时候,你会发现,哎,上面都发生了变化。
03:01
而这个就是所谓的双向绑定。双向马丁的有两个方向,是不是第一个方向就是数据由贝塔流向阴面?就是这个第二个方向就是数据又有页面有向data塔。这是两个方向。双向绑定呢,它内部的原理呢,其实很简单啊,就是双向绑定,它其实做两件事,第一件事就是给元素呢,绑定的value属性,它的值就是这个表达式的值,Number的值,所以一上来呢,我们这个输入框,它显示的值就是一,因为它做了这个事,同时它给input把定的事件,把定的input的这个啊,Change事件对吧,当input发生变化的时候。一旦一部分输入的内容发生变化,它就会重新设置这个表达式的值,设置这个number this number等于用户输入的内容,这样呢,数据就从页面又流回data塔了,而一旦这个数据发生了变化,所以页面对应的相应的位置也会发生变化。
04:09
那么VGA model这个数据双向绑定最少L啊,VGA model数据双向绑定,它的作用就是呃,可以给一一般来讲啊,通常啊。通常用于表单下。因为表单项主机才可以输内容,才有第二个方向,像普通的T啊这些容器,它没办法输东西,所以就没有第二个方向,没有第二方向你用v model就没任何意义了。所以说它只能一般来讲就用于这个表达项组件,那么作用就是用来显示数据,或者是用来收集数据的。可以显示并收集表达性数据。那么这就是VGA model。
我来说两句