39、前端基础-Vue-指令-v-on、v-for、v-if

前面呢，我们说了一下单向绑定和双向绑定，接下来呢，我们再来看一下VU里边的其他指定，那么先来说v on vn呢，我们之前说过这是用来绑定事件的，还是我们这个例子有多少个在我们每点一个，加一个，取消一个减一个，好，我们把这个代码呢先写完，还是这个script，我们来又一个view。New view，我们来直接掌控我们这个div，我们元素呢是APP啊，然后我们来写一个data，这到底有多少个赞呢？我们希望能有一个数量，比如我们这个数量呢，统计为number number的值呢，默认是一，那有多少个赞我们就在这来显示一下，每当我们想要给它加一个赞，我们可可以为这个按钮绑定事件，我们使用VR绑定什么事件呢？V on冒号click，我们绑定单击事件，那么这个单击事件呢？我们可以直接给里边写GS片段操作我们这个数据，那我们就可以写上number加加，我来保存open with live serve，你打开看一下，诶，现在呢，有一个在我来点点点它会加上，包括呢，我想要取消，我也可以写V杠二，我们除了能直接操作数据外，我们也可以在这儿调用方法，比如呢，我们在这定义一个方法，Muscles。

那们将所有的方法呢，都放在muscles里边，那么第一个方法叫can，哎，我们取消在这方法的声明呢，我们可以用新的语法，我们这么来写，而且呢，在这个语法里边，我们可以直接来操作，This，哎，Z，当前对象就是这个view实例里边的number数据，哎，它data里边的数据可以直接操作，不用写data什么好它呢，减减，那就是减赞，好，我们希望呢在这cancel。可以取消cancel，我们来保存测试一下，我们呢给它加赞减赞都是没问题的，而且呢，我们说这个榜事件还可以简写，那这样呢，V on冒号可立，我们可以直接简写成ant符，可Li，那ant符呢，那就是绑事件，我们来测试一下，点上去减下来，这是没问题的，而且呢它还支持更多高级操作，比如我们在开发中经常要使用阻止事件的默认行为，包括阻止事件冒泡等，我就可以使用事件修饰符。举一个例子，我这儿呢有一个大div，有一个小div，如果我给他们两个呢，都绑定了单击事件，当他一被单击以后呢，会调用hello方法，那这个hello方法呢，非常简单，就只是呢打印一个被点击了，我们在hello方法里边，好，我们就alert一下。

来我们就叫点击了，那这样的话呢，我们大div点击了以后呢，它会弹框，小div也一样，那快速的把时间我们可以用antf click click好我们就叫哈来测试一下效果，现在呢，当我们来点小div，它会弹出点击了一次两次，这是由于事件冒泡，点了小div相当于点了大div，相当于呢有两次弹框，那我想阻止事件冒泡，怎么阻止呢？我们就可以使用事件修饰符，事件修饰符呢，其实就是在我们这个指令的后边，通过点咱们这个后缀来做的，我们不用呢，提取了这么多的事件修饰符，比如stop阻止事件冒泡，还有prevent来阻止默认行为，我们来测试一下，我们现在来阻止我们这个冒泡，我们可以直接给小div上，我们来click click.stop相当于呢，它发生事件以后呢，不要冒泡传到上边，我们现在来测试一下，我点小div，它只弹。

一次点击了不会弹两次，包括呢，我们来说一下阻止默认行为，比如呢，我们这有一个超链接，当我来一点击去百度好先弹一次框，弹框的原因呢，是因为我们这儿有时间冒泡，点了A标签相当于点了小div，好弹框完了以后呢，又会跳转过来，那我们不想让它跳转，我们就可以这么来做，安特福可Li还给它绑定单击事件，但是呢，我来阻止它的默认行为，Prevent好，我来保存一下，来测试一下效果，我点一下诶只有弹框，并没有跳转过去，当然点击了以后想要干什么事，那么这当然可以继续来调其他方法，比如呢，我们就让他弹个框，我们现在来测试一下效果，当我点击了以后，只弹一个点击了框，哎，又弹了一个，点击了框，弹两次，那是因为我们自身弹一次往上冒泡，再弹一次，我既想要阻止默认行为，还想要冒泡，我们还可以继续往后，后缀就行了，来保。

存先来看效果，点一次只弹一次，而且呢也阻止了默认行为，这是我们说的事件修饰服务，还有更多其他的修饰服务，比如我们这个大div，我们只想被点击一次，就可以给上面写一个ones，我们来保存一下，现在大div呢，我们来点一次，点击了我们再点它就已经不弹框了，我们再来看一个叫按键修饰符，比如呢，我想来监控我们这一块呢，按了什么键，我们来执行一个动作，假设呢，我们这个input框，我来V-model，我呢跟某一个东西进行绑定，我跟number进行一个双向绑定，这样呢，Number变，我们这个input框也变，但我现在想是这样，当我按上箭头，那给这个number每次加二，按下箭头给它每次减二，那我们呢就可以绑事件，怎么绑呢？还可以是VR，但是呢，我们现在啊，绑的也不是点击事件，而是自定义的这些键盘，那我们就可以使用按键修饰符按键。

这修饰符呢，我们就是V-on，冒号KF，当我们按了哪个键来，我们VR冒号KF按了哪个键呢，我们可以来写键的这些k code，也就是说键码，这个键码呢，大家可以去网上来查出它的所有键码，但是这个呢记起来比较麻烦，我们尾U里边抽取了我们常用的按键的这些键码，比如我要按上键，那就是点up。

那这块呢，就变成当我这个k up，我这个键按了，按了哪个键，我的上键以后，比如我想要做的事是给number。加等于二，给number呢，每次加二按下键以后呢，我也想干一件事，那我们说绑时键更快的呢，就是ant服，哎，V on变成ATT服，还是k up，那按到哪个键呢？点down按下键以后呢，给它进行减number，减等于二，好，我们来保存一下，看一下效果，现在呢，我们来鼠标放在这儿，我按上键，诶我再按上，我再按上，它加了，我按下下下它减了，而且呢，我们还可以给它绑组合键，比如呢，我ctrl click click，我按住CTRL键把它点一下，它直接变成十，那我们想要做这个事怎么做呢？还是来绑事件，但是呢，我们现在要绑组合价，组合键呢，我们就可以使用这种写法，还是按这个价，我们有多种价，那第一个键，第二个键，我们有几个键就往后写就行了，那现在呢，我想要c c click，那我们就可以这么来写，我们现在enterf c click。

这是绑了一个单击事件，同时呢要按上CTRL键，那我们继续CTRL，当它们两个一写以后呢，我们让number呢直接变成十，好，我来保存一下，现在呢看一下效果，我鼠标放在这，我光单击是没啥用的，往CTRL加单击，诶它就会呢变成十，那更多玩法呢，大家都可以参照官方文档，那接下来呢，我们再来看一个叫微for，这个微for呢，一听就是用来做便利循环的，举一个例子，我这儿呢准备好了这个div和一堆数据，我们这儿呢有一些用户，每一个用户呢都是一个对象，这里有五个元素，我们希望呢便利显示到这个Li里边，那我们用什么指令呢？我们可以用view有提供的v for，因为每遍历一个要生成一个Li，所以我们将v for写在Li上，然后接下来v for的语法是这样子的，首先呢，这是我们要遍历的元素，接下来呢，这是我们当前遍历。

的元素，也就是item in items，那我们微for呢，就这么来写，我当前呢要便利这个user，整个user呢，在这个users里边，我来一保存，那便利出数据，我想要展示给大家，那么直接用双大括号差值表达式，当前便利的呢是这个user对象，那就是每一个元素，我取出usera里边的name，诶，这是它的名字，比如还有其他信息，来我们来打印一下，带个箭头，好看，好来打印一下它的性别，比如user点真的。包括呢，我们再来打印一下它的。

年龄写一个user.h好，来保存看一下效果，右键open with live server来，我们发现呢，这一块就便历出来了，这就是我们说的便历v for，包括呢，我们便历的时候呢，我们想要获取当前元素，到底是数组里边第几个，哎，我们也可以拿到数组的下标，那我们便历呢，只需要这么来写，我们呢，在这遍历出user的，我们给它后边再来写一个变量，后边的这个变量反正名无所谓ABCDEFFG，它都代表的是咱们这个当前元素的索引，哎，那当前索引，哎，我们这个当前索引呢，我们也可以取出来，当前索引呢，直接来写index，好，我们来保存，再来看一下效果，这01234，诶，这是没问题的，我们除了遍利，我们这个数组也可以来遍历对象，比如举一个例子，我们在遍历对象的时候呢，我们是获取对象里边每一个属性的值。

这是第一种便利方法，我们也可以获取每一个属性的键值，对，包括呢键值对，加上它的索引啊，我们呢，还是在它下边，我来直接写BR。当前正在并列的这个元素呢是user，而且这个user呢是一个对象，我想看出对象每一个属性名叫啥，它的值是什么，来我们这个对象信息，我呢在这打印一下，我还可以直接继续来写，比如呢，我们对象信息我们就写成一个代，我呢V-for，我来遍历，遍历哪个对象呢？那就是当前对象，诶我正在遍历出来是userz，这个userz对象，然后呢，我要获取它里边的键值盾，那我们就来写一个应，我们首先写一个VV应的话呢，我们这个V只能代表我们对象里边这个属性的值，好，我来保存一下，我们来看效果，现在呢，就看到对象信息，古力娜扎女二十五行，我们给她中间呢加上一些分割符保存一下，那我们把属性的值这就取出来了，当我们同时想看到属性的名，那我们就可以这来写，那第一个是值，第二个呢就是。

价，那我们这个见支对呢就能写出来了，那K这是它的K，这是它的V，好，那们这呢，每一个遍历我们都这么写上，保存一下，看一下效果，诶K呢是name只是它K呢是真的，只是它edge是它，哎我们每一个当前对象信息都会打印出来，包括呢，我们还可以要到当前属性的索引，哎，我们写一个A，那就是当前属性的索引，这个索引呢，我们也可以取出来，大家看一下保存。那现在呢，看到我们这个name属性是第一个属性，真的是第二个属性，A是第三个属性。并且呢，我们给大家这儿规范一个细节，我们在无论何时便历的时候，我们都推荐使写上这个K属性，那么这儿有一个叫冒号K，哎，我们说这个冒号其实是V杠棒的的这个缩写，那这个K呢，就是用来区分唯一的这个元素，哎，我们每遍历的这个元素跟元素之间有区别，VU呢，只要能区分出我们当前正在变历的是哪个5U呢，就可以提高它的渲染效率，至于怎么提高的，我们就不说了，当然大家呢，在这记住这个细节，那我们来推荐，如果我们在这嘞，便利的是一个对象数组，比如我们这是用户信息，有可能从数据库里面查出来的，那这个K呢，一般我们都这么来写，那就是当前正在便利对象的，那有ID了，写ID，假设我们这个名字是唯一的，我就可以写name，这样呢，相当于来区分出了每一个对象跟每一个对象的不同，只要这个取出来的值是唯一的就行。包括呢，如果我们遍历的是一个。

常规的数组，比如我们这有一个，这有一个numbers numbers里边呢有1234这么四个数，那我们想要区分它们呢，我们就可以使用索引，我们来在这来写一下u Li里边，那么这个Li，我们V-for，我们要遍历这个数组，这个数组呢是numbers，我们number in numbers，那我们想要区分它们呢，我们就可以冒号K，那它们唯一能进行区分的，因为我们这个数组里边的这个数字可能是有重复，我们不能拿这个数字值在这区分，这样呢会有一些问题，所以我们就直接拿这个索引就行了，来我们拿一个唯一能区分的东西在这区分啊，我们以后呢，推荐便利的时候呢，都写上冒号K来区分不同的元素。

接下来呢，我们再来看一下VF和V受，这个if呢，一听就是用来判断的，只要判断为触，那我们这个元素呢就会被渲染，而这个瘦呢，就是只要判断为处元素呢会被显示，它们的效果呢，都是这个元素展示不展示，但实际呢稍微有点区别，比如我们这儿举了一个例子，我这呢元素都写好了，这有一个按钮，当每次点击的时候呢，数就变成它相反的值，那数原来是触，点一下变false，再点一下变true，那一会显示，一会不显示，那我们呢就可以使用VF，先来测试一下，我用avf，如果这个受是true的，那我们这个H1标签就会整个显示，如果是first，那就不显示，那v show也是一样的效果，但是它俩有啥不同呢？我们简单看一下就行了，右键open with live server来F12打开控制台，我们先来看这个效果，我们来点我啊点我啊，它们这显示不显示，但是呢，两个稍微有点区别，我们上边呢是用VF。

的，我们来看，当我一取消的时候，上边的H1不见了，下边呢，虽然不显示，但是它是利用样式display now隐藏的，我们把这个样式如果去掉了，这还照样显示，但是我们上面这个标签呢，已经不见了，这是这两个显示元素的区别，那同样呢，VF的更多用法，它会结合else else if等等完成更强大的功能，举一个例子。

我们这呢，还有一个按钮，我们来每次点击的时候呢，给random赋一个值，Random默认是一，每次赋值呢，相当于给一个随机数，这个随机数呢，我们每次判断一下，当这个随机数大于0.75，诶我这是用v if大于0.75的时候呢，我们这个H1标签就会显示，而如果我们大于等于0.5，我们这个就会显示，我用的是else if，相当于我们Java里边的if else if else if else，那就是前面成功了就不用走后边了，前面不成功走后边，那我们来测试一下这个效果，Open v字肋server来我们来随便给它生成一个值，现在呢是0.90确定的，诶0.2，我们发现呢，显示了这个大于等于0.2，显示0.4，那为什么呢？就是由于这个是VF，是判断失效的，那这个H1没有，那这个呢，判断也是失效的，这个H1没有，那这个判断是成功的，那就出来了。

而且呢，我们这个VF还可以与v for结合来完成一些功能，比如我们在这儿便利我们这个用户的时候，我只显示女生，那我们呢就可以给这个Li再来加上判断条件，而且呢，这个判断条件的优先级是要低于v for的，比如呢，V for会先便利便利出当前对象呢，我们就可以直接拿着当前对象进行判断，比如我来判断user里边的真的他呢，必须等等女才行，好，我来保存一下，看一下我们的页面的效果，那这一块呢，全部显示的是女女生，没有我们这个张三男。