這是一個用Vue、Bootstrap和PHP一起寫的小實例，回顧總結了一下之前學習的知識，順帶添加點學習樂趣。
先上效果圖：
用到的知識有：Vue數據綁定及組件、Bootstrap界面、PHP-AJAX交互、MySQL存儲，其他細節的就不說了。
建立的文件有三個：一個HTML文件（Vue.html，js內嵌在HTML中）、兩個PHP文件（getData.php、addData.php）。
首先構建前端界面：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>測試HTML</title> 6 <link href="https://cdn.bootcss.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"> 7 <link href="https://cdn.bootcss.com/tether/1.3.6/css/tether.min.css" rel="stylesheet"> 8 <style type="text/css"> 9 #app-1{ 10 width: 50%; 11 margin:auto; 12 margin-top: 6%; 13 } 14 .btn{ 15 cursor: pointer; 16 } 17 </style> 18 </head> 19 <body> 20 <div id="app-1"> 21 <table class="table table-hover table-bordered table-condensed"> 22 <thead> 23 <tr> 24 <td style="width: 30%">姓名</td><td style="width: 30%">年齡</td><td style="width: 20%">性別</td><td style="width: 20%">刪除</td> 25 </tr> 26 </thead> 27 <tbody> 28 <tr is="table-row" v-for="item in ar" :details="item"></tr> 29 <tr> 30 <td> 31 <input type="text" class="form-control" v-model="name"> 32 </td> 33 <td> 34 <input type="number" class="form-control" v-model="age"> 35 </td> 36 <td> 37 <select class="form-control" v-model="gender"> 38 <option selected="selected" value="男">男</option> 39 <option value="女">女</option> 40 </select> 41 </td> 42 <td> 43 <button class="btn btn-sm btn-warning" @click="addData">添加</button> 44 </td> 45 </tr> 46 </tbody> 47 </table> 48 </div> 49 <script src="https://cdn.bootcss.com/vue/2.3.4/vue.js"></script> 50 <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script> 51 <script src="https://cdn.bootcss.com/tether/1.3.6/js/tether.min.js"></script> 52 <script src="https://cdn.bootcss.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script> 53 <script type="text/javascript"> 54 var templateStr = '<tr><td>{{details.name}}</td><td>{{details.age}}</td><td>{{details.gender}}</td><td><button class="btn btn-danger btn-sm" :value="details.name" @click="delData">刪除</button></td></tr>'; 55 var app1 = new Vue({ 56 el:'#app-1', 57 data:{ 58 ar:[{name:'鍾德鳴',age:21,gender:'male'}], 59 name:'', 60 age:'', 61 gender:'男' 62 }, 63 methods:{ 64 addData:function(){ 65 var addObj = {}; 66 addObj.name = this.name; 67 addObj.age = this.age; 68 addObj.gender = this.gender; 69 $.ajax({ 70 url:'addData.php', 71 type:'POST', 72 data:addObj, 73 // dataType:'json', 74 success:function(response){ 75 if (response == "1") { 76 alert("添加成功！"); 77 } 78 else{ 79 alert("添加失敗！"); 80 } 81 window.location.reload(); 82 }, 83 error:function(){ 84 alert('failed!'); 85 } 86 }); 87 } 88 }, 89 components:{ 90 'tableRow':{ 91 template:templateStr, 92 props:['details'], 93 methods:{ 94 delData:function(){ 95 var name = event.target.value; 96 var delStr = 'name=' + name; 97 $.ajax({ 98 url:'getData.php', 99 type:'POST', 100 data:delStr, 101 success:function(response){ 102 if(response == '1'){ 103 alert('刪除成功！'); 104 window.location.reload(); 105 } 106 else{ 107 alert('刪除失敗！'); 108 window.location.reload(); 109 } 110 }, 111 error:function(){ 112 alert('請求失敗！'); 113 } 114 }); 115 } 116 } 117 } 118 } 119 }); 120 var getData = function(){ 121 $.ajax({ 122 url:'getData.php', 123 type:'GET', 124 data:{}, 125 dataType:'json', 126 success:function(response){ 127 if(response == 'failed'){ 128 alert('Get Data Failed!'); 129 } 130 if(typeof response === 'string'){ 131 response = JSON.parse(response); 132 } 133 app1.ar = response; 134 }, 135 error:function(){ 136 alert('Failed!'); 137 } 138 }); 139 }; 140 $(function(){ 141 getData(); 142 }); 143 </script> 144 </body> 145 </html>
不要忘記應用一些必要的包。
其中有一些需要注意的地方：
（1）在table中插入Vue組件作為tr，不能直接寫組件名稱。如果直接將<table-row>寫在table標簽中，會被認為是無效的內容，引起渲染錯誤。解決方法是使用is屬性解決。
（2）table-row標簽中使用的details屬性，需要現在組件中聲明，否則Vue會報錯“property details is not defined...”，注意在components中聲明屬性時，props是一個數組，不能直接用字符串聲明。
（3）我的組件是聲明在Vue實例中的，所以是一個局部注冊組件，只能在指定的作用域內使用。注冊時的格式不同於全局注冊時的格式，需要注意一下。局部注冊時，components是作為參數對象的一個屬性，但是components本身就是一個對象。
（4）注意到在聲明組件的字符串模板中，為刪除按鈕綁定的事件不是聲明在Vue實例中，而是在components對象屬性中。原因是刪除按鈕的事件是子組件的事件不是父組件的事件；如果聲明在Vue實例中，那么只有<table-row>之外$('#app-1')之內的標簽可以使用。如果難以理解，請往下看（6）。
（5）table-row標簽下的tr是定義添加行的代碼。添加行中的表單控件的值通過v-model這個語法糖綁定在Vue示例的data屬性中。當它們的值發生變化時，app1對象的data屬性也會發生變化。
（6）注意到button控件中，也綁定了一個點擊事件，看一下點擊事件的事件函數在哪定義呢，根據（4）中的結論，應該定義在Vue實例中。事實就是如此，addData方法定義在Vue示例的methods屬性中。而（4）中的delData函數必須定義在components對象屬性中。區別就在於delData是子組件的事件函數，而addData是父組件的事件函數。
（7）addData函數通過ajax向后台傳送數據，這里直接傳輸了一個對象，PHP后台接受數據的方式與接受表單數據方式一致。不過表單中控件的name對應了傳輸的對象的屬性。這里如果直接傳輸json數據，會導致在PHP后台無法通過$_POST[]方式接受數據。
（8）看到刪除按鈕的事件函數delData，由於只需要傳輸一個name參數（MySQL數據表中的主鍵），所以沒有用對象方式傳遞參數，而是用一個字符串，這樣傳遞數據，在PHP后台也是可以獲取的。
（9）關於選擇框綁定數據：
單選列表：
在select標簽中指定v-model，v-model會將選中的option的value傳遞給data，如果沒有指定value則默認value即為選項內容。
多選列表：
data中的數據為一個數組，v-model指向這個數組。
下面是PHP代碼：
（1）getData.php
1 <?php 2 $conn = mysqli_connect('localhost','root','***********','person'); 3 if(!empty($_POST['name'])){ 4 $delStr = "delete from information where name = '" . $_POST['name'] ."';"; 5 $result = mysqli_query($conn,$delStr); 6 if($result === true){ 7 echo '1'; 8 } 9 else{ 10 echo '0'; 11 } 12 } 13 else{ 14 if($conn){ 15 $result = mysqli_query($conn,'select *from information'); 16 if(mysqli_num_rows($result)>0){ 17 $array = array(); 18 while ($row = mysqli_fetch_array($result)) { 19 array_push($array, $row); 20 } 21 echo json_encode($array); 22 } 23 else{ 24 echo "failed"; 25 } 26 } 27 } 28 ?>
（2）addData.php
1 <?php 2 if(!empty($_POST['name'])){ 3 $conn = mysqli_connect('localhost','root','***********','person'); 4 if($conn){ 5 $insertStr = "insert into information(name,age,gender) values ('".$_POST['name']."','".$_POST['age']."','".$_POST['gender']."');"; 6 $result = mysqli_query($conn,$insertStr); 7 if($result){ 8 echo "1"; 9 } 10 else{ 11 echo "0"; 12 } 13 } 14 } 15 ?>
其中也有一些需要注意的地方：
（1）在查詢表數據時，利用mysqli_query()函數返回的結果，使用mysqli_num_rows可以獲取查詢結果條數，可以用於判斷是否有查詢到結果，使用mysqli_fetch_array可以把結果按數組形式返回。
（2）addData在添加數據時，注意在構造插入字符串時，PHP使用“.”運算符連接字符串而不是“+”號，寫完js代碼之后再寫PHP代碼容易混淆，曾經一度導致沒有插入數據。
這個小實例主要是運用了一下新學習的Vue知識，順便回顧了一下PHP知識和Bootstrap知識。球員數據並不真實，屬於隨意捏造哦。
最后上一張數據庫數據的圖，以說明數據已經真實的添加到數據庫中：
