一、验证用户名是否已经被注册过

1.案例

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><script src="js/vue.js" type="text/javascript" charset="utf-8"></script></head><body><div id="app">用户名:<input type="text" v-model="uname" />{{msg}}</div><script>var vue = new Vue({el:"#app",data:{ //属性uname:"",msg:""},watch:{ //监听属性uname(){ //监听uname绑定的输入框里面的值发生变化时，触发当前的函数// alert(this.uname);if("admin" === this.uname){ //模拟admin被注册过,实际开发中这个admin是查询数据库得到的this.msg = "此用户已被注册过,请重新输入"}else{this.msg = "可以注册"}}}})</script></body>
</html>

二、过滤器

1.过滤器的关键字是filters，也是和el、data、methods、computed、watch等同级的。

（1）格式：filters:{}

2.在filters的大括号中可以写一些转换数据的函数；这些函数中一般有两个参数，第一个参数用来接收要转换的值，第二个参数用来接收提示信息。

3.调用过滤器中的函数的格式：{{要转换的数据|filters中转换数据的函数("提示信息")}}。

4.作用：格式化数据，比如将字符串格式化为字符大写或小写，比如将日期格式化为指定格式，简单来说，过滤器就是过滤的，可以将数据在过滤器中进行一些转换。

5.注意：如果在使用过滤器的时候，只有一个参数，那么调用函数时，函数可以不写括号。

6.案例：

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><script src="js/vue.js" type="text/javascript" charset="utf-8"></script></head><body><div id="app">{{msg|upperChange("转换之后:")}}<br />{{msg2|lowerChange("转小写:")}}<br />{{date|dateformat("中国时间:")}}<br /></div><script>var vue = new Vue({el:"#app",data:{msg:"hello vue",msg2:"HELLO VUE",date:new Date()},filters:{//过滤器//大写转小写upperChange(a,args){//第一个参数用来接收{{msg|upperChange("转换之后:")}}中msg的数据，args用来接收描述数据return args + a.toUpperCase();},//小写转大写lowerChange(a,args){return args + a.toLowerCase();},//日期格式的转换(开发中常用)dateformat(val,args){//              年月                          月份(0-11)              日return args+val.getFullYear() + "-" + (val.getMonth()+1) + "-" + val.getDate() + " " + val.getHours() + ":" + val.getMinutes() + ":" + val.getSeconds();}}})</script></body>
</html>

三、图书管理系统

1.Vue的数组的操作(变异方法)

（1）indexOf()：获取当前元素在数组中的下标。

格式：数组名.indexOf(数组元素)

（2）push()：方法可向数组的末尾添加一个或多个元素，并返回新的长度。

（3）pop()：方法用于删除并返回数组的最后一个元素。

（4）shift()：方法用于把数组的第一个元素从其中删除，并返回第一个元素的值。

（5）unshift()：方法可向数组的开头添加一个或更多元素，并返回新的长度。

（6）splice()：方法向/从数组中添加/删除项目，然后返回被删除的项目。

格式：splice(index,len,[item])
- index：数组开始下标。
- len：替换/删除的长度。
- item：替换的值，删除操作的话item为空。
可以用来添加/删除/替换数组内某一个或几个值。
该方法会改变原始数组。

（7）sort()：方法用于对数组的元素进行排序。

（8）reverse()：方法用于颠倒数组中的元素顺序。

（9）concat()：方法用于连接两个或多个数组。

（10）slice()：方法可从已有的数组中返回选定的元素。

2.案例：

（1）css样式：

table td{border: 1px dashed orange;
}
table{border-collapse: collapse; /* 设置table的线条为单线条 */
}
tr{text-align: center;
}
.grid{width: 500px;margin: auto;
}
.title,.titleup{background-color: orange;
}

（2）html案例：

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><script src="js/vue.js" type="text/javascript" charset="utf-8"></script><link rel="stylesheet" type="text/css" href="css/abc.css"/></head><body><div id="app"><div class="grid"><table><tr class="titleup"><td colspan="4">编号:<input type="text" v-model="code" />名称:<input type="text" v-model="name" /><input type="button" value="提交" @click="add()" /></td></tr><tr class="title"><td>编号</td><td>名称</td><td>时间</td><td>操作</td></tr><tr v-for="book in books"><td>{{book.id}}</td><td>{{book.name}}</td><td>{{book.date|dateformat}}</td><td><a href="#" @click="edit(book)">修改</a>|<a href="#" @click="deleteBook(book)">删除</a></td></tr></table></div></div><script>var vue = new Vue({el:"#app",data:{code:"",name:"",flag:false, //false的状态时，是添加书籍的状态；true的状态时，是修改书籍的状态index:-1,books:[ //实际开发中我们后台开发人员，就是通过axios发送请求从数据库中取这个数据{id:1,name:"三国演义",date:new Date()},{id:2,name:"红楼梦",date:new Date()},{id:3,name:"水浒传",date:new Date()}]},methods:{//添加数据add(){if(this.code.length != 0 && this.name.length != 0 && !this.flag){//创建一个对象封装书籍数据(id,name,date)var newBook = new Object();newBook.id = this.code;newBook.name = this.name;newBook.date = new Date();//把当前newBook中的数据加入的books数组中this.books.push(newBook);//清空输入框中的数据this.code = "";this.name = "";}else if(this.code.length != 0 && this.name.length != 0){//修改状态this.books[this.index].id = this.code;//java数组中 books[0].name books[1] books[2]this.books[this.index].name = this.name;this.flag = false;//清空输入框中的数据this.code = "";this.name = "";}},//修改数据edit(book){this.flag = true;this.code = book.id;this.name = book.name;this.index = this.books.indexOf(book);},//删除数据deleteBook(book){// alert(book.name)//从数组中移除一个元素//先获取当前元素在数组中的下标索引var bookIndex = this.books.indexOf(book);//执行移除操作,第一个参数是要删除的元素的下标,第二个元素是要删除的个数this.books.splice(bookIndex,1);}},filters:{//日期的格式转换dateformat(val){return val.getFullYear() + "-" + val.getMonth() + "-" + val.getDate();}}})</script></body>
</html>

四、axios网络请求

1.需要导入axios.js框架

2.发送get请求

（1）格式：axios.get("发送的地址",{params:{'键1':'值1','键2':'值2',...}}).then(function(response){})

（2）注意：第二个参数里放的json数据,then里面的function函数是用来接收反馈回来的数据的

（3）可以在函数中使用alert(response.data)去查看一下返回的数据

3.发送post请求

（1）发送post请求的话，需要将发送的数据使用对象封装

使用URLSearchParams()对象封装
```
var params = new URLSearchParams();
```
使用append往这个对象中添加数据
```
params.append("键","值");
```

（2）发送格式：axios.post("地址",封装的数据对象).then(function(response){alert(response.data)//显示服务器返回的信息}).catch(function(error){alert(error)//显示错误信息})

4.案例：

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>axios请求</title><script src="js/vue.js" type="text/javascript" charset="utf-8"></script><script src="js/axios.js" type="text/javascript" charset="utf-8"></script></head><body><div id="app">用户名:<input type="text" v-model="uname" /><br /> <!-- v-model的设置用来获取表单输入框中的数据 -->密码:<input type="password" v-model="pwd" /><br /><input type="button" @click="submit()" value="提交" /></div><script>var vue = new Vue({el:"#app",data:{uname:"小丽",pwd:"123"},methods:{submit(){//这个数据往服务器端发送，需要后面学习axios发送post/get网络请求技术//需要使用axios.js发送网络的请求//get请求  这个数据往服务器端发送，需要后面学习axios网络请求技术// axios.get("https://www.baidu.com",{// 	params:{'uname':this.uname,'pwd':this.pwd},// 	})// .then(function(response){ //then接收后台服务器的数据反馈// 	alert(response.data);// }).catch(function(error){ //catch如果有异常，捕获异常// 	alert(error);// });//POST请求//使用对象封装post请求提交的参数，需要放入请求体中var params = new URLSearchParams();//加入需要提交的数据params.append("uname",this.uname);params.append("pwd",this.pwd);axios.post("https:www.baidu.com",params).then(function(response){alert("post请求:" + response.data);}).catch(function(error){alert(error);})}}})</script></body>
</html>