vue2基本指令

v-bind

语法糖 ：‘ : ’

用于标签的属性，给予属性绑定动态的值

<div id='app'> 
	<img src:="imgUrl" />
</div>

<scrip>
	const vm = new Vue({
	el:"#app",
	data:{
			imgUrl:"https://tse4-mm.cn.bing.net/th/id/OIP-C.82-NjML3lD7df9CJzESycgHaE8?rs=1&pid=ImgDetMain"
	}
	});
	setTimeout(()=>{
	vm.imgUrl = "https://tse1-mm.cn.bing.net/th/id/OIP-C.U3NPnGbECdKKaj2G5rlATQHaKh?rs=1&pid=ImgDetMain"
	},1000);
</scrip>

上面的src就绑定了data中的imgUrl，延迟一秒后，图片会发生改变，证明是动态绑定

style绑定

v-bing可以绑定style属性，使用驼峰式或者破折号方式进行命名，写法如下

<div :style="{ color:'red', backgroundColor:'green'}" >
</div>

<div :style="styleDiv" ></div>
<scrip>
	const vm = new Vue({
	el:"#app",
	data:{
			styleDiv:{ color:'red', backgroundColor:'green'}
	}
	});
</scrip>

<!-- 或者 -->

<div :style="{ color:'red', 'background-color':'green'}" >
</div>


<div :style="styleDiv" ></div>
<scrip>
	const vm = new Vue({
	el:"#app",
	data:{
			styleDiv:{ color:'red', backgroundcolor:'green'}
	}
	});
</scrip>

绑定class

存在多种情况

1. 有一个类名，根据需要绑定

<div :class=" isOK ? ' classA ' : '' "></div>

2. 有多个类名，根据需要同时绑定一个或多个

<!-- classA,classB表示类名，true和false表示是否绑定 -->
<!-- 可以把true和false写在data中，实现动态修改 -->
<div :class="{classA:true,classB:false}"></div>

v-model

双向数据绑定，可以让页面的数据自动保存到data中

<div id='app'> 
	<input type=''text v-model:=''val/>
</div>

<scrip>
	const vm = new Vue({
	el:"#app",
	data:{
			val:"老实摸鱼的李大爷"
	}
	});
</scrip>

对于checkbox、radio、option，更新的值为选中的value值

<select v-model="sex">
  <option value="1">男</option>
  <option value="0">nv</option>
</select>

v-model可以实现父子组件传递数据，以后再说

v-on

语法糖：“ @ ”

对事件绑定函数，不同事件可以绑定相同的函数

函数需要写到methdos中

函数中的this指向vue的实例对象

可以传递自定义参数，也可以传递event对象

<button @click="fn('abc',$event)"> 点我 </button>

fn(val,e){}

在@事件名后加.xxx表示对事件进行进一步的处理

	说明
stop	停止事件传播
.self	事件只有绑定事件的元素能触发，点击子元素不能触发
.prevent	阻止事件默认行为
.once	只执行一次
.capture	默认绑定的事件都是在冒泡阶段执行，添加capture修饰符可以设置捕获阶段执行
.enter	监视enter键
.keyCode	监视keyCode对应的按钮，不推荐使用（enter键: 13

v-if

只有在表达式为真的时候才会渲染

<div v-if="type === 'A'"></div>
<div v-else></div>

v-show

类似v-if，表达式为真时，才会渲染

v-if和v-show的区别

1. v-if是通过创建/删除标签来控制显示隐藏的，而v-show是通过添加display为none来控制显示隐藏的
2. v-show更占内存，但是显示快；v-if相对较小，但是显示慢

v-for

不能语与v-if写在同一元素上，会导致结果不明确

v-for="(item, index) in 数组"
v-for="(item, key) in 对象"
v-for="(item, index) in 字符串"