通过前面两篇文章的的学习,我们掌握了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>×</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>×</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>×</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>×</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>×</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>×</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>