• vue事件处理&&表单输入绑定

    1.监听事件

    我们可以使用 v-on 指令 (简写为 @) 来监听 DOM 事件，并在事件触发时执行对应的 JavaScript。用法：v-on:click="handler" 或 @click="handler"。

    事件处理器 (handler) 的值可以是：

    1. 内联事件处理器：事件被触发时执行的内联 JavaScript 语句 (与 onclick 类似)。

    2. 方法事件处理器：一个指向组件上定义的方法的属性名或是路径。

    1.1内联事件处理器

    1. const count = ref(0)
    2.  
    4. <p>Count is: {{ count }}p>

    1.2方法事件处理器

    随着事件处理器的逻辑变得愈发复杂，内联代码方式变得不够灵活。因此 v-on 也可以接受一个方法名或对某个方法的调用。

    event 传入的是一个button 对象 

    event.target

    1. const name = ref('Vue.js')
    2.  
    3. function greet(event) {
    4.   alert(`Hello ${name.value}!`)
    5.   // `event` 是 DOM 原生事件
    6.   if (event) {
    7.     alert(event.target.tagName)
    8.   }
    9. }
    10.  
    12. <button @click="greet">Greetbutton>

    法事件处理器会自动接收原生 DOM 事件并触发执行。在上面的例子中，我们能够通过被触发事件的 event.target.tagName 访问到该 DOM 元素。

    1.3在内联处理器中调用方法

    除了直接绑定方法名，你还可以在内联事件处理器中调用方法。这允许我们向方法传入自定义参数以代替原生事件：

    1. function say(message) {
    2.   alert(message)
    3. }
    4.  
    6. <button @click="say('bye')">Say byebutton>

    1.4Vue 为 v-on 提供了事件修饰符。

    2. <a @click.stop="doThis">a>
    3.  
    5. <form @submit.prevent="onSubmit">form>
    6.  
    8. <a @click.stop.prevent="doThat">a>
    9.  
    11. <form @submit.prevent>form>
    12.  
    15. <div @click.self="doThat">...div>
    16.  
    17.  
    20. <div @click.capture="doThis">...div>
    21.  
    23. <a @click.once="doThis">a>
    24.  
    27. <div @scroll.passive="onScroll">...div>

    表单输入绑定

    在前端处理表单时，我们常常需要将表单输入框的内容同步给 JavaScript 中相应的变量。手动连接值绑定和更改事件监听器可能会很麻烦：

    //    @input="evnet" 或v-on:input="evnet"

    2.   :value="text"
    3.   @input="event => text = event.target.value">
    4.  
    5. v-model 指令帮我们简化了这一步骤：
    6. "text">

    ci外，v-model 还可以用于各种不同类型的输入，