关于Vue的学习笔记（十）

关于Vue的一些基本参数、方法及其应用规则

表单绑定v-model

表单控件在实际开发中是非常常见的，特别是对于用户信息的提交，需要大量的表单。

Vue中使用v-model指令来实现表单元素和数据的双向绑定。以下面代码为案例：

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

<script src = "../JS/vue.js"></script>
<script>
  let app = new Vue({
    el: "#app",
    data:{
      message: "",
    },
  })
</script>

当我们在输入框输入数据时，因为input中的v-model绑定了message，所以会实现将输入的数据传递给message，message发生改变；当message发生改变，因为上面我们使用mustache语法将message值渲染到dom中，所以dom会发生相应的改变，所以说v-model实现了双向绑定。

 v-model原理：v-model实际上是一个语法糖，它的背后本质上是包含两个操作：1.v-bind绑定一个value属性，2.v-on指令给当前元素绑定input事件。以上面案例为例，实际上v-model实现操作为：

<div id = "app">
<!--  <input type="text" v-model="message">-->
  <input type="text" v-bind:value="message" @input="message = $event.target.value">
  <h2>{
  {message}}</h2>
</div>

<script src = "../JS/vue.js"></script>
<script>
  let app = new Vue({
    el: "#app",
    data:{
      message: "",
    },
    methods: {
      valueChange(event) {
        this.message = event.target.value;
      }
    }