day03【项目前端相关基础知识一】/15-尚硅谷-谷粒学院-前端技术-vue修饰符和条件指令

在voe中呢，有一个东西叫修饰符，修饰符主要是干什么呢？咱说的简单点啊，它就是我先说的官方点啊，它就是阻止事物的原本的那种行为，用我们自己这个事件进行操作啊，这是一个官方描述，但说的通俗点什么意思呢？就是现在比如说我这事件，比如大家看这个事件，Submit这事件是要提交表单，但如果咱们加了就是之后，那这个事件它就不会生效，他要用我们自己这个方法去执行这个叫阻止试验的那个原本的默认行为，这叫修饰符。不知道各位是否记得啊，在我们学扎属这块中也有类似的用法啊，就这里边本来是挑表单，但是我们加上修饰符之后，它就不做提表单，而执行我们默认的这个方法啊，这个叫修饰符，那它的用法是怎么做的呢？在你的事件的后面，比如we杠，On click we on加后面加一个叫点play event加上它，然后加上你就是阻止默认行为之后要这的方法啊。

这个叫就是修饰符，那咱们来做一个演示啊，看一下它最终的效果是什么样的啊，我们来演示一下啊。就是事件试完了，然后咱说这个。修饰符就是第六个。啊，Voe。一个叫修饰符。把这个创建之后啊，同样先生成它那个基本的代码，然后生成之后，为了方便啊，我在user侧里边，咱先定义这么一个空的一个对象啊，为了咱们后面操作方便，然后定义之后，因为咱们现在我想这么演示，就是阻止这个表单提交的这么一个事件啊，阻止他进行这个操作，那这个怎么来做呢？现在我们先写一个最简单的一个表单啊，咱来一个表单。啊，为了咱们方便啊，那我写一下啊。我就来这么一个form表单。

这各位应该很熟悉了啊，在缝里边呢，比如说写这么一个。Input type啊，等于这个叫test啊，然后比如说name啊，咱就叫这个name啊，这是一个普通的竖项，就一个表单，然后表单中呢，肯定有一个就是萨me，就是一个提交按钮啊，这个我就复制了啊，把这个提交按钮打给他。拿过来。啊，这是T按钮啊，包括比如里边有name有ID啊，我就加个ID了啊。这是我们写的一个基本的一个表单啊，而在表单中各位应该知道啊，表单的form里边应该有那个提交那部分，比如说我们现在啊，可以写上这么一个什么action等等啊，比如说我就随便来一个。这里啊，我们叫这个action。Action中加路径啊，随便写个路径。然后这个选完之后呢，当我们现在比如一点保存这表单应该是可以提交的，但是现在比如说我想实现当点保存表单不提交，让他去执行我们那个方法，比如说一会儿我在这位置咱写个方法，刚才刚写过啊，咱来一个叫。

Method。大括号里边加个方法，假如方法我就叫这个on submit，这个叫啊。咱要这个方法。一会儿咱让他就用这个方法，那怎么做呢？它的做法就是在里边呢，咱加个这个指令叫V杠啊冒号，这个叫sum，然后这个加完之后，后面加方法，但是这么做呢，它不能阻止默认行为，咱需要加一个修饰符，就是这个东西叫pre event，把这个加上。啊，那我直接啊，把这就分过来，咱敲错啊，然后加上之后在里边加上咱这方法，比如我叫on，就叫on some。把这个加上，而这样的话，当你点保存，它就不会直接提交表单，而去执行你里边的这个方法啊，这是它的这么一个特点，那这个方法中，咱给他稍微写点逻辑啊，什么逻辑呢？比如说我这么写啊，用一下咱刚才学的知识。

V-model。不是，各位是否记得啊，V-model是不是叫双向绑定啊，那比如说我这么写啊，里边我来一个叫user.name。这什么意思呢？你看啊，User这个对象是不是user，所以这个用点name，它的值跟这里边要对应上啊，就是这里边有值，它里边有值，它里边它一变化，它也会跟着变化啊，所以咱们这么来做，那这个做到之后，咱在这方法中，比如说给它做一个简单判断，比如说现在我这么做啊，如果你这个没有值，那我们就提示他说请你输值，如果有值的话，我们做个输出，比如输入它是提交表单。就做一个基本判断，也就是里边的这个代码if，如果里边有值啊，就是没有有值，我们就提交没有值，就是其实一个数据户名啊，就是这么一段代码。

这我就截过来啊，就是一个简单的异步判断啊，这都是前端的写法。我再说一遍啊，这怎么做到的？就是现在呢，在里边我们有一个input表单数框，这是条中的东西，在里边V-model叫双向绑定，而绑定中呢，再让user跟它对应，就这里边name值跟它是对应关系，那这里边当我们点保存提交，因为咱们写了阻止那个事件的默认行为的修饰符，它会执行我们的on sum密的方法。在on some的方法中，我们做了判断，如果这个user.name它里边就是啊，Name。呃，Username一样的啊，如果这username里边就是有值，我们就直接输出提交表单，如果里边没有值，那我们就直接额了一个叫请输入用户名，就是阻止事物事件的默认行为，让他执行我们这个方法。

啊，就是这么一个东西啊，C单把它做了一个最基本的一个编写啊。这么一个写法啊，然后洗完之后，咱下面把效果我们来试一下啊，看一下什么样的效果。我把F12打开啊，所以大家看啊，目前这里边是没有任何东西的，然后我点保存，你看啊，是不是弹购框了，说请输入用户名，那比如我现在随便输一些值，里面有值了，我再点保存，你看下边输出的是不是叫提交表单啊，咱做的就是效果没有值。提示请输用户名，当有值之后再点保存提示，你叫做提交表单啊，这个是我们要做一个效果，而这过程中咱就用到了这个叫修饰符pray event，本来它是提交，但是现在让他去执行我们这个方法。啊，这是我们说的这么一个特点啊，这些大家了解一下啊，因为后面这种方式用的并不多啊，但一般也很少这么去用啊，但是你知道它能实现这个效果啊。

包括在里边应该也有类似的东西啊，所以大家这个了解一下啊，这不作为重点啊，就是你知道它是什么意思就可以了。我们就点出来了啊，然后这个点了之后呢，咱在voe这个基本的语法中，还有最后两个，我要特别说明啊，最后两个是最重要的两部分，就是咱们讲这么多，最后两个是用的最多的啊，包括啊前面那个V-model，还有最后这个V-E，还有这个叫V-for，特别是V-for用的特别多。那这两个分别是什么呢？第一个叫V-if，就做这么一个条件判断，它有一个叫V-for，它做的主要是一个循环便利啊，这是两个最重要的东西，那咱把它就可以做演示，那怎么演示，咱先大概浏览一遍啊，然后咱们写在哪，首先咱看V-E啊，它的做法就是呢。

比如咱以这个为例啊，我这里边呢，是写了这么一个猜box，不知道各位是否记得啊，也是H阶段的东西，猜box应该是一个什么。是不是一个复选框，就是你可以选多个纸，就一个那个白色的方框嘛，复选框，然后在这里边，比如现在我一个V-model啊，跟它是双向绑定，当这值选中，我们就直接提示它，如果没有选中，那就提示它里边你看加一个V-if v-else，当OK，你选中。这就输出。当OK，你没有选中，那这就输出就用V-if做这么一个条件的判断啊，这个是咱们的这么一个基本用法。啊，所以咱们下面把这个给大家就来做一个演示啊，关于这个条件指令叫V-if。这个啊。我写一下，就是我们的第七个。E的。指令V-if。

这个啊，我们写出来，然后咱们把代码生成，生成之后我在这个date里边，我们就给它写个初始值，比如来一个OK啊，咱就默认叫false这个值，然后写完之后在里边我们就写上这么几个内容啊，首先我先写这么一个就是。复选框，它叫这个check box啊，写上它，然后里边来一个叫V-model，我们加上这个叫OK。呃，这里啊，OK。把这个啊，我们先加上，然后加上之后我们先简单看一下啊，比如说为了明显前面要加个内容啊。就是这个叫是否同意啊。先让它，那我们来执行，先看一下页面的效果，大家看啊，这个是不是一个负向框，就是你可以选可以不选啊，就是check box，就这样子，那现在比如说我们给他做个判断，当他选中我们输一些内容，当他不选中，我们再输一些内容，给他做一个判断，那怎么做用到咱们说这个叫V-if。

啊，那我来判断一下啊，我用H1标签怎么判断，咱加个叫V杠，If里边加上你的值，比如说OKOK是true或者false啊，但默认是true，然后这里边比如写一个啊，随便写一个，如果是OK，我就输入这个，比如这个就是。占V谷啊，注意它，然后这里边比如说再来一个H1，这个里边我叫V杠，还有一个叫else。这里边比如输入这个就是什么鼓励学。啊，鼓励学院，这是我们做的输出，就是它如果是选中这个不选中另外一个值，用V-if v-else做判断，而咱的OK啊，在里边我们做这个双向绑定，当你选中不选中这个值，会根据它发生变化啊在里边能取到值，然后做判断，If else这个效果，这个叫V-if，就是咱说那个条件指令。

啊，大家把这个知道啊，然后这个写完之后，咱下面把效果我们来试一下啊，看一下什么样的效果。我外执行啊，大家看啊，比如现在我选中。是不是上归股，我不选中股里续外，选中上硅股不选中股里虚外，是不是就可以了，咱们要做到这个效果，通过V-E股判断是否选中，选中不选中显示不同的效果。啊，这是我们一个条件的指令，跟咱们在GLTL阶段学那个C冒号if是差不多的，啊，只是CE，你看没有那个else，它里边有V-if v-else。这个啊，我们就演示完了啊。这么一个效果啊，我写一下。条件指令啊，V-if，还有一个叫V-L。这个啊，各位把它要知道啊，后面咱会经常用到这种判断。包括啊，在这里边还有一个东西叫做V杠售，就是这两效果一样的，这个我就不演示了，跟它效果没有区别，而这两个底层有区别啊，就这个V-E啊，它里面个特点叫什么。

这叫做惰性的，就是它是在你执行的时候才加载，但是V杠受是你一就是一运行这个程序，把所有都加载啊，所以咱一般用的是V-E啊。这了解一下啊，这V-show一般基本上不用，用的都是V-if做判断。啊，主要就是这个东西啊，这个了解一下啊。所以咱现在把这个条件指令演示完了啊，就关于这个东西啊，就刚才演示的包括一个修饰符，还有一个条件指令。