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 目前已经更新到了 Angular7 ( 也属于angular2.0 版本 )

Vue 1.0 MVVVM 2014/07

Vue 2.0 MVVM 2016/09

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

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

MV*的图示

MVC
| C改名为P
MVP
| P更像是媒人了（ 连接 M V 的桥梁）
MVVM
| VM 是 由 p改名得来的 VM 和 V 的关系更加的亲密
| “MVVM”:双向数据绑定，View的变动，映射在 ViewModel，反之一样

注意：
我们以上的这几个框架都是： 单向数据流（ 数据由 父级 流向 子级 ）

初始Vue.js

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

vue.js安装

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

文档学习

1. 先找教程/5分钟快速上手/quick start

2. 下载安装

3. 基础demo

4. 学习api和配置

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

   我们将js的语法写在{{}} 里面

   new Vue的到的实例，我们这边称之为 根实例

   很实例也是一个组件

   组件： 组件是一个具有 html css js等的一个聚合体

   数据改变，视图就会跟着改变，这种形式我们称之为： 数据驱动视图

   M -> VM

问题：

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源代码

   1. 是有匿名函数来进行封装的
      ( function () {})()

   第一个() 是匿名函数的定义

   第二个() 是匿名函数调用

   匿名函数好处：

   1. 安全性高
   2. 解决命名冲突

   ( function ( global, factory ) {
   // global 指的全局对象
   // factory 工厂函数
   })( this, function () {})

3. Vue是如何即可以使用Vue全局变量，也可以模块化安装

4. 它是利用原型来进行封装的

5. 原型的使用

   function Fn ( options ) {
   //this 实例中 fn的到的结果 实例 var fn = new Fn()
   }
   Fn.protype.name = "Gabriel Yan "
   Fn.protype.init = function () {
   console.log( ‘功能’ )
   }