v-on缩写和事件修饰符
.stop 阻止冒泡
.prevent 阻止默认事件
.capture 添加事件监听器使用事件捕获模式
.self 只当事件在元素本身触发时触发回调
.once 时间只能触发一次
<div id="app">
<!--使用.self 点击自身才触发事件-->
<div class="inner" @click.self="divHandler">
<input type="button" value="戳他" @click="btnHandler">
<!--使用.stop阻止冒泡-->
<input type="button" value="戳他" @click.stop="btnHandler">
<!--使用.capture事件捕获机制-->
<input type="button" value="戳他" @click.capture="btnHandler">
<!--阻止默认行为-->
<a href="http://www.baidu.com" @click.prevent="linkClick">有问题先去百度</a>
<!--使用.once只触发一次事件-->
<a href="http://www.baidu.com" @click.once="linkClick">有问题先去百度</a>
<!--.self只会阻止自己身上的事件,而.stop则会阻止多层的冒泡行为-->
</div>
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
},
methods: {
divHandler(){
console.log('触发了div点击事件');
},
btnHandler(){
console.log('触发了div点击事件');
},
linkClick(){
console.log('触发了链接点击事件');
}
}
});
</script>
v-model双向数据绑定
<h4>{{ msg }}</h4>
<!--v-bind只能实现数据的单向数据绑定-->
<input type="text" :value="msg" style="width: 100%;">
<!--使用v-model可以实现表单元素和Model中的数据进行双向数据绑定-->
<!--只能用于表单元素中 input select checkbox textarea-->
<input type="text" style="width: 100%;" v-model="msg">
简易计算器
<div id="app">
<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="text" value="=" @click="calc">
<input type="text" v-model="result">
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
n1: 0,
n2: 0,
result: 0,
opt: '+'
},
methods: {
calc(){//计算结果
//逻辑处理
// 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()
// 投机取巧的方式,正式开发中少用
var codeStr = 'parseInt(this.n1) '+this.opt+' parseInt(this.n2)';
this.result = (codeStr);
}
}
});
</script>
以上是此次只是点的总结以及代码的整理。