一起学Vuejs（五）----- v-model基本使用和原理

不积跬步，无以至千里；不积小流，无以成江海。

 

Vuejs语言基础

 

v-model：

实现表单元素和数据的双向绑定（表单在实际开发中，特别是对用户信息的提交，非常常见）。

 

基本使用：

<div id="app">
  <input type="text" v-model="message">
  {{message}}
</div>

<script src="../js/vue.js"></script>

<script>
  const app = new Vue({
    el: '#app',
    data: {
      message: '你好呀'
    }
  })
</script>

 分析：

1.在输入框输入内容时，因为input中的v-model绑定了message，所以会实时将输入的内容传递给message，message发生改变；

2.当message发生改变时，因为使用Mustache语法，将message的值插入到DOM中,所以DOM会发生响应的改变；

3.所以，通过v-model实现了双向的绑定。

 

原理：

v-model其实是一个语法糖，它的背后本质上是包含两个操作：

1. v-bind 绑定一个value值

2. v-on 指令给当前元素绑定 input 事件

<div id="app">
<!--  <input type="text" v-model="message">-->
<!--  <input type="text" :value="message" @input="valueChange">-->
  <input type="text" :value="message" @input="message = $event.target.value">

  {{message}}
</div>

<script src="../js/vue.js"></script>

<script>
  const app = new Vue({
    el: '#app',
    data: {
      message: '你好呀'
    },
    methods: {
      valueChange(event){
        this.message = event.target.value;
      }
    }
  })
</script>