vue核心思想详细介绍 慕课全栈商城(mongo+vue+node)

1 导学

vue和react对比

angular提供更多的是 一整套的解决方案,后者更多是一个开放的生态,可以允许用户最大限度的去定义我们的项目,更加灵活的开发
vue和react目前都使用了Virtual Dom
但是vue在速度,性能方面等都优于react

vue
模板和渲染函数的弹性选择
(通过构建一块模板,我们的函数都是分离的)
简单的语法和项目创建
(new一个vue添加几个data,变量,语法也是很简单)
更快的渲染速度和更小的体积

在这里插入图片描述
vue和react共同点:
1利用虚拟dom实现快速渲染
2轻量级
3响应式组件
4支持服务端渲染(ssR)
5易于集成路由工具,打包工具,以及状态管理工具
6优秀的支持和社区

组件之间的通信有限制,所以引入了状态管理
vue的父子通信,从父组件到子组件prop
从子组件到父组件需要用emit去触发

什么是Virtual Dom
传统开发像jQuery,都会去操作我们的dom,dom是文档对象模型,通过js去操作dom改变节点,文字等,都是非常耗资源的,
虚拟dom是在js内存里面去构建一个类似于dom的对象,比如我们去定义一个object对象,object对象去模拟我们的dom,去拼接数据,拼接完以后整体做一个解析,一个渲染,最后一次性插入我们的HTML的dom片段里面去,在内存里面操作是非常快的

2 前端框架

在这里插入图片描述
jquery 是dom操作函数库,,事件绑定,文本操作,class节点查找,map,filter等
在这里插入图片描述
在这里插入图片描述

vue本身并不是一个框架,他和jQuery一样,只是说方便我们的操作,他只是提供了我们一些事件操作,API dom操作,函数库的操作,vue.js也是一样
vue结合周边生态构成一个灵活的渐进式的框架
当我们去开发一个多页面的程序的时候,可能我们仅仅用到vue.js,以及axios插件,这可能已经可以满足我们大部分的需求了,但是当我们去做一个大型的spv,我们可能就需要做一些路由插件(vue-router,)啊,以及所谓的状态管理啊,以及我们所谓的打包构建
在这里插入图片描述
声明式渲染
当我们在页面上new一个实例,在data里面声明一个变量,在模板里面通过{{}}}去使用这个变量,就构成一个声明式渲染
组件系统:
当我们需要去使用组件系统的时候,可以去定义一个component组价
路由:
当我们使用到客户端路由的时候,我们就可以去引入vue-router插件
状态管理:
当我们的企业足够大,我们就会用到状态管理,
多个组件之间是不能通信的,但是我们页面与页面之间是需要共用我们用户的状态,这个时候vuex就起到作用,他把我们的一些用户信息去抽离出来变成一个公共的部分,让所有的组件都可以去调用
构建工具
grunt打包合并,js版本号的替换,压缩

vue里面代码现在不仅仅有es5的还有es6,es7, 一般用webpack去构建,他可以对我们的es6,es7语法进行解码,转换成es5,以及我们的.vue 文件需要用一些vue-loader插件去加载,sass,less的编译,很多一系列的插件,从而打包成我们生产的版本,形成了一个渐进式的框架。


2vue概括核心思想:

数据驱动
组件化

数据驱动
在传统jquery开发过程中,在js里面去绑定dom的一个click事件,我们在dom里面想要对一个dom去操作,我们就需要去获取dom的一个节点,通过text方法,或者addclass的方法去修改dom,也就是说我们js和dom是耦合的,关系是很密切的,要在js里面去大量操作我们的dom。但是从长远角度,这是非常耗性能的
我们在使用vue去做单页面或者多页面开发的时候,都会发现我们在js里面仅仅去调接口,查询数据,查完以后把这些数据保存到我们的data里面,就更多的去关注我们如何把这个数据去存到data里面就完事了,那么对于data里面的变量如何去和dom进行交互就是另外一回事了,实际上也就是说,我们要更多去关注我们的数据层面,我们不需要去考虑dom节点,怎么去替换文本,怎么去循环,去添加class等等,只需要去关注我们的数据层面,把数据拼装好以后,页面就构建出来了。

组件化:为什么会出现requirejs,业务量太大了以后,我们的js里面要去实现太大的业务,导致团队间读文件就很费劲,我们想做一个登录的功能,为什么不按照业务模块去划分,不按照js模块去划分呢,这样团队间协作效率就会更高。
组件化也就是说我们做页面的时候,肯定有一部分是共用的,这样我们把这一部分去抽离出来形成一个组件,这样我们就可以用在任何一个地方

vue的数据绑定同步功能
通过MVVM的数据绑定实现自动同步
在这里插入图片描述
view也就是我们所说的数据层,视图层,也就是HTMLdom
viewModel是我们的vue实例化对象,也就是我们去new一个vue的实例,这个实例就是viewModel
Model 就是原生的js对象也就是我们的模型层,当我们的用户发生了一个行为去修改了dom的元素之后,修改的行为会被viewmodel进行监听,viewmodel监听到以后会去修改我们的模型层的数据,最后通过viewmodel的拼装来去改变我们的视图,就构成自动同步功能,我们经常去修改一个值,然后在页面上就会同步。

vue组件化
在这里插入图片描述
我们看到一个网页首先去想,这个网页能不能拆成更小的块,这一块,能不能在某些地方去共用

vue组件树在这里插入图片描述
我们通过vue create 去构建一个SPA的时候,我们会发现main.js是我们的入口,入口之后会去加载我们的app.vue,app.vue就是这个组件的根,组件根就可以去加载我们的导航啊,footer啊分成三个小组件,三个小组件还可以继续细分成更小的组件,也就是我们的组件可以嵌套组件,大组件嵌套小组件,从而形成组件树

vue如何实现双向数据绑定的功能

Object.definePrperty函数起到至关重要的作用
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

4优点对比

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
登录购物车数量角标通过vuex实现
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
实战演示: http://imooc.51.purse.com/

路由的基本介绍

前端路由和后端路由实现方式不同

什么是前端路由
路由是根据不同的URL地址展示不同的内容或页面,
过去去做前端页面,我们可能会根据模板引擎去渲染刷新某一块内容,没有用到路由但是他也是一个单页面,针对当前页面,局部去渲染刷新某一块的内容

前端路由就是把不同路由对应不同的内容或页面的任务交给前端来做,之前是通过服务端根据URL的不同去加载不同的页面
我们做前端开发,更多去把前后端做一个分离,前端路由功能就更多需要前端自己去实现,过去传统去访问一个地址,后端会进行拦截,拦截以后会把对应的一张张页面发给前端,前端的页面实际上都是不存在的,只有一个首页,其他页面都是通过组件去构建而成的,所以是一个单页面的应用

什么时候使用前端路由?
在单页面应用,大部分页面结构不变,只改变部分内容的使用

前端路由有什么优点缺点?

优点:用户体验好,不需要每次都从服务器全部获取,快速展示给用户
缺点:
1不利于SEO,
2使用浏览器的前进后退都得重新发请求,没有合理利用缓存。
以前我们的页面都是真实存在的,我们店后退时候,实际上从浏览器内存去拿的这个页面,但是我们做单页面时候,他的每一个跳转都要重新发请求
3单页面无法记住之前的滚动位置,无论在前进,后退的时候

this.router.push({path:""})
在这里插入图片描述

vue模板语法

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
vuex:
什么是vuex?

vuex是一个专为vue.js应用程序开发的状态管理模式
为什么用?
在这里插入图片描述
之前 不停的需要emit传参
vuex核心概念?
在这里插入图片描述
视频6分钟后没看

猜你喜欢

转载自blog.csdn.net/fengtingYan/article/details/89479771