day03【项目前端相关基础知识一】/13-尚硅谷-谷粒学院-前端技术-vue指令-单向和双向绑定

首先啊，咱们来看vouee指令中的第一个指令，这个指令呢，注意啊，在vouee中的指令有一个标准的写法，就是这个叫V杠，后面加上你的句的名称，它都是以V杠开头，比如说一会咱讲一个叫V-band啊，一会咱说包括还有一个叫什么V-model，以及咱们最后说什么V-if，什么V杠受，什么v for等等，都是以V杠开头的，这是它指定的一个基本的语法，那咱们现在先来学它的第一个指令，就是这个东西叫V-B的这么一个指令啊，那我们来做个说明啊，大家看这个到底什么意思啊。我们就直接啊，通过这个效果再来演示了啊，直接打开效果最明显，那我现在在里边的我建一个文件，如零三，我就叫这个voe中的指令。这个指令就咱说那个叫。啊，V-find的这么一个指令HTML，我把这个咱做个测试，那里边怎么做呢？因为咱们刚抽取了代码片段，咱们把代码给他快头写出来，Voe，而填L，这是一段代码片段啊，这都可以了，然后这个写完之后，下面在里边我们来用一下这个指令，那咱说一下怎么用啊，首先第一个为了测试清楚，咱在date里边先定义几个值，为了咱一会儿方便看到它的效果啊，这个值可以随便写，比如说我就按照课件中这个写法了啊，就这么来写了啊，这段我就复制过来，当然你可以测试别的内容啊，东西都一样的。

比如现在在我这个data中呢，我写了两个，这个就是你可以列为就是两个变量和它的值，第一个叫content，这叫我是标题，第二个叫message里边写的这个东西。这个不知各位是否知道啊，我说一下，这是javascript里边的这么一个函数，就是可以获取当前的时间，然后里边有一个叫who local string，就是把当前时间变成你符合当前系统格式，比如咱的格式就是年月日、小时、分秒啊，这是一个时间，然后这是一个内容啊，咱用它来做测试，那我们怎么测试呢？因为咱现在要演示这个叫V-B。

啊，我先加个注释啊，咱要演示这个指令叫V-B这么一个指令，那咱们怎么来做呢？首先我先说明啊，这个指令是干什么的呢？它的官方描述它叫这个词。叫做单项数据绑定啊，就是这个说的比较官方，而说的通俗点，它可以就是取到里边的值，而这一般用在什么地方呢？就这个V杠半的这个指令啊，这个指令一般它是。用在咱们标签的属性里边，就是属性里边用这指令可以获取到你的值，显示到它的属性中，一般我们是这么来用的啊，那这个具体什么意思，咱来看效果啊，因为这么说各位应该不理解啊，咱直接看看效果来说一下这个到底是什么意思。

啊，那比如说我们来试一下啊。比如说我现在啊，我就写个标签啊，咱随便写个标签，我就来一个H1，在H1里边呢，我想取值，比如我想取这个content，咱说过了，用一个叫差值表达式，我加个content这个值。咱是不能取到啊，这个是我们写的这个值，就是把这content用差表达式取到啊，这是一个最基本操作，是咱们上节课演示过的，那咱们先看一下效果啊，现在我把这执行，大家看我是标题是不是显示了啊，这是差值表示用法，那比如现在刚才我提到啊，就是咱们的这个V-band，它一般用在属性里边。当然别的地方也能用，那属性怎么做呢？比如现在我这么做啊，我在这个H1里边得有一个属性，这个属性叫开头。

这属性不知各位是否知道啊，开头的单词是不是有标题意思，比如说里边啊，我随便写个值啊，随便写个值，我就写这么多值，然后这个会有什么效果呢？咱来到页面中就是现在你看啊。我说各位是否能看到啊，这个公屏不知道能不能看到啊，就是现在我把光标移到上面，里边会有这个显示，显然就是ad，然后CCC在里边都有显示啊，我说各位能不能看到啊，如果你看不到，因为你自己用这个测试一下啊，应该是公屏的问题啊，如果看不到，你把规模移到上面，里边会有这个显示，它显示内容就是里边的这个内容啊，把这做到，但是现在比如说啊，这个内容我想怎么做呢？想把这个message值取到，那怎么取到，咱的做法就是在这里边用这个指令叫V杠半，你可以把这值取到啊，那怎么取，我说一下啊。并不是你把method直接写过来，可以这么做，不对，它的做法就是你在属性前面加指令啊，咱们看一下啊，就这个叫V-B冒号加上这个名字，然后加上你那个具体那个值啊，就这么来做，那我写一下啊，就是我们写一个叫做V杠。

Band BI冒号，然后加上title，这是属性名字，后面加上你取那个值，你得要取message中的值，它就可以把这个值这种取到啊，这个叫V-B单向绑定，就是我说到的一般用在属性里边取这个值的地方，你加上它可以得到，那这个加完之后我们可以再看一下啊，比如我刷新把光标移过去之后，这里边会显示说页面加载于2020年啊，这个时间这里边应该也做了显示。啊，如果看不到，各位一会自己测试一下啊，那是公屏这个显示问题啊，这个就可以了，所以这个叫V-B叫单向绑定，就是取你这个值经常用于我们的属性里边啊，大家也知道啊。

然后就是这个写法，还有一种就是简写的方式，就是可以写的更简单点。啊，就是这个简写的方式。那怎么简写给大家，你来说一下啊，比如我换个标签，我就换一个叫HR啊。的换个标签，然后这里边怎么简写，咱现在V杠半的这可以不写，你就写一个什么冒号抬头这个效果跟他一样啊，就是V-B可以不写，咱就写个title，然后前面加个冒号，它就可以做到这么一个指令效果啊，比如说咱也可以看一下啊，我是标题光标移到上面，这值也会做显示。啊，这是关于我们说的这么一个东西啊，就是关于这个。V-band里边的这么一个操作，它叫做单项数据绑定，经常用在我们的属性里边，然后取离值，它的提法就是V-band冒号加上省名字，或者说V-B的省略，就加个冒号就可以做到啊，这是我们做到第一个V-B的指令啊，各位把这给他会用啊，因为咱后面这个肯定会用到，当然后面咱再写的话，一般都是直接写个冒号，他让我再去加这个东西了啊，当然后面要写的时候，你要知道它里边其实有这个东西的，只是它是可以省略不写的。

这个啊，我们就解释完了，第一个指令V-B。啊，大家给他知道啊，咱们做第一个啊。是单向绑定啊，然后这个点上之后，下面大家看第二个啊，跟它是对应关系，刚才叫单向，这叫什么，它叫双向绑定，这里边的指令这个名字叫V-model啊，那这个我们来看效果啊，因为我现在要解释双向，各位不好理解，咱通过效果直接来看什么叫双向。啊，我来操作一下啊，在里边，我现在比如说再来建一个文件，我们是。

零次就是这个指令。咱们叫这个V-model。DHTML啊，这个叫双向绑定，然后在里边同样咱们把代码升出来啊，这个代码然后在里边我们来演示效果，那怎么演示同样在date中呢？咱也定义几个值，为了咱们方便啊，那这值比如说按照课件中做法啊，我就写这么一个对象的形式啊，就是它可以有普通纸可以对象啊都可以啊，咱就来一个对象了。比如现在我把这个拿过来，然后这个写法就是呢。首先啊，这对象名字叫search map里面叫keyword，那我们取它的值，那就是search map.keyword这个可以取到啊，咱就写这么一个东西，那这写完之后，下面咱来测试一下什么叫双向绑定，那我说一下怎么测试啊，比如说一会儿咱这么做。我就先写两个input标签，再写个普通标签，然后不是各位是否记得啊，咱是在HTM阶段学到的，Input等于test。

是不是就是一个普通的文本框，包括它里边有个Y表，就是它里边那个值啊，那咱用它来做我们这个操作啊，就是写个input实现，那咱们来写一下啊。我就写到D位置啊。首先第一个我来一个input标签type，等于这个叫test，就是普通文本框啊，咱先写两个，一会往里面再写那种。然后这个写完之后再写一个，最后比如说再加一个P标签吧，在P标签中，咱就直接用那个差值表示，把那值取到。啊，直接插值表达式，取这个值，它的值就是search map，点上这个叫keyword啊，因为是个对象。然后写完之后各位应该知道啊，在我们的音input的里边，其实有一个Y6 Y6属性呢，就是它里边那个默认值啊，那我们看一下啊。

我说各位是否记得啊，这是普通的输入框嘛，咱可以数值，而我写个Y6就是它的默认值，那比如第一个咱先这么来做啊，用一下我们刚才学的知识叫V杠。B冒号value在里边呢，咱们把这个值取到啊，就是search map.keyword啊，这用的叫单向绑定，然后下面这个位置，咱用到这个叫双向绑定。写一下啊，它叫做双向绑定，那双向绑定怎么用，里边加上一个指令叫做V-model，这后面不需要加属性，然后咱们把这值直接拿过来。啊，这个叫双向绑定，就是V-model啊，就是这么一个用法，你在里边直接在属性位置加上V-model，里边加上你取的值，那它会有什么样的效果，再来看一下啊，这个效果咱通过例子直接看，然后咱再解释什么叫双向绑定啊，各位仔细来看这个效果啊，我把它执行。

打开里边啊，大家注意仔细看啊，你看啊，目前两个框就是两竖框中是不是都是上规股，然后下面值是不是上规谷，那比如说咱看第一个啊，第一个咱用的叫V-B，刚才说的它是不是叫单向绑定了，什么叫单向绑定，咱来解释这个词啊，现在好解释了，就是他要变的话，别人跟他没关系，比如现在我加个1234，你看。是不是只是他自己变别人，是不是还是上微股，那什么叫双向绑定，我第二个框我是写了一个叫V-model，这叫双向绑定，那什么意思呢？大家看效果啊，咱们把眼睛睁大来看一下什么效果啊。各位看到效果了吗？就是这个效果，这就叫双向绑定，也就是说现在只要我这个发生变化，那别的地方要跟着我发生变化，这叫双向绑定，一个地方变，别的地方会跟着我变，这叫双向单向就是你自己变，别人跟我没关系，我就自己在那里自己玩，别人跟我关系不大啊，但是如果说用双向绑定，那我这里边怎么做，别人也会跟着我怎么做，这是我们说的这一个特点啊，就是你这里边比如说加个123，你看剩下两个是不是123，我加个456是不是都有，456我再加指是不是都有，或者我删指，其他的是不是也删。

这就叫双向绑定啊，所以这个指令叫做V-model。要求各位啊，通过这个例子，只要你能看懂，这什么意思啊，单向就是自己玩，别人跟我没关系，我怎么变跟别人没有什么关系，但双向的话，我一变别人也会跟着我变。啊，就是这个意思啊，这是咱们解释的这么两个指令啊，现在这就好理解了啊，单向双向，但是这单向一般经常用于属性中，而双向其实咱们后面做那个表单调种用到啊，后面咱再具体说，你先知道它的特点是这个特点。

V-model双向绑定啊，所以咱们把它就说完了啊，各位就是一会儿自己来测试一下啊，通过这个例子你就感受一下这个到底是什么意思啊，用法简单，直接在里边we model加这个值就可以了。这个啊。