开发者学堂课程【微服务+全栈在线教育实战项目演练（SpringCloud Alibaba+SpringBoot）:前端技术-vue 修饰符和条件指令】学习笔记，与课程紧密联系，让用户快速学习知识。
课程地址：https://developer.aliyun.com/learning/course/667/detail/11308
前端技术-vue 修饰符和条件指令
内容介绍：
一、前端技术-vue 修饰符
二、条件指令
一、前端技术-vue 修饰符
1、总体介绍
在 vue 中有修饰符，以半角句号（.）指明的特殊后缀，用于指出一个指令应该以特殊方式绑定。它的主要作用是阻止失误的原本行为后果。例如 submit 事件要提交表单，如果加上修饰符，该事件就不会生效，它需要用自己的方法去执行，也就是阻止事件原本的默认行为，被称为修饰符。
类似用法：原本是提交表单，加上修饰符就不用提交表单，而是执行默认的方法。
2、用法
在事件后面，如 V-on:submit 后加 .prevent，再加上阻止默认行为之后要用的方法，这个叫修饰符。
<form action-“save”v-on:submit.prevent-“onSubmit”>
<label for=”usernamae”>
<input type=”text”id=”username”v-model=”user.username”>
<button type=”submit”>保存</button>
</label>
</form>
实际演示：
创建完成之后，先生成基本代码，下一步在 user 里定义一个空对象（user:{}）以保证操作方便。最终目的是阻止表单提交，具体操作如下。
(1)首先写一个最简单的 form 表单：
<form>
<input type=”text” name=”name”/>
表单中存在submit-提交按钮，将其运用进 form 表单中。
<form>
<input type=”text” id=”name”/>
<button type=”submit”>保存</button>
(2)表单里的提交部分
如<form action=”save”>（save 为任意路径）
这时保存，表单可以提交。但想实现点保存，表单不提交，让它执行 methods:{
onSubmit ()
方法。
首先添加具体指令和方法：
<form action=”save”v-on:submit.prevent= onSubmit >
在方法中补充逻辑(利用新学的知识)：
<form>
<input type=”text” id=”name”v-model=”user.name”/>
v-model 双向绑定，user.name 的变化引起 user：{} 的对应变化。
在方法中做简单判断：
methods:{
onSubmit() {
if (this.user.username) {
console.log(‘提交表单’)
} else {
alert(‘请输入用户名’)
}
User.name 内有值，直接输出提交表单，反之则是 alert 请输入用户名，也就是阻止事件的默认行为，执行给定的方法。
3、演示效果
空白页面上，若没有值，点击保存显示请输入用户名，有值时显示提交表单。
这一过程中用到到修饰符 .prevent，阻止提交去执行方法。
二、条件指令
高频使用：v-model,v-if,v-for
1、基本用法：
<input type=”checkbox”v-model=”ok”> 同意许可协议
<!- - v:if条件指令：还有 v-else、v-else-if 切换开销大 -->
<h1 v-if=”ok”>if:Lorem ipsum dolor sit amet.</h1>
<h1 v-else>no<h1>
用 v-If 做条件判断，OK 选中就显示if:Lorem ipsum dolor sit amet.，没有选中则显示 no
2、演示
创建并生成代码。赋予 data 初始值：
New Vue({
el:’#app’,
data:{
ok:false
补充内容：
<body>
<div id=”app”>
<input type=”checkbox”v-model=”ok”/>是否同意
使内容更丰富，用 v-if 做判断：
<body>
<div id=”app”>
<input type=”checkbox”v-model=”ok”/>是否同意
<h1 v-if=”ok”>尚硅谷 <h1/>
<h1 v-else>谷粒学院</h1>
以 v-if、v-else 做判断，OK 做双向绑定，会根据
New Vue({
el:’#app’,
data:{
ok:false
里的 OK：false 发生变化。
3、与 v-show 的对比
(1)概括介绍
v-show 与 v-if 效果相同：
<!-- v:show 条件指令 初始渲染开销大 -->
<h1 v-show=”ok”>show:Lorem ipsum dolor sit amet.</h1>
<h1 v-show=”!ok”>no</h1>
（2）区别：
v-if 是惰性的，在执行时才加载。如果在初始渲染时条件为假，则什么也不做——直到条件第一次变为真时，才会开始渲染条件块。
v-show 则是在运行时就伴随加载。不管初始条件是什么，元素总是会被渲染，并且只是简单地基于 CSS 进行切换。
一般来说，v-if 有更高的切换开销，而v-show 有更高的初始渲染开销。因此，如果需要非常频繁地切换，则使用 v-show 较好;如果在运行时条件很少改变，则使用v-if 较好。
常用的仍是 v-if，v-show 作为补充了解。
