vue 快速入门 系列
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 快速入门 系列的更多相关文章
- vue 快速入门 系列 —— 虚拟 DOM
其他章节请看: vue 快速入门 系列 虚拟 DOM 什么是虚拟 dom dom 是文档对象模型,以节点树的形式来表现文档. 虚拟 dom 不是真正意义上的 dom.而是一个 javascript 对 ...
- vue 快速入门 系列 —— 初步认识 vue
其他章节请看: vue 快速入门 系列 初步认识 vue vue 是什么 Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式框架. 所谓渐进式,就是你可以一步一步.有阶段 ...
- vue 快速入门 系列 —— 侦测数据的变化 - [基本实现]
其他章节请看: vue 快速入门 系列 侦测数据的变化 - [基本实现] 在 初步认识 vue 这篇文章的 hello-world 示例中,我们通过修改数据(app.seen = false),页面中 ...
- vue 快速入门 系列 —— 侦测数据的变化 - [vue 源码分析]
其他章节请看: vue 快速入门 系列 侦测数据的变化 - [vue 源码分析] 本文将 vue 中与数据侦测相关的源码摘了出来,配合上文(侦测数据的变化 - [基本实现]) 一起来分析一下 vue ...
- vue 快速入门 系列 —— vue 的基础应用(上)
其他章节请看: vue 快速入门 系列 vue 的基础应用(上) Tip: vue 的基础应用分上下两篇,上篇是基础,下篇是应用. 在初步认识 vue一文中,我们已经写了一个 vue 的 hello- ...
- vue 快速入门 系列 —— vue 的基础应用(下)
其他章节请看: vue 快速入门 系列 vue 的基础应用(下) 上篇聚焦于基础知识的介绍:本篇聚焦于基础知识的应用. 递归组件 组件是可以在它们自己的模板中调用自身的.不过它们只能通过 name 选 ...
- vue 快速入门 系列 —— vue loader 上
其他章节请看: vue 快速入门 系列 vue loader 上 通过前面"webpack 系列"的学习,我们知道如何用 webpack 实现一个不成熟的脚手架,比如提供开发环境和 ...
- vue 快速入门 系列 —— vue loader 下
其他章节请看: vue 快速入门 系列 vue loader 下 CSS Modules CSS Modules 是一个流行的,用于模块化和组合 CSS 的系统.vue-loader 提供了与 CSS ...
- vue 快速入门 系列 —— vue loader 扩展
其他章节请看: vue 快速入门 系列 vue loader 扩展 在vue loader一文中,我们学会了从零搭建一个简单的,用于单文件组件开发的脚手架.本篇将在此基础上继续引入一些常用的库:vue ...
- vue 快速入门 系列 —— vue-cli 上
其他章节请看: vue 快速入门 系列 Vue CLI 4.x 上 在 vue loader 一文中我们已经学会从零搭建一个简单的,用于单文件组件开发的脚手架:本篇,我们将全面学习 vue-cli 这 ...
随机推荐
- CSS 定位 relative && absolute 问题?
1 1 1 CSS 定位 relative && absolute 问题? 谁能解释一下,为什么div使用 relative是设置right,bottom 后,看不到div 呀,哪里多 ...
- js with All In One
js with All In One 不推荐,要废弃 function f(x, o) { with (o) { console.log(x); } } function f(foo, values) ...
- Top 10 JavaScript errors
Top 10 JavaScript errors javascript errors https://rollbar.com/blog/tags/top-errors https://rollbar. ...
- server sent events
server sent events server push https://html5doctor.com/server-sent-events/ https://developer.mozilla ...
- SVG 场馆图
SVG 场馆图 https://www.infoq.cn/article/1BVg9VDSmqyHv3W3TeNH https://mp.weixin.qq.com/s/aNPAfJIHL14NFtL ...
- java放射机制的学习心得
概述 之前在了解Spring的类加载机制的时候,了解了java的反射机制.但是,我对反射理解一直不深.也一直有点疑惑:Spring为什么利用反射创建对象?直接new对象和依靠反射创建对象有什么区别?什 ...
- 17_MySQL分组查询的应用
本节涉及SQL语句: -- 分组查询 SELECT deptno,AVG(sal) FROM t_emp GROUP BY deptno; -- 四舍五入 SELECT deptno,ROUND(AV ...
- SQL EXPLAIN解析
本文转载自MySQL性能优化最佳实践 - 08 SQL EXPLAIN解析 什么是归并排序? 如果需要排序的数据超过了sort_buffer_size的大小,说明无法在内存中完成排序,就需要写到临时文 ...
- python常用内置方法index\extend\count\reverse\sort
定义列表:(有2个值相同) a = ['XiaoBao','aiaoHao','biaoLiao','ciaoQing','eiaoLi','QiBao','biaoLiao'] 列表的索引: fir ...
- if...else和switch...case
一.位运算 class Demo01 { public static void main(String[] args) { int a = 5; int b = 3; /* 0000 0101 |00 ...