![](https://img-blog.csdnimg.cn/20210603113252799.png?x-oss-process=image/resize,m_fixed,h_224,w_224)
Vue
文章平均质量分 95
vue
超悠閒
博客文章倉庫:https://github.com/superfreeeee/Blog
博客代码仓库:https://github.com/superfreeeee/Blog-code
展开
-
Vue: 深入理解 v-model 工作原理
Vue: 深入理解 v-model 工作原理文章目录Vue: 深入理解 v-model 工作原理动态绑定 v-model基础使用v-model 绑定自定义组件(推荐)不使用 v-model 捕获组件 value 值使用 input 事件绑定 valuevalue 与 input 事件联动小结其他资源参考连接完整代码示例动态绑定 v-model用过 vue 的人应该都知道 v-model 的用法,官方文档也告诉我们应该用 v-model 来绑定 input、textarea 等标签的值。然而当我们想要原创 2022-01-01 00:25:05 · 1603 阅读 · 0 评论 -
Vue 踩坑笔记: 引入 ElementUI 时打包失败修复记录(ERROR in ./node_modules/element-ui/lib/theme-chalk/index.css)
Vue 踩坑笔记: 引入 ElementUI 时打包失败修复记录(ERROR in ./node_modules/element-ui/lib/theme-chalk/index.css Module build failed: ModuleBuildError: Module build failed: TypeError: this.getOptions is not a function)文章目录Vue 踩坑笔记: 引入 ElementUI 时打包失败修复记录(ERROR in ./node_mod原创 2021-06-16 02:59:30 · 12027 阅读 · 0 评论 -
Vue2 源码解析: MVVM 双向绑定3 - 模版编译实现
Vue2 源码解析: MVVM 双向绑定3 - 模版编译实现文章目录Vue2 源码解析: MVVM 双向绑定3 - 模版编译实现前言(长文慎入!)正文回顾:MVVM 全流程1. $mount 组件挂载1.1 template 获取模版1.1.1 idToTemplate 根据 id 选择器获取模版1.1.2 getOuterHTML 根据 DOM 元素获取模版1.2 compileToFunctions 创建虚拟 VNode 节点生成函数 render1.3 mountComponent 更新组件 / 首原创 2021-05-26 02:44:23 · 257 阅读 · 2 评论 -
Vue2 源码解析: MVVM 双向绑定2 - 虚拟 DOM & diff 算法原理深度解析
Vue2 源码解析: MVVM 双向绑定2 - 虚拟 DOM & diff 算法原理深度解析(长文慎入!)文章目录Vue2 源码解析: MVVM 双向绑定2 - 虚拟 DOM & diff 算法原理深度解析(长文慎入!)前言回顾:MVVM 实现细化Render Proxy 渲染代理Render Proxy 实现方案:虚拟 DOM虚拟 DOM 的好处 & 误区:平台无关正文1. VNode 虚拟节点1.1 VNodeData1.2 VNodeComponentOptions2. di原创 2021-05-19 18:27:40 · 486 阅读 · 6 评论 -
Vue2 源码解析: MVVM 双向绑定1 - 响应式原理(数据观测/响应)
Vue2 源码解析: MVVM 双向绑定1 - 响应式原理(数据观测/响应)文章目录Vue2 源码解析: MVVM 双向绑定1 - 响应式原理(数据观测/响应)前言深入 MVVM细化 ViewModelMVVM 实现三阶段正文回顾:观察者模式1. 数据观测1.1 被观测数据代理 Observer1.1.1 观测对象 Object1.1.2 观测数组 Array1.1.3 代理数组方法 arrayMethods1.2 数据观测 observe1.3 转化为响应式对象 defineReactive1.3.1原创 2021-05-14 02:58:48 · 624 阅读 · 8 评论 -
Vue 源码解析: 生命周期钩子全面剖析
Vue 源码解析: 生命周期钩子全面剖析文章目录Vue 源码解析: 生命周期钩子全面剖析前言:长文慎入!正文生命周期钩子总览官方例图生命周期钩子含义 & 各属性状态0. 源码包结构1. 初始化阶段(Initialize)1.1 Vue 实例定义核心入口1.2 XxxMixin(Vue) 原型方法混入1.2.1 initMixin1.2.2 stateMixin1.2.3 eventsMixin1.2.4 lifecycleMixin1.2.5 renderMixin1.3 创建 Vue 实例1.3原创 2021-05-10 02:02:51 · 688 阅读 · 6 评论 -
Vue 源码实现: Reactive Data 响应式对象 Vue3 实现(使用 Proxy 实现)
Vue 源码实现: Reactive Data 响应式对象 Vue3 实现(使用 Proxy 实现)文章目录Vue 源码实现: Reactive Data 响应式对象 Vue3 实现(使用 Proxy 实现)简介参考完整示例代码正文响应式数据对象 Reactive Data创建响应式数据对象(reactive 方法)创建响应式回调函数(effect 方法)代码实现实现用例项目结构交互逻辑重要对象对象间的重要联系详细代码实现测试结果结语简介Vue3 最近愈来越火,从 Vue2 到 Vue3 最大的改革便原创 2020-12-30 01:07:10 · 690 阅读 · 0 评论 -
Vue 源码实现: Data Binding 双向数据绑定(使用 Object.defineProperty 实现)
Vue 源码实现: Data Binding 双向数据绑定(使用 Object.defineProperty 实现)文章目录Vue 源码实现: Data Binding 双向数据绑定(使用 Object.defineProperty 实现)简介参考正文实现目标实现架构具体实现项目结构 & 静态内容初始化核心代码对象间交互顺序 & 图input 输入修改 `$data` 属性结语简介本篇要来干大事了(bushi,大名鼎鼎的 Vue 作为一个最潮的 MVVM 框架,实现了双向数据绑定和虚拟原创 2020-12-13 15:35:26 · 2538 阅读 · 6 评论 -
Vue:Vuex 狀態管理
Vue:Vuex 狀態管理文章目錄Vue:Vuex 狀態管理簡介參考正文Install 安裝CDNNPMArchitecture 總體架構StatemapStateGetters透過方法訪問mapGettersMutations常量方法名注意事項mapMutationsActions調用異步 API返回值處理async/await組合 Action 函數mapActionsModule局部狀態Getters & MutationsActions命名空間帶模塊 Action 註冊到全局帶命名空間的綁原创 2020-06-14 16:00:32 · 237 阅读 · 0 评论 -
Vue項目啟動
Vue 項目啟動Vue 項目啟動簡介參考正文CDN(不推薦)SampleVue-cli 官方腳手架(推薦)Installation 安裝Terminal 透過命令行創建Vue UI 透過圖形化介面創建結語簡介有關 Vue 的基本介紹都可以在官網看到,由尤雨奚大大開發出來的響應式前端框架,除了官方推薦的輔助庫 vuex, vue-router...原创 2020-05-01 16:30:24 · 222 阅读 · 0 评论