33-尚硅谷-尚医通-前端知识点-Vue-单向和双向绑定指令

各位同学大家好，欢迎继续收看上硅谷视频课程，咱们今天的主要内容就来讲解前端中的基础知识，为咱们后面的前端开发做准备，在之前内容中呢，给大家讲到了关于。Vs code的工具的安装和使用，以及ES6的基本语法，包括咱也提到了vouee是什么，以及咱们编写的一个uee的基本部门，那咱们下面继续学习vouee中的其他部分，我们主要讲解那就是vouee中的相关的指令，因为voe中重点咱也是学它的指令，那下面给各位先做个说明，然后咱们向你演示。在voe中呢，主要有这么些内容，首先咱们在入案例中曾经写到这么一个东西，不知各位是否记得，是不是一个叫差值表达式，用差值表达式能取到我们在voe中定义的变量对应的值，就是通过message把值可以取到。

这是我们之前提到的，而除了这个之外，在VE操作中还有一些相关的指令，那什么叫指令呢？给各位强调，也就是说通过指令我们可以实现某些操作，那我下面就给各位来演示一下VE中的这款指令，通过指令咱来实现某些操作，那指令中有什么？给各位说一下，首先呢，在里边有第一个指令。这个指令呢，我们叫做单向绑定。然后指令呢，给大家强调在voe中。它的指令有一个最基本的语法，它的语法怎么做呢？咱就以这个V杠开头，后面加上指令的名称，然后加上你对应的一些内容，这是指令的基本语法。而我们现在要学的第一个指令叫单项绑定，那单向绑定什么意思呢？给各位先做个说明，然后咱们来具体演示给大家。强调单向绑定的写法就是我们写一个V杠。

Find。然后这个单项绑定这个指令我们一般用在我们这个标签的属性上边，我们通过这个指令可以做这么一个事情，什么事情呢？来获取你里边那个就是date中定义的变量的值，这是我们用单项绑定可以做个事情，也就是说我们现在在data中来另一个变量，也就叫message，咱们用叉表式可以取到，而我在我标签的属性里边也可以用指令把这支取到，这就叫单向绑定。那这个给各位做了一个介绍之后，咱们下面给大家来演示一个效果，咱看这单项绑定到底该怎么去做，那我下面给各位来演示一下。

首先我在这个VE的文件夹中，咱们再来创建一个页面，这页面我们就叫零二，咱们叫V杠。或者说我叫单向绑定。点HTML，然后写完之后呢，在里边我们生成它的代码，因为咱之前抽取了一个代码片段，所以把它直接生出来，生成之后在里边我们来做个操作。怎么做呢？比如说我现在啊，我在这div中呢，咱们写个标签，这标签比如我也叫div，然后div中呢，我写了一段话，比如说我就叫单向绑定，这是我们写了一个标签，然后现在呢，比如说啊，我想做件事情，我想让里边的文字的颜色，比如说变成红色。那各位说怎么做？做法应该很简单，咱们在div中是不是加上属性叫style，然后在里边呢，加上那个颜色，就是咱来一个color。

然后颜色是不是这个红色，这样的话，当咱们一访问，那我显示到单项绑定四个字，是不是就会变成红色，那咱访问我们来看一下，咱们看一下里边一个基本的效果。我们等它打开，打开看单向绑定是不是就是红色，所以这样的话呢，我们就做了一个操作，然后现在我想做件事情，我想通过我们的单向绑定把这个颜色发生变化，那我们看怎么写，首先我这么做，我在date中呢，就定义这么一个变量，比如这个变量我起个名字，我就叫这个，就是比如咱就叫这个MSG。然后在里边呢，加上它的值，这个值我就写这个卡。然后它叫red，然后现在写完之后，大家注意我现在style中的值是不是就是写这个值就能变成红色，但是这个值呢，因为咱是在倍增的定义，所以我要从这个中把这值取到，那怎么取呢？咱们之前一个方式，我里面加个差值表达式是不是能取。

但是目前呢，我们是用在这个属性里边，大家看磁带是不是个属性，是不是它的属值啊，这单怎么做呢？给大家强调，我在属前面加上指令，就这个叫V杠。Find。然后在里面加个冒号style，在C里边加上你那个变量名称MSD，这样的话，咱们一访问它的颜色就会发生变化，比如说为了区分咱改个颜色，我改个green绿色。这就完成了，完成之后我们到里边刷新，大家看单项绑定四个字是不是就变成绿色，所以这就是关于单项绑定的使用，我们在标签的属性里边能取到变量的值，咱们用V-B做这么一个实验。

所以各位把这个写法给他知道，关于这个单项绑定。我把这个给个位拿过来。然后这个说完之后，咱们单项绑定就也是完成了，而单项绑定呢，其实可以除了这么做之外，它还有一个简写的方式，什么叫简写，就是咱们直接我们使用这个叫。冒号就可以了，而咱就不需要再加个V杠半，也就是说呢，我们在属性的前边也可以这么写，比如为了区分，我再加上一行。然后前面咱们可以加一个什么。冒号就可以了，这样的话也能实现这个操作，两个写法是一样的，就咱为了方便简写，一般都直接几个冒号，然后大家看里边这个是不是都出来了。所以这就是关于。单向绑定的一个演示，咱们通过单向绑定能在属性里边去找你变量中的值，这给各位就做了一个演示，大家把这个给他知道。

然后单向绑定演示之后，大家看这词，你说有单向就会有什么是不是双向，所以第二个呢，给大家演示这个叫双向绑定。那我们来写一下。双向绑定，那什么叫双向绑定呢？我先做一个简单说明，然后给大家讲解解释双向绑定写法，咱们写一个叫做V-model，这叫双向绑定，而它的特点就是就是当你一个地方变化，另外地方都会跟着发生变化，这个叫双向绑定。那具体什么意思，给各位我来做个演示，那我这里边写一下。比如现在我再重新复制一个页面。然后这页面我给它改个名字，我们就叫双向绑定。变HTL，然后双向绑定中，比如说现在我这么来做，在里边呢，我先定一个变量，假如这个变量我给它起个名字啊，比如就叫这个keyword，跟我课件中一样，咱就叫这个。

Keyboard，然后它的值我们是这个上预股，这是我们写的这么一个定义，然后定义之后呢，比如下面我这么做啊，我在上面首先第一个我先用咱们之前说那个差值表达式，把这直线取出来。怎么取，是不是加个大括号，然后加上一个叫keyword，这纸是不能取到，然后取到之后，比如说下面呢，我再写上这么一个input标签。这个我们应该数一下input是什么。是不是一个普通的文数框，然后在input中咱们会有一个是Y6属性，然后Y6属性中加这个值，那这个值怎么加，咱刚才学过一个叫单项绑定。我写一个冒号Y里边是不能加上这个keywor，然后除了这个之外，咱们再来写，我们刚才说那个双向绑定，那怎么做给大家强调，你在这里边呢，我们就写一个叫。

V杠。Model，然后里边等于在那个keyword，就是我们那个变量的名称，而这样的话，咱们把这个基础代码就写出来了，写出来之后为了区分，我给它加上一个BR换行。然后咱们现在来做测试，通过测试大家可以感受到什么叫双向绑定。那我来测试一下。我把它先打开，然后各位看啊，目前这三个地方是不是都是我们说这个上轨骨，然后你看现在我有三个地方，第一个是用这个差值表达式取道，然后第二个呢，是我们的普通输入框，第三个也是普通输入框，这是第二个是单向绑定，第三个是不是叫双向绑定，那下面进一步演示，各位注意看我的效果啊。

我在双向绑定这里边呢，加上几个值。大家看到效果了吗？应该能看到你发现啊，我这里值一变化，其他地方是不是都要跟着发生变化呀，所以这叫什么？就叫双向绑定，你这里边变化，只要别的跟我名字一样，它都会随着我的变化而发生变化，这是双向绑定，但你注意，比如我在单向绑定中变化，别的指是不是不会跟着变，因为它只是自己会发生变化，但是你双向别的值也会跟着发生变化，这就叫双向绑定，V-model里边加名字。所以各位把这个给他知道，关于双向绑定写法V-model这么一件事。所以现在把这个给各位就点出来了，通过的演示各位应该能理解什么叫双向绑定了，所以这是关于voe中的两个重要指令，一个单向绑定V-B的，咱可以简写就叫冒号，还有一个叫双向绑定V-model的，一个地方发生变化，其他地方相同名称会跟着发生变化。

那这个我们就演示完成了。