[js高手之路] vue系列教程 - 实现留言板todolist(3)

通过前面两篇文章的的学习，我们掌握了vue的基本用法. 本文，就利用这些基础知识来实现一个留言板， 老外把他称之为todolist.

第一步、使用bootstrap做好布局

 1 <!DOCTYPE html>
 2 <html>
 3 <head lang="en">
 4     <meta charset="UTF-8">
 5     <title></title>
 6     <link rel="stylesheet" href="lib/bootstrap.min.css"/>
 7     <script src="lib/jquery-1.7.2.js"></script>
 8     <script src="lib/bootstrap.js"></script>
 9 </head>
10 <body>
11 <div class="container">
12     <form role="form">
13         <div class="form-group">
14             <label for="username">用户名:</label>
15             <input type="text" id="username" class="form-control" placeholder="输入用户名">
16         </div>
17         <div class="form-group">
18             <label for="age">年　龄:</label>
19             <input type="text" id="age" class="form-control" placeholder="输入年龄">
20         </div>
21         <div class="form-group">
22             <input type="button" value="添加" class="btn btn-primary">
23             <input type="button" value="重置" class="btn btn-danger">
24         </div>
25     </form>
26     <hr>
27     <table class="table table-bordered table-hover">
28         <caption class="h2 text-info">用户信息表</caption>
29         <tr class="text-danger">
30             <th class="text-center">序号</th>
31             <th class="text-center">名字</th>
32             <th class="text-center">年龄</th>
33             <th class="text-center">操作</th>
34         </tr>
35         <tr class="text-center">
36             <td>1</td>
37             <td>张三</td>
38             <td>20</td>
39             <td>
40                 <button class="btn btn-primary btn-sm">删除</button>
41             </td>
42         </tr>
43         <tr class="text-center">
44             <td>2</td>
45             <td>李四</td>
46             <td>22</td>
47             <td>
48                 <button class="btn btn-primary btn-sm">删除</button>
49             </td>
50         </tr>
51         <tr>
52             <td colspan="4" class="text-right">
53                 <button class="btn btn-danger btn-sm">删除全部</button>
54             </td>
55         </tr>
56         <tr>
57             <td colspan="4" class="text-center text-muted">
58                 <p>暂无数据....</p>
59             </td>
60         </tr>
61     </table>
62 </div>
63 </body>
64 </html>

第二步、增加模态框，模态框默认为隐藏的

 1 <!DOCTYPE html>
 2 <html>
 3 <head lang="en">
 4     <meta charset="UTF-8">
 5     <title></title>
 6     <link rel="stylesheet" href="lib/bootstrap.min.css"/>
 7     <script src="lib/jquery-1.7.2.js"></script>
 8     <script src="lib/bootstrap.js"></script>
 9 </head>
10 <body>
11 <div class="container">
12     <form role="form">
13         <div class="form-group">
14             <label for="username">用户名:</label>
15             <input type="text" id="username" class="form-control" placeholder="输入用户名">
16         </div>
17         <div class="form-group">
18             <label for="age">年　龄:</label>
19             <input type="text" id="age" class="form-control" placeholder="输入年龄">
20         </div>
21         <div class="form-group">
22             <input type="button" value="添加" class="btn btn-primary">
23             <input type="button" value="重置" class="btn btn-danger">
24         </div>
25     </form>
26     <hr>
27     <table class="table table-bordered table-hover">
28         <caption class="h2 text-info">用户信息表</caption>
29         <tr class="text-danger">
30             <th class="text-center">序号</th>
31             <th class="text-center">名字</th>
32             <th class="text-center">年龄</th>
33             <th class="text-center">操作</th>
34         </tr>
35         <tr class="text-center">
36             <td>1</td>
37             <td>张三</td>
38             <td>20</td>
39             <td>
40                 <button class="btn btn-primary btn-sm" data-toggle="modal" data-target="#layer">删除</button>
41             </td>
42         </tr>
43         <tr class="text-center">
44             <td>2</td>
45             <td>李四</td>
46             <td>22</td>
47             <td>
48                 <button class="btn btn-primary btn-sm" data-toggle="modal" data-target="#layer">删除</button>
49             </td>
50         </tr>
51         <tr>
52             <td colspan="4" class="text-right">
53                 <button class="btn btn-danger btn-sm">删除全部</button>
54             </td>
55         </tr>
56         <tr>
57             <td colspan="4" class="text-center text-muted">
58                 <p>暂无数据....</p>
59             </td>
60         </tr>
61     </table>
62 
63     <!--模态框 弹出框-->
64     <div role="dialog" class="modal fade bs-example-modal-sm" id="layer">
65         <div class="modal-dialog">
66             <div class="modal-content">
67                 <div class="modal-header">
68                     <button type="button" class="close" data-dismiss="modal">
69                         <span>&times;</span>
70                     </button>
71                     <h4 class="modal-title">确认删除么?</h4>
72                 </div>
73                 <div class="modal-body text-right">
74                     <button data-dismiss="modal" class="btn btn-primary btn-sm">取消</button>
75                     <button data-dismiss="modal" class="btn btn-danger btn-sm">确认</button>
76                 </div>
77             </div>
78         </div>
79     </div>
80 
81 
82 </div>
83 </body>
84 </html>

第三步、定义userList用来保存用户，userName保存用户名, age保存用户变量，  然后把userName和age 通过 v-model指令绑定到对应的输入框，实现输入框与变量中的数据双向驱动，在表格的行中输出userList

 1 <!DOCTYPE html>
 2 <html>
 3 <head lang="en">
 4     <meta charset="UTF-8">
 5     <title></title>
 6     <link rel="stylesheet" href="lib/bootstrap.min.css"/>
 7     <script src="lib/jquery-1.7.2.js"></script>
 8     <script src="lib/bootstrap.js"></script>
 9     <script src="../js/vue.js"></script>
10     <script>
11         window.onload = function () {
12             var c = new Vue({
13                 el: '#box',
14                 data: {
15                     userList: [],
16                     userName : '',
17                     age : ''
18                 }
19             });
20         }
21     </script>
22 </head>
23 <body>
24 <div class="container" id="box">
25     <form role="form">
26         <div class="form-group">
27             <label for="username">用户名:</label>
28             <input type="text" id="username" v-model="userName" class="form-control" placeholder="输入用户名">
29         </div>
30         <div class="form-group">
31             <label for="age">年　龄:</label>
32             <input type="text" id="age" v-model="age" class="form-control" placeholder="输入年龄">
33         </div>
34         <div class="form-group">
35             <input type="button" value="添加" class="btn btn-primary">
36             <input type="button" value="重置" class="btn btn-danger">
37         </div>
38     </form>
39     <hr>
40     <table class="table table-bordered table-hover">
41         <caption class="h2 text-info">用户信息表</caption>
42         <tr class="text-danger">
43             <th class="text-center">序号</th>
44             <th class="text-center">名字</th>
45             <th class="text-center">年龄</th>
46             <th class="text-center">操作</th>
47         </tr>
48         <tr class="text-center" v-for="value in userList">
49             <td>{{$index+1}}</td>
50             <td>{{value.name}}</td>
51             <td>{{value.age}}</td>
52             <td>
53                 <button class="btn btn-primary btn-sm" data-toggle="modal" data-target="#layer">删除</button>
54             </td>
55         </tr>
56         <tr>
57             <td colspan="4" class="text-right">
58                 <button class="btn btn-danger btn-sm">删除全部</button>
59             </td>
60         </tr>
61         <tr>
62             <td colspan="4" class="text-center text-muted">
63                 <p>暂无数据....</p>
64             </td>
65         </tr>
66     </table>
67 
68     <!--模态框 弹出框-->
69     <div role="dialog" class="modal fade bs-example-modal-sm" id="layer">
70         <div class="modal-dialog">
71             <div class="modal-content">
72                 <div class="modal-header">
73                     <button type="button" class="close" data-dismiss="modal">
74                         <span>&times;</span>
75                     </button>
76                     <h4 class="modal-title">确认删除么?</h4>
77                 </div>
78                 <div class="modal-body text-right">
79                     <button data-dismiss="modal" class="btn btn-primary btn-sm">取消</button>
80                     <button data-dismiss="modal" class="btn btn-danger btn-sm">确认</button>
81                 </div>
82             </div>
83         </div>
84     </div>
85 </div>
86 </body>
87 </html>

第四步、添加用户，点击添加按钮，把输入框中的数据作为一个对象 push 到数组userList，添加完之后，把userName, age清空，那么两个输入框的内容就会被清空

 1 <!DOCTYPE html>
 2 <html>
 3 <head lang="en">
 4     <meta charset="UTF-8">
 5     <title></title>
 6     <link rel="stylesheet" href="lib/bootstrap.min.css"/>
 7     <script src="lib/jquery-1.7.2.js"></script>
 8     <script src="lib/bootstrap.js"></script>
 9     <script src="../js/vue.js"></script>
10     <script>
11         window.onload = function () {
12             var c = new Vue({
13                 el: '#box',
14                 data: {
15                     userList: [],
16                     userName : '',
17                     age : ''
18                 },
19                 methods : {
20                     addUser : function(){
21                         this.userList.push({
22                             name : this.userName,
23                             age : this.age
24                         });
25 
26                         this.userName = ''; //添加完用户之后，把输入框的值清除
27                         this.age = '';
28                     }
29                 }
30             });
31         }
32     </script>
33 </head>
34 <body>
35 <div class="container" id="box">
36     <form role="form">
37         <div class="form-group">
38             <label for="username">用户名:</label>
39             <input type="text" id="username" v-model="userName" class="form-control" placeholder="输入用户名">
40         </div>
41         <div class="form-group">
42             <label for="age">年　龄:</label>
43             <input type="text" id="age" v-model="age" class="form-control" placeholder="输入年龄">
44         </div>
45         <div class="form-group">
46             <input type="button" v-on:click="addUser();" value="添加" class="btn btn-primary">
47             <input type="button" value="重置" class="btn btn-danger">
48         </div>
49     </form>
50     <hr>
51     <table class="table table-bordered table-hover">
52         <caption class="h2 text-info">用户信息表</caption>
53         <tr class="text-danger">
54             <th class="text-center">序号</th>
55             <th class="text-center">名字</th>
56             <th class="text-center">年龄</th>
57             <th class="text-center">操作</th>
58         </tr>
59         <tr class="text-center" v-for="value in userList">
60             <td>{{$index+1}}</td>
61             <td>{{value.name}}</td>
62             <td>{{value.age}}</td>
63             <td>
64                 <button class="btn btn-primary btn-sm" data-toggle="modal" data-target="#layer">删除</button>
65             </td>
66         </tr>
67         <tr>
68             <td colspan="4" class="text-right">
69                 <button class="btn btn-danger btn-sm">删除全部</button>
70             </td>
71         </tr>
72         <tr>
73             <td colspan="4" class="text-center text-muted">
74                 <p>暂无数据....</p>
75             </td>
76         </tr>
77     </table>
78 
79     <!--模态框 弹出框-->
80     <div role="dialog" class="modal fade bs-example-modal-sm" id="layer">
81         <div class="modal-dialog">
82             <div class="modal-content">
83                 <div class="modal-header">
84                     <button type="button" class="close" data-dismiss="modal">
85                         <span>&times;</span>
86                     </button>
87                     <h4 class="modal-title">确认删除么?</h4>
88                 </div>
89                 <div class="modal-body text-right">
90                     <button data-dismiss="modal" class="btn btn-primary btn-sm">取消</button>
91                     <button data-dismiss="modal" class="btn btn-danger btn-sm">确认</button>
92                 </div>
93             </div>
94         </div>
95     </div>
96 </div>
97 </body>
98 </html>

第五步、结合数组的长度与v-show指令，实现提示信息的显示与隐藏

 1 <!DOCTYPE html>
 2 <html>
 3 <head lang="en">
 4     <meta charset="UTF-8">
 5     <title></title>
 6     <link rel="stylesheet" href="lib/bootstrap.min.css"/>
 7     <script src="lib/jquery-1.7.2.js"></script>
 8     <script src="lib/bootstrap.js"></script>
 9     <script src="../js/vue.js"></script>
10     <script>
11         window.onload = function () {
12             var c = new Vue({
13                 el: '#box',
14                 data: {
15                     userList: [],
16                     userName : '',
17                     age : ''
18                 },
19                 methods : {
20                     addUser : function(){
21                         this.userList.push({
22                             name : this.userName,
23                             age : this.age
24                         });
25 
26                         this.userName = ''; //添加完用户之后，把输入框的值清除
27                         this.age = '';
28                     }
29                 }
30             });
31         }
32     </script>
33 </head>
34 <body>
35 <div class="container" id="box">
36     <form role="form">
37         <div class="form-group">
38             <label for="username">用户名:</label>
39             <input type="text" id="username" v-model="userName" class="form-control" placeholder="输入用户名">
40         </div>
41         <div class="form-group">
42             <label for="age">年　龄:</label>
43             <input type="text" id="age" v-model="age" class="form-control" placeholder="输入年龄">
44         </div>
45         <div class="form-group">
46             <input type="button" v-on:click="addUser();" value="添加" class="btn btn-primary">
47             <input type="button" value="重置" class="btn btn-danger">
48         </div>
49     </form>
50     <hr>
51     <table class="table table-bordered table-hover">
52         <caption class="h2 text-info">用户信息表</caption>
53         <tr class="text-danger">
54             <th class="text-center">序号</th>
55             <th class="text-center">名字</th>
56             <th class="text-center">年龄</th>
57             <th class="text-center">操作</th>
58         </tr>
59         <tr class="text-center" v-for="value in userList">
60             <td>{{$index+1}}</td>
61             <td>{{value.name}}</td>
62             <td>{{value.age}}</td>
63             <td>
64                 <button class="btn btn-primary btn-sm" data-toggle="modal" data-target="#layer">删除</button>
65             </td>
66         </tr>
67         <tr v-show="userList.length!=0">
68             <td colspan="4" class="text-right">
69                 <button class="btn btn-danger btn-sm">删除全部</button>
70             </td>
71         </tr>
72         <tr v-show="userList.length==0">
73             <td colspan="4" class="text-center text-muted">
74                 <p>暂无数据....</p>
75             </td>
76         </tr>
77     </table>
78 
79     <!--模态框 弹出框-->
80     <div role="dialog" class="modal fade bs-example-modal-sm" id="layer">
81         <div class="modal-dialog">
82             <div class="modal-content">
83                 <div class="modal-header">
84                     <button type="button" class="close" data-dismiss="modal">
85                         <span>&times;</span>
86                     </button>
87                     <h4 class="modal-title">确认删除么?</h4>
88                 </div>
89                 <div class="modal-body text-right">
90                     <button data-dismiss="modal" class="btn btn-primary btn-sm">取消</button>
91                     <button data-dismiss="modal" class="btn btn-danger btn-sm">确认</button>
92                 </div>
93             </div>
94         </div>
95     </div>
96 </div>
97 </body>
98 </html>

第六步、实现删除某行数据

  1 <!DOCTYPE html>
  2 <html>
  3 <head lang="en">
  4     <meta charset="UTF-8">
  5     <title></title>
  6     <link rel="stylesheet" href="lib/bootstrap.min.css"/>
  7     <script src="lib/jquery-1.7.2.js"></script>
  8     <script src="lib/bootstrap.js"></script>
  9     <script src="../js/vue.js"></script>
 10     <script>
 11         window.onload = function () {
 12             var c = new Vue({
 13                 el: '#box',
 14                 data: {
 15                     userList: [],
 16                     userName : '',
 17                     age : '',
 18                     curIndex : -10
 19                 },
 20                 methods : {
 21                     addUser : function(){
 22                         this.userList.push({
 23                             name : this.userName,
 24                             age : this.age
 25                         });
 26 
 27                         this.userName = ''; //添加完用户之后，把输入框的值清除
 28                         this.age = '';
 29                     },
 30                     deleteRow : function( n ){
 31                        this.userList.splice( n, 1 );
 32                     }
 33                 }
 34             });
 35         }
 36     </script>
 37 </head>
 38 <body>
 39 <div class="container" id="box">
 40     <form role="form">
 41         <div class="form-group">
 42             <label for="username">用户名:</label>
 43             <input type="text" id="username" v-model="userName" class="form-control" placeholder="输入用户名">
 44         </div>
 45         <div class="form-group">
 46             <label for="age">年　龄:</label>
 47             <input type="text" id="age" v-model="age" class="form-control" placeholder="输入年龄">
 48         </div>
 49         <div class="form-group">
 50             <input type="button" v-on:click="addUser();" value="添加" class="btn btn-primary">
 51             <input type="button" value="重置" class="btn btn-danger">
 52         </div>
 53     </form>
 54     <hr>
 55     <table class="table table-bordered table-hover">
 56         <caption class="h2 text-info">用户信息表</caption>
 57         <tr class="text-danger">
 58             <th class="text-center">序号</th>
 59             <th class="text-center">名字</th>
 60             <th class="text-center">年龄</th>
 61             <th class="text-center">操作</th>
 62         </tr>
 63         <tr class="text-center" v-for="value in userList">
 64             <td>{{$index+1}}</td>
 65             <td>{{value.name}}</td>
 66             <td>{{value.age}}</td>
 67             <td>
 68                 <button class="btn btn-primary btn-sm" data-toggle="modal" data-target="#layer" v-on:click="curIndex=$index">删除</button>
 69             </td>
 70         </tr>
 71         <tr v-show="userList.length!=0">
 72             <td colspan="4" class="text-right">
 73                 <button class="btn btn-danger btn-sm">删除全部</button>
 74             </td>
 75         </tr>
 76         <tr v-show="userList.length==0">
 77             <td colspan="4" class="text-center text-muted">
 78                 <p>暂无数据....</p>
 79             </td>
 80         </tr>
 81     </table>
 82 
 83     <!--模态框 弹出框-->
 84     <div role="dialog" class="modal fade bs-example-modal-sm" id="layer">
 85         <div class="modal-dialog">
 86             <div class="modal-content">
 87                 <div class="modal-header">
 88                     <button type="button" class="close" data-dismiss="modal">
 89                         <span>&times;</span>
 90                     </button>
 91                     <h4 class="modal-title">确认删除么?</h4>
 92                 </div>
 93                 <div class="modal-body text-right">
 94                     <button data-dismiss="modal" class="btn btn-primary btn-sm">取消</button>
 95                     <button data-dismiss="modal" class="btn btn-danger btn-sm" v-on:click="deleteRow(curIndex);">确认</button>
 96                 </div>
 97             </div>
 98         </div>
 99     </div>
100 </div>
101 </body>
102 </html>

第七步、实现删除全部行

  1 <!DOCTYPE html>
  2 <html>
  3 <head lang="en">
  4     <meta charset="UTF-8">
  5     <title></title>
  6     <link rel="stylesheet" href="lib/bootstrap.min.css"/>
  7     <script src="lib/jquery-1.7.2.js"></script>
  8     <script src="lib/bootstrap.js"></script>
  9     <script src="../js/vue.js"></script>
 10     <script>
 11         window.onload = function () {
 12             var c = new Vue({
 13                 el: '#box',
 14                 data: {
 15                     userList: [],
 16                     userName: '',
 17                     age: '',
 18                     curIndex: -10
 19                 },
 20                 methods: {
 21                     addUser: function () {
 22                         this.userList.push({
 23                             name: this.userName,
 24                             age: this.age
 25                         });
 26 
 27                         this.userName = ''; //添加完用户之后，把输入框的值清除
 28                         this.age = '';
 29                     },
 30                     deleteRow: function (n) {
 31                         if (n == -1) { //当n=-1的时候,清空数组，就是删除全部
 32                             this.userList = [];
 33                         } else {
 34                             this.userList.splice(n, 1);
 35                         }
 36                     }
 37                 }
 38             });
 39         }
 40     </script>
 41 </head>
 42 <body>
 43 <div class="container" id="box">
 44     <form role="form">
 45         <div class="form-group">
 46             <label for="username">用户名:</label>
 47             <input type="text" id="username" v-model="userName" class="form-control" placeholder="输入用户名">
 48         </div>
 49         <div class="form-group">
 50             <label for="age">年　龄:</label>
 51             <input type="text" id="age" v-model="age" class="form-control" placeholder="输入年龄">
 52         </div>
 53         <div class="form-group">
 54             <input type="button" v-on:click="addUser();" value="添加" class="btn btn-primary">
 55             <input type="button" value="重置" class="btn btn-danger">
 56         </div>
 57     </form>
 58     <hr>
 59     <table class="table table-bordered table-hover">
 60         <caption class="h2 text-info">用户信息表</caption>
 61         <tr class="text-danger">
 62             <th class="text-center">序号</th>
 63             <th class="text-center">名字</th>
 64             <th class="text-center">年龄</th>
 65             <th class="text-center">操作</th>
 66         </tr>
 67         <tr class="text-center" v-for="value in userList">
 68             <td>{{$index+1}}</td>
 69             <td>{{value.name}}</td>
 70             <td>{{value.age}}</td>
 71             <td>
 72                 <button class="btn btn-primary btn-sm" data-toggle="modal" data-target="#layer"
 73                         v-on:click="curIndex=$index">删除
 74                 </button>
 75             </td>
 76         </tr>
 77         <tr v-show="userList.length!=0">
 78             <td colspan="4" class="text-right">
 79                 <button class="btn btn-danger btn-sm" v-on:click="curIndex=-1" data-toggle="modal" data-target="#layer">
 80                     删除全部
 81                 </button>
 82             </td>
 83         </tr>
 84         <tr v-show="userList.length==0">
 85             <td colspan="4" class="text-center text-muted">
 86                 <p>暂无数据....</p>
 87             </td>
 88         </tr>
 89     </table>
 90 
 91     <!--模态框 弹出框-->
 92     <div role="dialog" class="modal fade bs-example-modal-sm" id="layer">
 93         <div class="modal-dialog">
 94             <div class="modal-content">
 95                 <div class="modal-header">
 96                     <button type="button" class="close" data-dismiss="modal">
 97                         <span>&times;</span>
 98                     </button>
 99                     <h4 class="modal-title">确认删除么?</h4>
100                 </div>
101                 <div class="modal-body text-right">
102                     <button data-dismiss="modal" class="btn btn-primary btn-sm">取消</button>
103                     <button data-dismiss="modal" class="btn btn-danger btn-sm" v-on:click="deleteRow(curIndex);">确认
104                     </button>
105                 </div>
106             </div>
107         </div>
108     </div>
109 </div>
110 </body>
111 </html>

 

posted @ 2017-08-15 15:32  ghostwu  阅读(490)  评论(0)  编辑  收藏  举报
Copyright ©2017 ghostwu