vue 快速入门(未完结,持续更新中...)

前言

为什么要学习 vue

现在主流的框架 vue、angular 和 react 都是声明式操作 DOM 的框架。所谓声明式,就是我们只需要描述状态与 DOM 之间的映射关系,就可以将状态渲染成视图。状态到视图的转换,框架会帮我们做,不需要我们手动去操作 DOM。我们只需要关注状态的维护,而不用再关心 DOM 的操作。

笔者想通过 vue 来探索一下这其中的奥秘。

vue 是什么

Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式框架

所谓渐进式,就是你可以一步一步、有阶段的使用 vue,不必一开始就使用所有的东西。

本系列的目的

本系列不是替代 vue 官网,vue 官网中有 vue 最好的学习教程。本系列只是从另一个角度来阐述:

  • vue 是什么
  • vue 的实现原理是什么?比如数据侦测是如何实现的
  • vue 中涉及的一些概念是什么?比如指令、过滤器
  • vue 的一整套全家桶又是什么,如何使用?

Tip: 本系列关于源码分析所涉及的代码都出自 vue.esm.js,版本为 v2.5.20。无关代码有一些删减。中文注释都是笔者添加。

目录

vue 快速入门 系列的更多相关文章

  1. vue 快速入门 系列 —— 虚拟 DOM

    其他章节请看: vue 快速入门 系列 虚拟 DOM 什么是虚拟 dom dom 是文档对象模型,以节点树的形式来表现文档. 虚拟 dom 不是真正意义上的 dom.而是一个 javascript 对 ...

  2. vue 快速入门 系列 —— 初步认识 vue

    其他章节请看: vue 快速入门 系列 初步认识 vue vue 是什么 Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式框架. 所谓渐进式,就是你可以一步一步.有阶段 ...

  3. vue 快速入门 系列 —— 侦测数据的变化 - [基本实现]

    其他章节请看: vue 快速入门 系列 侦测数据的变化 - [基本实现] 在 初步认识 vue 这篇文章的 hello-world 示例中,我们通过修改数据(app.seen = false),页面中 ...

  4. vue 快速入门 系列 —— 侦测数据的变化 - [vue 源码分析]

    其他章节请看: vue 快速入门 系列 侦测数据的变化 - [vue 源码分析] 本文将 vue 中与数据侦测相关的源码摘了出来,配合上文(侦测数据的变化 - [基本实现]) 一起来分析一下 vue ...

  5. vue 快速入门 系列 —— vue 的基础应用(上)

    其他章节请看: vue 快速入门 系列 vue 的基础应用(上) Tip: vue 的基础应用分上下两篇,上篇是基础,下篇是应用. 在初步认识 vue一文中,我们已经写了一个 vue 的 hello- ...

  6. vue 快速入门 系列 —— vue 的基础应用(下)

    其他章节请看: vue 快速入门 系列 vue 的基础应用(下) 上篇聚焦于基础知识的介绍:本篇聚焦于基础知识的应用. 递归组件 组件是可以在它们自己的模板中调用自身的.不过它们只能通过 name 选 ...

  7. vue 快速入门 系列 —— vue loader 上

    其他章节请看: vue 快速入门 系列 vue loader 上 通过前面"webpack 系列"的学习,我们知道如何用 webpack 实现一个不成熟的脚手架,比如提供开发环境和 ...

  8. vue 快速入门 系列 —— vue loader 下

    其他章节请看: vue 快速入门 系列 vue loader 下 CSS Modules CSS Modules 是一个流行的,用于模块化和组合 CSS 的系统.vue-loader 提供了与 CSS ...

  9. vue 快速入门 系列 —— vue loader 扩展

    其他章节请看: vue 快速入门 系列 vue loader 扩展 在vue loader一文中,我们学会了从零搭建一个简单的,用于单文件组件开发的脚手架.本篇将在此基础上继续引入一些常用的库:vue ...

  10. vue 快速入门 系列 —— vue-cli 上

    其他章节请看: vue 快速入门 系列 Vue CLI 4.x 上 在 vue loader 一文中我们已经学会从零搭建一个简单的,用于单文件组件开发的脚手架:本篇,我们将全面学习 vue-cli 这 ...

随机推荐

  1. 如何用 js 实现一个 sleep 函数

    如何用 js 实现一个 sleep 函数 原理 实现方式 总结 refs js sleep xgqfrms 2012-2020 www.cnblogs.com 发布文章使用:只允许注册用户才可以访问!

  2. React & Strict Mode

    React & Strict Mode https://reactjs.org/docs/strict-mode.html#detecting-unexpected-side-effects ...

  3. ts 使用 keyof typeof

    传递参数 const cats = { "Coding Cat": "https://media.giphy.com/media/JIX9t2j0ZTN9S/giphy. ...

  4. NGK全网算力总量增加,SPC前景广阔

    日前,根据NGK官方公布的数据显示,NGK全网算力总量达到550.96万,比早前预估的500万算力增加了50.96万,并且随着SPC空投的持续,还有不少生态建设者在持续涌入NGK算力市场.那么,是什么 ...

  5. 大胆预计SPC算力空投收益,月收益22.8%

    此前,NGK官方公告表示,NGK算力持有者获得SPC的数量是根据200万枚SPC除以全网算力总量决定的. 举个例子,假设全网算力总量为500万,那么每个算力持有者如果持有一个算力,则可获得200万÷5 ...

  6. NGK数字增益平台的算力是什么?

    今年的币价回暖带来了新一轮的"信仰充值",部分投资者对比特币的兴趣从购买向更源头的算力转移.随着比特币开采数量逐渐减少,全网算力一直在增加,算力难度也是越来越高.同时在算力行业中竞 ...

  7. django学习-6.模板templates

    1.前言 首先,我们要知道html是一门静态语言,里面没法传一些动态参数,也就是一个写死的html页面. 那么,如果我们想实现在一个html页面里传入不同的参数对应的参数值,这就可以用django框架 ...

  8. Python学习笔记_生成验证码

    import random def verification_code(): num = [str(x) for x in range(10)] # 列表生成器0-9 upper = [chr(x) ...

  9. 死磕以太坊源码分析之EVM固定长度数据类型表示

    死磕以太坊源码分析之EVM固定长度数据类型表示 配合以下代码进行阅读:https://github.com/blockchainGuide/ 写文不易,给个小关注,有什么问题可以指出,便于大家交流学习 ...

  10. JavaScriptBOM操作

    BOM(浏览器对象模型)主要用于管理浏览器窗口,它提供了大量独立的.可以与浏览器窗口进行互动的功能,这些功能与任何网页内容无关.浏览器窗口的window对象是BOM的顶层对象,其他对象都是该对象的子对 ...