《input标签的input事件与change事件和v-model》

背景：记账页面的备注组件，有一个input输入框。

<template>
    <div>
        <label class="notes">{{value}}
            <span class="name">备注：</span>
            <input type="text" placeholder="在这里输入备注"
            :value="value" @input="value=$event.target.value">
        </label>
    </div>
</template>

<script lang="ts">
    import Vue from 'vue';
    import {Component} from 'vue-property-decorator';

    @Component
    export default class Notes extends Vue{
        value=''
       
    }
</script>

首先定义一个data，是value，初始值也就是用户没有输入备注时，是一个空字符串。

然后绑定input标签的value属性。

绑定input事件，只要input输入框的值发生改变就会触发，把输入的值赋给this.value。

input事件可以实现对input输入框值的实时监控，只要input输入框值发生改变就会触发。不需要点击或者enter之类的。

change事件在input失去焦点才会考虑触发，它的缺点是无法实时响应。也就是说，input输入框的值发生改变，鼠标在其他地方点一下，change事件才会被触发。

v-model指令

如果一个元素被绑定了value属性为一个内部数据如x，:value="x"

同时被绑定了一个input事件，这个事件会把输入值赋给x，@input="x=$event.target.value"

那么，这两句话可以用v-model="x"代替

<input type="text" placeholder="在这里输入备注"
            v-model="value" >

export default class Notes extends Vue{
        value=''

    }

效果就等同于input事件，随着输入，实时改变value属性。