关于前端:02Vue事件机制表单计算属性监听器

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
    }
}