一、过滤器
1.过滤器Filters（只能在vue2中使用）
p标签里面看到的是后面函数的返回值，message相当于作为参数传给后面。竖线代表要调用过滤器。
过滤器函数必须定义到filters节点之下，过滤器的本质是函数。
字符串charAt（）方法：表示从字符串中把索引对应的字符豁出来。
.toUpperCase:字符大写
2.私有过滤器和全局过滤器
-
注意！若全局和私有名字相同，调用的是私有过滤器
3.连续调用多个过滤器
就是相当于链式，上一个过滤器的处理结果传给下一个过滤器处理
4.过滤器传参
二、侦听器
1.watch侦听器
watch侦听器允许开发者监视数据变化，从而对数据的变化做特定的操作
所有的侦听器，都应该被定义到watch节点下
语法格式：
①方法格式的侦听器
缺点：a、无法在刚进入界面时，就自动触发。
b、如果侦听的是一个对象，对象里面的属性发生变化不会触发侦听器
监听谁就把谁做名字
②对象格式监听器
好处：a.可以通过immediate选项，让侦听器自动触发
b.可以通过deep选项，让对象里面的属性变化也能触发侦听器
2.immediate选项
immediate默认值是false，true——自动触发一次。表示当前页面渲染好之后，立即触发watch侦听器。
3.deep选项
开启深度监听，只要对象中任何一个属性变化了，都会触发对象的侦听器
deep：true——开启深度监听
如果想要侦听对象中的某一个属性，则必须包裹一层单引号。例如：
watch{
'info.username'(newVal){
console.log(newVal)
}
}三、计算属性
1.计算属性
是指通过一系列运算之后，最终得到一个属性值。这个动态计算出来的属性值，可以被模板结构或method使用
语法格式：所有的计算属性都要放到computed中去。计算属性要定义成方法格式
computed:{
//rgb作为欸一个计算属性，被定义成了方法格式
rgb(){
return `$rgb{this.r},${this.g},${this.b}`
}
}特点：
a.定义的时候定义为方法 b.使用时当属性
好处：
a.实现了代码的服用 b.只要计算属性中以来的数据源变化了，则计算属性会自动重新求值
2.axios使用
（1） axios是一个专注于网络请求的库
语法：
axios传递参数方式
axios（{
parames:()//URL中的查询参数，GET
data：（）//请求体参数，POST
）}
加上await，这样就是一个结果值，而不是promise实例
因为axios在拿到数据的时候套了一层壳，所以我们需要解构赋值，解构出data属性，重命名为res
（2）axios.get,axios.post
四、vue-cli
1.单页面应用程序（SPA）
指的是一个web网站只有唯一一个HTML网页，所有的功能与交互都在这唯一的一个页面内完成
2.vue-cli
（1） 简化了程序员基于webpack创建工程话的Vue项目的过程
安装：npm install -g @vue/cli
查询：vue -V
（2）快速生成工程化的Vue项目——vue create 项目名称
选择最后一项：手动选择要安装哪些功能
Bable：解决兼容性；CSS Pre-processors：css预处理器
就是把安装的插件配置文件放到独立文件
若不小心在框里选中，导致其停滞不动解决：ctrl+c
local：本机访问地址；Network：局域网访问地址
注意访问网址时，不能关闭终端窗口，否则会无法访问
（3）
（4）vue项目运行流程
通过把main.js把App.vue渲染到index.html的指定位置
例：
vue部分（test）：
<template>
<div> <h3>test<h3></div>
</template>
main.js部分
import Testfrom './test.vue'
new Vue({
el:'#Test'
//把render函数指定的组件，渲染到HTML页面中
render:h=>h(Test)
})
main.js的方式二
new Vue({
render:h=>h(Test)
}).$mount('#app')//就是替换掉原来app的部分，就相当于原来el指定范围五、vue组件
1.vue组件
vue是一个支持组件化开发的前端框架。规定组件的后缀名是.vue.组件是对UI结构的服用
2.vue组件的三个组成部分
默认导出：export default{ }
注意：①.vue组件中的data不能指向对象，因为组件中的data必须是一个函数。所以要写成函数形式：data（）{ return ********}
②template里面只能有一个根元素
3.启用less语法 <style lang="less">
4.组件之间的父子关系
（1）组件封装好之后，彼此之间是相互独立的，不存在父子关系。在使用组件的时候，根据比才的嵌套关系，形成父子关系、兄弟关系
（2）使用组件的三个步骤
①用import语法导入需要的组件——②使用component节点注册组件——以标签形式使用刚才注册的组件（第一个图在script中 ）
扩：配置path.Autocomplete
下path.Autocomplete——点击右下角小齿轮——扩展设置——右上角打开设置——粘贴
注意：要直接定位到项目的文件夹打开，不能打开包含多个项目的文件夹
（3）通过components注册的是私有子组件
如组件A中注册F，F只能用在组件A中，不能用组件B中
扩：安装Vuter——输入<,选择第一个，回车可以快速生成模板
注册全局组件：
5.组件的props
（1） props是组件的自定义属性。因为组件使用的时候，各个组件使用它，但是又想有一些不一样，所以此时我嫩采用props。
语法格式：
例如：
props['init']
组件使用时：<count init="*****"></count>
//像id，class是系统自己就有的属性，而init没有，所以叫自定义属性注意！！！:init里面拿到的是字符串，可以结合v-bind（：）可以转化为数字型——：init="***"
props是只读的！！，程序员不能直接修改props的值
修改方法：要想修改props的值，可以把props的值转存到data中，
（2）props的default默认值
在声明自定义属性时，可以通过default来定义属性的默认值：
（3）props的type类型
（4）props的required必填项
增添了required：true之后，在标签里面没有传就是错的。例如init里面增添，标签<count></count>会报错，而<count init="***"></count>不会报错
（5）组件之间的样式冲突问题
加<style scoped></style>，以后写样式都最好加上
（6）使用deep修改子组件的样式
使用例：/deep/ h5。
六、生命周期&数据共享
1.组件的生命周期
生命周期：一个组件从创建——运行——销毁的整个过程，强调的是一个时间段
生命周期函数：是由vue框架提供的内置函数，会伴随组件的生命周期，自动按次序执行
2组件之间的数据共享
（1）组件之间的关系：①父子关系 ②兄弟关系
（2）父组件向子组件共享数据
通过自定义属性实现：
（3）子组件向父组件——通过自定义事件实现：
（3）兄弟组件之间的数据共享——在vue2.x，用EventBus
EventBus使用步骤：
3.ref引用
(1)ref是用来辅助开发者不依赖jQuery的情况下，获取DOM元素或组件的引用
<h1 ref="myh1"></h1>
methods:{showThis(){this.$refs.myh1.style.color='red'}}
//$refs:h1——所以，我们可以通过此方法获取到h1,从而对他进行操作，比如这里就是改变了颜色（2）this.$nextTick(cb)方法
例如：
this.$nextTick(()=>{ this.$refs.iptRef.focus() })数组方法：
arr.some:some为数组中的每一个元素执行一次 callback 函数，直到找到一个使得 callback 返回一个true。如果找到了这样一个值，some 将会立即返回 true。否则，some 返回 false。
arr.every:如果数组中检测到有一个元素不满足，则整个表达式返回 false ，且剩余的元素不会再进行检测。如果所有元素都满足条件，则返回 true。
注意： every() 不会对空数组进行检测。 every() 不会改变原始数组。
arr.reduce:reduce 为数组中的每一个元素依次执行回调函数。接受函数作为一个累加器。注意reduce无法调用空数组，会报错
//arr.reduce((累加的结果，当前循环项）=>{},初始值）
例：arr.reduce((amt，item）=>{
amt+=item.price*item.count
},0）七、动态组件
1.动态组件
（1）定义：动态组件是指动态切换组建的显示与隐藏
（2）实现动态组件渲染——component
component标签（位置：写在template要渲染的位置）时vue内置的，作用：组件占位符；is属性的值，表示要渲染的组件的名字。
（3）使用keep-alive保持状态
在动态渲染的时候，隐藏的会被销毁，我们想要保持，就使用这个方法
使用方法：component标签用<keep-alive></keep-alive>包裹起来
（4）keep-alive对应的生命周期函数
当组件第一次被创建的时候，既会执行created生命周期，也会执行activated生命周期；被激活的时候只会触发activated生命周期，因为组件没有被重新创建
当组件被缓存时，会自动触发组件的deactivated生命周期函数； 当组件被激活时，会自动触发组件的activated生命周期函数 （这两个周期只有加了keep-alive才使用）
（5）keep-alive的include属性
如果不加的话就会默认全部缓存
使用exclude可以指定那些组件不需要被缓存。注意！！！两个属性不能同时使用
八、插槽（slot）
1.插槽
把不确定、希望由用户指定的部分定义为插槽
(2)使用
管饭规定每一个slot插槽，都有一个name名称，如果省略了slot的name属性，则有一个slot的name属性叫做default
如果要把内容填充到指定名称的插槽中，需要使用v-slot,而且要使用在template标签上，不能直接用在元素身上。
例：<template v-slot:default(这里填插槽名称)><p></p></template>
简写：#——v-slot：default可以写成#default
（3）后备内容
（4）具名插槽
用右name属性，反之没有的叫做匿名插槽
（5）作用域插槽
在封装组件时，为预留的<slot>提供属性对应的值，这种用法叫做“作用域插槽”
插槽提供的属性我们用等号来接收，
理解：slot里面的属性值我们可以用等号来接收，。例如我们接收msg，就可以得到msg内容，接受user，可以得到user里面user.name等内容
九、自定义指令
1.分类
（1）私有自定义指令
①
bind是一个函数，缺点是只在第一次被绑定的时候触发， el是固定写法。（这个写在script里面）。
定义指令时，不用加v-，只有在使用的时候才加，变成v-color
②update函数
就是把bind的位置替换，用法都是一样的 。但是在第一次是不生效，在后面DOM更新时生效
③函数简写
（2）全局自定义指令
注意全局声明的要放到main.js中去
ESlint
（1）安装——直接vscode搜索ESlint
是用来规范代码格式，如果格式不正确，也会报错
报格式错误，可以去网站搜索错误信息，可以查看问题在哪里
扩：希望代码运行在哪里停止就在那里加：debugger
十、路由
1.前端路由的概念与原理
（1）路由就是对应关系。前端路由：Hash地址与组件之间的对应关系（我们访问页面网址后面会出现#，#后面的部分对应哈希地址，想要调用使用：location：hash，注意获得的值包括#号）
（2）前端路由的工作方式
（3）实现前端路由
例：<a herf="#about"></a>——就会看到网址：
2.vue-router
（1）什么是：是vue.js给出的路由几角方案，只能结合vue项目进行使用，能够轻松的管理SPA项目中组件的切换。网址：网址
（2）vue-router安装和配置步骤
①安装vue-router包——安装：npm i vue-router -S
②创建路由模块
注意：在进行模块化导入的时候，如果给的是文件夹，则默认导入这个文件夹下，名字叫做index.js的文件（也就是说，不用写全也可以，它可以默认寻找）
router-view：作用：占位符——<router-view></router-view>
router-link：可以代替普通的a链接——<router-link to="/****">,使用它的好处就是，不用写hash地址前面的#，它会自动帮我们加
3.vue-router的常见用法
（1）路由重定向——redirect
访问A，没有要展示的组件，那么强制用户跳转到C
（2）嵌套路由
通过路由实现组件的嵌套。模板内容中又有自己路由链接，点击子级路由链接显示子级模板内容。
通过children属性声明子路由规则
注意：子路由规则不要用/开头，但是父级路由规则要有/开头
（3）默认子路由
如果children数组里面，某个路由规则的path值为空字符串，则这条路由规则叫做默认子路由。也就是说，我们一进到这个父级，我们就会默认展示这一个默认子路由。
4.动态路由匹配
（1）基本用法
（2）为路由规则开启props
①数组里面加上：props：true ②：
在hash地址中，/后面的参数项叫做路径参数，在路由参数对象中，需要this.$router.params来访问参数路径。
在hash地址中，？后面的参数项叫做查询参数，在路由参数对象中，需要this.$router.query来访问查询参数。
fullPath包含完整的hash地址，包含路径参数和查询参数
5.声明式导航&编程式导航
声明式导航：点击链接实现导航的方式
编程式导航：调用API方法实现导航的方式
$router.go的简化用法
6.导航守卫
（1） 可以控制路由的访问权限
（2）全局前置守卫
（3）守卫方法的三个形参
（3）next函数的三种调用方式
①直接放行：next（）
②强制其跳转：next（‘某个地址’）
③不允许跳转到后台主页，停留在当前页面：next（false）
8.9-8.10学习汇报与总结
1.问题解决
（1）问题：显示成功安装vue-cli之后，查看版本号报错
解决：以管理员身份运行PowerShell——输入 set-ExecutionPolicy RemoteSigned——输入Y——最后能查询到版本号。
2.8.9-8.10学习体会与感受
完成了vue视频第三、四天的学习。东西多也不像之前的这么好理解(最不清楚的应该是生命周期，要慢慢看慢慢想)，有的地方看几遍才能大致理解，看一遍远远是不够，所以也愈发觉得在实践当中巩固知识的重要性，不管是看了懂还是不懂，总归不使用没多久就会忘了。做好笔记，忘记的就翻，有新的理解就加上去。
3.8.11-8.12学习计划
完成vue视频第五、六天的学习