006 Vue的v-on

[A] v-on作用

            作用：用于绑定事件，如监听鼠标事件，键盘事件等

            简写：@

            绑定类型：Function | Inline satatment | Object

            参数：event

       

[B] v-on的参数传递

            1. 基本使用，不传参时

                <button @click="addNum()">add</button>      // 绑定鼠标点击事件，一旦鼠标点击，则调用函数addNum()

                此时，在不传参时，函数后面的()可以不添加，即上述可改为：

                    <button @click="addNum">add</button>

            2. 使用时传入参数时

                当事件函数需要传入参数，但是调用时只写了函数名，没写()时，

                        则事件函数执行时，第一个参数会被浏览器定义为触发事件，其他的参数为undefined

                    如：

                        <button @click="addNumber">按钮2</button>

                        addNumber(a, b, c){

                            console.log(a, b, c);

                        }

                        // 返回结果为：MouseEvent{...}  undefined   undefined

                        // 当添加()时，即@click="addNumber()"，返回undefined    undefined   undefined

            3. 当事件函数需要传入触发事件，还要传入其他参数时，用$event表示事件本身

                    如：

                        <button @click="addNumber(10, $event, 'hello')">按钮2</button>

                        addNumber(a, b, c){

                            console.log(a, b, c);

                        }

                        // 则事件函数调用时，按顺序给形参赋值

                            即a = 10, b = MouseEvent{...}, a = "hello"

 

[C] v-on的修饰符

                v-on的修饰符很多，这些修饰符可以帮助我们方便的处理一些事件

            1. .stop    阻止冒泡，即调用了event.stopPropagation()

                当子元素和父元素都绑定了同一类事件时，触发子元素，事件会进行冒泡，父元素也会被触发

                如：

                    <div @click="divClick()">

                        <button @click="btnClick()">修饰符按钮</button>

                    </div>

                    当点击按钮时，会同事触发divClick()函数

                要想阻止这种冒泡，可以使用.stop修饰符，即得事件添加.stop属性即可

                    示例：<div @click="divClick()">

                            <button @click.stop="btnClick()">修饰符按钮</button>

                        </div>

            2. .prevent 阻止默认事件，即调用了event.preventDefault()

                示例：在表单中，点击提交，系统会自动将信息提交到指定的地方，如果我们想要自己调用函数进行提交，就需要阻止默认提交事件

                <form action="baidu">

                    <input type="submit" value="提交" @click.prevent="submitClick()">

                </form>

            3. .{keyCode | keyAlias}    监听键盘事件时，指定事件只有在特定的键上才会触发

                <input type="text" @keyUp.65="keyUp($event)">  

                    只有在键A(键码为65)按下时才会触发

            4. .native  自定义组件的事件，必须加入.native才会生效

                如：自定义组件<cpm @click="aClick()"></cpm>

                    该点击事件是无效的，需改为：

                        <cpm @click.native="aClick()"></cpm>

            5. .once    规定事件只触发一次