02-Vue事件机制、表单、计算属性、监听器

1. 事件机制

(1) 事件绑定
    可以用v-on指令监听DOM事件，并再触发时运行一些JavaScript代码。v-on还可以接收一个需要调用的方法名称。
    <button v-on:click="handler">good</button>
    methods: {
        handler: function(event){
            if(event){
                alert(event.target.tagName)//event是原生DOM事件
            }
        }
    }

    除了直接绑定到一个方法，也可以在内联JavaScript语句中调用方法，通过$event传递原生事件对象：
    <button v-on:click="say('hi', $event)"> say hi </button>
    methods: {
        say: function(message, event){
            alert(message)
        }
    }

    由于事件绑定在Vue中使用概率较大，所以这里提供了简写形式
    <button @click="handler('hi', $event)">hello</button>

(2) 事件修饰符
    .stop 停止事件冒泡
    .prevent 组织事件默认行为
    .capture 在事件捕获阶段执行事件处理函数
    .self 只当在event.target是当前元素自身时触发处理函数
    .once 事件处理函数执行一次后解绑
    .passive 滚动事件的默认行为（即滚动行为）将会立即触发，一般与scroll连用，能够提升移动端的性能。
(3) 按键修饰符
    一般与keyup事件类型配合使用
    .enter, .tab, .delete, .esc, .up, .down, .left, .right, .ctrl, .alt, .shift, .meta
(4) 鼠标修饰符
    .left , .right, .middle
(5) event.target 和 event.currentTarget 的区别。
    event.target是触发事件的源头元素，目标元素
    event.currentTarget 是当前执行事件处理程序的元素，当前目标元素，调用者，绑定在谁身上。

2. 表单

可以用v-model指令在表单<input>, <textarea> 及 <select> 元素上创建双向数据绑定。
它会根据控件类型自动选取正确的方法来更新元素。
尽管有些神奇，但v-model本质上不过是语法糖。它负责监听用户的输入事件以更新数据，并对一些极端场景进行一些特殊处理。
使用v-model绑定了值，那么name属性就可以不用写了。

(1) 双向数据绑定
    通过v-model这条指令进行数据的双向绑定。
    视图修改 => viewModel => model修改数据
    model数据改变 => viewModel => view视图更新
(2) 修饰符
    .lazy v-model由原来的input触发转成change事件触发
    .number 将当前输入框的输出值自动转成number类型
    .trim 将输出值前后的空格消除掉。

3. 计算属性

(1)可以将某个变量经过计算然后再输出。
(2)我们希望一个变量是经过某种计算然后输出而不是直接输出的时候可以使用到计算属性。
(3)计算属性是基于它们的响应式依赖进行缓存的。只在相关响应式依赖发生改变时它们才会重新求值。而每次调用函数都会导致函数的重新执行。
(4) methods和computed的区别：
    1.两种方式的最终结果都是完全相同的。不同的是计算属性是基于它们的响应式依赖进行缓存的。只在相关响应依赖发生改变时它们才会重新求值。
    2.也就是说。多次访问方法时，只要没有发生，计算属性会立即返回之前的计算结果，而不必再次执行函数函数
    3.计算属性的优点：在数据不发生变化时，可以直接引用。

4.监听器

需要在数据变化时执行异步或开销较大的操作时，使用监听器
watch:{
    //基本数据类型
    a(newVal, oldVal){},
    //引用数据类型(如果用普通监听，只能监听到引用地址的改变)
    obj: {
        handler(newVal, oldVal){},
        deep: true
    }
    //监听引用数据类型内部某个具体值
    "obj.username" : {
        handler(newVal, oldVal){},
        deep: true
    }
}