Vue-监听属性和事件处理

一、事件处理

可以用 v-on 指令监听 DOM 事件，并在触发时运行一些 JavaScript 代码。

1.1 v-on指令监听单击事件

案例1：

	<div id="app">
        <button v-on:click="count++">点击一次</button>
        <p>点击了：{
   {
   count}}次</p>
    </div>

    <script>
        let vm = new Vue({
   
            el: "#app",
            data: {
   
                count: 0
            }
        })
    </script>

运行结果：

v-on监听单击事件，当点击按钮时记录点击次数，若想完成一个复杂的操作，此方法不能满足我们的要求，这时就需要另一种形式来处理单击事件。

案例2

	<div id="app">
        <button v-on:click="getter">点击一下</button>
    </div>

    <script>
        let vm = new Vue({
   
            el: "#app",
            data: {
   
                name: "Vue.js"
            },
            methods: {
   
                getter: function(event) {
         //点击时调用的方法
                    alert("Hello" + this.name);
                    if (event) {
   
                        alert(event.target.tagName);
                    }
                }
            }
        })
    </script>

运行结果：