这是一个用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知识。球员数据并不真实，属于随意捏造哦。
最后上一张数据库数据的图，以说明数据已经真实的添加到数据库中：
来源：https://www.cnblogs.com/DM428/p/7067366.html