本項目要先預備好以下內容
1.car數據庫
2.增刪改查接口，我已經寫好了一個簡單的PHP增刪改查四個接口
3.vue的指令、循環、生命函數，及get、post請求等知識點
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script src="lib/vue-2.4.0.js" type="text/javascript" charset="utf-8"></script> <script src="lib/vue-resource-1.3.4.js" type="text/javascript" charset="utf-8"></script> <link rel="stylesheet" type="text/css" href="lib/bootstrap-3.3.7.css"/> </head> <body> <div id="app" class="container"> <div class="panel panel-primary"> <div class="panel-heading"> <h3 class="panel-title">添加品牌</h3> </div> <div class="panel-body form-inline"> <label> Name: <input type="text" class="form-control" v-model="name"> </label> <input type="button" value="添加" class="btn btn-primary" @click="add"> <label> newName: <input type="text" class="form-control" v-model="newName" id="edit" ref="edit"> </label> <input type="button" value="確認修改" class="btn btn-primary" @click="edited"> </div> </div> <table class="table table-bordered table-hover table-striped"> <thead> <tr> <th>Id</th> <th>Name</th> <th>Ctime</th> <th>刪除</th> <th>修改</th> </tr> </thead> <tbody> <tr v-for="item in list" :key="item.id"> <td>{{item.id}}</td> <td>{{item.name}}</td> <td>{{item.ctime}}</td> <td> <a href="" @click.prevent="del(item.id)">刪除</a> </td> <td> <a href="" @click.prevent="edit(item.name)">修改</a> </td> </tr> </tbody> </table> </div> <script type="text/javascript"> // 如果我們通過全局配置了，請求的數據接口 根域名，則 ，在每次單獨發起 http 請求的時候，請求的 url 路徑，應該以相對路徑開頭，前面不能帶 / ，否則 不會啟用根路徑做拼接； Vue.http.options.root = 'http://localhost/dome/'; // 全局啟用 emulateJSON 選項，gpost方法就不用加 { emulateJSON: true } 參數了 Vue.http.options.emulateJSON = true; var vm = new Vue({ el: '#app', data:{ // id:"", name:"", oldName:"", list: [ {"id":1,"name":"寶馬","ctime":new Date} ] }, created() {//生命周期函數 this.getList() }, methods:{ getList(){ this.$http.get('vueserver/data1.php').then(result => { var result=result.body//獲得數據 this.list=result//給list賦值 }) }, add(){ this.$http.post('vueserver/data3.php',{name:this.name},{ emulateJSON: true }).then(result=>{ this.getList() this.name='' }) }, del(id){ this.$http.post('vueserver/data2.php',{id:id}).then(result=>{ this.getList() }) }, edit(name){ //this.oldName=name;//將要修改的內容 this.name=name // document.getElementById("edit").focus()//js獲取焦點 this.$nextTick((x)=>{ //vue獲取焦點 ref this.$refs.edit.focus(); }) }, edited(){ this.$http.post('vueserver/data4.php',{old:this.name ,news:this.newName}).then(result=>{ this.getList() this.name='' this.newName="" }) }, } }) </script> </body> </html>