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. set CSS style in js solutions All In One

    set CSS style in js solutions All In One css in js set each style property separately See the Pen se ...

  2. Web 网站安全测试 & 渗透测试

    Web 网站安全测试 & 渗透测试 Penetration Testing learning path 建一个测试环境来进行渗透测试 安装 Kali Linux -渗透测试操作系统 在虚拟机中 ...

  3. chrome device remote debug

    chrome device remote debug chrome://inspect/#devices chrome inspect devices Android chrome MIDI / MT ...

  4. Flutter 获取本地图片并剪切

    安装依赖 dependencies: ... image_picker: image_cropper android\app\src\main\AndroidManifest.xml 将UCropAc ...

  5. NGK算力市场,不止有动静态收益还有SPC空投!

    随着数字货币交易的火热,云算力挖矿也悄然崛起.越来越多的用户开启云算力挖矿,以获取更多的收益.相较于传统的矿机挖矿,用户通过购买算力进行云挖矿,节省了购买矿机以及维护的成本.另一方面,也降低了安全风险 ...

  6. 人物传记JULLIAN MURPHY:投资哪家强,区块链必然>股票+房地产

    今年上半年在金融股市出现巨大波动的时候,星盟的项目审核经理JULLIAN MURPHY发现了一个有趣的现象:各种熔断和暴跌的背后,特斯拉的股票却从去年年末开始至今已经暴涨了12倍,即便中途有所回落,但 ...

  7. 处理ios键盘弹出按钮点击click失效

    用ontouchstart绑定事件即可,然后用 document.activeElement.blur();让键盘收起 this.value = value.replace(/\s/g, " ...

  8. 不同浏览器CSS样式不兼容问题

    一句话,我想的太复杂了.向朋友请教才了解到,其实只要加个判断即可,首先获取到浏览器的基本信息,像什么版本啊,名称啊.默认语言啊等等,然后根据不同浏览器默认加载不同CSS样式即可,获取浏览器版本的连接如 ...

  9. SpringCloud之服务调用

    1.Ribbon 1.1负载均衡LB 全称Load Balance,将用户的请求平摊到多个服务器上,从而达到系统的HA.集中式LB:在服务消费者和服务提供者之间使用独立的LB设施,如硬件,由该设施负责 ...

  10. Kubernetes中分布式存储Rook-Ceph部署快速演练

    最近在项目中有涉及到Kubernetes的分布式存储部分的内容,也抽空多了解了一些.项目主要基于Rook-Ceph运行,考虑到Rook-Ceph部署也不那么简单,官方文档的步骤起点也不算低,因此,在整 ...