v-model和双向数据绑定

• {{}}是单向的数据绑定(只能输出，不能输入)，v-model是双向的数据绑定，即可以输入也可以输出。
• v-model用在input上，官网的教程里说了 <input v-model="sth /> 只是语法糖，实际上是这么实现的：

<input v-model="sth" />
<input v-bind:value="sth" v-on:input="sth = $event.target.value" />

第一行的代码其实只是第二行的语法糖。然后第二行代码还能简写成这样：

<input :value="sth" @input="sth = $event.target.value" />

input本身有oninput事件，这是HTML5新增加的类似onchange，每当输入框内容发生变化，就会触发oninput，把最新的value传递给sth。
一个互斥单选的例子：

//html
    <div id="app">
        <input type="radio" v-model="picked" value="html" id="html">
        <label>html</label>
        <br>
        <input type="radio" v-model="picked" value="js" id="js">
        <label>js</label>
        <br>
        <input type="radio" v-model="picked" value="css" id="css">
        <label>css</label>
        <br>
        <p>选择的项是:{{ picked }}</p>
    </div>
//script
    var app = new Vue({
        el: '#app',
        data: {
            picked: 'js'
        }
    })