我的怎么学会vue的02：v-on事件监听（附计数器案例）

给元素添加事件

给元素添加事件的方法：使用v-on指令。

比如给button元素添加一个点击（click）事件：

<button v-on:click="">我是一个按钮</button>

简写方式：
<button @click="">我是一个按钮</button>

@是v-on:的语法糖（语法糖就是简写的意思）

点击之后要做的事，可以写在click=""这个引号里面（如果只有一句代码的话），也可以定义一个函数，把函数名写在引号里面click="add"。定义函数要在vue实例的methods属性里面定义。

const app = new Vue({
        el: '#app',
        data: obj,
        methods: {     //在这里定义事件对应的函数 
            add: function () {
                console.log('add被执行');
            }
        }
    })

案例：计数器

如下图所示，初始值为0，点击加号，数值+1，反之-1。

第一步：页面布局，并添加点击事件

<div id="app">
    <h2>当前计数: {{counter}}</h2>
    <button v-on:click="">+</button>
    <button v-on:click="">-</button>
</div>

第二步：创建vue实例

<script src="../js/vue.js"></script>
<script>
    // 初始值
    const obj = {
        counter: 0
    }

    const app = new Vue({
        el: '#app',
        data: obj,
        methods: {
            //方法都写在这
        }
    })
</script>

第三步：定义点击事件要执行的动作

有两种写法，这里的例子比较简单，可以把代码直接写到标签里面，如下

<div id="app">
    <h2>当前计数: {{counter}}</h2>
    <button v-on:click="counter++">+</button>
    <!--这个counter就是我们定义的那个counter-->
    <button v-on:click="counter--;">-</button>
</div>

当然大多数情况下，要执行的动作不会这么简单，所以常用下面的写法：

<div id="app">
    <h2>当前计数: {{counter}}</h2>
    <button v-on:click="add">+</button>
    <button v-on:click="sub">-</button>
    <!--下面是语法糖写法-->
    <!--<button @click="sub">-</button>-->
</div>

<script>
    const app = new Vue({
        el: '#app',
        data: {
            counter: 0
        },
        methods: {
            add: function () {
                console.log('add被执行');
                this.counter++   //this指的是当前vue实例的data
            },
            sub: function () {
                console.log('sub被执行');
                this.counter--
            }
        }
    })
</script>

add和sub，是函数还是方法？
是方法。因为add里面的this，和实例app是绑定的，所以add是方法。sub同理。
解析：js中方法和函数的区别

v-on的参数传递

1.在事件监听时，且监听的那个事件不需要传递参数，才可以省掉()

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

在这个案例中，js不需要传参数进去，此时可以省掉()

const app = new Vue({
    el: '#app',
    data: {
      
    },
    methods: {
      btn1Click() {
        console.log("btn1Click");
      }
    }
})

2.在定义事件时，函数需要参数，但没有传入，那么函数形参的值为undefined

<button @click="btn2Click()">按钮2</button>

const app = new Vue({
    el: '#app',
    data: {
      
    },
    methods: {
      btn2Click(event) {
        console.log('--------', event);//-------- undefined
      }
    }
})

这个案例中，函数需要传入event参数，但是没有传，那么函数形参的值为undefined。

3.在事件定义时, 写方法时省略了小括号, 但是方法本身需要一个参数, 则Vue会默认将浏览器生成的event事件对象作为参数传入到方法

<button @click="btn3Click">省略了小括号</button>

const app = new Vue({
    el: '#app',
    data: {
      
    },
    methods: {
      btn2Click(event) {
        console.log('--------', event);//-------- MouseEvent {isTrusted: true, screenX: 133, screenY: 86, clientX: 133, clientY: 15, …}
      }
    }
})

4.定义方法时，既需要event对象，又需要其他参数

<button @click="btn4Click">省略了小括号</button>

const app = new Vue({
    el: '#app',
    data: {
      
    },
    methods: {
     btn4Click(abc, event) {   //需要给传入多个参数
        console.log('++++++++', abc, event);  //++++++++ MouseEvent {isTrusted: true, screenX: 201, screenY: 92, clientX: 201, clientY: 21, …} undefined
      }
    }
})

第一种情况，当我还是不写小括号的话，就默认传event，但是只能传给第一个形参，所以这里形参的abc的值就是event对象，形参event的值是undefined。

第二种情况，当我写小括号，并且给方法传值了

<button @click="btn4Click">省略了小括号</button>

const app = new Vue({
    el: '#app',
    data: {
      abc:123
    },
    methods: {
     btn4Click(abc, event) {   //需要给传入多个参数
        console.log('++++++++', abc, event);  //++++++++ 123 undefined
      }
    }
})

此时的event依然是undefined。因为传值的时候直接写event的话，vue会认为event是一个变量名，并从data里面去找（就像找abc那样），找不到就会报undefined。

如果要获取浏览器生成的那个event对象，需要使用$event，而不能直接写event。

 btn4Click(abc, $event)

v-on的修饰符

修饰符	作用	演示
.stop	阻止事件冒泡
.prevent	阻止默认事件
.{keyCode或keyAlias}	监听键盘按键
.native	监听组件根元素的原生事件 （只用在组件里）
.once	只能触发一次	<button @click.once="btn2Click">按钮2</button>