vue学习记录（6、v-on）

1、语法糖

<div id="app">
    <h2>{{counter}}</h2>
    <!--    普通写法-->
    <button v-on:click="counter++">+</button>
    <button v-on:click="counter--">-</button>
    <!--    v-on语法糖写法-->
    <button @click="increment">++</button>
    <button @click="decrement">--</button>
</div>

<script src="../js/vue.js"></script>
<script>
    const app = new Vue({
        el:'#app',
        data:{
            counter:0
        },
        methods:{
            increment(){
                this.counter++
            },
            decrement(){
                this.counter--
            }
        }
    })
</script>

2、参数问题

<div id="app">
    <!--    事件调用的方法没有参数-->
    <button @click="btn1Click()">按钮1</button>
    <button @click="btn1Click">按钮1</button>

    <!--    在事件定义时，写函数时省略了小括号，但是方法本身是需要一种参数的-->
    <!--    这时，Vue会默认浏览器产生的event事件对象作为参数传入到方法-->
    <!--    Event 对象代表事件的状态，比如事件在其中发生的元素、键盘按键的状态、鼠标的位置、鼠标按钮的状态。 事件通常与函数结合使用，函数不会在事件发生前被执行！-->
    <button @click="btn2Click">按钮2</button>


    <!--    方法定义时，需要event参数，也需要其他参数-->
    <!--    在调用时，如何手动的获取浏览器参数的event对象：$event-->
    <button @click="btn3Click(123,$event)">按钮4</button>


    <button @click="btn1Click()">按钮5</button>
</div>

<script src="../js/vue.js"></script>
<script>
    const app = new Vue({
        el:'#app',
        data:{
            message:'你好啊'
        },
        methods:{
            btn1Click(){
                console.log("打印1")
            },
            btn2Click(event){
                console.log("打印2")
            },
            btn3Click(event,abc){
                console.log("打印3")
            }
        }
    })
</script>

3、修饰符

Vue提供了修饰符来帮助我们方便的处理一些事件：
.stop - 调用 event.stopPropagation()。
.prevent - 调用 event.preventDefault()。
.{keyCode | keyAlias} - 只当事件是从特定键触发时才触发回调。
.native - 监听组件根元素的原生事件。
.once - 只触发一次回调。