Vue指令

一、Vue指令的规定

1. 所有的Vue指令必须以v-开头，后面带命令动词。
2. 指令的参数：v-指令动词.参数
3. 指令的修饰符：v-指令动词:修饰符

二、绑定HTML属性

1、完整格式：<a v-bind:href=“url”>链接</a>
2、简化格式：<a :href=“url”>链接</a>
3、利用对象同时绑定多个属性：<a v-bind=“{href:url,title:ti,target:open}”></a>，上诉代码中url、ti、open都是Vue数据区的变量。

三、绑定事件

1. 完整格式：<button v-on:click=“btnClick”>确定</button>
2. 简化格式：<button @click=“btnClick”>确定</button>
3. v-on指令的修饰符：
   (1) 取消事件的传递

   <button v-on:click.stop=“btnClick”>确定</button>
   

   (2) 实现事件的捕获传递

   <button v-on:click.capture=“btnClick”>确定</button>
   

   (3) 取消对象的默认行为

   <button @click.prevent>提交数据</button>
   

   (4) 键盘码/键盘别名

键盘按键	键盘码	键盘别名
ESC	27	esc
Tab	9	tab
Enter	13	enter
Space	32	space
Left	37	left
Up	38	up
Right	39	right
Down	40	down
A	65
a	97
0	48

四、为元素绑定CSS样式

（1）通过class属性绑定CSS样式：

1. 利用普通变量： <div :class="sty01"></div> <!-- sty01是变量 -->
2. 利用数组：<div :class="[vm,vn]"></div> <!-- vm和vn是变量 -->
3. 利用对象：<div :class="{s01:isS01,s02:isS02}"></div> <!-- s01和s02是类名，isS01和isS02是逻辑变量 -->

（2）通过style属性绑定CSS样式：

1. 利用普通变量：

<div :style="sty01"></div>   
<!-- sty01是变量
A .sty01是字符串：sty01:'width:200px; backgroundColor:#ff5857'
B .sty01是对象：sty01:{width:'200px'; backgroundColor:'#ff5857'} -->

2. 利用数组：

<div :style="[vm,vn]"></div>     
<!-- vm和vn是变量
vm:{width:'200px',height:'300px'},
vm:{'background-color':'#ff5857'} -->

3. 利用对象：

<div :style="{css-name:css-value,css-name:css-value}"></div>
<!-- css-name是CSS属性名，css-value是取值为CSS属性值的变量 -->
<div :style=“{width:wi,height:he,backgroundColor:bgc}”> </div>
<!-- wi:'200px',
he:'300px',
bgc:'#ff5857' -->

注意：
上述三种绑定方式中，取值为对象时，键名都是CSS属性名。此时若CSS属性名用引号引住，则可以书写CSS完整的属性名；若CSS属性名不用引号引住，则必须书写为驼峰式命名。

例：

<div :style="{width:'200px','background-color':'#ff5857'}"></div>
<div :style="{width:'200px',backgroundColor:'#ff5857'}"></div>

五、利用v-model指令为表单元素绑定数据

（1）为文本框绑定数据：<input type=“text” />

1. 绑定方法：<input type=“text” v-model=“message” />
2. 实现本质：
   <input type="text" :value="message" @input="ok" />
ok(){ this.message=this.$el.querySelector("input[type=text]").value;}
3. 利用v-model绑定在文本框上的变量取值为字符串。
4. v-model也可以为密码域、多行文本域（< textarea>< /textarea>）绑定数据。

（2）为单选框绑定数据：<input type=“radio” />

1. 为单一的一个单选框绑定数据：将变量绑定到checked属性上。

<input type=“radio” :checked=“ok” />

ok:true/false     //为checked属性绑定的变量取值为逻辑值

2. 为成套的多个单选框绑定数据：

A .多个互斥选择的单选框必须利用v-model指令绑定同一个变量。【代替了HTML

中name属性必须一致的特点】
B .将v-model绑定的变量设置为某个单选框value属性的取值，则该单选框默认处
于选中状态。【代替了HTML中checked属性的功能】
C .用户所选中的单选框的value属性的取值会被v-model绑定的变量获取。

3. 为复选框绑定数据：<input type=“checkbox” />

A. 为单一的一个复选框绑定数据：利用v-model绑定一个逻辑变量。
B. 为成套的多个复选框绑定数据：利用v-model绑定一个数组。

（3）为列表/菜单绑定数据：

1. HTML中列表/菜单的实现：

<select multiple size="8">
	 <option value="html">HTML</option>
</select>

A .multiple，放置性属性。具备该属性，则表单元素变为列表，可以实现多选。借助Ctrl键选中多个不连续的列表项；借助Shift键选中多个连续的列表项。
B .size，在multiple实现存在的前提下，设置可以显示的条目个数。

2. 利用v-model绑定变量：

A .菜单实现单选，利用v-model指令绑定一个字符变量。该字符变量的取值可以是菜单项value属性的取值，也可以是菜单项的文本内容。
B .列表实现多选，利用v-model指令绑定一个数组。

六、条件渲染指令

• v-if、v-else、v-else-if：当条件成立时，指定元素被渲染到页面上（可见），否则指定元素
  不渲染在页面上（不可见）。
• v-if和v-show区别：v-show本质是利用CSS中的display:none来实现的。v-if本质是通
  过重新渲染页面来实现的。频繁切换于显示和隐藏之间的对象最好使用效率较高的v-show。

七、循环渲染指令

1. 利用v-for指令遍历数组

v-for="(item,index) in 数组名"
v-for="(item,index) of 数组名"
//其中：item表示数组元素内容；index表示索引值。

• v-for指令可以用于被重复渲染的元素上。

<li v-for="(item,index) in animal">{{index+1}}.{{item}}</li>

• v-for指令可以用于被重复渲染的父元素上，此时多使用< template>标记对。

<template v-for="(item,index) in animal">
    <li>{{item}}</li>
</template>

2. 利用v-for指令遍历对象

v-for="(item,key,index) in 对象名"
//其中：item表示键值；key表示键名；index表示索引值。