初步认识Vue（一）

Vue的初步认识

前端发展历史

html

html [ 1990 ] ----> html5 [ 2008.1.12 ]

css

css 1.0 1996
css 2.0 1998
css 3.0 2001

EcmaScript

1997年诞生
2015 EcmaScript 2015
2016 EcmaScript 2016 dart语言 vs javascript

随着前端项目的逻辑越来越复杂和难以维护，那么前端这边引进了后端的架构思想（ MV* ）

M Model 数据层
V View 视图层
VM ViewModel 视图模型（业务逻辑 VM 是由 P 改名得来的）
P Presenter 提出者（ Controller 改名得来的）
C Controller 控制器 ( 业务逻辑 )

框架名	架构	诞生时间
Backbone.js	MVP	2010.10
Angular.js( 1.0 )	MVC	2010.10
Angular.ts( 2.0 )	MVC->MVVM	2016
Vue 1.0	MVVM	2014.07
Vue 2.0	MVVM	2016.09
React 1.0	MVVM	2012

React 2012 不太认可前端MVC这种架构思想，你可以将React单纯看做是MVC中V

github统计量（国际使用量）不代表大陆地区单位是： K

angular.js	angular.ts	vue	react
59.6	49.1	142	131

学习难度： Vue < React < Angular( 2.0 )

前端流行

移动 web && hybird app( 混合app )

app

native app ( 安卓 ios java ME)
webapp ( 应用在浏览器中的app )
Hybird app ( 混合app )
webapp 嵌入第三方原生应用库（可以访问原生设备（手机）的接口权限，比如：照相机）

MV*的图示

MVC
C改名为P
MVP
P更像是媒人了（连接 M V 的桥梁）
MVVM
VM 是由 p改名得来的 VM 和 V 的关系更加的亲密
“MVVM”:双向数据绑定，View的变动，映射在 ViewModel，反之一样
注意：
我们以上的这几个框架都是：单向数据流（数据由父级流向子级）

初始Vue.js

Vue.js是尤雨溪的个人项目
Vue.js是一个MVVM框架
Vue.js也是一个javascript的渐进式框架（越学越难）
前端还有一个比较知名的MVVM的个人项目：司徒正美 avonlon.js

vue.js安装

script标签引入（ cdn| 下载）
模块化安装 npm/cnpm/yarn

文档学习

先找教程/5分钟快速上手/quick start
下载安装
基础demo
学习api和配置

Vue和其他框架对比

Vue与React

React 和 Vue 有许多相似之处，它们都有：

使用 Virtual DOM
提供了响应式 (Reactive) 和组件化 (Composable) 的视图组件。
将注意力集中保持在核心库，而将其他功能如路由和全局状态管理交给相关的库。

关于Vue

使用script标签引入，那么会暴露一个 Vue的全局变量
Vue是一个构造器函数
我们要在模板中书写js语法，那么我们使用了一个叫做 mustache 的语法糖（双大括号）
我们将js的语法写在{{}} 里面

<div id="app">
<p> {{ msg }} </p>
</div>

new Vue的到的实例，我们这边称之为根实例
很实例也是一个组件
组件：组件是一个具有 html css js等的一个聚合体
数据改变，视图就会跟着改变，这种形式我们称之为：数据驱动视图
M -> VM

vue 数据驱动原理？数据更新原理？响应式原理

    (1) 数据通过object.defineProperty 进行get set 拦截，
    (2) 通知 watcher ，观察者模式， 订阅发布模式，触发 组件重新渲染，创建新的虚拟dom(js对象模拟dom 树)
     对比旧的虚拟dom ，找到不同的地方， 以最小的代价更新节点。

1.为什么script标签引入之后，就会有一个全局变量呢？


( function ( global ) {
console.log( global ) //window对象
global.Vue = function(){}
})( this )

2. 为什么模块化引入( npm/cnpm/yarn )也可以呢？


vue使用了 Module.exports / amd
( typeof exports ==='object' ) && ( typeof module !== 'undefined' ) ?
module.exports = factory() // Vue :
typeof define === 'function' && define.amd ? define(factory) :
( global = global || self, global.Vue = factory());

看Vue.js源代码

是有匿名函数来进行封装的
( function () {})()
第一个() 是匿名函数的定义
第二个() 是匿名函数调用
匿名函数好处：
安全性高
解决命名冲突
( function ( global, factory ) {
// global 指的全局对象
// factory 工厂函数
})( this, function () {})
Vue是如何即可以使用Vue全局变量，也可以模块化安装
它是利用原型来进行封装的
原型的使用
function Fn ( options ) {
//this 实例中 fn的到的结果实例 var fn = new Fn()
}
Fn.protype.name = "GFLY "
Fn.protype.init = function () {
console.log( ‘功能’ )
}