初步認識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

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和配置

Vue和其他框架對比

Vue與React

React 和 Vue 有許多相似之處，它們都有：

• 使用 Virtual DOM
• 提供了響應式 (Reactive) 和組件化 (Composable) 的視圖組件。
• 將注意力集中保持在覈心庫，而將其他功能如路由和全局狀態管理交給相關的庫。

相關鏈接
https://cn.vuejs.org/v2/guide/comparison.html

關於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源代碼

1. 是有匿名函數來進行封裝的
   ( function () {})()
   第一個() 是匿名函數的定義
   第二個() 是匿名函數調用
   匿名函數好處：
2. 安全性高
3. 解決命名衝突
   ( function ( global, factory ) {
   // global 指的全局對象
   // factory 工廠函數
   })( this, function () {})
4. Vue是如何即可以使用Vue全局變量，也可以模塊化安裝
5. 它是利用原型來進行封裝的
6. 原型的使用
   function Fn ( options ) {
   //this 實例中 fn的到的結果 實例 var fn = new Fn()
   }
   Fn.protype.name = "GFLY "
   Fn.protype.init = function () {
   console.log( ‘功能’ )
   }