38、前端基础-Vue-指令-单向绑定&双向绑定

前面呢，我们快速的学习了一下VU的基本用法，那接下来呢，我们来说一下VU里边的指令，也就是我们上节课一直看的V杠什么什么，在五六里边呢，也有非常多的指令，我们先来看第一个V-test和V-HTML，来举一个场景例子，比如呢，这有一个div，那为了方便期间我们给这个div起一个ID，这div里边呢，要显示一段内容，什么内容呢？好，我们先来写一个script，你有一个view，我们让他来先来掌控这个div，好，然后呢，我们来写一个data data里边假设有一个属性叫message，它的内容呢叫he。是hello，我们想要显示它，我们可以使用双大括号，我们把这种叫差值表达式，可以取出我们这个属性值，好取出来以后呢，我们右键open with live server来看一下，现在呢，我们是这种情况，打印出来的是尖括号H1是么？我们现在就想让它变成一个真正的大标题，怎么做呢？我们可以这么来做，我来写，先写一个BR，我们第一种办法呢，比如我这准备了一个死SPA标签，我想要把它真正的显示出来，我可以写一个叫V-HTML，它的意思呢，就是我们SPA标签里边的HTML内容是什么？来，我来写一个messageage，意思呢，将messageage的值取出来，当成它里边的内容，而且呢，这是一个HTML，我来保存一下，我们就会看到呢，这是一个大哈，相当于呢，我们不会对H1标签进行转移。我们。

直接在浏览器上显示出我们这个大标题，而同样的，我来还写一个BR，我再来写一个带，如果我们是用V-test。V-test来取出这个值，取出我们的message来保存一下，我们会发现呢，还是展示出原来的样子，这个呢，将H1标签相当于进行了转移，在浏览器上呢，显示出它原来的字符，这是我们说的V-HTM和V-test，而且呢，它俩还有一个优点，比如呢，我把这个去掉，我们使用差值表达式来取值，在页面显示的时候，我先来保存，我在这儿呢调network，把它呢变成SLOW3G模拟网速慢，我看会出现什么事，我刷新一下。

哎，我们看中途会出现这个差值表达式，一会呢又变成我们取出的渲染后的值，我们把这个过程呢叫差值闪烁，页面没有完全渲染之前，在页面呢直接将我们这个表达式显示出来，这样呢挺不友好的，但是如果我们用V-HTM或V-test，好，我把这个注掉，我们呢就用这两个，那现在呢，看一下效果，我来进行保存，还是模拟网速慢。

诶，页面没渲染之前呢，这一块是不出效果的，我再来刷一下，不会出现我们的那个一半的差值表达式，再来说一下我们这个值表达式的规范，那这个差值表达式呢，它是写在我们HTML标签体里边，动态显示标签体内容的，而且呢，它的要求是这样，表达式呢，可以支持GS语法，我们可以调它的内置函数，但是不管调什么，得有返回值，这样我们差值表达式呢，才能显示出一个值，而且呢，我们这个表达式啊，它既然是表达式，它必须呢有一个返回结果，比如呢，我们在这个差值表达式里边呢，我们可以写各种的，比如来写一加一等于几，包括呢，我们给它进行拼串等等，只要有结果都算，但是呢，我们不能写这种，比如我声明了一个变量A等于一加一，这个其实是没有返回结果的，而且呢，我们差值表达式里边呢，可以直接使用5U实例中的任何数据。

或者函数在我们data里边定义的这些数据，包括在我们mans里边定义的函数，它都是可以用的，比如我在这里边呢，定义了一个hello函数，这个hello函数呢，会return一个word，诶那我们想要用它，我们可以直接在这双大括号，我们来调用hello，这都没问题，来保存看一下页面效果。诶，这个呢，稍微有点慢，我们不模拟这个慢3G了，好，我来刷新一下，然发现呢，这一块都是调用没问题的，包括差值里边的计算表达式也都没问题，包括这一块来写三元运算也好，拼串也好等等，只要有返回值都行，但是整个差值表达式我们是需要写在HTML标签体里边的，那正好呢，就引申出一个问题，差值表达式只能写在标签体里边，那假设呢，我现在有这么一个需求，我这有一个超链接go gogo，我想呢，去一个地方，这个h ref，这个地方的值呢，有可能是动态的，我要跳过去，假设呢，我在这定义了一个超链接的值叫link，我想要去百度，我写HTTP3W点百度点com，我想让它的值呢，是我这一块动态设置的，那我们能不能这样写呢？诶，这样肯定不行，差值表达式只能用在。

表现体里边，那我们如何给这些属性动态的绑定VU实例里边的值，那接下来呢，我们就要说一个我们这个V杠棒的，这个V杠棒的的作用呢，就是给HTML标签的属性绑定值，而我们差值呢，是给它的标签体里边绑定，还是我们那个需求我们这个div，比如我们这个A标签，我们想要去一个地方go gogo去哪里呢？我们来动态的来写一下script，来new一个view，那让view管控器我们这个APP实例，好，我们给整个div呢，给上一个ID。

ID我们就叫APP，然后呢，我们这个要去哪里，我写一个data data呢有一个属性叫link，我们要去的地方就是3W点百度点com。好，然后呢，那我们这一块的值要取出，它怎么取，我们就使用V杠棒的，V杠棒的语法是V杠棒的冒号属性名，这样呢，相当于我们标签上的这个re属性跟我们唯有实例的数据进行绑定，跟哪个绑定，我们就在这里边直接写属性名，比如我们就叫link，我来保存一下，看一下页面效果，Open with live server，然后呢，我们这个go gogo，我点一下，诶它确实呢来到百度了，说明呢榜上百度了，包括我们如果改掉了这个link的值，我F12在控制台来看一下，现在这个link呢是百度，我现在呢改成其他的值，那要改其他的值呢，我让这个实例有一个名字，就是呢，等于VM，我要改掉VM里边的某一个属性，VM里边点有一个link，我们把它呢现在改成HTTP冒号。

3w.qq.com好，我来回车，我把这改了以后呢，我们看到这一块改了，我再来点超链接，我包括我来检查元素，我发现超链接呢也已经变成qq.com了，说明我们这就绑定上了，我们在这一块一改页面呢，也就跟着改了，来点一下走，这个是没什么问题的，而且呢，我们这个V杠棒的，对我们的这两个属性，每个标签呢，都可能有class和style，对这两个数属性呢，做了单独的增强，比如我们来举一个例子，还是这个span标签，这里边呢显示了一个你好，然后呢，它有一个class class呢假设呢，有一个叫active，还有一个呢叫test danger，而这两个class呢，是要根据情况动态的添上一会有一会没有，那我们想要给它实现这个效果，我们可以写一个叫V杠棒的，相当于class的值呢？

跟我们data塔里边的东西进行相关绑定，那怎么绑定呢？我们就需要在这来写上一个对象，这个对象呢，我们先来写一个属性，叫active，这个呢相当于我们class里边有一个active，但是它要不要有我们跟某一个值绑定，比如我们就叫it active，如果它是true的，那我们这个class就算是有，那我在这绑定一下，包括呢，这个test danger，而且呢，我们这个是一个属性，属性的话呢，这有特殊字符，那我们就给它属性加上单引号，这个test等这这个class有没有呢？我们还要跟另外一看另外一个值，比如呢，我们叫汉字error，如果汉字L是错的，我再给你加上这个class，所以呢，我把hands字error复制在这，这样呢，我们只有is active和hands error这两个都是true的情况下。

我们会动态的将active和test灯这填到这个class里边，我来保存看一下页面效果，那现在呢来看这个，你好，右键检查元素，现在呢是有active和test灯，那是因为我们的这两个属性都是true的，那我们稍微调整一下。VM点汉字L。我让这个hands errorr呢，我等于false，我来回车，然后发现这个class呢就没有了，我呢重新把它调为处，它呢又出来了，那我们这个active呢也是一样，所以呢，我们如果想要动态改class，我们的语法就是这样的，直接大括号，这就是class的名，我们想要哪个class加上，然后呢，包括它要加上还是加不上加上，是否加上加不上，我们跟某一个属性触false进行绑定就行了，这是我们的class，同样的我们style也是一样，比如呢，我们这个标签上还有一个样式style。

这style呢，我们原本呢，如果我们写死，我们写个color red，然后呢，或者front size，我们再来加上一个样式，叫文字的大小，比如我等于90PX，好，我来保存一下页面效果呢是这样，而我们这个样式呢，我们一切也都希望是动态的，在这一块能进行设置，我们这个。

这一块属性的值变了，我们这个样式也能变，那怎么办呢？同样我们要给某个属性来绑定值，我们都是来写V杠榜的，接下来呢，我们这一块还是一样，我们写成一个对象，我们把这块剪切出来，我写成一个对象，对象里边呢拥有这些属性，首先呢，Color它的值是什么？我希望跟这一块动态绑定，诶比如呢，这一块也有一个属性叫color，行了，我们不叫color了，两个color看起来挺难看的，我们都叫COLOR1把这个叫COLOR1 color1的值呢叫read，那这样呢，只要COLOR1值是什么，那我们这块style样式里面的color，那就会变成这个，包括呢front size，这呢又有一个特殊的属性名啊，这个短横杠呢，这是非法的，那我们呢就可以给它加上单引号。这是没问题的，或者用驼峰命名，诶我们这个可以使用驼峰命名，我们唯有也是能识别的，那到底有多大，诶我们呢，给它绑定一个size属性，Size呢有多大它呢就有多大，比如呢绑成36PX，好我来保存一下，当然这少一个逗号来保存一下，现在来看页面效果好，这一块呢出错了。

出错的原因呢，我们这多了两个分号，我们这一块呢，要写对象的，所以呢把这个分号去掉，这就是我们对class与style的加强，我们只需要写一个对象，然后呢，它某一个属性值是多少，跟这进行绑定来保存，看一下效果，诶这个你好呢也出来了，包括呢无忧实例里边，哎，它的这个size有多少，包括color是什么都在这，我想要动态变了，比如呢，我们来给它变一个color，一它原来呢是red，让它变成blue，好，那这个颜色呢就跟着变了，这就是我们说的V杠棒的给任意属性绑定值。

固定语法就是V杠棒的冒号属性名，而且呢，它还可以有缩写，把这个V杠棒的直接删掉，那冒号属性名跟V杠棒的是一模一样的，但是呢，我们说我们学的这个V杠棒的也好，我们之前的V-test v-HTM2包括差值表达式也好，这个呢都是一个单向绑定的过程，也就是说我们这个数据变化，页面元素会发生变化，但是呢，不会出现说页面元素变了，那这块数据都动了，比如举一个例子，我们把这个span标签里边颜色呢，我给它改成blue，我的这个数据能不能变成blue来看一下，我呢在这右键检查元素，它的这一块呢，看color，我们来给它改成blue，回车这一块呢，确实是漏了，但是在我们5U实例里边，这个color呢，还是RAID，因为这是一个单向绑定，那接下来呢，我们来说一下双向绑定，就是我们这个V杠模。

不懂，也就是说页面元素修改了值，我们这个数据的值会跟着动，数据改了值，页面元素的值也会跟着动，那页面元素能要改值，其实呢，大家都见过，那就是我们这个表单项，表单项呢可以选中一项，不选中某一项，包括呢也可以来输入里面的内容，所以呢，我们V-model一般用于表单项，包括呢，我们后来学的VU的自定义组件，只有他们呢，才会有双向绑定的过程。好，那我们来举一个例子，还是我们这个div。它里边呢，有这么几个表单项，比如呢，我们第一第一个叫精通的语言，然后呢，它是一个多选框，那我来写一个input type，等于check box，这是多元框，那VALUE6的值呢，精通的语言里边有Java，比如我们在这写一个Java，然后我们来加一个比啊，但可能还有其他的我们来都加上。

PHP和拍。那现在呢，我们想要做的就是能实时的获取到有哪些被选中了，诶我们打印一下选中的是哪些，选中了哪些，那这个怎么获取呢？比如我给div给一个ID等于APP，好，我们使用view这么来做script，首先来new一个view，然后呢，EL还是来绑定我们这个APP元素，我们来写一个let vm等于它，然后呢，接下来我们在data塔里边，在data塔里边我们来准备来接收这个值，怎么接收呢？我们这个双向绑定，首先来使用一个叫V-model，就是页面变了以后呢，我们要把值放到进放进去，而这三个呢，都属于同一组多选框，所以呢，我们给V-model绑定同一个属性就行了，比如我们都都叫language。

这样呢，我来把这三个人，我们都叫V-model language v-model language，他的意思呢，就是他们是一组多选框，它们最终选中的内容被保存在data里边的language，我们把它放成一个数组，我来保存，来看一下页面效果，Open with live server来，我们精通的语言是哪些？我来选中Java Python，那效果是什么呢？F12看控制台，我you里边来，我们的language是Java，我们少选一个，诶这块就跟着动了，包括呢，我们想多选一个，我还可以VMDR，我们的这个language language等于什么呢？我来给它赋值一个数组，我想选中Java和PHP，我呢，直接来写上两个元素，等于PHP，好，我来一回车，我们发现呢，这两个就被选中了，那我们的数据变了，诶，我这一块数据变了，页面也变，那页面变了。

数据也变，这是一个双向绑定来想要实施的，把我们选中的结果展示在这，我们还可以这么来写，选中了什么，我来双大括号，如果我来写一个language，那这是一个数组，不好看，我呢可以调用数组的join引方法，哎，我们GS呢，对数组有一个join引方法，将它们里边的元素连接，用什么连接，用逗号连接起来，会生成一个字符串，我来保存一下，那在这呢，就能实时的看到选中了哪些，我来选一个，两个三个来又去掉一个，这样呢我们就OK了，而且呢，我们在未来开发呢，我们一定都是使用v model，将我们表单里边的某一项跟我们数据进行绑定，这样我们实时来获取某一项的值也会非常方便。