v-model实现数据双向绑定的本质

v-model用于表单、 及 数据的双向绑定，其本质上有两个作用：
1.v-bind(:)绑定一个value属性，将监听事件的数据放入input中 :value
2.v-on(@)给当前元素绑定input事件，对input事件的监听 @input
举一个简单的例子：代码在下面。
v-model绑定test,输入框显示test的值，修改输入框的值，因为v-model双向绑定，下面data里面的test也会发生改变，下面data里面的test发生了改变，渲染到view界面上{{test}}也会发生改变 。
简单案例：

   <input type="text" v-model="test">{{test}}
       <!-- v-model绑定test,输入框显示test的值，修改输入框的值，
        因为v-model双向绑定，下面data里面的test也会发生改变，
        下面data里面的test发生了改变，渲染到view界面上{{test}}
        也会发生改变-->
        <br>
        <!--下拉框-->
         <select v-model="selected">
            <option value="A被选">A</option>
            <option value="B被选">B</option>
            <option value="C被选">C</option>
        </select>
        <span>Selected: {{ selected }}</span>
        <br>
       <!--单选按钮-->
        <input type="radio" id="small" value="small" v-model="picked">
        <label for="small">small</label>
        <br>
        <input type="radio" id="big" value="big" v-model="picked">
        <label for="big">big</label>
        <br>
        <span>Picked: {{ picked }}</span>
    </div>

  new Vue({
            el: '#app',
            data: {
                test:'',
                selected: '',
                picked: ''

            }
        });