- 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来绑定属性