在学Vue框架之前需要了解一些知识:ES6语法规范、ES6模块化、包管理器、原型、原型链、数组的常用方法、axios、promise;
Vue是什么?
一套用于构建用户界面的渐进式的javaScript 框架
不得不说,它是有一位中国小伙(由雨溪)开发~,真的很牛!
Vue的特点:
组件化、声明式、虚拟DOM、Diff算法
Vue的知识点:
1、初识Vue:
大概对Vue实例和模板有个概念:
其次对于语法很好区分的,和其他语言没什么区别,js是一门弱类型语言!
2.Vue模板语法:
插值语法:一般是用于解析标签体的内容,可以直接读取data中的所有属性;{{}}
指令语法:解析标签(标签属性、标签体内容、绑定事件),指令有很多(v-bind,v-if,v-on,v-model.....)以及指令的简写
3.Vue的两种绑定方式:
单向和双向(实现数据和页面之间的通信)
4.Vue中的data和el属性的两种写法
其中的vm.$mount('#root')是一个时间周期函数,后面会有具体的详解;
data用函数式的时候默认this指向的是当前的Vue实例,如果改为用箭头函数,this指向的是windows实例
5.Vue的启发前身是:MVVM模型
6.M,V,VM三者关系图
通俗的话来说,数据通过vm实例与页面之间相互通信;
7.Object.defineProperty 对象定义属性
在其情况下,该属性不可以被枚举(遍历),不可以被修改和删除;
enumerable:false;//控制属性是否可以被枚举
writable:false;//控制属性是否可以被修改
configurable:false;//控制属性是否可以被删除
//object.keys(对象名)//获取对象的全部属性成一个数组
我们可以通过加getter,setter来读取 或者修改该属性
样例:
8.数据代理:
定义:通过对象代理对另一个对象中属性的操作(读/写)
样例:
8.1、Vue的数据代理
数据代理图示:
9.事件的基本使用
10.事件的修饰符
前三种比较常见![](https://i-blog.csdnimg.cn/blog_migrate/99a568f8090b021d6f1c8efe85329b27.png)
样例:
效果就是组织网页跳转,以及弹窗只会展现一次
值得了解的是只有wheel它需要等待事件回调执行完毕才会执行行为,所以需要用到passive;想scroll就完全不需要,它默认行为立即执行
11.Vue中常见的按键别名
未提供的按键例如CapsLock,这样的由两个字母组成的名字应该改为caps-lock(短横线命名)
用编码命名不推荐(之后可能会取消这种命名方式)
然后特别注意一下、系统修饰键![](https://i-blog.csdnimg.cn/blog_migrate/29ae7ef6fb15baf9df13794a569fcb05.png)
12.Vue的计算属性
样例:
在不修改数据的情况下,可以简写function(){}默认是get函数
13.监事属性
样例
13.1.深度监视![](https://i-blog.csdnimg.cn/blog_migrate/8054034cf1b9b2779299f84f3340ee5f.jpeg)
样例
如果不初始化可以直接简写
样例2:
14.计算属性和监视之间的区别
computed不能实现异步操作
15.绑定样式:字符串写法
//使用v-bind 单项绑定,把样式更新到页面
//讲一个随机生成函数,向下取整;
//样式绑定:数组写法:样式个数不确定、名字不确定
//样式绑定:对象写法:样式个数确定、名字确定,但需要动态决定用不用
//也可以直接绑定style样式
总结:
16.条件渲染
注意if else if 匹配,只能匹配到最近一个
if 和show的区别,show只会被隐藏,if会被移除
样例:
17.V-for 循环指令
在循环遍历过程中,如果没有输入数据,进行排序或删除,使用index,id作为key其实都不影响,但是为什么会影响呢?如下图:
在以index作为key时,首先原来的数据会产生一个虚拟的dom,然后转化为真实的dom,在更新数据后,也会产生一个虚拟dom,而这个时候利用到diff对比算法,去比较;如果相同则直接复用原来的,相反,生成新的真实dom,这也是开篇说到的重复利用dom节点,那么,如果我以index作为对比,首先I对应,index=1下的,key=0中的名字不同,然后新生成,但是后面的input标签在对比是认为相同的所以直接复用了,进而造成图中,名字与信息错乱的局面,如果以id的话,他直接去匹配到对应的id,不会因为顺序改变了,造成原本id变化
18.虚拟DOM中key的作用以及选择总结:![](https://i-blog.csdnimg.cn/blog_migrate/b316011572d614f3f118ce54ad6cbf78.png)
19.列表过滤
样例:类似于模糊搜索,输入一个字,找出包含该字的名字
要注意不要更改原来的数组,下面是两种写法
一种是通过watch,另一种是computed实现
20.数据的更新检测
这里相当于给你封装了一些新的函数,它的名字与原来的名字一样,但是多了一些监视功能
push.pop,shift,unshift,splice,sort,reverse
20.1Vue是如何监视对象中的数据呢?![](https://i-blog.csdnimg.cn/blog_migrate/55677a60925b66e745de44ce37c3f56e.png)
21.收集表单数据
记得初始化为:‘ ’空串![](https://i-blog.csdnimg.cn/blog_migrate/aa8af77f4501dd08f26b354dbbb6d89d.png)
22.过滤器![](https://i-blog.csdnimg.cn/blog_migrate/0b2b404da710c204e6cae0aef3bb168f.png)
23.指令集合![](https://i-blog.csdnimg.cn/blog_migrate/f67838989b7174b3893f536e1e880cff.png)
24.cookie 的工作原理:
不同的浏览器不可以获取cookie字段,比如在谷歌登录后,登录火狐并不会有账号登录
但是我们如果知道了,cookie密钥以后,复制到火狐也可以登录进去
所以我们的账号密码会被服务器解析成密钥如果被获取。。。不用多说了吧,当然现在肯定不会让你轻易获取会拦截的
下面图:首先我输入账号密码信息后,请求,会返回一些cooker密钥,然后被存储在cookie上,
当我验证成功后,我登录访问我的其他信息,比例在Git上访问我的仓库这个时候就不需要在重新登录,只需要调用cookie存取的密钥是否相同了,即可跳转
24.1.v-html指令:
25.V-cloak指令
26.自定义语法![](https://i-blog.csdnimg.cn/blog_migrate/3b846ad3d622f45f00ee8026d7b91ea0.jpeg)
样例:
局部指令:
全局指令:
27.生命周期(生命周期(回调)函数,生命周期钩子)
在Vue在关键时刻帮我们调用一些特殊名称的函数,名字不可以改,但是函数的具体内容可以根据需求编写,生命周期函数中的this指向的是vm或者是组件的实例对象(组件的概念后面再讲)
样例:
27.1生命周期流程图
再调用mounted之前后者之后都有一些其他时期,可以理解为有三对,创建,挂载,销毁;每对包括(创建前beforecreate,创建完毕created这样的;两种状态)后两种十分重要
在Vue的官网上其实有这样一张示意图代表着整个周期的流程
注意:创建是初始化的是数据,而不是实例,对虚拟DoM操作是无效的,页面不会渲染;最好不要在销毁阶段去修改数据,这里不会再触发了,销毁后VM实例不会在存在,但是原生的DOM事件还可以被调用,依旧有效
总结:![](https://i-blog.csdnimg.cn/blog_migrate/1cc379aee39033a9f650cb1ee1810ddb.png)
28.模块、组件、模块化、组件化
-
模块:向外提供特定功能的js程序。一般就是一个js文件,目的是因为js文件很多很复杂,复用js,简化js的编写,可以提高js运行效率
- 组件:用来实现局部(特定)功能效果的代码集合,因为界面功能很复杂,复用编码,可以简化项目编码,提高运行效率
传统方式编写应用:依赖关系混乱,不好维护,代码复用率不高!
组件方式编写应用:容易维护,易复用
组件嵌套![](https://i-blog.csdnimg.cn/blog_migrate/56294eb13cb6d43f572c53566b844de7.png)
组件的定义:实现应用中局部功能代码和资源的集合
两个概念:
模块化:当应用中的js都以模块来编写的,那这个应用就是一个模块化应用
组件化:当应用中的功能是多组件的方式来编写的,那这个应用就是一个组件化的应用
29.非单文件组件、单文件组件
非单文件组件:一个文件中包含n个组件
单文件组件:一个文件中只包含一个组件
样例:
29.1:如何使用组件
一、三大步骤:
1.定义组件(创建组件)
2.注册组件
3.使用组件(写组件标签)
二、如何定义:
使用vue.extend(option)创建,其中options和new Vue(options)时传入的那个options几乎一样,区别:
1.el不要写,最终所有的组件都要经过一个vm管理,由vm中的el决定服务哪个容器
2.data必须写成函数——避免组件被复用,数据存在引用关系
备注:使用template可以配置组件结构。
三、如何注册:
1.局部注册:靠new Vue 的时候传入components 选项
2.全局注册:靠Vue.compontent('组件名',组件)
四、编写组件标签:
<school> </school>
五、注意事项:
30.关于VueCompontent
它是一个构造函数,也会生成一个实例对象vc,每次调用都是全新的
30.1、VC与Vm的内置关系
VueCompontent.prototype.__proto__===Vue.prototype
让组件实例对象(vc)可以访问到Vue原型上的属性、方法
30.2VC与Vm两者的关系
推荐一个可以自动匹配的标签的插件:Vetur。。。
31.文件组件 结构
可以通过<v+enter实现上面的组件结构
32.Vue脚手架 ——Vue CLI(command line interface)
说明:Vue脚手架是Vue官方提供的标准化开发工具(开发平台)安装上Vue官网注意版本匹配问题
32.1脚手架文件结构
## 补充一下,关于render函数
如果不引入:报错如下![](https://i-blog.csdnimg.cn/blog_migrate/62ba2c391324838d3590d5391875baf1.png)
写法
总结![](https://i-blog.csdnimg.cn/blog_migrate/22d84c6fb0993c1775ad895696d9751d.png)
其中的index页面引入配置图标和标题有了些许变化
32.2 默认配置Vue.config.js
关闭生产提示:
Vue.config.productionTip=false
32.3.ref属性
给元素或子组件注册引用信息
32.3.props配置:只读
总结:
32.4.mixin(混入)![](https://i-blog.csdnimg.cn/blog_migrate/ae90da51fa062d18749635c095b85b6d.png)
样例:
32.5插件总结:用于增强Vue
32.6.scoped样式
简单来说就是每个组件互不干扰
33.组件化编码流程
推荐一个记笔记的:readme.md type
@install open
通过一个案例实现:
33.webStorage(localStorage,sessionStorage)
当然别瞎想,现在肯定没有那么容易获取你的key和value
34.子给父传递数据:
样例:
两种写法:v-on,ref
34.1.自定义事件
样例
适用于子与父之间通信
注意回调函数中的箭头函数
35.全局事件(GlobalEventBus)
适用于兄弟组件传信,或者祖孙之间通信,它就像一个公共汽车一样别人管它这上车(存数据),到了点下车(读取数据),太可怜了
除了全局事件还有一个消息订阅与发布也是一样的
35.1.消息订阅与发布(publish subscrible)![](https://i-blog.csdnimg.cn/blog_migrate/9986552fb1a7cf13501e857658ef1e66.jpeg)
35.3. nextTick
在官网中未展示出的三个周期函数,其中一个就是nextTick,可以想到用于聚焦文本框可以使用
36.Vue封装的过渡动画
引入一个Animate.css样式
写法:
37.Vue脚手架配置代理
通过代理可以向服务器请求数据,可以通过代理把不同的host(5000)端口号不同也能向服务器请求数据![](https://i-blog.csdnimg.cn/blog_migrate/a1038cb2f991e6bd82d9b9da2bd7fa33.jpeg)
37.1.vueResourese
在调用ajax数据时,不在需要用axios去get
38.插槽slot
1.作用:让父组件可以向子组件指定位置插入html结构,也是一种通信方式,适用于父组件=》子组件
2.分类:默认插槽、具名插槽、作用域插槽
具体编码
样例效果:
39.Vuex
概念:专门在Vue中实现集中式状态(数据)管理的一个Vue插件,对vue应用中多个组件共享状态进行集中式的管理(读/写),也是一种组件的通信方式,且适合用于任意组件间通信。
1.多组件依赖于同一状态(数据)
2.来自不同组件的行为需要变更同一状态(数据)
39.1 全局事件总线和vuex实现多组件共享数据对比图![](https://i-blog.csdnimg.cn/blog_migrate/5dcc65e9e5fc39743d7be7eee8e07508.jpeg)
![](https://i-blog.csdnimg.cn/blog_migrate/cd11f48a3c6722a07afeb9aac2454f06.jpeg)
39.2vuex示意图(Dispatch/action、commit/Mutation、Mutate/State、render/vc)
注意在vue2中,要用vuex的3版本,在vue3,要使用vuex的4版本
39.3.搭建vuex环境
40.mapMutations、mapState、mapGetters、mapActions
41.模块化+命名空间namespaced![](https://i-blog.csdnimg.cn/blog_migrate/0892dc6ffa64d1818a819602bfb5eeaa.jpeg)
读取数据
42.vue-router
1.引入:
2.vue-router
理解1:vue的一个插件库,专门用来实现SPA应用
2.1SPA应用:
1.单页Web应用
2.整个应用只有一个完整的页面
3.点击页面中的导航链接不会刷新页面,只会页面的局部更新
4.数据需要通过ajax请求获取
2.2理解2:
路由:
一个路由就是一组映射关系(key-value),key为路径,value可能是function或者component
路由分类
a)前端路由: value是component,用于展示页面内容,工作过程:当浏览器的路径改变时,对应的组件就会显示
b)后端路由:value是function,用于处理客户端提交的请求,工作过程:服务器接收到一个请求时,根据请求路径找到匹配的函数来处理请求,返回响应数据
放到路由器上的示意图
3.基本使用
4.active-class 实现切换
5.注意事项
存放文件,切换后会被销毁,每个路由都可以通过$route属性存储自己的信息,整个应用只有一个router
42.2.路由的query参数
?后传递
2.1,命名路由:简化路由的跳转![](https://i-blog.csdnimg.cn/blog_migrate/407742543788363ae544ff87f4b50772.png)
2.2.路由的params参数
使用占位符声明接受params参数
![](https://i-blog.csdnimg.cn/blog_migrate/1d1c7711688ef92574b261de26fa9520.png)
42.3路由的props配置![](https://i-blog.csdnimg.cn/blog_migrate/51c69a9b74fcba43b4074acb1c857584.png)
1.1.router-link_replace属性![](https://i-blog.csdnimg.cn/blog_migrate/bb9d5a38fc05d75a0fef7ba2056930d5.png)
42.4.编程式路由导航push,replace
42.5.缓存路由组件![](https://i-blog.csdnimg.cn/blog_migrate/ad32cc6c6510aed4d49b46d8247e05a2.png)
42.6.activated,deactivated生命周期钩子
这是剩下的最后两个,可以解决切换时定时器不断工作的效果
42.7.路由守卫
1.1全局守卫
2.2.独享守卫![](https://i-blog.csdnimg.cn/blog_migrate/c25c8eed160042fa79d318ca156bfca7.png)
3.3.组件守卫
4.beforeRouteEnter,beforRouteLeave
42.8.路由器的工作模式:hash,history
43.Vue UI 组件库
配置:
Vue3快速上手
1.性能提升
2.创建Vue3.0工程
2.1.创建方式![](https://i-blog.csdnimg.cn/blog_migrate/d45c33c238d2148094504a91f1039153.png)
通俗来讲就是,你需要什么就给你加载什么,时间会快很多
2.2 界面变化
3.set up_Compostion API
注意点
4.ref函数与reactive函数
4.1.响应式
对比
vue2中的响应式原理![](https://i-blog.csdnimg.cn/blog_migrate/0bac3d45d34fc571bf0f2ce4746f97c8.png)
vue3的响应式的原理![](https://i-blog.csdnimg.cn/blog_migrate/aedfaf0e0dffa9ac14dbca8db5ea0dbb.png)
总结![](https://i-blog.csdnimg.cn/blog_migrate/33c274e8fb4dfc8ad1fe0e5cdde33555.png)
4.3.reactiv对比ref
5.计算机属性与监视
1.computer函数
2.watch函数![](https://i-blog.csdnimg.cn/blog_migrate/9d14809956c09b40132fd5702769bd37.png)
6.watchEffect函数![](https://i-blog.csdnimg.cn/blog_migrate/b5313c98fb40edec24c1dcb21540f285.png)
7.生命周期
示意图![](https://i-blog.csdnimg.cn/blog_migrate/114952ed70128b112645f993e7b536f1.png)
对比vue2提供的组件api生命周期钩子![](https://i-blog.csdnimg.cn/blog_migrate/0e8a97ae8f972c07b0f7a7ebaa140f56.png)
8.hook函数和to ref![](https://i-blog.csdnimg.cn/blog_migrate/e7eba97c43b77f8839fa87b1c1bb9940.png)
9.其他Composition API
1.shallowReactive /shallowRef![](https://i-blog.csdnimg.cn/blog_migrate/f496029da6b2bba62009e3c1bc5390ed.png)
2.readonly/ shallowReadonly![](https://i-blog.csdnimg.cn/blog_migrate/e3c20d6a5e973ac79aa4a1e34cbf94cd.png)
3.toRaw /markRaw![](https://i-blog.csdnimg.cn/blog_migrate/bdcf58ae562805a20b85fbe93de58c95.png)
10.provide和inject
图解
作用:
样例:![](https://i-blog.csdnimg.cn/blog_migrate/a9746207b27ee018e07589276b3d03dc.png)
11.响应式数据的判断![](https://i-blog.csdnimg.cn/blog_migrate/0e61e55dfe3bec3d0183c88f63b1e346.png)
12.Composition API的优势![](https://i-blog.csdnimg.cn/blog_migrate/1c35a39afd5d11c37a104d187d9cedab.png)
对比
13.Fragment和Teleport新组件![](https://i-blog.csdnimg.cn/blog_migrate/f4929d9363f2829353756dcf6eb094f5.png)
14.Suspense![](https://i-blog.csdnimg.cn/blog_migrate/6379b93273ee533232592437019982f8.png)
15.全局API的转移![](https://i-blog.csdnimg.cn/blog_migrate/8a415d74e2a82d052c48c6eac7779da5.png)
调整![](https://i-blog.csdnimg.cn/blog_migrate/9a8c6ce858f58d4e532447b9365ed09a.png)
心得:愿大家付出即有收获,高薪就业
首先这是根据看哔哩哔哩中的尚硅谷的禹神的课边记得笔记,老师讲的很好!值得大家去看,学下来给我得感觉是Vue2更加讲得是原理,写得时候接触得是底层逻辑,虽然在2,3中都有封装(组件化)得思想,但是3中组件化就更加明显了!有一种我先学了c,在学c++得感觉哈哈,可能比喻得不太恰当啦!,学完很爽