1.过滤器
是vue为开发者提供的功能，常用于文本的格式化
过滤器可以用在两个地方:茶壶表达式和v-bind属性绑定
过滤器应该被添加在JavaScript表达式的尾部，有"管道符"进行调用
<div id="app">message的值为:{{message | capi}}</div>1.1注意点
要定义到filters节点下，本质是一个函数
在过滤器函数中，一定要有return值
在过滤器的新参中，就可以获取到"管道符"前面待处理的那个值
1.2私有过滤器和全局过滤器
在filters节点下定义的过滤器，称为"私有过滤器"，因为它只能在当前vm实例所控制的了区域内使用
如果想在多个vue实例之间共享过滤器，则可以按照如下的格式定义全局过滤器
Vue.filter('capi',function(str){
const first = str.charAt(0).toUpperCase()
const other = str.slice(1)
return first+other
})注意点
如果全剧过滤器和私有过滤器名字一致，此时按照"就近原则"，调用的是"私有过滤器"
1.3格式化时间过滤器
//声明格式化时间的全局过滤器
Vue.filter('dataFormat',function(time){
//1.对time进行格式化处理，得到YYYY-MM-DD HH:mm:ss
//2.把格式化的结果，return出去
//直接调用dayjs()得到的是当前时间
//dayjs(给定的日期时间)得到指定的日期
const dtStr = dayjs(time).format('YYYY-MM-DD HH:mm:ss')
return dtStr
})需要导入dayjs的包
1.4连续的多个过滤器
过滤器可以串联使用，但是一般不推荐
{{ item.time | dataFormat |xxx|yyy|zzz}}1.5过滤器传参
过滤器本质是JavaScript函数，因此可以接收参数
<p>{{message|filter(arg1,arg2)}}</p>
//第一个参数必须是管道符前面待处理的值
//从第二个位置开始接收过滤器传过来的参数
Vue.filter('filter',function(msg,arg1,arg2){
})1.6兼容性
过滤器只有vue2和vue1支持，在vue3中剔除了过滤器的相关功能
2.侦听器
2.1watch侦听器
watch侦听器允许开发者坚实数据的变化，从而针对数据的变化做特定的操作
2.1.1方法格式的侦听器
watch: {
//监听username值的变化
//newVal是"变化后的值"，oldVAl是"变化之前的旧值"
username(newval,oldVal){
console.log(newVal,oldVal)
}
}注意
缺点1：无法在刚进入页面的时候，自动触发
缺点2：如果侦听的是一个对象，如果对象中的属性发生了变化，不会触发侦听器
2.1.2对象格式的侦听器
优点1可以通过immediate选项，让侦听器自动触发
watch:{
//定义对象格式的侦听器
username:{
//侦听器的处理函数
handler(newVal,oldVal){
console.log(newVal,oldVal)
},
//immediate选项的默认值是false
//immediate的作用是:控制侦听器是否自动触发一次
immediate: true
}
}2.1.2.1深度侦听
优点2：可以通过deep选项，让侦听器深度监听对象中的每个属性的变化
watch:{
info:{
handler(newVal){
console.log(newVal)
},
//开启深度监听，只要对象中任何一个属性变化了，都会触发"对象的侦听器"
deep:true
}
}2.1.2.2一步到位监听
//如果要侦听的是对象的子属性的变化，则必须包裹一层单引号
'info.username'(newVal){
console.log(newVal)
}3.计算属性
计算属性指的是通过一系列计算之后，最终得到一个属性值
这个动态计算出来的属性值可以被模块结构或methods方法使用
//所有的计算属性，都要定义到computed节点之下
//计算属性在定义的时候，要定义成"方法格式"
computed:{
//rgb作为一个计算属性，被定义成了方法格式
//最终，在这个方法中，要返回一个生成号的rgb(x,x,x)的字符串
rgb:function(){
return `rgb(${this.r},${this.g},${this.b})`
}
}特点：
定义的时候，要被定义为方法
在使用计算属性的时候，当普通的属性使用即可
好处：
实现了代码的复用
只要计算属性中依赖的数据源变化了，则计算属性会自动重新求值
4.axios
axios是一个专注于网络请求的库
4.1axios基本使用
4.1.1发起GET请求
axios({
//请求方式
method:'get',
//请求地址
url:'http://www.liulongbin.top:3006/api/getbooks',
//URL中的查询函数
param:{
id: 1
}
}).then(function(result){
console.log(result)
})4.2.2.发起POST请求
//如果调用某个方法的返回值是Promise实例,则前面可以添加await
//await只能用在被async修饰的方法中
const result = await axios({
method: 'POST',
url: 'http://www.liulongbin.top:3006/api/post',
data:{
name:'zs',
age:20
}
})
console.log(result)4.3解构赋值
document.querySelector("#btnGet").addEventListener('click',async function(){
//解构赋值的时候，使用:进行重命名
//1.调用axios之后，使用async/await进行简化
//2.使用解构赋值，从axios封装的答对象中，把data属性解构出来
//3.把解构出来的data属性，使用冒号进行重命名，一般都重命名为{data:res}
const {data:res} = await axios({
method:'get',
url:'http://www.liulongbin.top:3006/api/getbooks',
})
console.log(res.data)
})4.4axios.get
const {data:res} =await axios.get('http://www.liulongbin.top:3006/api/getbooks',{
params:{id:1}
})
console.log(res)4.5axios.post
const {data:res} = await axios.post('http://www.liulongbin.top:3006/api/post',{name:'zs',gender:'女'})
console.log(res)5.单页面应用程序
指的是一个web网站中只有唯一的一个HTML页面，所有功能与交互都在这唯一的一个页面内完成
6.vue-cli
是Vue.js开发的标准工具,它简化了程序员基于webpack创建工程化的Vue项目的过程
安装
npm install -g @vue/cli在终端下运行如下的命令，创建指定名称的项目
vue create 项目名称名称建议纯英文
?
?
?
?
?把babel、ESLint等插件放到自己独立的配置文件中
6.1vue项目中src目录的构成
assets文件夹：存放项目中用到的静态资源文件，例如css样式表、图片资源
components文件夹：程序员封装的、可复用的组建，都要放到components目录下
main.js是项目的入口文件，整个项目的运行，要先执行main.js
App.vue是项目的根组件
6.2vue项目运行流程
在工程化的项目中，vue要做的水群去哪个很单纯，通过main.js把App.vue渲染到index.html的指定区域中
App.vue用来编写待渲染的模块区域
index.html中需要预留一个el区域
main.js把App.vue渲染到了index.html所预留的区域中
7.vue组件
组件开发指的是：根据封装的思想，把页面上可重用的UI结构封装为组件，从而方便项目开发和维护
7.1vue中的组件化开发
vue是一个支持组件化开发的前端框架
vue中规定：组件的后缀名是.vue
之前接触到的App.vue文件本质上就是一个vue的组建
7.2vue组件的三个组成部分
每个.vue组件都由3各部分组成，分别是：
template -> 组件的模板结构
<template>
<div class="test-box">
<h3>这是用户自定义的Test.vue---{{username}}</h3>
</div>
</template>script -> 组件的JavaScript行为
<script>
//默认导出。这是固定写法
export default{
//data数据源
//注意 .vue组件中的data不能像之前一样，不能指向对象
//注意 组件中的data必须是一个函数
data(){
//这个return出去的{}中，可以定义数据
return {
username: 'admin'
}
}
}
</script>style -> 组件的样式
<style>
.test-box{
background-color: pink;
}
</style>7.3启用less
<style lang="less">
.test-box{
background-color: pink;
h3{
color: red;
}
}
</style>