属性事件:click、dbclick、mouseover、mouseout、mouseenter、mouseleave、mousedown、mouseup、mousemove
键盘事件:keydown、keyup、keypress
ui事件:scroll、resize、load、unload
表单事件:focus、blur、select、change、submit
事件方法,一般都放在methods 里面写
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<div id="app">
<button v-on:click.once="one() ">你好</button>
<button @click.once="one() ">你好</button>
</div>
<script>
new Vue({
el: '#app',
methods: {
one() {
alert("hello,work ")
},
}
});
</script>
时间修饰符
.prevent,阻止默认行为
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<div id="app">
<a href=" https://www.baidu.com " @click.prevent="zuzhi() ">baidu</a>
</div>
<script>
new Vue({
el: '#app',
methods: {
zuzhi() {
},
}
});
</script>
.stop, 阻止冒泡事件
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<style>
.three {
width: 100px;
height: 100px;
background-color: aqua;
}
.one {
width: 300px;
height: 300px;
background: beige;
}
.two {
width: 200px;
height: 200px;
background-color: blue;
}
</style>
<div id="app">
<div class="one" @click.stop="onea()">
<div class="two " @click.stop="twoa()">
<div class="three" @click.stop="appa()"></div>
</div>
</div>
</div>
<script>
new Vue({
el: '#app',
methods: {
//冒泡
appa() {
alert(3)
},
onea() {
alert(1)
},
twoa() {
alert(2)
}
}
});
</script>
以此类推.......
.capture 冒泡改为捕获
.self 只处理自己身上的事件,不理会冒泡或捕获
.once 一次事件,只执行一次
.native 触发原生的事件(有时发现用一些第三方的组件库时,例如一个封装好的button按钮,绑定点击事件却没有任何作用,这时便需要加 .native)
tab导航选项卡
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<div id="app">
<div>
<button v-for="(val,index) in arrTabs" @click="indexcode=index" :class="indexcode==index?'red':''">{{val.title}}</button>
</div>
<div v-for="(val,index) in arrTabs" v-if="indexcode==index">
{{val.contents}}
</div>
</div>
<script type="text/javascript">
new Vue({
el: '#app',
data: {
indexcode: 0,
arrTabs: [ {
'title': '军事新闻',
'contents': '1949年,中华人民共和国今天成立了'
}, {
'title': '娱乐新闻',
'contents': '萧敬腾,来北京了今天看来是要下雨了'
}, {
'title': '科技新闻',
'contents': '前端是世界上最好的语言'
} ]
}
});
</script>