先看代码:
- <div id="box">
- {{count}}
- <button @click="handleAdd1()">add1button>
- <button @click="handleAdd2">add2button>
- div>
- <script>
- new Vue({
- el: "#box",
- data: {
- count: 0,
- },
- methods: {
- handleAdd1(){
- this.count++
- },
- handleAdd2(evt) {
- this.count++
- console.log(evt)
- },
- }
- })
- script>
结果:点击add1,count数量会增加;点击add2,count数量会增加,然后打印出evt的值见下图:
打印evt.target结果是这个button事件对象:
console.log(evt.target)
结果:
事件绑定用法:
- handleAdd1(evt,a,b,c){
- console.log(evt,a,b,c)
- },
结果:
获取input输入框的值:
代码:
- <div id="box">
- <input type="text" @input="handleInput">
- div>
- <script>
- new Vue({
- el: "#box",
- data: {
- count: 0,
- },
- methods: {
- handleInput(evt){
- console.log(evt.target.value)
- }
- }
- })
- script>
- body>
结果:
事件修饰符:
stop的用法:加在子标签身上,可以阻止事件冒泡
"handleUIClick">
- <li @click.shop="handleLiClick">111li>
- <li @click="handleLiClick">111li>
- <li>333li>
self的用法:加在自己身上,可以阻止子标签事件冒泡,就是只有当点击自己的时候才会触发事件
self="handleUIClick">
- <li @click.shop="handleLiClick">111li>
- <li @click="handleLiClick">111li>
- <li>333li>
once的用法:触发一次事件,下次就不会再触发了,禁用了
- once="handleLiClick">111
prevent的用法:阻止默认行为
"http://www.baidu.com" @click.prevent>跳转