vue基础学习（2）event

event 事件

事件是VUE很重要的一个组成

• 事件方法编写在methods中，可以利用v-on进行对象的事件绑定，缩写则为@eventName;
  栗子 单击按钮数字加1

	<div id="app">
            <button type="button" name="button" v-on:click="increase">Click me</button>
            <p>
                {{ counter }}
            </p>
        </div>
		<script type="text/javascript" src="https://cdn.bootcss.com/vue/2.6.9/vue.min.js"></script>
        <script type="text/javascript">
            new Vue({
                el: '#app',
                data: {
                    counter:0
                },
                methods: {
                    increase: function() {
                        this.counter++;
                    }
                }
            });
        </script>

• 如果是鼠标移动事件的绑定，可以利用v-on:mousemove进行绑定，函数中可带参数event，通过event来获取事件传递的属性；
  栗子 将鼠标XY传递给文字

<div id="app">
            <p v-on:mousemove="updateCoordinates">
                Coordinates: {{ x }} / {{ y }}
            </p>
        </div>
		<script type="text/javascript" src="https://cdn.bootcss.com/vue/2.6.9/vue.min.js"></script>
        <script type="text/javascript">
            new Vue({
                el: '#app',
                data: {
                    x:0,
                    y:0
                },
                methods: {
                    updateCoordinates:function(event){
                        this.x = event.clientX;
                        this.y = event.clientY;
                    }
                }
            });
        </script>

• 函数的参数传递，可以将事件$event作为参数传递到函数中；个人推荐为了区分实参用$event ，形参用event

<div id="app">
            <!-- 函数的参数传递，可以将事件$event作为参数传递到函数中 -->
            <button type="button" name="button" v-on:click="increase(2,$event)">Click me</button>
            <p>
                {{ counter }}
            </p>
            <p v-on:mousemove="updateCoordinates">
                Coordinates: {{ x }} / {{ y }}
            </p>
        </div>
		<script type="text/javascript" src="https://cdn.bootcss.com/vue/2.6.9/vue.min.js"></script>
        <script type="text/javascript">
            new Vue({
                el: '#app',
                data: {
                    counter:0,
                    x:0,
                    y:0
                },
                methods: {
                    increase: function( step, event ) {
                        this.counter += step;
                    },
                    updateCoordinates:function(event){
                        this.x = event.clientX;
                        this.y = event.clientY;
                    }
                }
            });
        </script>

• 事件可附带修饰符，修饰符除了有stop、prevent、capture、native、self还有键别名enter及键代码13的修饰符；

<div id="app">
            <!-- 函数的参数传递，可以将事件$event作为参数传递到函数中 -->
            <button type="button" name="button" v-on:click="increase(2,$event)">Click me</button>
            <p>
                {{ counter }}
            </p>
            <p v-on:mousemove="updateCoordinates">
                Coordinates: {{ x }} / {{ y }}
                - <span v-on:mousemove="dummy">停止鼠标事件</span>
                <!-- 也可以利用.stop来进行操作，则不需要函数支持 -->
                <span v-on:mousemove.stop="">停止鼠标事件</span>
            </p>
            <input type="text" name="name" v-on:keyup="alertMe">
            <br/>
            <!-- 可以限制函数在什么事件下才触发，当前限制的是在enter和space键操作keyup的时候触发alertMe函数 -->
            <input type="text" name="name" v-on:keyup.enter.space="alertMe">
        </div>
		<script type="text/javascript" src="../node_modules/vue/dist/vue.min.js"></script>
        <script type="text/javascript">
            new Vue({
                el: '#app',
                data: {
                    counter:0,
                    x:0,
                    y:0
                },
                methods: {
                    increase: function( step, event ) {
                        this.counter += step;
                    },
                    updateCoordinates:function(event){
                        this.x = event.clientX;
                        this.y = event.clientY;
                    },
                    dummy:function(event){
                        //stopPropagation方法阻止事件冒泡到父元素，阻止任何父事件处理程序被执行
                        event.stopPropagation();
                    },
                    alertMe:function(){
                        alert('Alert');
                    }
                }
            });
        </script>

看了这么多栗子，我们发现在vue中 我们的事件都是绑定在html中，发散思维这时候就要考虑为什么
官方API 给了我们三个优点

1. 扫一眼 HTML 模板便能轻松定位在 JavaScript 代码里对应的方法。
   在MVVM中 view视图层是最简单的，最容易我们阅读，我们可以一下看出那些元素绑定了事件
2. 因为你无须在 JavaScript 里手动绑定事件，你的 ViewModel 代码可以是非常纯粹的逻辑，和 DOM 完全解耦，更易于测试。
3. 当一个 ViewModel 被销毁时，所有的事件处理器都会自动被删除。你无须担心如何清理它们。
   以前在JQ或者JS中手动绑定事件后，如果我们删除了绑定的运算，但事件还在内存之中，而VUE帮我们实现自动删除，这也是性能优化的体现。