v-text

将数据与标签绑定，显示效果与双大括号插值效果相同

<div v-text = "message"></div>

v-html

插值语句的一种，将数据按HTML插入到相应的位置，并对html语句进行解析

<div id="app2">
	<div v-html = "message"></div>
</div>
<script type="text/javascript">
	var vm = new Vue({
		el:"#app2",
		data:{
			message:"<h1>噜啦啦啦</h1>"
		}
	})
</script>

使用HTML插值时，很容易造成XSS攻击，所以只可以在可信内容上使用HTML插值

条件渲染

v-if

根据表达式的值条件性的渲染页面

<div id="app">
	<div v-if = "show">{{message}}</div>
</div>
<script type="text/javascript">
	var vm = new Vue({
		el:"#app",
		data:{
			show:false,
			message:"猪猪猪猪猪猪"
		}
	})
</script>

当表达式值为false时，则相应的DOM元素不存在，页面不进行渲染

v-else

当v-if的内容不会进行渲染时渲染这部分内容

<div id="app1">
	<div v-if = "show">{{message}}</div>
	<div v-else>bye world</div>
</div>
<script type="text/javascript">
	var vm = new Vue({
		el:"#app1",
		data:{
			show:false,
			message:"猪猪猪猪猪猪"
		}
	})
</script>

注意：同时使用v-if与v-else要将两个标签放在一起，否则不起作用

v-else-if

当所需条件不止为两种情况时，使用该指令

<div id="app2">
	<div v-if = "show === 'a'">This is 'A'</div>
	<div v-else-if = "show === 'b'">This is 'B'</div>
	<div v-else>bye world</div>
</div>
<script type="text/javascript">
	var vm1 = new Vue({
		el:"#app2",
		data:{
			show:"a"
		}
	})
</script>

必须与v-if搭配着使用

v-show

根据表达式值的结果更改display属性值

v-show与v-if对比：

使用两种方式绑定相同的内容

v-show对应的值为false，则该标签依旧存在在DOM中，只是该标签的display值设置为none，所以页面上不显示

v-if对应的值为false，则该标签对应的DOM不存在了

key值

在vue进行重新渲染的时候，会尽可能的复用上次的标签

而若给标签添加了不同的key值，vue会认为这是两个不同的标签，也就不会存在复用的问题

<div id="app3">
	<div v-if = "show">
		用户名：<input  key = "username">
	</div>
	<div v-else>
		邮箱名：<input  key = "email">
	</div>
</div>
<script type="text/javascript">
	var vm2 = new Vue({
		el:"#app3",
		data:{
			show:false
		}
	})
</script>

修改了show值后input标签也会重新渲染

列表渲染 v-for

数组

循环数组list中的项目

<div id="app">
	<div v-for = "(item,index) of list"
	     :key="item.id">
		{{item.text}}----{{index}}
	</div>
</div>
<script type="text/javascript">
	var vm = new Vue({
		el:"#app",
		data:{
			list:[{
				id:"111",
				text:"hello"
			},{
				id:"222",
				text:"tom"
			}]
		}
	})
</script>

给数组中使用下标的形式对其进行项目的增添是不会将改变渲染到页面上的，所以要使用到Vue中变异数组的方法

vm.list.splice(1,1,{id:"123",text:"alice"})

由于数组是引用的形式，也可以将更改后的数组内容全部引用更改整个数组内容实现页面内容的改变（不推荐）

vue中提供的变异数组的方法：

pop：删除数组最后一项
push：往数组中添加一项
shift：删除数组的第一项
unshift：往数组第一项添加内容
splice：截取数组
sort：对数组进行排序
reverse：对数组取反

对象

使用v-for对对象中的内容进行循环渲染

<div id="app2">
	<div v-for = "(item,key,index) of userInfo">
		{{item}}----{{key}}----{{index}}
	</div>
</div>
<script type="text/javascript">
	var vm2 = new Vue({
		el:"#app2",
		data:{
			userInfo:{
				name:"dell",
				age:29,
				gender:"male",
				salary:"secret"
			}
		}
	})
</script>

后期给对象添加属性则需要全部引用进行更改才能渲染在页面中

Vue的set方法

Vue当中提供了set方法实现对数组和对象内容的更改，set不仅是全局方法，也是实例方法

全局方法更改对象：
Vue.set(vm2.userInfo,"address","beijing")

实例方法更改对象：
vm2.$set(vm2.userInfo,"address","beijing")

全局方法更改数组：
Vue.set(vm3.userInfo,1,8)

实例方法更改数组：
vm3.$set(vm3.userInfo,3,11)

v-on

绑定事件监听器，表达式可以是一个方法的名字或内联语句
在普通元素上，只能监听原生DOM事件
在自定义组件上，可以监听子组件触发的自定义事件

<a v-on:click="doSomething">...</a>

v-on作为常用指令，有其缩写

<a @click="doSomething">...</a>

修饰符

.stop - 调用 event.stopPropagation()。
.prevent - 调用 event.preventDefault()。
.capture - 添加事件侦听器时使用 capture 模式。
.self - 只当事件是从侦听器绑定的元素本身触发时才触发回调。
.{keyCode | keyAlias} - 只当事件是从特定键触发时才触发回调。
.native - 监听组件根元素的原生事件。
.once - 只触发一次回调。
.left - (2.2.0) 只当点击鼠标左键时触发。
.right - (2.2.0) 只当点击鼠标右键时触发。
.middle - (2.2.0) 只当点击鼠标中键时触发。
.passive - (2.3.0) 以 { passive: true } 模式添加侦听器

v-bind

动态的绑定一个或多个特性

绑定属性：
<img v-bind:src="imageSrc">

v-bind为一个常用属性，用于简写形式

<a :src="imageSrc">...</a>

class与style的绑定

通过绑定class或style都可以完成对标签样式的修改，class与style绑定都拥有对象和数组两种方式进行绑定

class的对象绑定

通过修改class值来对样式进行修改

<div id="app1">
	<div @click = "handleDivClick"
     	     :class = "{activated : isActivated}">
    	dafsdafsd
	</div>
</div>
<script type="text/javascript">
	var vm1 = new Vue({
		el:"#app1",
		data: {
			isActivated:false
		},
		methods:{
			handleDivClick:function(){
				this.isActivated = !this.isActivated;
			}
		}
	})
</script>

将class与对象绑定，对象的名字为activated

class数组绑定

同理对class值的修改来实现样式的改变

<div id="app2">
	<div @click = "handleDivClick"
	     :class = "[activated]">
		dafsdafsd
	</div>
</div>
<script type="text/javascript">
	var vm1 = new Vue({
	    el:"#app2",
		data: { 
			activated:""
		},
		methods:{
			handleDivClick:function(){
				if (this.activated === "activated") {
					this.activated = "";
				}else{
					this.activated = "activated";
				}
			}
		}
	})
</script>

将class与一个数组变量相绑定，若想使用该class，则让该数组与具体值相等

style修改样式

<div id="app3">
	<div :style = "styleObj" @click = "handleDivClick">
		dafsdafsd
	</div>
</div>
<script type="text/javascript">
	var vm1 = new Vue({
		el:"#app3",
		data:{
			styleObj:{
				color:"black"
			}
		},
		methods:{
			handleDivClick:function(){
				this.styleObj.color = this.styleObj.color ==="black"? "red":"black";
			}
		}
	})
</script>

将style与vue实例进行绑定，将需要写的style样式写在data中，在后面对其进行相应的修改

style数组形式

<div id="app3">
	<div :style = [styleObj,...] @click = "handleDivClick">
		dafsdafsd
	</div>
</div>

数组形式也就可以在方括号内增添多个样式

v-model

实现表单与Vue实例的双向绑定

<input v-model="message">

vue实例中的数据随表单中输入的数据改变而改变

限制条件：

<input>
<select>
<textarea>
components

修饰符

.lazy- 取代 input 监听 change 事件
.number - 输入字符串转为有效的数字
.trim - 输入首尾空格过滤

Vue---指令及其相关