Vue基础指令简述

v-bind绑定属性（单向绑定：数据 --> 视图）

1.概述

v-bind可以绑定html中的属性，使得可以在Vue实例对象中操作该属性
属性值是一个表达式，尽管它有引号，所以说我们可以自己定义合法的表达式

注意：v-bind 可以使用 ： 简写

<p :title = "msg + '字符串'"></p> //msg 实际的值为 Vue 定义的数据

2.添加 class 类名（class）

在某些情况下，你可以通过 v-bind 绑定类名来添加样式

<p :class = "['color','size',active]"></p> 
//使用 :class 来声明
//数组中单引号的成员为 style 表中定义的样式
//数组中没有单引号的成员则是 Vue 实例化对象中操作的成员,里面可以使用表达式（如下）
<p :class = "['color','size',sign?active:'']"></p>  
//或是这样
<p :class = "['color','size',{'active': sign}]"></p>  //这样会判断在 data 中是 sign 属性是否为 true，若为 true，则应用 active类名。反之，则不添加。

2.添加 class 样式属性（style）

使用 v-bind 可直接向style中添加样式属性

// 一：直接在 html 中定义
<p :style = "{'color': 'red','font-weight': 200}"></p>  //键值在有 -符 时必须加上引号。其他情况可不加

// 二：data 中定义
<p :style = "styleObj1"></p>

data:{
	styleObj1:	{'color': 'red','font-weight': 200}
}

// 三：使用数组添加不同的样式
<p :style = "[styleObj1, styleObj2]"></p>

data:{
	styleObj1:	{'color': 'red','font-weight': 200}
	styleObj2:  {'font-style':'italic'}
}

v-for 的使用

1.循环数组（纯数组）

v-for数组循环，可以循环出数组的每一项和索引值,再用插值表达式输入html

<p v-for = "(item, i) in list"> {{item}} {{i}} </p>//item 为每一项 ，i 为索引

data:{
	list: [0, 1, 2, 3],
}

2.循环数组（嵌套对象）

<p v-for = "(item, i) in list"> {{item.id}} {{item.name}} {{i}} </p>//item 为每一项 ，i 为索引
// 1 Tom 0
// 2 punk 1
data: {
	list:[
		{id: 1, name: 'Tom'}
		{id: 2, name: 'punk'}
	]
}

3.循环对象

<p v-for = "(val, key, i) in list"> {{val}} {{key}} {{i}} </p>
//1 id 0
//Tom name 1

data: {
	list:{
		id: 1,
		name: 'Tom'
	}
}

4.循环数字

使用 v-for 循环数字，数字是从 1 开始

<p v-for = "num in 2"> {{num}} </p>
// 1
// 2

注意：

• i（索引）不需要特殊定义就可以遍历出来
• item为每一项的值，可以自己定义名字

5.key属性（标识身份）

在vue 2.2.0版本之后，都需要加上 key 属性，否则报错

key 与 v-for 搭配使用，key 用来指定当前元素的唯一身份，否则 v-for 只会以 索引 来标识当前元素的身份。在有些需要动态添加列表元素时，就可能因为身份标识问题出现 bug。

在v-for 循环时 ， key 属性要配合 v-bind 使用

<p v-for = "item in list" :key = "item.id"> {{item.name}} </p>
// Tom   此时 key（身份标识） 为 1
// punk  此时 key（身份标识） 为 2
data:{
	list:[
		{id: 1, name: 'Tom'}
		{id: 2, name: 'punk'}
	]
}

注意：

• key使用时，一定要结合 v-bind 使用
• 在v-for 循环时 ， key 属性的值只能是原始值（string || number）

v-model绑定属性（双向绑定：数据 <- - -> 视图）

v-if 与 v-show

都是用来控制元素的 show 与 hide

1. 二者的区别

• v-if 是直接隐藏（删除）元素
• v-show是将元素设置为 display：none

1. 二者的使用场景

• v-if 每一次都会创建新元素，性能浪费较大。不适宜频繁切换，适合不需要经常切换的元素
• v-show 有较高的初始渲染消耗（若是不经常使用该元素且刚开始不需要渲染至页面，则此元素也会被渲染到页面上，增加了初始消耗）。不适宜在不会或不经常切换的元素中使用，适合需要经常切换的元素。

v-on绑定事件

可以用 @ 符简写

<p @click = "method"></p> //方法在 methods 中定义

你还可以使用 () 号传递参数

<p @click = "method( 123, 456, $event )"></p> 

上面method函数中传了三个参数，前两个参数是数字，最后的参数是当前的事件对象，你可以在 Vue 实例(methods属性)中获得此对象以及之前的参数

注意：若事件没有传递参数，那么事件会默认携带当前事件对象。如果传递了参数，则需要传递$event在最后一个参数位置，才能获取事件对象。

v-focus

绑定此指令可以自动聚焦文本框

解决插值表达式闪烁问题

• v-cloak：在标签中使用 v-clock，并且在css中定义 [v-cloak]{display:none;}（css属性名选择器）
• v-text：使用 v-text 无闪烁问题 ，但是会清空标签的内容
• v-html：与 v-text 相近，不同的是它会解析html标签