概述

• Vue.js：核心思想是数据驱动
• Vue.js是当下很火的一个JavaScript MVVM库，它是以数据驱动和组件化的思想构建的。相比于Angular.js，Vue.js提供了更加简洁、更易于理解的API，使得我们能够快速地上手并使用Vue.js

vue常用指令：

• Vue.js的指令是以v-开头的，它们作用于HTML元素，指令提供了一些特殊的特性，将指令绑定在元素上时，指令会为绑定的目标元素添加一些特殊的行为，我们可以将指令看作特殊的HTML特性（attribute）。

1. v-bind 指令：

• v-bind动态地绑定一个或多个特性，可以在其名称后面带一个参数，中间放一个冒号隔开，这个参数通常是HTML元素的特性（attribute）。如v-bind: class。class可以和v-bind:class同时存在 ，也就是说有class了，再添加v-bind:class并不会覆盖原来的样式类，而是在原来基础上添加新的类名。可以简写成 :class
  实例如下：

    <div id="root" class="son" :class="name" v-bind:title="age"> 姓名：{{name}}<br>年龄:{{age}}<br><button v-on:click="age++">age++</button><br>v-on:click也可以换成 @click</div><script>let vm = new Vue({el : '#root',data : {name :'marster',age : 25}});</script>

• v-bind 还可以绑定对象、数组

    <div id="test"><!--数组语法：errorClass在data对应的类一定会添加--><!--is-active是对象语法，根据activeClass对应的取值决定是否添加--><p :class="[{'is-active':activeClass},errorClass]">lingling</p></div><script>var vm = new Vue({el: '#test',data: {activeClass: false,errorClass: 'text-danger'}})</script>

2. v-model 指令：

• v-model的本质是： 它负责监听用户的输入事件，从而更新数据，并对一些极端场景进行一些特殊处理，限制在 input、select、textarea、components中使用，
• 修饰符.lazy(取代 input 监听 change 事件)、.number(输入字符串转为有效的数字)、.trim(输入首尾空格过滤)。
  实例：

<div id="root"><input type="checkbox" v-model = "checked">我同意<br>{{checked}}<button v-bind:disabled="!checked">注册</button></div><script>let vm = new Vue({el : '#root',data : {checked : false}});</script>实现原理：<input v-bind:value="message" v-on:input="message = $event.target.value" />  //把input输入框的value属性值和vue实例的message属性进行绑定，同时监听输入事件。

3. v-for 指令：

• v-for指令基于一个数组渲染一个列表，它和JavaScript的遍历语法相似 v-for=“item in list” list是一个数组，item是当前遍历的数组元素 v-for="(item,index) in list"其中index是当前循环的索引，下标从0开始。实例：

    <div id="root"><ul><li v-for="user in users">用户：{{user.user}}，密码：{{user.password}}</li></ul></div><script>let vm = new Vue({el:'#root',data: {users:[{user:'shishi',password:'213456'},{user:'lingling',password:'654321'}]}})</script>

注意： 当v-for和v-if同处于一个节点时，v-for的优先级比v-if更高。这意味着v-if将运行在每个v-for循环中

4. v-if 指令：

• v-if是条件渲染指令，它根据表达式的真假来删除和插入元素， 基本语法：
  v-if=“expression”，expression是一个返回布尔值的表达式，表达式可以是一个布尔属性，也可以是一个返回布尔的运算式。实例：

    <div id="app"><div v-if="isMale">男士</div><div v-if="age>=18">age:{{age}}</div></div><script>var vm = new Vue({el: '#app',data: {age:25,isMale:true,}})</script>

5. v-show 指令：

• v-show不管条件是否成立，都会渲染html,即在dom树上有标签，但是display = “none”；而v-if只有条件成立才会渲染，条件不成立时dom树上不会有这个标签。实例：

    <div id="app"><div v-if="isMale">男士</div><div v-if="age>=20">age:{{age}}</div><div v-show="isMale">女士</div></div><script>var vm = new Vue({el: '#app',data: {age:18,isMale:false,}})</script>

注意： v-if有更高的切换开销，v-show有更高的初始渲染开销。因此，如果要非常频繁的切换，则使用v-show较好；如果在运行时条件不太可能改变，则v-if较好

6. v-else 指令：

• v-else指令与v-if或者v-show同时使用，v-if条件不成立则会显示v-else内容。实例：

    <div id="app"><div v-if="isMale">男士</div><div v-else>女士</div></div><script>var vm = new Vue({el: '#app',data: {age:18,isMale:false}})</script>

7. v-on 指令：

• v-on用于监听DOM事件,用法和v-bind类似，可以简写成 @ 例如给button添加点击事件：

    <div id="root"><button v-on:click="show(1)">显示</button><button @click="show(0)">隐藏</button><p v-show="isshow">不许人间见白头</p></div><script>new Vue({el: "#root",data: {isshow:true},methods: {show:function(sod){if(sod){this.isshow = true;}else{this.isshow = false;}}}})</script>

• 事件修饰符

stop 阻止事件继续传播
prevent 事件不再重载页面
capture 使用事件捕获模式,即元素自身触发的事件先在此处处理，然后才交由内部元素进行处理
self 只当在 event.target 是当前元素自身时触发处理函数
once 事件将只会触发一次
passive 告诉浏览器你不想阻止事件的默认行为

    <!-- 阻止单击事件继续传播 --><a v-on:click.stop="doThis"></a><!-- 提交事件不再重载页面 --><form v-on:submit.prevent="onSubmit"></form><!-- 修饰符可以串联 --><a v-on:click.stop.prevent="doThat"></a><!-- 只有修饰符 --><form v-on:submit.prevent></form><!-- 添加事件监听器时使用事件捕获模式 --><!-- 即元素自身触发的事件先在此处处理，然后才交由内部元素进行处理 --><div v-on:click.capture="doThis">...</div><!-- 只当在 event.target 是当前元素自身时触发处理函数 --><!-- 即事件不是从内部元素触发的 --><div v-on:click.self="doThat">...</div><!-- 点击事件将只会触发一次 --><a v-on:click.once="doThis"></a><!-- 滚动事件的默认行为 (即滚动行为) 将会立即触发 --><!-- 而不会等待 `onScroll` 完成  --><!-- 这其中包含 `event.preventDefault()` 的情况 --><div v-on:scroll.passive="onScroll">...</div>

注意： 使用修饰符时，顺序很重要；相应的代码会以同样的顺序产生。因此，用v-on:click.prevent.self会阻止所有的点击，而 v-on:click.self.prevent 只会阻止对元素自身的点击。

8. v-text 指令：

• v-text主要用来跟新textContent，可以等同于JS的text属性。

    <span v-text="msg"></span>等同于<span>{{msg}}</span>

9. v-html

• 双大号括号的方式会将数据解释为纯文本，而非html。为了输出真正的html，可以用 v-html指令。它等同于js的 innerHTML属性。

    <div v-html ="rawhtml"></div>div 的内容将会特换成属性值rawhtml，直接作为html进行渲染

10. v-pre

• v-pre主要用来跳过这个元素和它的子元素编译过程。可以用来显示原始的Mustache标签。跳过大量没有指令的节点加快编译。

    <div id="app"><span v-pre>{{message}}</span>  //这条语句不进行编译 直接在页面显示{{message}}<span>{{message}}</span></div>最终仅显示第二个span的内容

11. v-cloak

• 这个指令时用来保持在元素上直到关联实例结束时进行编译。

    <div id="app" v-cloak><div>{{message}}</div></div><script type="text/javascript">new Vue({el:'#app',data:{message:'hello world'}})</script>

12. v-once

• v-once关联的实例，只会渲染一次。之后的重新渲染，实例极其所有的子节点将被视为静态内容跳过，这可以用于优化更新性能。

    <span v-once>This will never change:{{msg}}</span>  //单个元素
<div v-once>//有子元素<h1>comment</h1><p>{{msg}}</p>
</div>
<my-component v-once:comment="msg"></my-component>  //组件
<ul><li v-for="i in list">{{i}}</li>
</ul>

上面的例子中，msg,list即使产生改变，也不会重新渲染。

13. v-else-if

• v-else-if充当v-if的else-if块，可以链式的使用多次。可以更加方便的实现switch语句。

<div v-if="type==='A'">A
</div>
<div v-else-if="type==='B'">B
</div>
<div v-else-if="type==='C'">C
</div>
<div v-else>Not A,B,C
</div>