1. 前端框架的發展歷史
前端工程師（ 攻城獅 ）
12. html css + div
13. js 加入 jquery
14. MVC angular1.0 react
16. vue 微信小程序
- 什么是框架？什么是庫
- 框架是有一套自己的生態系統的
庫是沒有自己的生態系統的， 它就是一個工具
- 查看vue.js的源代碼
- 暫時學習使用的是 全局變量 形式
- jsx( javascript + xml )
- 總結vue.js第一次使用
- 使用script標簽引入Vue.js
- 實例化全局暴露的變量Vue構造器函數得到一個實例
- 配置Vue構造器函數中的配置項，一個配置項一個功能
- el – 將id為app的一部分DOM結構當做模板傳入配置項，然后掛載在頁面中
- data – 用來定義數據的
- 將數據展示在視圖中，通過使用 雙大括號語法 （ mustache 語法 ） 來展示數據
- 這時候我們發現在我們的模板（DOM結構）中可以使用 javascript語法，那么我們把這個類型稱之為 ‘jsx語法糖’
- 當我們將數據修改后發現，視圖就會更新，這種情況我們稱之為‘數據驅動（視圖）’
- 既然Vue是一個框架， 那么它使用了什么架構模式？
- 目前我們市面上基本上是以 MVC 這個架構思維 為主
- Vue使用 MVC 的衍生的模式，這個模式叫做 MVVM
- MVC
- Backbone.js
- MVP
- MVVM
- 名詞解釋：
- M Model 表示數據
- V View 表示視圖
- P/C/VM Presenter/Controller/ViewModel(視圖模型) 表示就是邏輯
- Vue使用的是MVVM
- M options中的 data 選項
- V el
- VM ViewModel 視圖模型 vm
- Vue中 VM改變，那么 V也會改變 ， 反之也是一樣的， 我們稱之為 ‘雙向數據綁定’
- 數據驅動/ 雙向數據綁定的原理 / 深入響應式的原理
當我們將數據寫在data選項時， Vue會通過observer將data對象中的所有的屬性都設置上getter和setter
當我們將數據綁定在視圖時，自動觸發getter，會將默認值，展示在視圖
當我們通過視圖修改數據是， 會自動觸發setter,將數據修改，同時視圖也會發生更新 - V -> VM
- VM -> V
這個是使用了es5中的一個特性，這個特性叫做 Object.definedPropty( obj, 對象的屬性， 配置項) - Object.definedPropty
- 配置項：
- 屬性是否可寫
- 屬性是否可以遍歷
- 存儲器
- get 函數 和 set 函數 也稱之為 getter && setter
數據 驅動只和存儲器有關系
- 匿名函數 + 嚴格模式
- 沒有名字，那么無法在外部通過函數名使用或是操作這個函數，那么相對而言比較穩定/安全
- 嚴格模式使用，讓這個匿名函數的語法更加的標准和嚴格
- 格式：
(function(形參1，形參2 …){})(實參1，實參2 …)
第一個括號用來定義匿名函數，第二個括號用來運行這個匿名函數 - use strict下面的三行代碼：
第一行：不導出object,也不導出undefined
第二行：如果我們想模塊化引用Vue,那么我們要通過amd將Vue函數定義為模塊
第三行：如果我們想將Vue作為全局變量使用，那么我們將Vue掛載在window身上
( function ( global,factory) { 'use strict'; typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() : typeof define === 'function' && define.amd ? define(factory) : (global = global || self, global.Vue = factory()); })( this,function(){ function Zyz (){ } //原型 Zyz.prototype.init = function(){ console.log('zyz') } return Zyz } )