Vue的指令（Vue02）

扩展了 普通html属性的功能（用法同自定义属性)
用法：
v-指令名=“值”

<div v-xxx="值">

总结：
<元素 v-指令=“xxx”>
指令的值需要写在引号中：
1.也是js环境
2.里面可以写表达式 不能写语句
3.全局函数 只能使用白名单中
相当于模板中的语法

1. v-model将表单控件的value 属性 与 vue中的 数据 进行双向绑定
2. v-text将元素 的文本内容 与 一个vue的数据进行绑定
3. v-html渲染富文本数据（不管是v-text还是{{}}都不会渲染富文本数据）
4. v-bind:属性将一个普通的任意标签的属性（可以是自定义属性）的值，与vue一个数据进行绑定
5. v-on:事件将vue元素的事件与vue的方法进行绑定

1.v-mode

例1

<div id="app">    
	<input type="text" v-model="a">    //v-model
	<hr>
	{{a}}  
</div>

const vm = new Vue({      
	el:"#app",      
	data:{        
		a:"双向绑定的数据"      
	}    
})

例2

<div id="app">    
	<input type="checkbox" v-model="b">    
	<div class="box" v-show="b"></div>  
</div>

const vm = new Vue({      
	el:"#app",      
	data:{        
		b:true      
	}    
})

例3

<div id="app">    
red:    <input type="checkbox" value="red" v-model="c">    
orange:    <input type="checkbox" value="orange" v-model="c">    
yellow:    <input type="checkbox" value="yellow" v-model="c">    
green:    <input type="checkbox" value="green" v-model="c">    
<hr>    
{{c}}  
</div>

const vm = new Vue({      
	el:"#app",      
	data:{        
		c:[]      
	}    
})

2.v-text

将元素 的文本内容 与 一个vue的数据进行绑定

<div id="app">    
	<div class="box" v-text="a"></div>  
</div>

const vm = new Vue({      
	el:"#app",      
	data:{        
		a:"abcdefg"      
	}    
})

4.v-bind:属性

将一个普通的任意标签的属性（可以是自定义属性）的值，与vue一个数据进行绑定
简写：
:属性

例1

<div id="app">    
	<div :class="a"></div>  //:class
</div>

const vm = new Vue({      
	el:"#app",      
	data:{        
		a:"yellow"      
	}    
})

例2（自定义属性）

<div id="app">    
	<div :aaa="b"></div>  
</div>

const vm = new Vue({      
	el:"#app",      
	data:{        
		b:"ccc"      
	}    
})

5.v-on:事件

例1

<div id="app">    
	<!-- <button v-on:click="fn">按钮</button> -->    
	<button @click="fn">按钮</button>  
</div>

const vm = new Vue({      
	el:"#app",      
	methods:{        
		fn(){          
			alert(1)        
		}      
	}    
})

点击后：

例2

<div id="app">    
	<button @click="fn">{{a?"隐藏":"显示"}}</button>    
	<div class="box" v-show="a"></div>  
</div>

const vm = new Vue({      
	el:"#app",      
	data:{        
		a:true      
	},      
	methods:{        
		fn(){          
			this.a = !this.a        
		}      
	}    
})

点击后：

再点击：

事件修饰符

事件修饰符
.stop 阻止事件冒泡
.prevent 阻止默认事件
.capture(捕获) 捕获阶段就提前触发
.self 只能自己触发 其后代元素无法触发
.once 只触发一次