Vue2之过滤器、侦听器、计算属性、axios的相关使用
一、过滤器
1、介绍
过滤器是vue为开发者提供的功能，常用于文本的格式化。
过滤器可用在两个地方：插值表达式和v-bind属性绑定。
过滤器应该被添加在JavaScript表达式的尾部，由"管道符"进行调用
2、注意
（1）要定义到filters节点下，本质是一个函数
（2）在过滤器函数中，一定要有return值
（3）在过滤器的形参中，就可以获取到"管道符"前面待处理的那个值
（4）如果全局过滤器和私有过滤器名字一致，此时按照"就近原则"，调用的是私有过滤器
3、应用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="./lib/bootstrap.css">
</head>
<body>
<div id="app">
<p>message的值是：{
{message | capi}}</p>
</div>
<!--1.导入Vue的库文件，在window全局就有了Vue这个构造函数-->
<script src="./lib/vue-2.6.14.js"></script>
<!--2.创建Vue的实例对象-->
<script>
// 创建Vue的实例对象
// 相当于 ViewModel层
const vm = new Vue({
// el属性是固定的写法，表示当前vm实例要控制页面上的哪个区域，接收的值是一个选择器
// 相当于 view层
el: '#app',
// data对象就是要渲染到页面上的数据
// 相当于 model层
data: {
message: 'hello vue.js'
},
// methods的作用就是定义事件的处理函数
methods: {
},
// 过滤器函数，必须定义到filters节点之下
// 过滤器本质是函数
filters: {
// 注意：过滤器函数形参中的val,永远都是"管道符"前面的那个值
capi(val) {
// 字符串有charAt方法，这个方法接收索引值，表示从字符串中把索引对应的字符，获取出来
const first = val.charAt(0).toUpperCase()
// 字符串的slice方法，可以截取字符串，从指定索引往后截取
const other = val.slice(1)
// 强调：过滤器中，一定要有一个返回值
return first + other
}
}
})
</script>
</body>
</html>
4、私有过滤器和全局过滤器
在filters节点下定义的过滤器，称为"私有过滤器"，因为它只能在当前vm实例所控制的el区域内使用。
如果希望在多个vue实例之间共享过滤器，则可以按照如下的格式定义全局过滤器。
Vue.filter('capi',function(str){
const first = str.charAt(0).toUpperCase()
// 字符串的slice方法，可以截取字符串，从指定索引往后截取
const other = str.slice(1)
// 强调：过滤器中，一定要有一个返回值
return first + other
//return str.charAt(0).toUpperCase() + str.slice(1)
})
全部代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="./lib/bootstrap.css">
</head>
<body>
<div id="app">
<p>message的值是：{
{message | capi}}</p>
</div>
<div id="app2">
<p>message的值是：{
{message | capi}}</p>
</div>
<!--1.导入Vue的库文件，在window全局就有了Vue这个构造函数-->
<script src="./lib/vue-2.6.14.js"></script>
<!--2.创建Vue的实例对象-->
<script>
// 全局过滤器 - 独立于每个vm实例之外
// Vue.filter() 方法接收两个参数
// 第一个参数，是全局过滤器的"名字"
// 第二个参数，是全局过滤器的"处理函数"
Vue.filter('capi',function(str){
const first = str.charAt(0).toUpperCase()
// 字符串的slice方法，可以截取字符串，从指定索引往后截取
const other = str.slice(1)
// 强调：过滤器中，一定要有一个返回值
return first + other
//return str.charAt(0).toUpperCase() + str.slice(1)
})
// 创建Vue的实例对象
// 相当于 ViewModel层
const vm = new Vue({
// el属性是固定的写法，表示当前vm实例要控制页面上的哪个区域，接收的值是一个选择器
// 相当于 view层
el: '#app',
// data对象就是要渲染到页面上的数据
// 相当于 model层
data: {
message: 'hello vue.js'
},
// methods的作用就是定义事件的处理函数
methods: {
},
// 过滤器函数，必须定义到filters节点之下
// 过滤器本质是函数
filters: {
}
})
const vm2 = new Vue({
// el属性是固定的写法，表示当前vm实例要控制页面上的哪个区域，接收的值是一个选择器
// 相当于 view层
el: '#app2',
// data对象就是要渲染到页面上的数据
// 相当于 model层
data: {
message: 'hello world'
},
// methods的作用就是定义事件的处理函数
methods: {
},
// 过滤器函数，必须定义到filters节点之下
// 过滤器本质是函数
filters: {
}
})
</script>
</body>
</html>
5、过滤器的其他用法
5.1 连续调用多个过滤器
过滤器可以串联地进行调用
<p>{
{data | filter1 | filter2}}</p>
5.2 过滤器的传参
<!--arg1和arg2是传递给filterA的参数-->
<p>{
{message | filterA(arg1,arg2)}}</p>
// 过滤器处理函数的形参列表中
// 第一个参数：永远都是“管道符”前面待处理的值
// 从第二个参数开始，才是调用过滤器时传递过来的arg1 和 arg2参数
Vue.filter('filterA', (msg, arg1, arg2) => {
// 过滤器的代码逻辑
})
5.3 过滤器的兼容性
过滤器在vue1.x和vue2.x中受支持，在vue3.x的版本中剔除了过滤器相关的功能。
在企业级项目开发中：
如果使用的是2.x版本的vue，则依然可以使用过滤器相关的功能
如果项目已经升级到了3.x版本的vue,官方建议使用计算属性或方法代替被剔除的过滤器功能
二、watch侦听器
1、什么是watch侦听器
watch侦听器允许开发者监视数据变化，从而针对数据的变化做特定的操作。
2、格式
侦听器本质上是一个函数，要监视哪个数据的变化，就把数据名作为方法名即可。
参数中是新值在前，旧值在后。
// 所有的侦听器，都应该被定义到watch节点下
watch: {
username(newVal, oldVal){
console.log('监听到了username值的变化！', newVal, oldVal)
}
}
3、示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="./lib/bootstrap.css">
</head>
<body>
<div id="app">
<input type="text" v-model="username">
</div>
<!--1.导入Vue的库文件，在window全局就有了Vue这个构造函数-->
<script src="./lib/vue-2.6.14.js"></script>
<!--2.创建Vue的实例对象-->
<script>
// 创建Vue的实例对象
// 相当于 ViewModel层
const vm = new Vue({
// el属性是固定的写法，表示当前vm实例要控制页面上的哪个区域，接收的值是一个选择器
// 相当于 view层
el: '#app',
// data对象就是要渲染到页面上的数据
// 相当于 model层
data: {
username: ''
},
// 所有的侦听器，都应该被定义到watch节点下
watch: {
// 侦听器本质上是一个函数,要监视哪个数据的变化，就把数据名作为方法名即可
// 参数中是新值在前,旧值在后
username(newVal, oldVal){
console.log('监听到了username值的变化！', newVal, oldVal)
}
}
})
</script>
</body>
</html>
4、侦听器的格式
4.1 方法格式的侦听器
（1）缺点一
无法在刚进入页面的时候，自动触发。
（2）缺点二
如果侦听的是一个对象，如果对象中的属性发生了变化，不会触发侦听器
4.2 对象格式的侦听器
（1）优点一
可以通过immediate选项让侦听器自动触发。
（2）immediate选项相关代码
watch: {
// 定义对象格式的侦听器
username: {
// 侦听器的处理函数
handler(newVal, oldVal){
console.log(newVal, oldVal)
},
// immediate选项的默认值是false
// immediate的作用是：控制侦听器是否自动触发一次
immediate: true
}
}
（3）优点一
可以通过deep选项，让侦听器深度监听对象中每个属性的变化。
（4）deep选项相关代码
// 所有的侦听器，都应该被定义到watch节点下
watch: {
info:{
handler(newVal){
console.log(newVal)
},
// 开启深度监听，只要对象中任何一个属性变化了，都会触发“对象的侦听器”
deep:true
}
}
也可以写成
'info.username'(newVal){
console.log(newVal)
}
三、计算属性
1、介绍
计算属性指的是通过一系列运算之后，最终得到一个属性值。
这个动态计算出来的属性值可以被模板结构或methods方法使用。
2、特点
（1）定义的时候，要被定义为方法
（2）在使用计算属性的时候，当普通的属性使用即可
3、优点
（1）实现了代码的复用
（2）只要计算属性中依赖的数据源变化了，则计算属性会自动重新求值
4、相关应用
// 所有的计算属性，都要定义到computed节点之下
// 计算属性在定义的时候，要定义成“方法格式”
computed:{
// rgb作为一个计算属性，被定义成了方法格式
// 最终，在这个方法中，要返回一个生成好的 rgb(x,x,x)的字符串
rgb(){
return `rgb(${
this.r},${
this.g},${
this.b})`
}
}
5、完整代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="./lib/bootstrap.css">
<style>
.box{
width: 200px;
height: 200px;
border: 1px solid #ccc;
}
</style>
</head>
<body>
<div id="app">
<div>
<span>R: </span>
<input type="text" v-model.number="r">
</div>
<div>
<span>G: </span>
<input type="text" v-model.number="g">
</div>
<div>
<span>B: </span>
<input type="text" v-model.number="b">
</div>
<hr>
<!--专门用户呈现颜色的div盒子-->
<!--在属性身上，:代表 v-bind：属性绑定-->
<!--:style 代表动态绑定一个样式对象，它的值是一个{ }样式对象-->
<!--当前的样式对象中，只包含backgroundColor背景颜色 -->
<div class="box" :style="{backgroundColor:rgb}">
{
{rgb}}
</div>
<button @click="show">按钮</button>
</div>
<!--1.导入Vue的库文件，在window全局就有了Vue这个构造函数-->
<script src="./lib/vue-2.6.14.js"></script>
<script src="./lib/jQuery-1.9.1.min.js"></script>
<!--2.创建Vue的实例对象-->
<script>
// 创建Vue的实例对象
// 相当于 ViewModel层
const vm = new Vue({
// el属性是固定的写法，表示当前vm实例要控制页面上的哪个区域，接收的值是一个选择器
// 相当于 view层
el: '#app',
// data对象就是要渲染到页面上的数据
// 相当于 model层
data: {
r: 0,
g: 0,
b: 0
},
methods:{
// 点击按钮，在终端显示最新的颜色
show(){
console.log(this.rgb)
}
},
// 所有的计算属性，都要定义到computed节点之下
// 计算属性在定义的时候，要定义成“方法格式”
computed:{
// rgb作为一个计算属性，被定义成了方法格式
// 最终，在这个方法中，要返回一个生成好的 rgb(x,x,x)的字符串
rgb(){
return `rgb(${
this.r},${
this.g},${
this.b})`
}
}
})
</script>
</body>
</html>
四、axios库
1、介绍
axios专注于数据请求，在请求到数据之后，在真正的数据之外，又有一层封装，所以需要对里面的data进行引用。
2、axios发起GET请求
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script src="./lib/axios.min.js"></script>
<script>
//1.调用axios方法得到的返回值是Promise对象
axios({
// 请求方式
method: 'GET',
// 请求的地址
url:'http://www.liulongbin.top:3006/api/getbooks',
// URL中的查询参数
params:{
id:1
},
// 请求体参数
data:{
}
}).then(function(result){
console.log(result.data)
})
</script>
</body>
</html>
3、axios发起POST请求
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<button id="btn">发起POST请求</button>
<script src="./lib/axios.min.js"></script>
<script>
document.querySelector('#btn').addEventListener('click', async function(){
const result = await axios({
// 请求方式
method: 'POST',
// 请求的地址
url:'http://www.liulongbin.top:3006/api/post',
// 请求体参数
data:{
name: 'zs',
age:20
}
})
console.log(result)
})
</script>
</body>
</html>
4、使用解构赋值发请求
4.1 步骤
（1）调用axios后，使用async/await进行简化
（2）使用解构赋值，从axios封装的大对象中，把data属性解构出来
（3）把解构出来的data属性，使用冒号进行重命名，一般都重命名为{data : res}
4.2 相关代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<button id="btn">发起Get请求</button>
<script src="./lib/axios.min.js"></script>
<script>
document.querySelector('#btn').addEventListener('click', async function(){
const {
data: res} = await axios({
// 请求方式
method: 'GET',
// 请求的地址
url:'http://www.liulongbin.top:3006/api/getbooks',
})
console.log(res.data)
})
</script>
</body>
</html>
5、使用axios.get发请求
5.1 格式
axios.get('url地址'，{
// get的参数
params:{
//参数内容
id: 1
}
})
5.2 完整代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<button id="btn">GET</button>
<script src="./lib/axios.min.js"></script>
<script>
document.querySelector('#btn').addEventListener('click', async function(){
const {
data: res} = await axios.get('http://www.liulongbin.top:3006/api/getbooks',{
params: {
id: 1
}
})
console.log(res)
})
</script>
</body>
</html>
6、使用axios.post发起请求
6.1 格式
axios.post('url地址',{
// 参数内容
name: 'zs',
gender: '女'
})
6.2 完整代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<button id="btn2">POST</button>
<script src="./lib/axios.min.js"></script>
<script>
document.querySelector('#btn2').addEventListener('click', async function(){
const {
data: res} = await axios.post('http://www.liulongbin.top:3006/api/post',{
name: 'zs',
gender: '女'
})
console.log(res)
})
</script>
</body>
</html>