Vue.js 源码学习之Flag篇

The Progressive JavaScript Framework ——vuejs.org

起因

第一次接触 Vue.js 是因为要做一个通讯录的外包项目,这个项目要有前台展示和中后台管理,从轮子做起肯定是不明智的选择,所以当时初步定下的是 Vue.js + Element UI 的技术栈。

项目过程很漫长,因为给的钱实在是可有可无,权当是学习了。

项目的接口是交给了同学。

整个项目采用的是钱后端分离的开发模式,我做我的页面,他做他的接口。

项目出了两个版本,做的时候,中间就强行的看文档、看视频教程,很大的感觉就是基础功不扎实,很多 Javascript , CSS , HTML 的知识都是在做东西的时候现学现用,整个过程满满的无力感。过程中一直没有醒悟想要去停下来好好学学基础知识,也因为工期的原因吧,两个版本中间算是进行了还算说得过去的基础知识学习。

总结下来,还是觉得

工欲善其事,必先利其器。

会什么

这就分成了项目前后了:

项目前

  • 不知道网页开发为何物

    • 折腾了自己的Hexo博客

      • 因创业需求做了一个微信小程序

项目后

  • 了解了 Element UI 组件库的肤浅用法
  • 了解了 Vue,js 的肤浅用法
  • 知道了一些基本的网页开发的知识点

要做什么

既然已经用过了 Vue.js 为什么不好好学一下成为一技之长呢?

然后就在 极客时间 看到了 Ant Design Vue 的作者的教学视频。

当时看介绍以为是介绍组件库的开发实战,后来才知道是基于组件库做中后端的开发实战……

虽然有些遗憾,但是不得不说,唐金州老师做过组件库(Ant Design官方收录),参加过Vue官方的第二届 VueConf 演讲,对文档中各种边角的了解度果然不一样,讲的课程内容也偏向底层,讲Vue生态的时候还会讲讲生态组件的原理、优缺点,还会引导学习者去学习 WebPack 、Babel 等工具的使用、配置(说来惭愧,我还没系统学过这两个在现在前端开发中相当重要的工具)。

所以,到这里我更加坚定了学习 Vue 的决心,虽然说是要学习 Vue 的源码,但是初期准备的话还是打算先将 Vue 的教程、API 及其生态圈的教程和 API 过一遍。然后通过文档中的特性探索源码,并在源码学习的过程中去学习 Javascript 的各种知识

以上,给自己立一个Flag??

开始学习啦!

因为还是考研党,所以穿插安排学习计划没有详细的学习计划,单纯学累了切换一下。

原文地址:https://www.cnblogs.com/younntone/p/Vuejs-learn-flag.html

时间: 2025-01-08 04:32:12

Vue.js 源码学习之Flag篇的相关文章

vue.js源码学习分享(一)

今天看了vue.js源码  发现非常不错,想一边看一遍写博客和大家分享 /** * Convert a value to a string that is actually rendered. *转换一个值为字符串 */ function _toString (val) { return val == null? '': typeof val === 'object'? JSON.stringify(val, null, 2): String(val)//如果该值是null则返回空字符串,如果该

Vue.js 源码分析(十七) 指令篇 v-if、v-else-if和v-else 指令详解

v-if 指令用于条件性地渲染一块内容.这块内容只会在指令的表达式返回 truthy 值的时候被渲染. v-else-if,顾名思义,充当 v-if 的“else-if 块”,可以连续使用: 也可以使用 v-else 指令来表示 v-if 的“else 块”: 挺好理解的,就和大多数的语言的if()....else if()...else逻辑语句是一样的,例如: <!DOCTYPE html> <html lang="en"> <head> <

Vue.js 源码学习笔记 -- 分析前准备 待续

主体 实例方法归类: data     数据方法 dom     dom方法 event    事件处理 lifecycl   生命周期函数 init 初始化vue页面 全局方法: derectives filters init过程 data : observer deps computed watch || watcher template: fragment [ directive repeat if component transition filter ] 重点: 把数据(Model)

vue.js源码学习分享(九)

/* */ var arrayKeys = Object.getOwnPropertyNames(arrayMethods);//获取arrayMethods的属性名称 /** * By default, when a reactive property is set, the new value is//默认情况下,当一个响应的属性被设置,新的值也转换成响应的.然而当经过向下支撑时,我们不想促使转换,因为这值也许是一个嵌套值在一个冻结的数据结构,转换它时将会失去最优化 * also conve

vue.js源码学习分享(五)

//配置项var config = { /** * Option merge strategies (used in core/util/options)//选项合并策略 */ optionMergeStrategies: Object.create(null), /** * Whether to suppress warnings.//是否抑制警告 */ silent: false, /** * Show production mode//生产模式 tip message on boot?//

vue.js源码学习分享(二)

/** * Check if value is primitive//检查该值是否是个原始值 */ function isPrimitive (value) { return typeof value === 'string' || typeof value === 'number' } /** * Create a cached version of a pure function.//创建一个纯粹的函数的缓存版本 */ function cached (fn) { var cache = O

MVVM大比拼之vue.js源码精析

VUE 源码分析 简介 Vue 是 MVVM 框架中的新贵,如果我没记错的话作者应该毕业不久,现在在google.vue 如作者自己所说,在api设计上受到了很多来自knockout.angularjs等大牌框架影响,但作者相信 vue 在性能.易用性方面是有优势.同时也自己做了和其它框架的性能对比,在这里.今天以版本 0.10.4 为准 入口 Vue 的入口也很直白: ? 1 var demo = new Vue({ el: '#demo', data: { message: 'Hello V

从Vue.js源码角度再看数据绑定

## 写在前面 因为对Vue.js很感兴趣,而且平时工作的技术栈也是Vue.js,这几个月花了些时间研究学习了一下Vue.js源码,并做了总结与输出.文章的原地址:[https://github.com/answershuto/learnVue](https://github.com/answershuto/learnVue).在学习过程中,为Vue加上了中文的注释[https://github.com/answershuto/learnVue/tree/master/vue-src](http

从Vue.js源码看异步更新DOM策略及nextTick

写在前面 因为对Vue.js很感兴趣,而且平时工作的技术栈也是Vue.js,这几个月花了些时间研究学习了一下Vue.js源码,并做了总结与输出.文章的原地址:https://github.com/answershuto/learnVue.在学习过程中,为Vue加上了中文的注释https://github.com/answershuto/learnVue/tree/master/vue-src,希望可以对其他想学习Vue源码的小伙伴有所帮助.可能会有理解存在偏差的地方,欢迎提issue指出,共同学