- v-on的事件修饰符:
1).stop 阻止冒泡
.inner {
height: 150px;
background-color: aqua;
}
<div id="app">
<!--当你点击button按钮时,因为默认为冒泡机制,
会先执行当前元素input的click事件,再执行外层div的click事件-->
<div class="inner" @click="divClick">
<input type="button" value="戳它" @click="btnClick">
</div>
<!--加上.stop可阻止冒泡-->
<div class="inner" @click="divClick">
<input type="button" value="戳它" @click.stop="btnClick">
</div>
</div>
<script>
var vm = new Vue({
el: '#app',
data: {},
methods: {
divClick: function() {
console.log('这是触发了 inner div 的点击事件')
},
btnClick: function() {
console.log('这是触发了 btn按钮 的点击事件')
}
}
})
</script>
2).prevent 阻止默认事件
<div id="app">
<!--第一个链接会执行linkClick事件并跳转页面,第二个链接只执行linkClick事件,不跳转页面,
.prevent能阻止默认事件的发生,如表单的submit也可用.prevent来阻止-->
<a href="http://www.baidu.com" @click="linkClick">第一个百度链接</a>
<a href="http://www.baidu.com" @click.prevent="linkClick">第二个百度链接</a>
</div>
<script>
var vm = new Vue({
el: '#app',
data: {},
methods: {
linkClick: function() {
console.log('触发了链接点击事件')
}
}
})
</script>
3).capture 添加事件侦听器时使用事件捕获模式
<!--上例中,可以通过给div点击事件添加.capture,当点击button时,先执行divClick事件,再执行btnClick事件-->
<div class="inner" @click.capture="divClick">
<input type="button" value="戳它" @click="btnClick">
</div>
4).self 只当事件在该元素本身(比如不是子元素)触发时触发回调
<!--当点击button时,也会触发父元素div的事件,也就是说div的点击事件是被动触发的,如果想让该点击事件只在点击div时触发,而不被button触发,可以使用.self来实现
.self阻止的是当前冒泡行为触发,.stop阻止所有的冒泡行为-->
<div class="inner" @click.self="divClick">
<input type="button" value="戳它" @click="btnClick">
</div>
5).once 只触发一次事件处理函数
<!--.prevent和.once的先后顺序无太大关系,代码执行结果为第一次点击链接不会跳转到百度界面,第二次点击会跳转-->
<div id="app">
<a href="http://www.baidu.com" @click.prevent.once="linkClick">第二个百度链接</a>
</div>
- v-model指令和数据双向绑定:
注意:v-model只能运用在表单元素中,如 input(radio,text,address,email…) select checkbox textarea 。
<div id="app">
<!--普通文本无法进行交互,不能实现数据双向绑定,表单元素可以-->
<h2>{{mes}}</h2>
<!--v-bind只能实现数据单向绑定,从M自动绑定到V-->
<input type="text" v-bind:value="mes" style="width: 100%;">
<!--使用v-model指令,可以实现 表单元素 和 Model 中的数据的双向数据绑定-->
<input type="text" v-model="mes" style="width: 100%;">
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
mes: '小姐姐善良美丽,可爱大方,温柔体贴,定能觅得良缘'
},
methods: {}
})
</script>
通过v-model指令可写一个简单的计算器demo:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>计算器demo</title>
<script src="../lib/vue.js"></script>
</head>
<body>
<div id="demo">
<input type="text" v-model="n1">
<select v-model="opt">
<option value="+">+</option>
<option value="-">-</option>
<option value="*">*</option>
<option value="/">/</option>
</select>
<input type="text" v-model="n2">
<input type="button" value="=" @click="calc">
<input type="text" v-model="result">
</div>
<script>
var vm = new Vue({
el: '#demo',
data: {
n1: 0,
n2: 0,
result: 0,
opt: '+'
},
methods: {
calc: function() {
switch (this.opt) {
case '+':
this.result = parseInt(this.n1) + parseInt(this.n2);
break;
case '-':
this.result = parseInt(this.n1) - parseInt(this.n2);
break;
case '*':
this.result = parseInt(this.n1) * parseInt(this.n2);
break;
case '/':
this.result = parseInt(this.n1) / parseInt(this.n2);
break;
}
//也可用eval(),但正式开发中尽量少用
//this.result = eval('parseInt(this.n1)' + this.opt + 'parseInt(this.n2)');
}
}
})
</script>
</body>
</html>
- 在Vue中使用样式:
1)使用class样式(共有四种方式):
.red {
color: red;
}
.thin {
font-weight: 200;
}
.italic {
font-style: italic;
}
.active {
letter-spacing: .5em;
}
<div id="app">
<h1 class="red thin">这是一个很大的标题</h1>
<!--第一种:直接传递一个数组(注意:这里的class需要使用v-bind做数据绑定)
第二种:数组中使用三元表达式(当flag为true时使用样式)
第三种:数组中嵌套对象(代替三元表达式,提高可读性)
第四种:直接使用对象
在为class使用v-bind绑定对象时,对象的属性为类名,对象的属性可带引号,也可不带引号,属性的值是一个标识符-->
<h1 :class="['thin','italic']">这是一个很大的标题</h1>
<h1 :class="['red','thin',flag?'active':'']">这是一个很大的标题</h1>
<h1 :class="['red','thin',{'active':flag}]">这是一个很大的标题</h1>
<h1 :class="{red: false, thin: true, italic: true, active: true}">这是一个很大的标题</h1>
<h1 :class="classObj">这是一个很大的标题</h1>
</div>
<script>
//未定义Vue实例不能使用vue指令
var vm = new Vue({
el: '#app',
data: {
flag: true,
//可将class绑定的对象放进data里面
classObj: {
red: false,
thin: true,
italic: true,
active: true
}
},
methods: {}
})
</script>
2)使用内联样式:
<div id="app">
<h1 style="color: red; font-style: italic;">这是一个很大的标题</h1>
<!--第一种:直接在元素上使用:style形式,书写样式对象
第二种:将样式对象定义到data中,并直接引用到:style中
第三种:在:style中通过数组,引用多个data上的样式对象
注:如果对象属性中带有'-'就要用单引号括起来-->
<h1 :style="{color: 'red', 'font-style': 'italic'}">这是一个很大的标题</h1>
<h1 :style="styleObj1">这是一个很大的标题</h1>
<h1 :style="[styleObj1, styleObj2]">这是一个很大的标题</h1>
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
styleObj1: {
color: 'red',
'font-style': 'italic'
},
styleObj2: {
'font-weight': 200
}
},
methods: {}
})
</script>
注: 因为class和style都为元素的属性,因此可以用v-bind来绑定属性