通过前面两篇文章的的学习，我们掌握了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>1td> 37 <td>张三td> 38 <td>20td> 39 <td> 40 <button class="btn btn-primary btn-sm">删除button> 41 td> 42 tr> 43 <tr class="text-center"> 44 <td>2td> 45 <td>李四td> 46 <td>22td> 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>1td> 37 <td>张三td> 38 <td>20td> 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>2td> 45 <td>李四td> 46 <td>22td> 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>