这是一个用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=" 30%">姓名</td><td style=" 30%">年龄</td><td style=" 20%">性别</td><td style=" 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知识。球员数据并不真实，属于随意捏造哦。
最后上一张数据库数据的图，以说明数据已经真实的添加到数据库中：
