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

(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 是以后执行事件处理程序的元素，以后指标元素，调用者，绑定在谁身上。

 能够用 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 将输入值前后的空格打消掉。

(1) 能够将某个变量通过计算而后再输入。(2) 咱们心愿一个变量是通过某种计算而后输入而不是间接输入的时候能够应用到计算属性。(3) 计算属性是基于它们的响应式依赖进行缓存的。只在相干响应式依赖产生扭转时它们才会从新求值。而每次调用函数都会导致函数的从新执行。(4) methods 和 computed 的区别：1. 两种形式的最终后果都是完全相同的。不同的是计算属性是基于它们的响应式依赖进行缓存的。只在相干响应依赖产生扭转时它们才会从新求值。2. 也就是说。屡次拜访办法时，只有没有产生，计算属性会立刻返回之前的计算结果，而不用再次执行函数函数
    3. 计算属性的长处：在数据不发生变化时，能够间接援用。

 须要在数据变动时执行异步或开销较大的操作时，应用监听器
watch:{
    // 根本数据类型
    a(newVal, oldVal){},
    // 援用数据类型 (如果用一般监听，只能监听到援用地址的扭转)
    obj: {handler(newVal, oldVal){},
        deep: true
    }
    // 监听援用数据类型外部某个具体值
    "obj.username" : {handler(newVal, oldVal){},
        deep: true
    }
}

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

1. 事件机制

2. 表单

3. 计算属性

4. 监听器