Vue框架下的表单提交案列

最近在熟悉vue，发现了许多好玩的东西，下面是在vue框架下实现简单表单提交：
HTML部分：

```clike
<div id="app">
  <form action="/xxx" @submit.prevent="handleSubmit"></form>
    <span>Name:</span>
  <input type="text" v-model="uname"><br><br>
  <span>Password:</span>
  <input type="password" v-model="pword"><br><br>

  <span>Sex:</span>
  <input type="radio" id="femal" value="girl" v-model="sex">
  <label for="femal">girl</label>
  <input type="radio" id="man" value="boy" v-model="sex">
  <label for="man">boy</label><br><br>

  <span>Hobby:</span>
  <input type="checkbox" id="basket" value="basket" v-model="inters">
  <label for="basket">basketball</label>
  <input type="checkbox" id="foot" value="foot" v-model="inters">
  <label for="foot">football</label>
  <input type="checkbox" id="pinbin" value="pinbin" v-model="inters">
  <label for="pinbin">Pinbin</label><br><br>

  <span>City</span>
  <select  v-model="cityid">
    <option value="">none</option>
    <option :value="city.id" v-for="(city,index) in citys" :key="city.id">{
     {
     city.name}}</option>
  </select><br><br>

  <span>Intruduction:</span><br>
  <textarea name="" id="" cols="30" rows="10" v-model="infor"></textarea><br><br>

  <input type="submit" value="sign">
 <!-- <button @click="handlesubmit()">submit</button>-->

</div>

vue部分：

<script type="text/javascript" src="../js/vue.js"></script>
<script type="text/javascript">
  var vue =new Vue({
     
    el:'#app',
    data:{
     
      uname:'',
      pword:'',
      sex:'boy',
      inters:['foot'],
      citys:[
        {
     id:1,name:'beijin'},
        {
     id:2,name:'shanghai'},
        {
     id:3,name:'shenzhen'}
      ],
      cityid:'2',
      infor:''
    },
    methods:{
     
     handleSubmit () {
     
       console.log(this.uname,this.pword,this.sex,this.inters,this.cityid,this.infor)
       alert('表单提交请求')
     }
    }
  })
</script>

结果看这里：

结果比较简单，但原理还在，学习需要坚持加积累。