【前端框架学习】使用v-on定义Vue中的事件

1.使用传统js的方式定义事件

传统的js中通常会操作DOM来定义事件。

<div id="app">
    <input type="button" id='btn'>
</div>
<script>
     //传统js方式定义事件
     document.getElementById('btn').onclick = function(){
        alert('hello,world!');
     }
</script>

2.使用v-on

在 vue 中强调减少操作DOM，所以会使用v-on的方式来绑定事件。

在v-on不能使用传统的js语句，而是要在vm中使用methods属性来定义事件，需要注意的是，methods不是一个数组而是对象。

在vue中同样提供了v-on缩写机制，v-on的缩写为 ' @ '，例如 '  @click ' 就可以触发点击事件。

在这个methods属性，中定义了当前vue实例中可用的方法：

methods: {
    show: function(){
        alert('hello,world');
    }
}

下面是一个完整的示例：

    <div id="app">
        <input type="button" value="btn" v-on:click='show()'>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        var vm = new Vue({
            el: '#app',
            methods: {//在methods中定义了当前vue实例中可用的方法
                show: function () {
                    alert('hello,world');
                }
            }
        });

    </script>

3.v-on指令的其他事件

鼠标覆盖事件： mouthover，

点击事件： click，

以及其他事件，具体可以参考：vue中v-on支持的事件总结 - 深夜独行侠 - 博客园资源事件 事件名称何时触发 error 资源加载失败时。 abort 正在加载资源已经被中止时。 load 资源及其相关资源已完成加载。 beforeunload window，document 及其https://www.cnblogs.com/torchstar/p/11799394.html