v-model

可以用在input中也可以用在textarea中 ，以及select中

包含两个指令：
一个v-bind,把message的值时时放到value中，
另一个v-on,给当前元素绑定input事件，将event.target.value赋值给message

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

</head>

<body>
    <div id="app">
        <input type="text" v-model="message">
        <!--上面的代码等同于下方的 -->
        <input type="text" v-bind:value="message" @input="changeValue">
        <!-- 绑定事件中 -->
        <!-- <input type="text" v-bind:value="message" @input="changeValue"> -->
        <!-- 可以直接写在监听事件里 -->
        <!-- <input type="text" v-bind:value="message" @input="message = $event.target.value"> -->
        <h2> {{message}}</h2>
    </div>

    <script>
        const app = new Vue({
            el: '#app',
            data: {
                message: '你好啊，加油啊',
            },
            methods: {
                changeValue(event) {
                    //有事件时会产生event（里面包含想要的信息）
                    // 在上面的html中不需要加，在此传的event会自动传过去
                    //这个target.value是最新的value，复制给message即可
                    this.message = event.target.value
                }
            }
        })
    </script>
</body>

</html>