web前端vue：表单输入双向绑定

vue的双向数据绑定非常简单，比如以前要写很多js代码才能实现一个在表单里，输入的值实时显示或与后台交互，现在只要v-model一个指令就能实现了，它会根据控件类型自动选取正确的方法来更新元素。尽管有些神奇，但 v-model 本质上不过是语法糖。它负责监听用户的输入事件以更新数据，并对一些极端场景进行一些特殊处理。
注意：v-model 会忽略所有表单元素的 value、checked、selected 特性的初始值而总是将 Vue 实例的数据作为数据来源。你应该通过 JavaScript 在组件的 data 选项中声明初始值。

文本例子：
<input v-model="message" /> //一个简单的文本框
<p>Message is: {{ message }}</p>  // 输入的值，实时显示
多行文本
<p style="white-space: pre-line;">{{ message2 }}</p>
<br>
<textarea v-model="message2" placeholder="add multiple lines"></textarea>
复选框
<input type="checkbox" v-model="checked">
<label for="checkbox">{{ checked }}</label>
多选框
  <input type="checkbox" id="jack" value="Jack" v-model="checkedNames">
  <label for="jack">Jack</label>
  <input type="checkbox" id="john" value="John" v-model="checkedNames">
  <label for="john">John</label>
  <input type="checkbox" id="mike" value="Mike" v-model="checkedNames">
  <label for="mike">Mike</label>
  <br>
  <span>Checked names: {{ checkedNames }}</span>
单选
<input type="radio" id="one" value="One" v-model="picked">
  <label for="one">One</label>
  <br>
  <input type="radio" id="two" value="Two" v-model="picked">
  <label for="two">Two</label>
  <br>
  <span>Picked: {{ picked }}</span>
<script>
export default {
        data () {
            return {  //初始值
                message: '', // 表单值
                message2: '', //多行文本
                checked: false, // 复选框布尔值
                checkedNames: [], //多选框，选中自动会把value，添加到数组里
                picked:''  //自动判断，自动选中取值
            }
        }
    }
</script>

data的元素，会实时的监听表单里输入的值和选中的值，然后实时的对应的改变数据，是不是感觉方便很多啊？剩下了你大把的撸码的时间，简单轻松的就能取到想要的对应值。
有不懂的朋友或喜欢前端的同学可以加我微信（nihaomeili87）我们一起进步！