v-model的使用和原理

自己记录,还在进步中...

方法1，v-model一步完成 ，最常用

方法2，v-model的原理。v-model其实是一个语法糖，它的背后本质上包含两个操作\

.v-bind实现了数据的绑定,但是没有实现实时绑定message\

2.v-on指令给当前元素绑定input事件(动态监听用户输入事件)\

• 1.单向绑定(v-bind):数据只能从data流向页面
• 2.双向绑定(v-model):数据不仅能从data流向页面，还可以从页面流向data 备注: -- 1.双向绑定一般都应用在表单类元素上，如input,select等 -- 2.v-model:value可以简写为v-model，因为v-model默认收集的就是value值 ​

<div id="app">
       <input type='text' :value='message' v-on:input='valueChange'> 
         <h2>{{message}}</h2>
         
     </div>
     
     <script type="text/javascript">
      const app = new Vue({
          el:'#app',
         data:{
           message:'今天发了一篇小红书'
         },
         methods:{
           valueChange(event){
             // console.log('起作用')//2.v-on:input的事件
             // this.message = '有事件发生，这里进行赋值',//2.
             this.message = event.target.value//2.通过event,这个value就是input里面的value
           }//一旦浏览器产生事件，浏览器会生成event对象，里面包含想要的信息
         }
      })

        </script>

当值仅绑定v-bind时，数据不是实时的

<input type='text' :value='message'>

绑定了event事件之后
event.target.value\

方法3$event