VUE之属性、条件、渲染、事件指令及修饰符

基本指令v-bind
v-bind动态属性：常用于动态绑定HTML元素的属性。

<div id="app">
		<a v-bind:href="url">链接百度</a>
</div>

var app= new Vue({
			el:'#app',
			data:{
				url:'http://www.baidu.com'
			}
});

语法格式1：单个语法格式
v-bind:attributeName=variable

<div id="app">
			<a 
				v-bind:title='title'
				v-bind:target='target'
				v-bind:class='classname'
				v-bind:href="url">
			{{info}}</a>
</div>

var app = new Vue({
			el:'#app',
			data:{
				title:'百度一下，你就知道',
				target:'_top',
				classname:'one two three',
				url:'http://www.baidu.com',
				info:'百度一下'
			}
});

如图：所有添加的属性就都出来了
语法格式2：对象语法格式
v-bind=“{attributeName1:variable1,attributeName2:variable2,……}”
案例：在页面中利用Vue实例的变量制作一个超级链接

<div id="app">
			<a v-bind="{title:link.title,class:link.classname,href:link.url,target:link.target}">{{link.info}}</a>
</div>

var app = new Vue({
			el:'#app',
			data:{
				link:{
					title:'百度一下，你就知道',
					target:'_top',
					classname:'one two three',
					url:'http://www.baidu.com',
					info:'百度一下'
				}
				
			}
});

语法格式3：数组语法格式”绑定类名”
v-bind:attributeName=“[variable1,variable2,……]”

<div id="app">
			<a v-bind:class="[class1,class2]">{{info}}</a>
</div>

var app = new Vue({
			el:'#app',
			data:{
				info:'百度一下',
				class1:'classname1',
				class2:'classname2'
			}
})

如图：添加了两个类名

基本指令v-if
v-if指条件性渲染，为true时渲染DOM，否则不进行渲染：

<div id="app">
			<p v-if="show">显示这段文本</p>
</div>
var app = new Vue({
			el:'#app',
			data:{
				show:true
			}
})

当为true时页面上显示p标签的字，当为false时，页面的p标签不存在。
如图：


基本指令v-show
v-show也是指条件性渲染，用法与v-if类似！
不同的是带有 v-show 的元素始终会被渲染并保留在 DOM 中。v-show 只是简单地切换元素的 CSS 属性 display。

<div id="app">
			<p v-show="show">显示这段文本</p>
</div>

var app = new Vue({
			el:'#app',
			data:{
				show:false
			}
})

当为true时页面上显示p标签的字，当为false时，页面的p标签不存在。
如图：


v-show与v-if的区别
vue中显隐方法常用两种，v-show和v-if，但这两种是有区别的




一般来说，v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。因此，如果需要非常频繁地切换，则使用 v-show 较好；如果在运行时条件很少改变，则使用 v-if 较好。

基本指令v-on
v-on： @方法名 用于绑定事件监听器，实现一些交互功能
语法：v-on:事件类型=”方法名”

<div id="one">
			<p v-show="show">显示这段文本</p>
			<button @click="an">点击隐藏</button>
</div>
var one = new Vue({
			el:'#one',
			data:{
				show:true
			},
			methods:{
				an:function(){
					this.show=false;
				}
			}
})

点击隐藏便会隐藏！

v-on表达式
语法：v-on:事件类型=”内联语句”
表达式除了方法名，也可以是内联语句

<buttton @click="show=false">点击隐藏</buttton>

v-on修饰符
以半角句号 . 指明的特殊后缀，用于指出一个指令应该以特殊方式绑定
①.stop：阻止事件的传递，即阻止事件向上冒泡

<div id="app">
			<div class="fuqin" @click="fq">
				<div class="son" @click.stop="son">
				</div>
			</div>
</div>

var app = new Vue({
			el:'#app',
			data:{
				
			},
			methods:{
				fq:function(){
					alert("父亲")	
				},
				son:function(){
					alert("儿子")
				}
			}
})

②.prevent：阻止对象的默认行为。.prevent会调用 event.preventDefault() 即取消事件的默认动作。

<a @click.prevent href="http://www.baidu.com">百度一下</a>

③.self：当事件在该元素自身触发时执行相应的事件处理程序，在该元素的子元素上不触发。

<div id="app">
			<div class="fuqin" @click.self="fq">
				<div class="son" @click="son">
				</div>
			</div>
</div>

var app = new Vue({
			el:'#app',
			data:{
				
			},
			methods:{
				fq:function(){
					alert("父亲")	
				},
				son:function(){
					alert("儿子")
				}
			}
})

④.capture：使用事件捕获机制

<style>
#one{
				width: 300px;
				height: 300px;
				background: red;
			}
			#one1{
				width: 200px;
				height: 200px;
				background: yellow;
			}
			#one2{
				width: 100px;
				height: 100px;
				background: yellowgreen;
			}
</style>
<div id="one" @click="show_one">
			<div id="one1" @click.capture="show_one1">
				<div id="one2" @click="show_one2"></div>
			</div>
</div>

var one = new Vue({
			el:'#one',
			data:{
				
			},
			methods:{
				show_one:function(){
					console.log("这是小红的方法")
				},
				show_one1:function(){
					console.log("这是小黄的方法")
				},
				show_one2:function(){
					console.log("这是小绿的方法")
				}
			}
})

⑤.once：绑定的事件只能触发一次。

<div id="two">
			<button  @click.once="btnfn">按钮</button>
</div>

var two = new Vue({
			el:'#two',
			data:{
				
			},
			methods:{
				btnfn:function(){
					alert('只弹框一次')
				}
			}
})

keyup.keyCode键值修饰符，用来监听键盘事件。可以通过按键名称来监听，也可以自定义按键名称（键盘修饰符及自定义键盘修饰符）

<div id="key1">
			<button @keyup.ent="enter">点击</button>
</div>

Vue.config.keyCodes.ent=13;
		var key1 = new Vue({
			el:'#key1',
			data:{
				
			},
			methods:{
				enter:function(){
					alert(666)
				}
			}
})

v-on修饰符小结
（1）.stop冒泡事件修饰符，阻止事件向上冒泡
（2）.prevent默认事件修饰符，阻止对象的默认行为
（3）.capture捕获事件修饰符，使用事件捕获机制
（4）.self自身事件修饰符，只当事件是从事件绑定的元素本身触发时才触发回调
（5）.once一次性事件修饰符，绑定的事件只能触发一次
（6）keyup.keyCode键值事件修饰符，用来监听键盘事件（键盘修饰符以及自定义键盘修饰符）

以上为VUE之属性、条件、渲染、事件指令及修饰符，如有问题联系小编！