vue.js初識(一)

一 什麼是vue?

  Vue (讀音 /vjuː/，相似於 view) 是一套用於構建用戶界面的漸進式框架。與其它大型框架不一樣的是，Vue 被設計爲能夠自底向上逐層應用。Vue 的核心庫只關注視圖層，不只易於上手，還便於與第三方庫或既有項目整合。另外一方面，當與現代化的工具鏈以及各類支持類庫結合使用時，Vue 也徹底可以爲複雜的單頁應用提供驅動。---vue.js官網

  對於vue,相信就算不了解vue的話，也據說過vue的名字,做爲去年上升勢頭最猛烈的前端框架，能在短期內贏得大量的關注，我以爲了解學習一下是頗有必要的。

  

 

  官網：https://cn.vuejs.org/index.html   github:https://github.com/vuejs/vue

  官方的長篇大論我就再也不贅述了，說下我對vue的理解，首先他是一個js框架，也能夠看做是「輕量」的前端漸進式框架。

  我以爲vue最顯著、最重要，也是最特殊的一個地方，就是「輕量」，在愈來愈重視前端體驗以及組件化模塊化的思想下，像往常同樣比較複雜臃腫的前端應用逐漸變得輕量、簡潔、實用。前端經歷了這幾年的快速發展，各類框架工具類層出不窮，在摒棄了不少以往舊的開發模式之下，能夠迅速開發、下降學習成本、能夠迅速迭代成爲了vue如今接受程度比較高的緣由之一。

二 vue的特色

  2.1 雙向綁定

 固然，這個特性前端的主流框架都實現了，簡單說下雙向綁定，就是把model綁定到view，簡單的說咱們在頁面上改變了某個值，綁定的model會自動更新。

  無圖無真相：

  

  2.2 簡單

  這裏拋一個demo，angular和vue同時實現雙向數據綁定。

  angular

   

  先是聲明一個angular的model，而後經過綁定控制器，使用scope選擇賦值。

  vue

  

  這裏直接用el（element） ，更像是聲明渲染 ，將vue實例掛載到id爲app的div下，data屬性指向model，更改頁面上的note，data裏面的數據也會隨之變化。

  雖然代碼量看起來沒有太大的差異，可是我我的以爲vue的風格更簡單幹練，直觀易懂。

  2.3 快速

  

   雖然大部分指標都差很少，vue在部分指標上仍是略勝一籌。

   2.4 小巧

   提及小巧，那應該首先要關注下Vue的源碼大小，Vue的生產版本（即min版）源碼僅爲72.9kb，官網稱gzip壓縮後只有25.11kb，相比Angular的144kb縮小了一半，固然angular也是很強大的，內置了不少豐富的指令，功能強大。

   小巧的一種好處就是可讓用戶更自由的選擇相應的解決方案，在配合其餘庫方面它給了用戶更大的空間

   2.5 組件化

    組件 (Component) 是 Vue.js 最強大的功能之一。組件能夠擴展 HTML 元素，封裝可重用的代碼。在較高層面上，組件是自定義元素，Vue.js 的編譯器爲它添加特殊功能。在有些狀況下，組件也能夠表現爲用 is 特性進行了擴展的原生 HTML 元素。

  官方實例：

 

  

  2.6 生命週期

  比起vue的快速、小巧等特色，vue的生命週期是我以爲vue真正好用的最大特色，也是剛開始入門掌握vue的第一個真正意義上的知識點。

  先上圖

  

 

 看起來是否是不少的名詞？

 一個東西好很差用，咱們先須要問爲何出現？爲何須要出現？以及解決了什麼問題。

  咱們知道，js是一個很鬆散隨意的腳本語言，也是一門設計的時候有不少缺陷的語言，他的毛病一舉一大堆，好比做用域、隱世類型轉換、閉包方便帶來的隱患等等。

  儘管js自身也在進化，好比ES五、ES六、ES7的進化，Typescript的出現（TS給個人感受更像是用C的方式來寫js，畢竟最終仍是轉化爲了js），不少公司招人都把ES6的考察做爲一項職業素養。

  js高程上還提供了不少js的設計模式，好比工廠模式、構造函數模式、原型模式、組合寄生模式等等，本質上仍是由於js沒有必定的規範和書寫模式，致使不一樣人寫的js很難維護和閱讀，

 我甚至見過一個js函數寫了將近千行，一個js文件臃腫無比，只是單純的大體讀懂和能修改就須要花費至關長的時間。

  因此，在前端框架組件化還沒流行開來以前，能寫一手好的js，有紮實的js基本功的前端er纔是讓人欽佩的前端er。

  扯了這麼久，在迴歸到vue的生命週期上，在vue中，每一個.vue的文件均可以看做一個組件，每一個組件內均可以寫入js，那麼問題來了，怎樣優雅的在組件裏寫js？

  vue組件的生命週期解決了這個問題 ，他將一個組件分爲了八種狀態，從直觀上像一我的從誕生到毀滅的過程，而後再每一個時間節點上提供了必定的鉤子，方便對該組件的操做。

  對於這種鉤子，我我的更理解爲回調函數，在組件執行到這個狀態的時候讀取回調，執行相應的操做。

  在鉤子函數裏能夠作的就不少了，舉個例子

    beforecreate : 舉個栗子：能夠在這加個loading事件
 created ：在這結束loading，還作一些初始化，實現函數自執行 ，好比說一些圖表展現的頁面，須要一進頁面展現數據，能夠提早發ajax
 mounted ： 在這發起後端請求，拿回數據，配合路由鉤子作一些事情，增刪改查的一些操做等等均可以寫在這裏
 beforeDestory： 你確認刪除XX嗎？ destoryed ：當前組件已被刪除，清空相關內容

    Watch:用於監視數據的變化，執行異步操做等

    ...

  如下是一個完整的生命週期的執行過程：

   

  能夠看到，vue的生命週期將何時作什麼事大概的具體化了，js函數的書寫有了一個執行順序和執行時機，我以爲這個纔是vue的生命週期最值得稱讚的地方。

  無獨有偶，前段時間簡單看了下微信小程序的api，從html的標籤、到函數的執行方法、接口調用的返回結果、數據格式等等都有一個統一的標準。

  code:簡單寫了個click函數

  html:

 

 js:

  

  

 

 

 

  

三 起步

  3.1 vue-cli 

  在以前的項目中，因爲用到的插件工具類比較複雜多樣，基本都須要本身手動配置webpack,在這上邊一般都會佔用必定的工做量，而vue-cli腳手架的出現，使得能夠快速的建立vue項目。

  配置步驟以下（windows）：

  首先 須要安裝node.js，官網：http://nodejs.cn/，運行node -v && npm -v 查看是否安裝完成。

  

  而後直接在全局安裝vue-cli 便可 （npm比較慢，能夠切換百度源，或者淘寶源）

  安裝成功以後 直接 vue init webpack Vue-demo 就能夠快速生成項目。

  

  進入項目裏再 npm run dev 項目就能夠直接跑起來，所見即所得。

  

  

 四 漸進 

 vue 是一個漸進式的框架，這裏只是簡單的一個demo，沒法勝任工做中真的的複雜的需求。

 包括須要配置的路由router、vuex、jquery、element-ui、mock等等，因爲篇幅比較多，就放在下個月的wiki裏邊分享了