事件修饰符
- 点击按钮先出发按钮的点击事件再触发div的点击事件，这就是事件冒泡
<div class="inner" @click="divHandler">
<input type="button" value="点击" @click="btnHandler">
</div>
methods:{
divHandler(){
console.log("触发inner div点击")
},
btnHandler(){
console.log("触发按钮点击")
},
}
- .stop阻止冒泡，点击按钮只触发按钮点击事件，不在触发div点击事件
<input type="button" value="点击" @click.stop="btnHandler">
- .prevent阻止默认事件，会触发链接点击事件但是不会再跳转
<a href="http://www.baidu.com" @click.prevent="linkClick">百度</a>
linkClick(){
console.log("触发链接点击")
}
- .capture添加事件侦听器时使用事件捕获模式，点击按钮时先触发div点击事件，再触发按钮点击事件
<div class="inner" @click.capture="divHandler">
<input type="button" value="点击" @click.stop="btnHandler">
</div>
- .self当事件在该元素本身（不是子元素）触发时触发回调，点击按钮不会触发div点击事件，只有点击div本身时才会触发
<div class="inner" @click.self="divHandler">
<input type="button" value="点击" @click.stop="btnHandler">
</div>
- .once事件只触发一次 ，触发时间后重复点击不会再次触发事件（只触发一次事件处理函数），事件修饰符可以串联，第二次点击会跳转链接到目标网页
<a href="http://www.baidu.com" @click.prevent.once="linkClick">百度</a>
- .stop和.self的区别,.stop阻止所有冒泡行为.self只阻止自身冒泡行为的触发，并不会真正阻止冒泡行为
数据绑定
var tpp=new Vue({
el:"#div1",
data:{
msg:'1234567'
},
methods:{}
})
- v-bind只能实现数据单项绑定，更改文本框的内容后，msg并没有发生改变
<input type="text" :value="msg">
改变文本框内容
msg不改变
- v-model双向数据绑定（v-model只能运用在表单元素中）， 绑定后改变文本框中的值，查询msg中的值，果然也发生了变化
<input type="text" v-model="msg">
改变文本框内容
msg改变
简易计算器案例
- 使用v-model双向数据绑定所完成的简易计算器
<div id="div1">
<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="start">
<input type="text" v-model="result">
</div>
<script>
var jsq=new Vue({
el:"#div1",
data:{
n1:0,
n2:0,
result:0,
opt:'+',
},
methods:{
start(){//计算器的算术方法
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;
}
}
},
})
</script>
计算器实例.png
- eval强行解析字符串,star（）{}内可改为
var str='parseInt(this.n1)' + this.opt + 'parseInt(this.n2)'
this.result=eval(str)
vue中的class样式
- 同时拥有两种样式
<h2 class="red italic">测试</h2>
- 直接传递一个数组
<h2 :class="['red','italic']">测试</h2>
- 使用三元表达式
<h1 :class="[flag?:'red']">test</h1>
flag:true
- 数组中使用对象来代替三元表达式
<h1 :class="[{italic:false, red:true}]">test</h1>
<style>
.red{
color: red;
}
.italic{
font-style: italic;
}
</style>
