仅用于学习记录。视频：VUE学习

第一种

<div id="app">
        <input type="text" v-model="message">
        <h2>{{message}}</h2>
    </div>
    <script src="vue.js"></script>
    <script>
        const app = new Vue({
            el:'#app',
            data:{
                message:'hello'
            }
        })
    </script>

input中使用v-model，用它绑定了message，实时将输入的内容传递给data里的message，然后data里的message传到{{message}}

第二种

//v-bind精简成:      v-on:精简成@
//    :value="message"         @valueChange
<div id="app">
    <input type="text" v-bind:value="message" v-on:input="valueChange">
    <h2>{{message}}</h2>
</div>
<script src="vue.js"></script>
    <script>
        const app = new Vue({
            el:'#app',
            data:{
                message:'hello'
            },
            methods:{
                //在界面上产生一个事件后，浏览器生成一个事件对象
                //                          （包含正在改变的事件信息）
                valueChange(event){
                //此时发生的目标事件的值赋给data:message
                //动态绑定时刻改变的data:message，在input里用:value="message"
                    this.message=event.target.value
                }
            }
        })
    </script>

v-bind绑定一个value属性，v-on指令给当前元素绑定input事件（当输入input的时候同时会发生）

第三种

@input 用于监听事件 只要输入的值变化了就会触发input

<div>
    <input type="text" :value="message" @input="message=$event.target.value">
        <h2>{{message}}</h2>
</div>
<script src="vue.js"></script>
<script>
        const app = new Vue({
            el:'#app',
            data:{
                message:'hello'
            },
</script>