<div id="app">
  <input type="text" v-mode="username">  <!-- 让文本框的内容与某个数据双向绑定 -->
  <!-- 在使用v-model的时候不用再写value，因为v-model指令在底层封装的时候就对监听了文本框的value值的变化 -->
  <input type="text" :value="username">
  <!-- 双向数据绑定与单向数据绑定 -->
  <!-- 单向数据绑定：数据源的改动会同步到页面上，但页面输入的数据不会影响到数据源的数据 -->
  <select v-model="city">
     <option value="">请选择你的城市</option>
     <option value="1">北京</option>
     <option value="2">上海</option>
     <option value="3">广州</option>
     <option value="4">深圳</option>
  </select>
</div>

const vm = new Vue({
  el: '#app',
  data: {
    username:'zhangsan',
    city: ''    // city为空，默认选中“请选择你的选择城市”的选项。可以设置数字来选定默认的选项
  },
  methods: {
  }         
})

<div id="app">
  <input type="text" v-mode.number="n1"> + <input type="text" v-mode.number="n2"> = {{ n1 + n2 }}
  <!-- 注意：文本框获取的都是字符串，进行四则运算得进行数据类型转换 -->
  <!-- 使用.number修饰符，就能将字符串转化为数字型 -->
  <!-- 也可以将type设置为number，这样就只能输入数字而不能输入其他类型的字符 -->
  <input type="number" v-mode.number="n1">
</div>

const vm = new Vue({
  el: '#app',
  data: {
    n1: 1,
    n2: 2
  },
  methods: {
  }         
})

<template>
  <div id="root">
    // 单选按钮设置相同的name属性，实现多选一的效果
    性别：男<input type="radio" name="sex" v-model="sex">
    女<input type="radio" name="sex" v-model="sex">
  </div>  
</template>
<script>
  export default {
    el: "#root"
    data: {
      sex: ''
    }
  }
</script>
// 直接使用v-model绑定radio与data中的sex时，无论点击哪个按钮，都不能获取到选定的按钮，调试工具中data中的sex为null
解决方法：要在单选按钮中先设置一个value值，因为v-mdoel是与value绑定的

<template>
  <div id="root">
    // 单选按钮设置相同的name属性，实现多选一的效果
    性别：男<input type="radio" name="sex" v-model="sex">
    女<input type="radio" name="sex" v-model="sex">
    爱好：
    抽烟<input type="checkbox" value="smoking" v-model="hobby"> 
    喝酒<input type="checkbox" value="drinking" v-model="hobby">  
    烫头<input type="checkbox" value="tangtou" v-model="hobby"> 
    <input type="checkbox" v-model="agree"> 已阅读并接收此协议
  </div>  
</template>
<script>
  export default {
    el: "#root"
    data: {
      hobby: [],    // v-model对应的值要用数组来接收，因为复选框可以选中多个value
      agree: 'false'    // 默认为false，即不勾选状态
    }
  }
</script>