一、Vue基礎

Vue基礎1

1.0 前端開發流程規範

• 前端開發流程規範

1.1 前端架構發展曆史

• 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 視圖層
• C Controller 控制器 ( 業務邏輯 ) MVC
• P Presenter 提出者（ Controller 改名得來的 ） MVP
• VM ViewModel 視圖模型（ 業務邏輯 VM 是 由 P 改名得來的） MVVM

Backbone.js MVP 2010.10

Angular.js( 1.0 ) MVC 2010.10

Angular.ts ( 2.0 ) MVC -> MVVM 2016 目前已經更新到了 Angular9 ( 也屬于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 146 134

• 學習難度： Vue < React < Angular( 2.0 )

• 前端流行

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

app

1. native app ( 安卓 ios java ME)

2. webapp ( 應用在浏覽器中的app )

3. Hybird app ( 混合app )

2016年：

1. es6

2. vue2.0

3. angular2.0x

4. 微信小程式 / 微信小遊戲

總結表：

• 前端js架構到底在幹嘛! 為什麼要用？
  • js架構幫助開發者寫js邏輯代碼，在開發應用的時候js的功能劃分為如下幾點：
    1. 渲染資料

       

    2. 操作DOM

       

    3. 操作cookie等存儲機制api

       

  • 在前端開發中
    • 難題: 如何高效的操作dom、渲染資料是一個前端工程師需要考慮的問題，而且當資料量大，流向較亂的時候，如何正确使用資料，操作資料也是一個問題？？？
      • 解決:
        • 而js架構對上述的幾個問題都有自己趨于完美的解決方案，
        • 開發成本降低。高性能高效率。
        • 唯一的缺點就是需要使用一定的成本來學習。

1.2 初始Vue.js

• 官網位址： 英文官網 中文官網
• Vue.js架構項目介紹
  • 作者： 尤雨溪

    

  • Vue.js是尤雨溪的個人項目
  • Vue.js也是一個MVVM架構
  • Vue.js它是一個單項資料流的架構
  • Vue.js是一個Js漸進式架構
    • 漸進式： 越學越難
  • 學習Vue的必要性

    Vue近幾年來特别的受關注，三年前的時候angularJS霸占前端JS架構市場很長時間，接着react架構橫空出世，因為它有一個特性是虛拟DOM，從性能上碾軋angularJS，這個時候，vue1.0悄悄的問世了，它的優雅，輕便也吸引了一部分使用者，開始收到關注，16年中旬，VUE2.0問世，這個時候vue不管從性能上，還是從成本上都隐隐超過了react，火的一塌糊塗
    
    	學習vue是現在前端開發者必須的一個技能
               

1.3 MV*模式介紹

MV*模式圖示

1.4 Vue實作資料綁定的原理

1. 書寫第一個Vue案例
2. Vue深入響應式原理圖

   

   // Vue 底層原理 
   
     // 目的： 使用原生js來實作Vue深入響應式 
   
     var box = document.querySelector('.box')
   
     var button = document.querySelector('button')
   
     var data = {
       name: 'Jick'
     }
   
     // 觀察者對象
   
     var observer = {...data} 
   
     // es5提供的api方法,這個方法不相容ie8以及以下
     // Object.defineProperty(對象，對象的屬性，對象屬性的修飾符 )
   
   
   
     Object.defineProperty(  data,'name',{
       // get/set  統稱為: '存儲器'
       get () {
         return  observer.name // 初始化指派一個值給name屬性
       },
       set ( val ) {
         console.log( val )
         box.innerHTML = val
       }
     })
   
     button.onclick = function () {
       data.name = "Rose"
     }
   
     box.innerHTML = data.name 
              

   • 面試題/了解： 如何了解深入響應式原理？
     • Vue是通過資料劫持和事件的訂閱釋出來實作的，資料劫持指的是Vue通過observer觀察者對象對data選項中的資料進行getter和setter設定【 Object.defineProperty 】，事件的訂閱釋出指的是Vue通過事件來監聽，通知Vue進行視圖更新
       • 監聽： 選項/watch