![](https://img-blog.csdnimg.cn/20201014180756754.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
vuejs
XINGAO丨
这个作者很懒,什么都没留下…
展开
-
vue-router原理与源码分析
单页面应用(SPA)一次性从服务器下载,切换页面不用再发送页面请求,只发送对应页面的图片等请求Vue-router核心$router.go(-1) === history.go(-1) === 浏览器后退操作路由需要实现响应式1.vue-router 实现响应式与vuex一样都是借助vue的响应式原理...原创 2020-09-08 20:47:58 · 323 阅读 · 0 评论 -
vuex原理与源码分析
概念Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。核心思想它集中于MVC模式中的Model层,规定所有的数据操作必须通过 action – mutation – state change 的流程来进行,再结合Vue的数据视图双向绑定特性来实现页面的展示更新。Vuex 应用的核心就是 store(仓库)。“store”基本上就是一个容器,它包含着你的应用中大部分的状态 (state)。Vue原创 2020-09-01 17:11:26 · 149 阅读 · 0 评论 -
Vue源码分析(函数拦截思想)
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title></head><body> <script>原创 2020-08-28 14:36:06 · 184 阅读 · 0 评论 -
Vue源码分析(响应式化)
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title></head><body> <div id=原创 2020-08-28 16:34:01 · 99 阅读 · 0 评论 -
Vue源码分析(虚拟DOM与优化)
概念使用步骤1.编写 页面 模板 1.直接在HTML标签中写 2.使用template 3.使用单文件(<template>)2.创建Vue实例 1.在Vue 的构造函数中:data,methods,computer,watcher,props,...3.将Vue挂载到页面中(mount)数据驱动模型Vue执行流程 1.获得模板:模板中有‘坑’ 2.利用Vue构造函数提供的数据来‘填坑’,就可以得到页面显示的'标签'了 3.替原创 2020-08-26 16:00:09 · 711 阅读 · 0 评论 -
Vue源码分析(流程分析)
流程分析使用步骤1.编写 页面 模板 1.直接在HTML标签中写 2.使用template 3.使用单文件(<template>)2.创建Vue实例 1.在Vue 的构造函数中:data,methods,computer,watcher,props,...3.将Vue挂载到页面中(mount)数据驱动模型Vue执行流程 1.获得模板:模板中有‘坑’ 2.利用Vue构造函数提供的数据来‘填坑’,就可以得到页面显示的'标签'了 3原创 2020-08-25 14:22:00 · 245 阅读 · 0 评论 -
Vue的MVVM响应式原理(双向数据绑定)源码解析(附面试题)
MVVMMVVM是Model-View-ViewModel的简写,将视图 UI 和业务逻辑分开ViewMode:也就是mvc 的控制器,取出 Model 的数据同时帮忙处理 View 中由于需要展示内容而涉及的业务逻辑源码分析原创 2020-08-24 11:47:47 · 669 阅读 · 0 评论 -
vue生命周期和钩子函数分析
生命周期生命周期简介先来两张祖传图:原创 2020-08-18 15:01:56 · 191 阅读 · 0 评论 -
vue虚拟dom原理与实现
真实dom浏览器渲染引擎工作流程:创建DOM树——创建StyleRules——创建Render树——布局Layout——绘制Painting详细点就是:第一步,用HTML分析器,分析HTML元素,构建一颗DOM树(标记化和树构建)。第二步,用CSS分析器,分析CSS文件和元素上的inline样式,生成页面的样式表。第三步,将DOM树和样式表,关联起来,构建一颗Render树(这一过程又称为Attachment)。每个DOM节点都有attach方法,接受样式信息,返回一个render对象(又名re原创 2020-08-07 17:27:17 · 575 阅读 · 0 评论 -
vue双向数据绑定原理与实现
vue双向数据绑定原理与实现Object.defineProperty语法:Object.defineProperty(obj,prop,descriptor)obj:目标对象prop:需要定义的属性和方法的名称descriptor:目标属性所拥有的特性第三个参数对应为对象,可供定义的属性列表value:属性的值writable:如果为false,属性的值就不能被重写。get: 一旦目标属性被访问就会调回此方法,并将此方法的运算结果返回用户。set:一旦目标属性被赋值,就会调回此方法。原创 2020-08-05 10:26:03 · 162 阅读 · 0 评论 -
html、vue、小程序的区别
html、vue、小程序的区别网络模型改变1.以前b/s:服务端代码混在页面中2.现在c/s:前后端分离,通过js,api获取json数据,通过数据绑定渲染在页面上文件类型变化1.以前.html文件,开发运行都是html2.现在是.vue,开发是.vue,经过编译后运行变成js文件文件内代码变化1.以前<!DOCTYPE html> <html> <head> <meta charset="utf-8" />原创 2020-07-28 14:43:40 · 2031 阅读 · 0 评论 -
Vue学习记录(1)
VueVue.js(读音 /vjuː/, 类似于 view) 是一套构建用户界面的渐进式框架。Vue 只关注视图层, 采用自底向上增量开发的设计。Vue 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件目录结构主要解释src目录1.assets:资源文件夹,图片等2.components:组件文件夹,通过.vue文件写的组件3.router:路由文件夹,...原创 2020-07-19 20:34:32 · 158 阅读 · 0 评论