vue----介紹

手冊：https://www.runoob.com/vue2/vue-start.html

 

Vue 漸進式 JavaScript 框架

概述

Vue (讀音 /vjuː/，相似於 view) 是一套用於構建用戶界面的漸進式框架，發佈於 2014 年 2 月。與其它大型框架不一樣的是，Vue 被設計爲能夠自底向上逐層應用。Vue 的核心庫只關注視圖層，不只易於上手，還便於與第三方庫（如：vue-router(頁面跳轉)，vue-resource，vuex(狀態管理框架)）或既有項目整合。

• Axios：前端通訊框架；由於 Vue 的邊界很明確，就是爲了處理 DOM，因此並不具有通訊能力，此時就須要額外使用一個通訊框架與服務器交互；固然也能夠直接選擇使用 jQuery 提供的 AJAX 通訊功能；

什麼是漸進式？

在我看來，漸進式表明的含義是：主張最少。
每一個框架都不可避免會有本身的一些特色，從而會對使用者有必定的要求，這些要求就是主張，主張有強有弱，它的強勢程度會影響在業務開發中的使用方式。
好比說，Angular，它兩個版本都是強主張的，若是你用它，必須接受如下東西：
- 必須使用它的模塊機制- 必須使用它的依賴注入- 必須使用它的特殊形式定義組件（這一點每一個視圖框架都有，難以免）

因此Angular是帶有比較強的排它性的，若是你的應用不是從頭開始，而是要不斷考慮是否跟其餘東西集成，這些主張會帶來一些困擾。

好比React，它也有必定程度的主張，它的主張主要是函數式編程的理念，好比說，你須要知道什麼是反作用，什麼是純函數，如何隔離反作用。它的侵入性看似沒有Angular那麼強，主要由於它是軟性侵入。

Vue可能有些方面是不如React，不如Angular，但它是漸進的，沒有強主張，你能夠在原有大系統的上面，把一兩個組件改用它實現，當jQuery用；也能夠整個用它全家桶開發，當Angular用；還能夠用它的視圖，搭配你本身設計的整個下層用。你能夠在底層數據邏輯的地方用OO和設計模式的那套理念，也能夠函數式，均可以，它只是個輕量視圖而已，只作了本身該作的事，沒有作不應作的事，僅此而已。
漸進式的含義，個人理解是：沒有多作職責以外的事。

　　漸進式框架：Progressive，說明vue.js的輕量，是指一個前端項目可使用vue.js一兩個特性也能夠整個項目都用yue.js。
　　自底向上逐層應用：做爲漸進式框架要實現的目標就是方便項目增星開發。

Vue.js與ECMAScript

Vue 不支持 IE8 及如下版本，由於 Vue 使用了 IE8 沒法模擬的 ECMAScript 5 特性。

什麼是ECMAScript?

ECMAScript（簡稱ES）是一種規範，咱們日常所說的Js/Javascript是ECMAScript的實現，早期主要應用的ES3，當前主流瀏覽器都支持ES五、ES6，ES8已於2017年發佈。

 

 

什麼是 Vue

MVVM 模式的實現者

• Model：模型層，在這裏表示 JavaScript 對象
• View：視圖層，在這裏表示 DOM（HTML 操做的元素）
• ViewModel：鏈接視圖和數據的中間件，Vue.js 就是 MVVM 中的 ViewModel 層的實現者

　　對於傳統的js，咱們只有MV，js操做dom（view）直接賦值模型屬性（model），咱們使用的ajax能夠經過後臺獲取數據，而後就須要操做dom，進行數據的賦值，此時model和view就出現了耦合

　　而vue，添加了一個vm，將view和model進行隔離，vue.js充當了這個vm，vue.js使用本身的語法將model渲染到視圖中；

 

在 MVVM 架構中，是不容許 數據 和 視圖 直接通訊的，只能經過 ViewModel 來通訊，而 ViewModel 就是定義了一個 Observer 觀察者

• ViewModel 可以觀察到數據的變化，並對視圖對應的內容進行更新
• ViewModel 可以監聽到視圖的變化，並可以通知數據發生改變

至此，咱們就明白了，Vue.js 就是一個 MVVM 的實現者，他的核心就是實現了 DOM 監聽 與 數據綁定

Vue.js 的兩大核心要素

數據驅動

 

 

當你把一個普通的 JavaScript 對象傳給 Vue 實例的 data 選項，Vue 將遍歷此對象全部的屬性，並使用 Object.defineProperty 把這些屬性所有轉爲 getter/setter。Object.defineProperty 是 ES5 中一個沒法 shim 的特性，這也就是爲何 Vue 不支持 IE8 以及更低版本瀏覽器。

這些 getter/setter 對用戶來講是不可見的，可是在內部它們讓 Vue 追蹤依賴，在屬性被訪問和修改時通知變化。這裏須要注意的問題是瀏覽器控制檯在打印數據對象時 getter/setter 的格式化並不一樣，因此你可能須要安裝 vue-devtools 來獲取更加友好的檢查接口。

每一個組件實例都有相應的 watcher 實例對象，它會在組件渲染的過程當中把屬性記錄爲依賴，以後當依賴項的 setter 被調用時，會通知 watcher 從新計算，從而導致它關聯的組件得以更新。

組件化

• 頁面上每一個獨立的可交互的區域視爲一個組件
• 每一個組件對應一個工程目錄，組件所需的各類資源在這個目錄下就近維護
• 頁面不過是組件的容器，組件能夠嵌套自由組合（複用）造成完整的頁面

VUE的優勢

結合了react 的優勢，虛擬 DOM， 用於減小真實 DOM 操做，在內存中模擬 DOM 操做，有效的提高了前端渲染效率。

結合了Angular優勢。模塊化開發。

 

VUE.js使用

• 1）在html頁面使用script引入vue.js的庫便可使用。
• 2）使用Npm管理依賴，使用webpack打包工具對vue.js應用打包。大型應用推薦此方案。
• 3）Vue-CLI腳手架，使用vue.js官方提供的CLI腳本架很方便去建立vue.js工程雛形。 

vue.js有哪些功能

• 1）聲明式渲染

　　Vue.js 的核心是一個容許採用簡潔的模板語法來聲明式地將數據渲染進 DOM 的系統。好比：使用vue.js的插值表達式放在Dom的任意地方， 差值表達式的值將被渲染在Dom中。

• 2）條件與循環

　　dom中可使用vue.js提供的v-if、v-for等標籤，方便對數據進行判斷、循環。

• 3）雙向數據綁定

　　<input v-model:value="name">

　　Vue 提供v-model 指令，它能夠輕鬆實現Dom元素和數據對象之間雙向綁定，即修改Dom元素中的值自動修改綁

定的數據對象，修改數據對象的值自動修改Dom元素中的值。

• 4）處理用戶輸入

　　爲了讓用戶和你的應用進行交互，咱們能夠用 v-on 指令添加一個事件監聽器，經過它調用在 Vue 實例中定義的

方法

• 5）組件化應用構建

　　vue.js能夠定義一個一個的組件，在vue頁面中引用組件，這個功能很是適合構建大型應用。