![](https://img-blog.csdnimg.cn/20190918140145169.png?x-oss-process=image/resize,m_fixed,h_224,w_224)
Vue 功能模拟
在模拟 Vue 功能的过程中学习 Vue
皮蛋很白
没有什么难点是一觉醒来解决不了的
展开
-
History API(vue-router模拟前置知识)
History API模拟vue-router的history模式的实践时,需要用到 History API 的知识。historywindow.history对象是一个只读属性。提供了操作浏览器会话历史(浏览器地址栏中访问的页面,以及当前页面中通过框架加载的页面)的接口。history.gohistory.backhistory.forwardhistory.pushStatehistory.replaceState提供了会话历史的信息history.length 会话历史原创 2020-07-14 14:54:37 · 995 阅读 · 0 评论 -
Vue Router 模拟 - 嵌套路由
vue-router 模拟嵌套路由vue-router 源码src 目录结构componentslink.js router-link组件view.js router-view组件history 历史管理,包含3个模式hash.js - hash模式html5.js - history模式abstract.js - 服务端渲染时使用的抽象模式base.js - 上面3个模式的父类,提供一些公共的内容errors.js - abstract.js使用的方法util 存放一原创 2020-07-28 22:08:40 · 377 阅读 · 0 评论 -
Vue 简单模拟 - 响应式原理
模拟Vue响应式原理Vue响应式原理模拟的目的了解响应式原理从原理层面解决实际项目中的问题学习Vue响应式原理,为学习Vue源码做铺垫准备工作(前置知识):数据驱动响应式核心原理发布订阅模式和观察者模式数据驱动Vue中经常出现3个词:数据响应式、双向绑定、数据驱动。数据响应式数据响应式中的“数据”,指的是数据模型。基于Vue开发时,数据模型就是普通的 JavaScript 对象。数据响应式的核心是:当修改数据时,试图会自动进行更新,避免了繁琐的 DOM 操作,提高开发效率原创 2020-07-26 17:35:34 · 610 阅读 · 1 评论 -
Vue Router 模拟 -2.实现
VueRouter 简单模拟VueRouter 模拟实现-分析回顾核心代码// router/index.js// 注册插件Vue.use(VueRouter)// 创建路由对象const router = new VueRouter({ routes: [ { name: 'home', path: '/', component: homeComponent } ]})// main.js// 创建 Vue 实例,注册 router 对象new Vue({ ro原创 2020-08-12 20:18:28 · 172 阅读 · 0 评论 -
Vue Router 模拟 - 1.回顾及实现原理
Vue Router 回顾及实现原理vue-router 基础回顾使用Vue CLI创建一个vue应用。创建时选择Router插件,自动生成vue-router的基础代码结构。先选择使用hash模式。npm install -g @vue/clivue create vue-router-basic-usage注册路由插件,配置路由规则。创建router路由对象,并将规则传递进去。实例化vue的时候传递(注册)router路由对象。创建路由组件占位<router-view&g原创 2020-07-25 12:08:40 · 187 阅读 · 0 评论