基本指令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之属性、条件、渲染、事件指令及修饰符,如有问题联系小编!