00:00
各位同学,咱们继续来学习Vue。刚才呢,咱们演示了入门案例,抽取了代码片段,那下面呢,我们来讲解vouee中的下一个内容,就是voe中的指令。指令什么意思呢?通过这个词各位应该能理解,就是我们让vuee去实现某些句体的功能,只是它去做某些事情,这个叫指令。而VE里边呢,有很多的指令,我们在这里边讲解,满足咱们项目中用的指令。那指令咱们讲哪些,给各位先列举出来,然后咱们一个一个通过具体例子给各位详细演示一下,那我们来看一下啊,首先第一个指令我们来讲解,这个指令叫V杠半。这个指令是什么呢?它叫做基本的数据渲染,或者说叫单向绑定。那我写一下什么意思,咱们马上演示这个,演示之后我们的第二个指令给大家演示,这个指令叫V-model它叫做双向绑定V-model之后第三个咱会演示下一个指令,这个指令它叫做V-二,就是绑定事件。
01:18
第四个给各位演示指令,叫做V-if就是条件判断。另外咱们还会演示最后一个指令,循环判断指令V杠。就循环操作或者循环便利这个过程,所以以上是咱们要演示的五个项目中会用到的指令,但voe的指令呢,不是说只有五个,这五个为了满足咱项目用,给大家详细演示一下,然后下面我们一个一个来看一下,首先我们先看第一个指令,V-B的这个指令叫单向绑定,或者说也可以叫基本的数据渲染,那什么意思,咱们直接通过代码来演示一下。
02:04
我在里边操作,我们创建一个文件零三。单向绑定,或者叫V杠半岛。D。然后把代码用咱们刚才抽取的代码片段,我们给它出来。这是我们一个基本结构,然后写完之后说一下什么意思啊,比如现在我先做准备工作,在date中我加上一个初始值,我们起个名字就叫这个。然后它的值我就叫哈。不啊,就还是叫这个名字,然后下面呢,咱做件事情,我在div里边呢,比如现在啊,我来创建一个标签,这个标签比如说我就写这么一个很常见的input标签,然后type,等于这个叫test。就是普通的文本数框,然后咱们把这加上这个标签效果咱先看一下什么样子,这各位应该知道啊,很简单,是不是一个普通的文本数框,而在这个input标签中呢,有个属性叫Y6 Y6中比如现在我加个值at硅谷,大家看什么效果啊,很明确,Y6表示你在输入框中是不是显示的内容就是Y6属性,那现在呢,我想做件事情。
03:27
让输入框中显示内容不是at硅谷,而是中的值,那这个过程用V杠半就可以实现,V杠半表示基本的数据渲染,就表示标签的属性中能用到你这个值,那怎么做?给各位写一下啊,咱的做法就是在标签位置加上一个叫V杠半的。冒号。加上属性里边加上你的变量名字,咱的变量叫message,把这加上,这样的话,Y6中就会有message这个值在输入框中进行显示,大家看一下啊,大家看到很明显,Hello voe是不是就显示出来了,所以这就是V杠半的这么一个使用,很简单一个操作。另外我再强调啊,V杠半的呢,有一种简写方式,咱给他简下,就这么写是对的,没有问题,但是我们可以简化。
04:23
怎么简化这个V杠半可以省略不写,就加个冒号,效果是一样的,那咱看一下啊效果。是不是同样是hello will,所以以上就是咱们演示的第一个指令V-band的单向绑定,这个就完成了。各位把这用法记住,在标签属性中用到这个值,用V-B的冒号加省名称加上变量名字值可以取到V杠半可以省略,简写就是冒号加属性名称就可以实现。这个我们就说到这里。
05:00
然后说完之后,咱们再看下一个操作,就下一个指令,我们再来建个页面,咱们是零四。V-model。V-model表示双向绑定,那什么叫双向绑定,咱们同样用这个例子来做演示,比如我现在啊,在里边还是写这个哈,但是我现在这么来做。对我的写法啊,比如说啊,我的第一个用普通的文本数框,然后第二部分呢,咱们加上一个差值表达式来取一下,这样的话,这两个这个值应该都可以取到,因为咱们都演示过了,你看啊,Hello vuee hello vuee都可以,然后下面呢,咱用这个叫双向绑定做操作,还是用input标签。Type等于type的。然后注意啊,怎么写它的用法就是V-model冒号Y等于这个叫message,可以这么来做,但是写的时候呢,有个细节,如果说你属性名称是Y6 Y6的名字可以省略,咱就加上一个V-model都可以了,如果你是别的使用名称不能省略,但是Y6可以省略,那我现在就省略出来了,现在这三个地方。
06:22
这个哈,应该都能进行显示,那咱们效果看一下啊,它是怎么样的。大家看是不是都有,Hello,这是我们提到的啊,但是这么说呢,各位不能理解什么叫双向绑定,那各位注意啊,我这里一个操作,咱就能理解什么叫双向绑定,所以你看我现在啊,我这里边输入一个123456,我再去掉。然后我再重新输入at硅谷。大家看到效果了吧,这就叫双向绑定,就是我变跟我相同,叫名字叫变量,一起跟我变,我怎么变它就怎么变,这叫双向绑定。那什么叫单向绑定,很明确,你看啊,我第一个变了值。
07:08
别人是没有变,就只是我自己玩,别人跟我没有关系啊,这叫单向绑定,双向绑定就是我变,只要跟我相同名字跟我一起变,这就是单向和双向的理解,这么说各位应该更好理解,咱后面在前段中肯定会用到单向也好,双向也好,都会一直用到,所以这时候我们演示的第二个指令V-model各位把这个记住。这两个我们就完成了,完成之后呢,下面咱再看第三个指令,第三个是什么呢?V-二,就是你可以在标签中绑定一个事件。在JS里边各位应该知道有很多事件,比如说最基本的单机事件,甚至改变事件等等,表单T事件等事件,现在在vuee中我们可以用它的指令来绑定事件,那下面把第三个例子咱们演示一下。
08:06
我在这里边创建。第五个文件。V-二。DHTML把代码。生成出来,咱们做个生成VEHTML生成出来,然后生成之后,我现在这么来做啊,因为它要绑定事件,所以事件最终肯定要调方法,那我首先在new view语中,咱们再加上一个属性名字,这名字注意啊,叫做methods,就是方法,注意这单词不要写错,Method里边呢,加上你的具体方法,比如现在我写个方法。这些方法假如说啊,我就叫奢侈。然后在测试里边,为了测试咱们做个输出console.logo。输出一个叫search。这是我们定义的这么一个方法,然后定义之后,下面呢,我在div中加上一个按钮,然后触发事件,咱们看效果。
09:07
我来实现type等于这个button。这是一个按钮,然后里边加上一个value,给它起个名字啊,比如我教这个就是be按钮,然后写完之后绑定事件,怎么绑定,各位注意它的写法啊,V-on冒号加上事件,咱们是cli,后面加上你的方法的名称,我们的方法名称叫色尺,这样的话就可以进行调用。这么一个实现,然后咱们试一下最终结果。我把浏览器打开,然后打开F12,在里边点B,大家看search是不是就输出了,证明它的效果就正确了,这就是如何绑定世界。然后跟刚才一样啊,绑定事件呢,也是有一种简写方式,就是它可以简写,注意怎么简写给各位同学写一下啊,它的做法就是V-on冒号替换成另外一个符号叫艾特符号,这表示简写两个效果是一样的,咱们最终效果也试一下啊,比如你看啊啊,为了明确我改个名字,这个叫B2。
10:21
然后咱们试一下啊,你看啊,B1输出了,B2也输出了,这里边都能实现这个。事件的触发方法的调用,所以以上就是第三个指令V-on的这么一个演示,各位把这三个常用指令记住,第一个单向绑定,第二个双向绑定,第三个绑定事件。
我来说两句