1 Vue.js概述
- Vue.js（讀音 /vju?/，類似于 view） 是一套用于構建用戶界面的漸進式框架，與其他重量級框架不同的是，它只關注視圖層（View層），采用自底向上增量開發的設計，Vue.js的目標是通過盡可能簡單的API實作相應的資料系結和組合的視圖組件，它不僅容易上手，還非常容易與其他庫或已有專案進行整合，另一方面，當與現代化的工具鏈以及各種支持類別庫結合使用時，Vue .js也完全能夠為復雜的單頁應用提供驅動，
1.1 什么是Vue.js
- Vue.js實際上是一個用于開發Web前端界面的庫，其本身具有回應式編程和組件化的特點，所謂回應式編程，即保持狀態和視圖的同步，回應式編程允許將相關模型的變化自動反映到視圖上，反之亦然，Vue.js采用的是MVVM（Model-View-ViewModel）的開發模式，與傳統的MVC開發模式不同，MVVM將MVC中的Controller改成了ViewModel，在這種模式下，View的變化會自動更新到ViewModel，而ViewModel的變化也會自動同步到View上進行顯示，
- ViewModel模式的示意圖如下圖所示：
- 與ReactJS一樣，Vue.js同樣擁有”一切都是組件“的理念，應用組件化的特點，可以將任意封裝好的代碼注冊成標簽，這樣就在很大程度上減少了重復開發，提高了開發效率和代碼復用性，如果配合Vue.js的周邊工具vue-loader，可以將一個組件的HTML、CSS、JavaScript代碼都寫在一個檔案中，這樣可以實作模塊化的開發，
1.2 Vue.js的特性
- Vue.js的主要特性如下：
- 輕量級
相比較AngularJS和ReactJS而言，Vue.js是一個更輕量級的前端庫，不但容量非常小，而且沒有其它的依賴， - 資料系結
Vue.js最主要的特點就是雙向的資料系結，在傳統的Web專案中，將資料在視圖層展示出來后，如果需要再次修改視圖，需要通過獲取DOM的方法進行修改，這樣才能維持資料和視圖的一致，而Vue.js是一個回應式的資料系結系統，在建立系結后，DOM將和Vue物件中的資料保持同步，這樣就無須手動獲取DOM的值再同步到 js中， - 應用指令
同AngularJS一樣，Vue.js也提供了指令這一概念，指令用于在運算式的值發生變化時，將某些行為應用到系結的DOM上，通過對應運算式值的變化就可以修改對應的DOM， - 插件化開發
與AngularJS類似，Vue,js也可以用來開發一個完整的單頁應用，在Vue.js的核心庫中并不包含路由、Ajax等功能，但是可以非常方便地加載對應插件來實作這樣的功能，例如，vue-router插件提供了路由管理的功能，vue-resource插件提供了資料請求的功能，
2 Vue.js的安裝
2.1 直接下載并使用 script 標簽引入
- Vue.js官網：https://cn.vuejs.org/v2/guide/
- 在Vue.js的官方網站中可以直接下載vue.js檔案并使用 script標簽引入，
1、下載Vue.js
Vue.js是一個開源的庫，可以從它的官方網站中下載，下面介紹具體的下載步驟：
（1）打開Vue.js的官方網站，進入到Vue.js的下載頁面，找到如下圖1.2所示的內容，
（2）根據開發者的實際情況選擇不同的版本進行下載，這里以下載開發版本為例，在”開發版本“按鈕上單擊滑鼠右鍵，如下圖1.3所示，
（3）在彈出的快捷選單中單擊“連接另存為”選項，彈出下載對話框，如下圖1.4所示，單擊對話框中的“保存”按鈕，將Vue.js檔案下載到本地計算機上，
此時下載的檔案為完整不壓縮的開發版本，如果在開發環境下，推薦使用該版本，因為該版本中包含所有常見錯誤相關的警告，如果在生產環境下，推薦使用壓縮后的生產版本，因為使用生產版本可以帶來比開發環境下更快的速度體驗， - 引入Vue.js
將Vue.js下載到本地計算機后，還需要在專案中參考Vue.js，即將下載后的vue.js檔案放置到專案的指定檔案夾中，通常檔案放置在JS檔案夾中，然后在需要應用vue.js檔案的頁面中使用下面的陳述句，將其引入到檔案中，
<script type="text/javascript" src="JS/vue.js"></script>
注意：引入Vue.js的 script 標簽,必須放在所有的自定義腳本檔案的script 之前，否則在自定義的腳本代碼中應用步到Vue.js，
2.2 使用CDN方法
- 在專案中使用Vue.js，還可以采用參考外部CDN檔案的方式，在專案中直接通過 script 標簽加載CDN檔案，通過CDN檔案參考Vue.js的代碼如下：
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.21/vue.js"></script>
注意：為了防止出現外部CDN檔案不可用的情況，還是建議用戶將Vue.js下載到本地計算機中，
2.3 使用NPM方法
- 在使用Vue.js構建大型應用時，推薦使用NPM方法進行安裝，執行命令如下：
npm install vue
注意：使用NPM方法安裝Vue.js需要在計算機中安裝node.js，
node;js官網：https://nodejs.org/en/，通過node.js官網下載之后，傻瓜式安裝即可，
3 前端框架開發工具
-
利用Vue.js進行前端框架開發的常用工具有如下幾個：WebStorm、IDEA、Vscode
-
前端框架開發常用的工具下載：
（1）WebStorm官網：https://www.jetbrains.com/webstorm/
（2）IDEA官網：https://www.jetbrains.com/idea/
（3）Vscode官網：https://vscode.en.softonic.com/ -
WebStorm和IDEA在官網上下載安裝之后，試用期為30天，試用期之后有三種方式進行激活，個人建議使用注冊碼激活，注冊碼免費激活微信群在網上便可以找到，不過注冊碼不太穩定，可以去淘寶買一個注冊碼，WebStorm和IDEA都可以使用該注冊碼，
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/275021.html
標籤：其他
上一篇：TypeError: Cannot read property ‘resetFields‘ of undefined解決方案
下一篇：c語言入門學習筆記（二）