index.html

<html>
<head>
	<title>Vue Demo</title>
	<style type="text/css">
	.content {
		width:80%;
		margin:0 auto;
    margin-bottom:20px;
	}
	.content .item{
		width:20%;
		float:left;
	}
	</style>
</head>
<body>
<form id="demo">
  <div class="content" v-repeat="formData">
    <div class="item">
      <input type="text" v-model="msg">
    </div>
    <div class="item">
      <input type="checkbox" v-model="checked">
    </div>
    <div class="item">
      <select v-model="selected">
        <option>one</option>
        <option>two</option>
      </select>
      </div>
    <div class="item">
      <select v-model="multiSelect" multiple>
        <option>one</option>
        <option>two</option>
        <option>three</option>
      </select>
    </div>
    <div class="item">
      <button type="button" v-on="click:remove(this)">X</button>
    </div>
    <div style="clear:both"></div>
  </div>
  <center><button v-on="click:onClick">Add One</button></center>
  <center><button type="button" v-on="click:submit()">Submit</button></center>
  <div><pre>data: {{$data | json 2}}</pre></div>
</form>

<script src="js/vue.min.js"></script>
<script type="text/javascript">
var selectURL = 'http://xxxxxxxx/data.php';
var request = new XMLHttpRequest();
var data;
request.open("GET","data.php?action=select&t=" + Math.random() + "",true);
request.send();
request.onload = function(){
  data = JSON.parse(request.responseText);
  vue();
};
function vue(){
  var demo = new Vue({
  el: '#demo',
  data: {
    name: "demo",
    formData: data
  },
  methods: {
      onClick:function(e){
        e.preventDefault();
        console.log(this);
        this.formData.push({
            id:"",
            msg: "",
            checked: "",
            selected : "",
            multiSelect: ""
        })
      },
      remove:function(e){
        if(e.$data.id!=""){
          var remove = new XMLHttpRequest();
          remove.open("GET","data.php?action=delete&id="+e.$data.id+"",true);
          remove.send();
        }
        this.formData.$remove(e.$data)
      },
      submit:function(){
        var result = JSON.stringify(demo.$data.formData);
        result = "data="+result+"";
        var submit = new XMLHttpRequest();
        submit.open("POST","data.php?action=insert",true);
        submit.setRequestHeader("Content-type","application/x-www-form-urlencoded");
        submit.send(result);
      }
    }      
  });
}

</script>
</body>
</html>