vue笔记

模板语法

1.插值语法（双大括号表示）

2.指令（以v-开头）

3.组件的本质是一个名为vuecomponent的构造函数器是vue.extend生成的

2.我们只需要写标签名，vue解析时会帮我们创建实例对象即vue帮我们执行的new VueComponent(option)

3.在vue帮我们执行vue.extend()调用返回的都是一个全新的VueComponent（）

4.this指向：组件配置中data函数、methods中的函数
computed中的函数他们的this均是VueComponent实例对象

2.new vue（）配置中data函数method、watch computed他们的this均是vue实例对象

jquery:
方法：1.作为一般函数调用$(param)参数为函数：当DOM加载完成后执行回调函数2.参数为选择器字符串：查找所有匹配的标签，并将他们封装为jQuery对象参数为dom对象：将dom封装为jquery对象参数为html标签字符串：创建标签对象并封装为jquery对象作为对象使用：$.xxx()

单文件组件：

插件：（本质：对象）

scoped样式：解决类名冲突（后面引入覆盖前面引入）

自定义组件事件

1.一种组件之间的通信方式（适用于子组件===》父组件）

2.使用场景：A是父组件，B是子组件，B想给A传数据，那么就要在A中给B自定义绑定事件（事件的回调在A中）
2.绑定自定义事件：1.在父组件中：或

2.在父组件中：

…
mounted(){
this.$refs.xxx.$on(‘atguigu’,this.test)
}

3.若想自定义事件只能触发一次，可以使用once修饰符或$once方法

4.触发自定义事件：this.$emit(‘thing’,数据)

5.解绑定自定义事件：this.$off(‘atguigu’)

6.组件上可以绑定原生的dom事件需要使用native修饰符

7.注意：通过this.$refs.xxx.$on(‘atguigu’,回调)绑定自定义事件时，回调要么配置在methods中要么使用箭头函数，否则this指向会出问题

全局事件总线：

实现任意组件间的通信（相当于对讲机）
安装全局事件总线：new vue（{
…
beforcreate（）{
vue.prototype.$bus=this//安装全局事件总线$bus就是当前应用的vm

}
}）
使用事件总线：
1.接受数据：A组件想要接受数据，则A组件中给$bus绑定自定义事件，事件的回调留在A组件的自身
method（）{

demo（data）{…}
…
mounted(){

this.$bus.$on(‘xxxx’,this.demo)
}
}

2.提供数据：this.$bus.$emit(‘xxxx’,数据)

4.最好在beforeDestroy钩子中用$off去解绑当前组件所用到的事件

消息订阅与发布——pubsub-js

1.订阅消息：消息名
2.发布消息：消息内容
安装pubsub可以在任意框架中实现消息的订阅与发布

动画效果：

略…

配置代理

安装axios

同源策略三要素：协议名，主机名，端口号
解决跨域：

1.cors方式：后端开发时加入特殊的响应头当实现跨域时浏览器发现后端服务器已经允许跨域请求，则浏览器就不在拦截

jsonp解决跨域问题（只能解决get请求的跨域问题post无法解决并且需要前后端一起解决配置问题）

配置代理服务器(nginx)：代理服务器的与前端所处同样的协议名，主机名，端口号与其保持一致，想要信息是去寻找代理服务器，代理服务器收到请求，将请求发送给后端服务器，再由代理服务器将信息转交给前端服务器，使其收到数据，涉及nginx知识，使用nginx时将静态资源储存在nginx服务器上，还可以降低后端服务器的请求压力。nginx是服务器，在与后端服务器打交道时不使用axios技术，用的最传统的http请求，同源策略无法干预代理服务器与后端服务器之间的请求

vue的脚手架可以开启一个代理服务器

代理资源如果本身服务器就有则不会有代理服务器转发即如果public路径下存在的所有资源则不由代理服务器进行转发

vue脚手架配置代理：
1.在vue.config.js中配置其方法跟nginx中配置代理服务器的方法十分相似，（不管在nginx中还是这里配置代理服务器都需要开启路径重置配置pathRewrite将多余的路径替换成后端可以接受的路径
在进行代理服务器配置时将changorigin设置为true可以将代理服务器的端口设置为前端的服务端口）
vue-resource是vue插件库

插槽

挖个坑等着组件的使用者进行填充
1.默认插槽
2.具名插槽：
例如将img中的内容放入特定地点

作用域插槽：插槽的使用者为插槽里面塞东西

作用：让父组件可以向子组件指定的位置插入html结构，也是一种组件间的通信方式，适用于父组件===》子组件
2.分类：默认插槽，具名插槽，作用域插槽

作用域插槽理解：数据在组件自身但根据数据生成的结构需要组件的使用者来决定（game数据在categjory组件中但使用数据所遍历出来的结构由APP组件决定）

vuex

概念：专门在vue中实现集中式状态（数据管理的vue插件）对vue应用中的多个组件的共享状态进行集中式的管理（读/写），也是一种组件间通信的方式适合于任意组件间通信
什么时候使用：
1.多个组件依赖于同一种状态
2.来自不同组件的行为更需要变更同一种状态（实现组件间的共享）
3.作用：解决共享数据问题
vue工作原理图：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-qYbYZrZC-1647854696609)(Image/1.jpg)]
VUEX由三部分组成：action，mutations，state

官网表示创建store包在其中创建index.js文件
引入vuex 创建vuex对象

1. 准备actions-用于响应组件中的动作
2. const actions={}
3. 准备mutations-用于操作数据（state）
4. const mutations{}
5. 准备state-用于存储数据
6. const state={}
7. const store=new Vuex.Store({
8. //store的创建就是为了管理内置的三个对象，使用键值对的形式进行配置三个对象
9. action :action
10. mutations:mutations
11. state:state
13. })
14. //暴露store
    export default store

getters配置项：用于将state中的数据进行加工(当state中的数据需要经过加工后再使用时可以使用getter加工)

多组件共享数据：

路由

路由就是一组key-value的对应关系(key为路径value为function或者component)
多个路由需要经过路由器管理
作用：实现SPA应用（单页面应用）
借助vue-router(vue的一个插件库专门用来实现spa应用)
SPA应用的理解：
1.单页面web应用 2.整个应用只有一个完整的页面 3.点击页面中的导航链接不会刷新页面，只会做页面的局部更新 4.数据需要通过ajax请求获取

2.路由分类：后端路由：理解value是function，用于处理客户端提交的请求 2.工作过程：服务器接受到一个请求时根据请求路径找到匹配的函数来处理请求返回响应数据
前端路由：
理解：value是component用于展示页面内容，工作过程：当浏览器的路径发生改变是对应的组件就会显示

基本使用：
1.安装vue-router 命令npm install vue-router
2.应用插件 ：vue.use(vuerouter)
3.编写router配置项
4.实现切换（）
5.指定展示位置（）
注意点：
1.路由组件通常存放在pages文件夹，一般组件通常存放在component文件夹
2.通过切换“隐藏了路由组件”默认是销毁的需要的时候在去挂载
3.每个组件都有自的$router属性，里面存储着自己的路由信息4.整个应用只有一个router，可以通过组件的$router属性获取到
多级路由：使用children配置项，在进行跳转时要写完整路径
路由接受两种参数：query，对象传参，
params参数：在router的path路径中使用占位符声明接受params参数例如：path：‘detali：/：id/：/title’，

路由的props配置

作用:用路由组件更加方便的接受参数：
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-LdmavjuS-1647854696611)(image/2.jpg)]
1.props值为对象该对象中的所有key-value的组合最终都会通过props传给detail组件（props：{a：900}）
2.props值为布尔值，布尔值为true，则把路由收到的所有params参数通过props传给detali组件（props：true）
3.props值为函数，该函数返回的对象中每一组key-value都会通过props传给detail组件（
props（router）{
return{
id：route.query.id,
title:route.query.title}}）

router-link的replace属性
1.作用：控制路由跳转时操作浏览器历史记录的模式
2.浏览器的历史记录有两种写入方式，分别为push和replace，push时追加历史记录路由跳转时候默认为push
3.如何开启replace模式，

编程式路由导航
理解：不借助的编程路由导航
缓存路由组件

两个新的生命周期钩子路由组件独有:
activated()路由组件被激活时触发,deactivated()路由组件失活时被触发

全局前置，路由守护

作用：保护路由安全（权限）
在初始化时候被调用和每次路由切换之前被调用

ui组件库

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-5El2hs2V-1647854696612)(image/3.jpg)]

router-link>的编程路由导航
缓存路由组件

两个新的生命周期钩子路由组件独有:
activated()路由组件被激活时触发,deactivated()路由组件失活时被触发

全局前置，路由守护

作用：保护路由安全（权限）
在初始化时候被调用和每次路由切换之前被调用

ui组件库

[外链图片转存中…(img-5El2hs2V-1647854696612)]