vue中事件绑定

事件另一种写法

一般我们事件是这么写

<div id="app">
        <button @click="handleClick">提交</button>
    </div>
    <script>
    var vm=new Vue({
        el:'#app',
        methods:{
            handleClick(){
                alert('a')
            }
        }
    })
    </script>

但其实我们也可以按下面方式写

<div id="app">
        <button @click="handleClick($event,1,2,3)">提交</button>
    </div>
    <script>
    var vm=new Vue({
        el:'#app',
        methods:{
            handleClick(e,one,two,three){
                console.log(e,one,two,three)
            }
        }
    })
    </script>

这么写的好处是可以传参

阻止 prevent修饰符

<div id="app">   
        <form action="/abc">
            <button @click="handleClick">提交</button>
        </form>
    </div>
    <script>
    var vm=new Vue({
        el:"#app",
        methods:{
            handleClick(){
                console.log('a')
            }
        }
    })
    </script>

向上面这种写法，当我们点提交时，页面会跳转会提交到abc，但如果我们不要它跳转，要阻止它怎么办呢？
只需要在form上加上 @click.prevent handleClick中的方法会执行，但是不跳转了

<div id="app">   
        <form action="/abc" @click.prevent>
            <button @click="handleClick">提交</button>
        </form>
    </div>
    <script>
    var vm=new Vue({
        el:"#app",
        methods:{
            handleClick(){
                console.log('a')
            }
        }
    })
    </script>

这是因为vue提供了一种事件修饰的语法，prevent事实上就是事件修饰符，它的意思是，一旦点击的时候，vue会自动帮你取阻止事件的默认行为。
@click.prevent后面也可以加事件的方法，同样的这么写方法会执行但是不跳转

<div id="app">   
        <form action="/abc" @click.prevent="handleClick">
            <button >提交</button>
        </form>
    </div>
    <script>
    var vm=new Vue({
        el:"#app",
        methods:{
            handleClick(){
                console.log('a')
            }
        }
    })
    </script>

vue中除了prevent修饰符，还有stop修饰符(阻止事件向外冒泡) self once

self修饰符

<div id="app">   
        <div @click="handleClick">
            <div>hello world</div>
        </div>
    </div>
    <script>
    var vm=new Vue({
        el:"#app",
        methods:{
            handleClick(){
               alert('hello world')
            }
        }
    })
    </script>

当我们点击hello world时实际上是进行了一次冒泡，它冒泡到上一层div上，触发了handleClick事件。如果有个需求：只有点击了最上面一层div才能执行handleClick事件，冒泡上来的事件不执行，应该怎么处理呢？

<div id="app">   
        <div @click.self="handleClick"> //给最外城div的click事件加上self修饰符即可
            one
            <div>hello world</div>
        </div>
    </div>
    <script>
    var vm=new Vue({
        el:"#app",
        methods:{
            handleClick(){
               alert('one')
            }
        }
    })
    </script>

once修饰符

<div id="app">   
        <div @click.once="handleClick">
            hello world
        </div>
    </div>
    <script>
    var vm=new Vue({
        el:"#app",
        methods:{
            handleClick(){
               alert('hello world')
            }
        }
    })
    </script>

当点击第一次的时候会弹出hello world ，再次点击就不弹了

capture

<div id="app">   
        <div @click="handleClick">
            <div @click="handleClickInner">hello world</div>
        </div>
    </div>
    <script>
    var vm=new Vue({
        el:"#app",
        methods:{
            handleClick(){
               alert('outer')
            },
            handleClickInner(){
                alert('inner')
            }
        }
    })
    </script>

这段代码，先弹出inner再弹出outer 因为是遵循冒泡事件绑定机制(由内而外) ，但有时候我们希望把冒泡机制改成捕获，那就在每个事件绑定的后面加上.capture

<div id="app">   
        <div @click.capture="handleClick">
            <div @click.capture="handleClickInner">hello world</div>
        </div>
    </div>
    <script>
    var vm=new Vue({
        el:"#app",
        methods:{
            handleClick(){
               alert('outer')
            },
            handleClickInner(){
                alert('inner')
            }
        }
    })
    </script>

这样就首先是outer再是inner 它遵循的是事件捕获机制(由外到内)

vue的按键修饰符

<div id="app">   
        <input type="text" @keydown="handleKeydown">
    </div>
    <script>
    var vm=new Vue({
        el:"#app",
        methods:{
            handleKeydown(e){//e是事件对象
               console.log(e.target.value) //e.target指的是input框dom元素节点，原生里面调用value属性可以把节点的值输出来
            }
        }
    })
    </script>

只要一按下就会在控制台打印，但是这不是我们要的，我们要的是整个输入完毕后回车再打印到控制台，怎么做呢？

<div id="app">   
        <input type="text" @keydown.enter="handleKeydown">
    </div>
    <script>
    var vm=new Vue({
        el:"#app",
        methods:{
            handleKeydown(e){
               console.log(e.target.value)
            }
        }
    })
    </script>

除了enter修饰符之外，还有tab（它指的是只有按tab这个事件才会触发），delete，esc等等。

系统修饰符（ctrl，alt，shift，meta）
鼠标修饰符（right，left，middle）

<div id="app">   
        <input type="text" @click.right="handleKeydown">
    </div>
    <script>
    var vm=new Vue({
        el:"#app",
        methods:{
            handleKeydown(e){
               console.log(e.target.value)
            }
        }
    })
    </script>

当按下鼠标右键才会执行方法