（九）vue.js指令详解

(1)基本指令

①　v-cloak 【编译完成就销毁】
a.作用
v-cloak指令并没什么明显的作用，不过他会在随着vue实例结束编译时，从绑定的html元素上移除。
b.写法
直接将他写在标签上就可以了，不需要给他赋任何值，类似于h5中的一些不需要写值的属性。

c.用途
虽然这个标签本身没什么用，但是由于它具有【随着vue实例结束编译时，从绑定的html元素上移除】的特征，所以我们可以解决如下问题。
1.问题如下
当我们通过直接引入vue.js文件进行简单开发时（不使用webpack和vue路由）。如果网速较慢，vue.js文件还未加载完成，那么在页面上会直接显示 {{str}} 等还没编译的模板信息。【我们可以通过开断点开模拟网速过慢的效果】
直到vue实例创建，模板被编译后，页面才会被替换为真正的内容，所以这个过程就会发生一种闪动的情况。
2.解决方式
在绑定vue实例的根结点标签上添加指令v-cloak,然后再css中通过属性选择器通过v-cloak属性选中这个根标签，然后设置display:none,
【这样当模板还未编译时，整个页面都不会显示，而是处于隐藏状态，不会发生闪动。而当页面模板编译完成后，由于v-cloak会自动解除绑定消失，用于隐藏页面的css代码会自动失效，页面会显示出来】
代码如下：

3.提示
一般情况下，v-cloak是一个解决初始化慢导致页面闪动的最佳实践，对于简单的项目很实用，但是当我们使用webpack+vue-router路由来对前端进行工程化时，项目的html结构就只有一个空的div元素，剩余的内容全部都会由路由去挂挂载不同的ui组件，此时就不再需要v-vloak指令了。
②　V-once 【只渲染一次】
A.作用
同v-cloak指令一样，v-once也不需要表达式或者值，不过他具有一个作用，那就是具有这个属性的标签或者组件及其子元素，只会渲染一次vue实例中的数据。在渲染一次后，不管实例数据怎么变化，ui界面不会再进行渲染改变。
B.写法
直接将他写在标签上就可以了，不需要给他赋任何值，类似于h5中的一些不需要写值的属性。

C.用途
V-once在业务中很少使用，当你需要进一步性能优化时，可能会用到。

(2)v-if之条件渲染指令

①　前言
和js中的 if、else、else if语句类似，在vue.js中条件指令可以根据表达式的值在DOM中渲染或者销毁元素/组件
②　v-if 、v-else-if 、v-else
下面代码含义为：
已知vue实例中有一个变量n,
如果n=1,就渲染h1，如果n=2,就渲染h2 , 如果n=3就渲染h3, 否则渲染h4.

③　注意
1.为了使数据与视图双向绑定，请去掉div标签上的v-once指令。
2.v-else 、v-else-if 必须跟在 v-if 或者 v-else-if之后。
3.V-if也可以如同js中的if一样，独立出现一次或多次

<div id="app">
<h1 v-if="n==1">我是h1</h1>
<h2 v-if="n==2">我是h2</h2>
<h3 v-if="n==3">我是h3</h3>
<h4 v-if="n==4">我是h4</h4>
</div>

4.如果一个标签元素或组件通过v-if隐藏（实际上是销毁）了，那么他的所有子标签子元素等都会进行隐藏（实际上是销毁）

<div v-if="n==2">
<h1>我是h1</h1>
<h2>我是h2</h2>
<h3>我是h3</h3>
<h4>我是h4</h4>
</div>

不过这样的写法会把div标签也给渲染出来，如果你只想纯粹的渲染一些元素，而不想渲染包裹他们的父标签元素的话，那么请使用template标签。如下

<template v-if="n==2">
<h1>我是h1</h1>
<h2>我是h2</h2>
<h3>我是h3</h3>
<h4>我是h4</h4>
</template>

这样最终渲染完成后不会包含template标签。
5.Vue渲染时出于性能与效率考虑，会尽可能的复用已有的元素而非重新渲染。
实例说明—基本代码如下：

然后你先在输入框中输入一些值，然后再修改n的值，会发现你所输入的值并没有发生改变，，但是当你把值清空后会发现placeholder的值变了【这说明vue复用了你的上一次的input标签，以提高性能】

6.如果你不想复用已有元素，那么可以使用vue.js的key属性，他能阻止元素复用。Key的值必须是唯一的。（只有加了key的才能阻止复用）
如下，这样再进行切换时就不会复用上一次的input了，不过其他没加上唯一key的标签还是会被复用。
<input placeholder="666" key="i1" v-if="n==1"/> <input placeholder="777" key="i2" v-if="n==2"/>
④　v-show
作用
v-show指令的用法和v-if基本类似，可以通过一个条件来决定是否显示某些元素。
本质
不过有一点不同的是，通过v-if实现的显示或隐藏是把元素进行销毁或者生成，而通过v-show实现的显示或者隐藏这是给元素添加的display:none属性。
用法

<input v-show="n==1" key="k1" placeholder="hello" />
<input v-show="n==2" key="k2" placeholder="你好" />

然后这里由于v-show使用的是css样式display:none来控制的元素隐藏和显示，所以我们即便加了 key属性也没用。

v-if与v-show的选择
V-if
首先v-if才是真正的条件选择，然后他每次会根据条件重新创建或删除元素，性能开销较大，适用于不经常改变的场景。
V-show
V-show是通过css样式来实现元素的显示与隐藏，性能开销小，适用于频繁切换的条件
注意：v-show指令不能在标签上使用（就等于指令不存在）

(3)v-for之循环渲染指令

概览
我们已经知道，在js中，如果我们要遍历一个数组或者对象，我们可以使用for或者for-in循环。
在vue.js中的话，如果要遍历数组或对象的话就要使用v-for指令。这个指令和for-in循环非常类似。
一个简单的示例

用of来代替in关键字
实际上我们也可以使用of来代替in关键字

v-for指令-渲染其他各种标签
v-for指令常用于渲染列表，但是还可以渲染其他各种标签

使用template标签来包裹要渲染的一批元素
如同前面我们讲v-if指令时一样。当我们要一次同时渲染多个元素在网页中时，我们可以使用标签来包裹这些元素，而且渲染完后template标签会自动消失而不会进入到网页的dom树中。


V-for的可选参数
记得我们学习js时，对于forEach方法 和 map等用来遍历数组的方法，他们会接受一个回调函数作为作为参数，然后这个回调函数本身又能够接受三个参数。

这三个参数分别表示【当前元素值，当前元素下标，数组本身】，如下：

在vue.js中也是类似的，我们的v-for指令在遍历时也能够给上可选参数：

1.遍历数组时，遍历的分别为值与下标。
2.遍历对象时，遍历的分别为每个属性对应的值，键，下标【索引】。 

如下

V-for还可以迭代整数
实例：

V-for渲染数组之双向绑定
vue的核心是数据与视图的双向绑定，当我们修改数组时，vue会检测到数据变化，所以用v-for渲染的视图也会立即更新。
如：通过以下方法使数组本身发生了变化时会触发更新
Push(),pop(),shift(),unshift(), splice(),sort(),reverse(),
但是如果我们通过下标修改数组，或者直接修改数组长度时，vue是不能检测到的，也不会触发视图更新。
如：
vueAPP.items[0]=11;
vueAPP.items.length=1;
这两种方式都不会被vue检测到，都不会触发视图的更新。
如果想这样做又想被vue检测到，那么请使用splice方法来代替
扩展
通过Vue对象的set方法可以直接实现通过下标修改数组内容，且会被检测到从而更新视图。
如：

(4)v-bind之与class与style绑定详解

前言
我们已经知道了v-bind指令可以绑定标签的属性，而class实际上也只是标签的一个属性，所以我们可以使用v-bind指令来绑定标签class以控制样式，然后我们也知道了v-bind:的语法糖（缩写）为一个冒号。
现在我们就来探究下通过v-bind来绑定class的几种方式
1.给v-bind:class设置一个文本值
即当作一个普通属性来绑定一个值，这是最简单的绑定

注意：
即便我们使用了v-bind:class=class值 后，我们仍然可以同时使用class来赋值，和原来的方式一样。（这是因为class本来就运许多个值，如果是其他属性，那么一般而言是后面的覆盖前面的值）
2.给v-bind:class设置一个对象【推荐】
可以通过v-bind直接给class绑定一个对象，这时候，对象中的每个属性的键（key）都是class的一个值，而这些属性的值就决定了是否把这个属性的key作为类名应用到标签上。
【这就更加利于我们控制class,毕竟对象操作起来比字符串方便多了。】

实例
当属性的值为false时，对应的属性的键就不会作为类名应用到标签上，为true时就会被应用上去，所以下图中就只有divblue会被作为class的一个值应用到标签上（如果都为真，那么由于class本来就接收多个值，所以所有的键就会全部作为calss的值，但是当样式冲突时，标签最终决定使用哪一个class，还是根据类本身定义的位置来说的，而不是我们在标签中放置的位置）

我们还来可以直接在v-bind:class上写对象，如下：

3.给v-bind:class设置一个数组
我们还可以通过v-bind:class给标签绑定一个数组，这样数组的每个元素都会作为标签的calss属性的一个值，如下：
1)基本实例

由于js是弱类型的语言，所以我们可以给数组元素放入三元表达式，或者放入对象等
2)给数组元素放入三元表达式

3)给数组元素放入一个对象

4)直接将数组元素写在标签上

<div :class="['div50', { divred1: true }]">

如果数组中的元素是vue实例中过的数据，那么可以直接写变量名，而不需要如同'div50'
一样给上引号。
4.给v-bind:style绑定内联样式
1)以前直接在style上写行内样式

<div style="color:yellow;font-size:50px;">

2)在vue中可以通过v-bind:style绑定行内样式，且有对象与数组两种写法：

A.对象写法【推荐】

B.数组写法
实际上数组写法，也没有离开对象写法，数组的每一个元素仍然是一个键值对对象，数组写法不常用，对style绑定行内样式时，建议使用对象写法，操作会方便很多。

C.提示
如果要使用行内样式，请优先使用v-bind:style，而不使用style，原因如下：
1.V-bind:style 控制起来更加方便
2.使用V-bind:style时，对于一些特殊的css属性名称，vue.js会自动的增加前缀。

(5)v-on之与方法与事件绑定详解

1)概念
前面我们已经知道了，v-on指令可以绑定一个事件，然后他的语法糖写法为缩写@，如下：

在上面我们是把事件函数fn写在data对象中过的，其实这并不好，data顾名思义为数据，所以对于代表行为的事件，我们不应该放到data里面.

2)methods
对于事件，其实我们的vue实例中有一个地方专门来盛放，那就是methods对象。如下：

关于vue实例中额methods对象，我们后面详细来了解，现在主要关注v-on指令。

3)v-on与onclick等原生js绑定事件的区别
A.和原生的onclick等事件绑定不一样，直接这样写alert等表达式是无效的<button v-on:click="window.alert(666)">按钮</button>，
B.如果想要这些生效，那么我们表达式中的变量应该在vue实例的data中定义提前好

C.在原生js种调用事件必须给上函数执行符号(),如下：<button onclick="fn()">按钮1</button>
D.而在v-on指令的绑定下，如果函数不需要参数，就可以直接下不给参数，如下：<button v-on:click="fn">按钮1</button>
在大部分业务场景下，如果方法不需要传入参数，那么就可以不传。
E.如果方法有参数，在v-on处调用时有没有传参，那么默认会将原生事件对象event传入，如下：

4)$event
回顾：原生js事件对象获取的几种方式

一、直接写属性事件时

<button onclick="fn(window.event,this)">
window.event: 表示当前获取的事件对象
this： 当前获取的DOM节点
</button>

二、通过js绑定时

<button id="btn">
第一个参数e: 表示当前获取的事件对象
this： 当前获取的DOM节点
</button>
<script>
var btn = document.getElementById("btn");
btn.onclick = function (e) {
console.info(e,this);
}
</script>

Vue.js事件对象
$event , 第一个参数e, 无参数event

当我们的方法需要传参时，如果我们也想同时把事件对象传入，那么我们可以使用vue提供的一个特殊变量$event,他能表示当前原生的DOM事件

这里我们可以使用$event来阻止一个a标签的自动跳转

e.preventDefault(); //通过事件对象的preventDefault方法阻止a标签的默认行为

(6)v-model与表单详解

在网页中，要获取用户的输入的话，一般会使用表单元素，这里我们就来认真了解下专用于表单元素的v-model指令
1)v-model用于文本框【单行/多行】

注意
1.v-model指令对应的值只能是vue实例对象中的内容。否则无法进行双向绑定
2.一旦使用了v-model，那么表单控件显示的值只依赖所绑定的数据，不再关心初始化时的value属性,对于在标签间绑定的值也不会生效。

3.使用v-model指令时，如果是用中文输入法输入中文，在拼音阶段，vue是不会更新数据的，只有敲下汉字才会触发更新。

4.如果想要实时更新的话，那么请绑定input事件（类似原生的oninput）

这里说下：在methods选项里面的所有方法，其中的this都是指向拥有此方法的vueApp这个vue的实例对象，所以this.mes 等价于 vueApp.mes ,即data里面的mes.

2)v-model用于单选按钮
1.先写个我们以前印象中得单选按钮组，然后我们只需要在每个单选按钮上加一个v-model指令（其表达式为一个文本）即可实现与选中值得双向绑定
（v-model表达式的值与谁得value相等，那么对应单选按钮就会被选中,同时当我们手动的选中其他按钮时，对应的v-model表达式值也会随之更改）

<input type="radio" name="test" v-model="v" value="1"/>1
<input type="radio" name="test" v-model="v" value="2" />2
<input type="radio" name="test" v-model="v" value="3" />3
<p> {{v}} </p>
data: {
v: "2" 
},

3)v-model用于复选框
1.先写个我们以前印象中得复选按钮组，然后我们只需要在每个复选按钮上加一个v-model指令（其表达式为一个数组）即可实现与选中值得双向绑定
（只有value存在于数组中就会被选中，我们手动选中时，其值也会自动的push进数组，手动取消时，其值会自动移除数组）

<input type="checkbox" name="n" v-model="checks" value="novel" />1
<input type="checkbox" name="m" v-model="checks" value="music" />2
<input type="checkbox" name="p" v-model="checks" value="picture" />3
<p> {{checks}} </p>
data: {
checks:['music'],
},

注意：
1.如果页面只有一个复选框，那么我们可以通过v-model绑定一个布尔类型的值来进行使用

<input type="checkbox" name="n" v-model="state" value="noooo"/>666
data: {
state:false, //这样当state未false就会让他不选中，未true就会让他选中
},

但是这样有个问题，那就是只和选中状态进行了双向绑定，而没有和复选框的值进行双向绑定。
这时我们就可以通过下面的方式来实现选中状态和值的双向绑定
此时v-model绑定的值就不再是一个布尔类型了，而是一个选中或为选中状态的一个值，
同时在复选框上面给定了选中与未选中的值分别为多少，这样只要v-model的值和那个状态相等，复选框就会处于那个状态，而且其值就是当前状态的值（即实现选中状态和值的双向绑定）

4)v-model用于下拉框
1.先写个我们以前印象中的下拉框列表，然后我们只需要在select上加一个v-model指令即可实现与选中值得双向绑定.

1.如果是单选模式的话，在select上用v-model绑定一个文本值。
2.如果是多选模式的话，在select上用v-model绑定一个数组。
3.其实数组是可以同时应对单选和多选的，不过在一些细节上用文本值代替数组更好（比如默认的选中ui显示）

<select name="test" v-model="checks" multiple>
<option value="bd">百度</option>
<option value="gg">谷歌</option>
<option value="tx">腾讯</option>
</select>
<p> {{checks}} </p>
data: {
checks:["gg"],
},

5)补充
当使用v-model绑定日期date时，我们应该输入的值的格式为: 2018-8-9
即中杠线连接。
换句话说：日期选择后是什么格式，我们就使用什么格式。

(7)指令之修饰符详解

v-model的修饰符
.lazy 让事件同步就会变为change
在输入框中默认是实时同时数据的（只要输入的内容正式进入了输入框就会同步，不管是中文还是英文）
其实v-model的事件同在原生的onchange 与 oninput事件之间，那么一旦我们加了.lazy修饰符，事件同步就会变为change，这样只要输入框失去焦点后才会同步。

<input v-model.lazy="text"/>{{text}}
data: {
text:"测试文本",
},

.number 让输入框内容自动的转换为number类型
我们已经知道，input输入框的值会是一个字符串，哪怕这个input的type类型为number ,这样的话我们获取到了输入框的内容还要显式的转换为number类型才行。
在vue中，如果你给v-model加上.number修饰符，得到的结果就会自动的转换为number类型。(如果输入内容无法转换为number就会被过滤掉)

<input type="number" v-model.number="text"/>{{text}}--{{typeof text}}
data: {
text:66,
},

.trim 去除输入框的值的首尾空格
给v-model加上.trim修饰符的话，能够清除输入值的首尾两端空格
（注意：
1.当有多个空格时，浏览器显式上会只作为一个空格处理，但多余的空格实际上是存在的，
2.当一个整数加上一个空格然后在通过.trim修饰符去掉了空格，但其值仍然会变为一个字符串类型。）

<input v-model="text"/>------{{text}}----
data: {
text:"测试文本",
},

v-on事件的修饰符

.stop 阻止事件冒泡
我们已经知道平常我们的事件代理能够有效是因为，事件会冒泡的原因。
那么这个.stop就能够阻止事件冒泡，如果在一个元素的某个事件上设置了.stop修饰符，那么他的上层元素就无法监听到这个事件，也就无法对他进行事件代理。
用法如下：
当点击按钮时，正常情况下，按钮本身绑定的点击事件会执行，然后由于事件会冒泡，所以div会监听到这个事件，然后也会响应,
但是当在我在按钮上加了.stop修饰符后，按钮的点击事件的冒泡就会被阻止，即div处就检测不到btn冒泡上来的点击事件了。

<div @click="fn">
<button @click.stop="fn1">按钮</button>
</div>
methods: {
fn: function (e) {
alert("div",e.target.nodeName);
},
fn1:function(){
alert("btn");
}
},

.prevent 阻止事件得默认行为
如果我们这里有个超链接a标签,然后我们在上面绑定了一个点击事件,这时点击时会触发我们的事件,但是然后就会触发链接跳转的默认行为.

如果我们不想跳转,我峨嵋你可以通过调用事件对象的preventDefault()方法来阻止默认行为,而在vue中的话,我们可以通过修饰符.prevent来实现.

<a href="https://www.baidu.com/" @click.prevent="fn1">百度</a>
methods: {
fn1:function(){
alert("bbbbb");
}
},

Form的自动提交事件也可以阻止:

<form action="https://www.baidu.com/" @submit.prevent="fn1">

.self 只由当事件在元素本身上(而非子元素)触发时执行回调函数

<div @click.self="fn">
<button>按钮</button>
</div>

此时点击按钮就不会触发事件fn,
.once 只触发一次

<div @click.once="fn">
<button>按钮</button>
</div>

这样当我们第二次点击div时,就不会在触发此事件了,即不会再执行fn函数了.

.capture 谁有这个修饰符，就先触发谁
当事件冒泡时,正常顺序为:

先本身------>再逐级往上----->最后直到window

使用了此修饰符的流程如下:

先触发有capture修饰符的—>本身—>正常往上冒泡

<div class="d1" @click="fn2">
<div class="d2" @click.capture="fn1">
<div class="d4" @click="fn">
<button>按钮</button>
</div>
</div>
</div>
在这段代码中,当我们点击按钮时,
正常情况下事件触发顺序为:fn-->fn1-->fn2 (即冒泡的顺序)
加了capture修饰符的触发顺序:fn1-->fn-->fn2(即加了此修饰符的先触发)

然后若有多个该修饰符，则由外而内触发。

<div class="d1" @click.capture="fn2">
<div class="d2" @click.capture="fn1">
<div class="d4" @click="fn">
<button>按钮</button>
</div>
</div>
</div>
在这段代码中,当我们点击按钮时,事件触发顺序为:
Fn2-->fn1-->fn(即加了此修饰符的先触发,多个修饰符会由外到内进行触发)

@click.capture.stop 修饰符可以链式调用

@click.capture.stop 的含义为: 当前点击事件在冒泡过程中会先触发,然后触发后就停止冒泡

@click.capture.stop 可以只给修饰符而不给具体事件

<div class="d1" @click.capture.stop>
<div class="d2" @click.capture="fn1">
<div class="d4" @click="fn">
<button>按钮</button>
</div>
</div>
</div>

这段代码点击按钮后什么都不会执行,因为点击按钮后最先触发的应该是最外层div,但是这个div什么事件都没有绑定,然后由于在这个div上加了stop修饰符,所以冒泡也被阻止了,即事件到此终止…

按键事件–修饰符

按键事件
Keydown 当键盘按下就执行
Keyup 当键盘按下在松开时执行

<button @keyup="window.alert('你按下了键盘')">按钮</button>

data: {
window:window,
},

上面代码的作用为,只要你按下了键盘,不管是那个按键,都会执行alert语句.
按键修饰符
然后vue中就给你提供了一系列的按键修饰符,让你精确到具体的按键,然后触发事件。

【数字修饰符+快捷修饰符+方向键修饰符】

<br>数字修饰符<br>
<button @keyup.13="window.alert('回车键，键值为13')">按下回车执行</button>
<button @keyup.32="window.alert('空格键，键值为32')">按下空格执行</button>

<br>快捷修饰符<br>
<button @keyup.enter="window.alert('enter')">enter</button>
<button @keyup.tab="window.alert('tab：只有从上一个地方按下tab键到这里来才有效')">tab</button>
<button @keyup.delete="window.alert('delete')">delete</button>
<button @keyup.esc="window.alert('esc')">esc</button>
<button @keyup.space="window.alert('space：空格键')">space</button>

<br>方向键修饰符<br>
<button @keyup.up="window.alert('up')">up</button>
<button @keyup.down="window.alert('down')">down</button>
<button @keyup.left="window.alert('left')">left</button>
<button @keyup.right="window.alert('right')">right</button>

data: {
window:window,
},

修饰符可以组合使用
组合使用时,直接两个键的修饰符一起给上就可以了,还可以直接给按键的数字值。

<br>特殊常用键修饰符<br>
<button @keyup.ctrl.b="window.alert('ctrl+b')">ctrl+b</button>
<button @keyup.alt.k="window.alert('alt+k')">alt+k</button>
<button @keyup.shift.k="window.alert('shift+k')">shift+k</button>
<button @keyup.meta.83="window.alert('meta+s,meta:窗口键，苹果电脑是command键')">meta+s</button>