Vue指令概述，v-if与v-show的区别

指令通过改变表达式的值从而响应式的改变DOM

1.指令

<p v-if="flag">ZMR</p>

这里根据判断v-if的指令根据表达式flag的真假来插入或者移除<p>标签

2.指令修饰符.

指令的修饰符通常使用"."来表示特殊后缀，表示指令应该以特殊的方式绑定，例如.prevent修饰符会阻止当前事件的默认行为，相当于调用了事件的event.preventDefault()方法。

<form v-on:submit.prevent="check">....</form>
new Vue ({
 el:"#app",
 methods:{
    check:function(){
       console.log("验证信息");
    }
  }
})

在表单的提交事件中添加了修饰符.prevent阻止表单的默认的提交行为，执行用户自己定义的check验证方法。

.stop修饰符将阻止事件向上冒泡，相当于调用了事件的event.stopPorpagation()方法。

3.Vue指令详解

   3.1 v-if

v-if指令可以完全根据表达式的值在DOM中生成或移除一个元素。如果值为false，那么对应DOM便会被移除，否则值就会被插入其中。

<div id="app">
   <p v-if="notice">公告</p>
</div>

new Vue ({
  el:"#app",
  data:{
    notice:true
  }
})

v-if是一个指令，需要添加到元素上才有效，想要切换多个元素，可以把<template>元素当做包装元素，使用v-if来进行切换。

<div id="app">
   <template v-if="notice">
     <p>公告</p>
     <p>限时全部免费,欲购从速</p>
   </template>
</div>

new Vue ({
  el:"#app",
  data:{
    notice:true
  }
})

v-else指令一般与v-if搭配使用

<div id="app">
   <span v-if="true">判断正确时显示我</span>
   <span v-else>判断错误时显示我</span>
</div>

v-else-if用于多重判断

<div id="app">
   <div v-if="type=='a'">a</div>
   <div v-else-if="type=='b'">b</div>
   <div v-else="type=='c'">c</div>
</div>

new Vue ({
   el:"#app",
   data:{
     type:'c'
  }
})

3.2 v-for

v-for可以根据一组数组的选项列表进行渲染，需要用到一个item in items 的特殊语法,item是源数据数组,items是数组元素迭代的别名。

<div id="app">
    <ol>
       <li v-for="todo in todos">{{todo.text}}</li>
    </ol>
    <button onclick="app.todos.push({text:"新项目"});">点击新增</button>
</div>

<script>
   var app = new Vue ({
     el:"#app",
     data : {
       todos: [
          {text:'学习Vue'},
          {text:'学习React'},
          {text:'学习微信小程序'}
       ]
     }
   })
</script>

v-for有父级作用域属性的完全访问权限，支持可选的第二参数为当前的索引值。

<li v-for="(todo,index) in todos">
   {{name}}在第{{index}}为{{todo.text}}
</li>

也可以用of来代替in作为分隔符，因为它是最接近JS迭代器的语法。

<div v-for="item of array"></div>

v-for的迭代对象

1.通过一个对象的属性迭代

<ul id="app">
  <li v-for="value in object">{{value}}</li>
</ul>

2.提供第二个参数为键名

<div v-for="(value,key) in object">{{key}}:{{value}}</div>

3.提供第三个参数为索引

<div v-for="(value,key,index) in object">{{index}}.{{key}}:{{value}}</div>

4.整数迭代

<div><span v-for="n in 10">{{n}}</apan></div>

v-for要是想渲染多个元素的块就可以用到上一级的<template>,只是起到一个包裹作用，并不会显示到页面上。

3.3 v-on

v-on指令绑定一个事件监听器，通过它调用Vue实例中定义的方法，v-on指令用于绑定HTML中的单击事件，v-on:click缩写为@click。

<div id="app">
   <button v-on:click="greet">Green</button>
</div>

var app = new Vue ({
   el:"#app",
   data:{
    name:'Vue.js'
   },
   methods:{
     greet:function(){
       alert(this.name + '方法已被调用')
     } 
   } 
})

3.4 v-show

v-show的用法与前面的v-if类似，可以控制元素的显示与隐藏。v-hide与-show相反。

<div v-show="true" style="display:none">我显示</div>
<div v-show="flase" style="display:none">我隐藏</div>

v-if与v-show的区别

1.v-if是动态的向DOM树添加或者删除DOM元素；v-show是控制display样式属性的显示与隐藏。

2.v-if是真实的条件渲染，因为它会确保条件块在切换中适当地销毁与重建条件块内的事件监听和子组件。v-show只是简单地基于css的切换。

3.v-if也是惰性的，如果开始条件为假，则什么也不做，v-show是在任何条件下都被编译，然后被缓存，而且DOM元素保留。

4.相比之下v-show要简单的多，元素始终被编辑并保留，只是简单的基于css切换。

5.一般来说，v-if有更高的切换消耗，v-show有更高的初始渲染消耗，因此，如要要频繁的切换，最好还是使用v-show比较好。