Vue.js 是什麼

時間 2019-11-07

原文原文鏈接

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

1、誕生背景

近幾年來，得益於手機設備的普及和性能的提高，移動端的web需求大量增長，產生了一種叫webapp的東西，也就是移動端的網頁應用。它們功能愈來愈複雜，交互也愈來愈酷炫，功能與效果愈來愈接近於原生的APP。爲了解決webapp在的體驗和開發上的不足，和先後端分離開發的模式的流行，也催生了一批MVVM框架的流行。Vue.js 做爲主流前端框的一種，由於起自身的上手相對容易，和完善的中文文檔和社區，使其在中國也佔有很多市場份額。html

2、前端框架模式瞭解

MVX框架模式：MVC+MVP+MVVM前端

1. MVC：Model(模型)+View(視圖)+controller(控制器)，主要是基於分層的目的，讓彼此的職責分開。
View 經過 Controller 來和 Model 聯繫，Controller 是 View 和 Model 的協調者，View 和 Model 不直接聯繫，基本聯繫都是單向的。用戶 User 經過控制器 Controller 來操做模板 Model 從而達到視圖View的變化。vue

        2. MVP：是從MVC模式演變而來的，都是經過 Controller/Presenter 負責邏輯的處理 + Model提供數據 + View負責顯示。
        在MVP中，Presenter徹底把View和Model進行了分離，主要的程序邏輯在Presenter裏實現。而且，Presenter 和 View 是沒有直接關聯的，是經過定義好的接口進行交互，從而使得在變動View的時候能夠保持Presenter不變。
        MVP模式的框架：Riot , js。java

3. MVVM：MVVM是把MVC裏的 Controller 和 MVP 裏的 Presenter 改爲了 ViewModel 。Model+View+ViewModel 。View的變化會自動更新到 ViewModel , ViewModel 的變化也會自動同步到 View 上顯示。
這種自動同步是由於 ViewModel 中的屬性實現了 Observer ，當屬性變動時都能觸發對應的操做。MVVM模式的框架有：AngularJS + Vue.js和Knockout+Ember.js後兩種知名度較低以及是早起的框架模式。webpack

MVVM 能夠拆分爲： Model+View+ViewModel 三部分：web

        View 是HTML文本的js模板
        ViewModel 是業務邏輯層（一切js可視業務邏輯，好比表單按鈕提交，自定義事件的註冊和處理邏輯都在 viewModel 裏面負責監控倆邊的數據）
        Model 數據層對數據的處理（好比增刪改查）vue-router

3、VueJs 是什麼

簡而言之，Vue.js是一個構建數據驅動的 web 界面的漸進式框架；簡而言之，Vue.js 簡單小巧的核心，漸進式技術棧，足以應對任何規模的應用。Vue.js 的目標是經過儘量簡單的 API 實現響應的數據綁定和組合的視圖組件。核心是一個響應的數據綁定系統。vuex

使用 Vue.js 可讓 Web 開發變得簡單，同時也顛覆了傳統前端開發模式。它提供了現代 Web 開發中常見的高級功能，好比，解耦視圖與數據、可服用的組件、前端路由、狀態管理、虛擬 DOM ( Virtual DOM )。但 Vue.js 也有自身的特性，以下：npm

1. 輕量級的框架

2. 雙向數據綁定

3. 指令

4. 插件化

4、Vue.js 的HelloWorld 的示例

先使用開發工具（好比，Sublime 、 WebStorm）建立一個 .html 文件，而後經過以下方式引入 Vue：

<!-- 開發環境版本，包含了有幫助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

或者：

<!-- 生產環境版本，優化了尺寸和速度 -->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>

Vue.js 的核心是一個容許採用簡潔的模板語法來聲明式地將數據渲染進 DOM 的系統：

<!-- HTML -->
<div id="app">
  {{ message }}
</div>

// JS
var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!'
  }
})

5、Vue.js 有什麼不一樣

若是你使用過 jQuery ，那你必定對操做 DOM、綁定事件等這些原生 JavaScript 能力很是熟悉，好比，在指定 DOM 中插入一個元素，並給它綁定一個點擊事件：

if (showButton) {
    var btn = $('<button>Click me</button>');
    btn.on('click', function() {
        console.log('Clicked!');
    });
    $('#idBtn').append(btn);
}

這段代碼操做的內容不復雜，不過，這樣讓咱們的視圖代碼和業務邏輯緊耦合在一塊兒，隨着功能不斷增長，直接操做 DOM 會使得代碼愈來愈難以維護。

而 Vue.js 經過 MVVM 的模式拆分爲視圖與數據兩部分，並將其分離。所以，你只須要關心你的數據便可， DOM 的事情 Vue 會幫你自動搞定，好比上述的示例用 Vue.js 能夠改寫爲：

<body>
    <div id="idBtn">
        <button v-if="showButton" v-on:click="handleClick">Click me</button>
    </div>
</body>
<script>
    new vue({
        el: '#idBtn',
        data: {
            showButton: ture 
        },
        methods: {
            handleClick: function () {
                console.log('Clicked!');
            }
        }   
    })
</script>

6、與傳統的前端開發模式異同

如今的前端技術與開發已再也不是十年前寫個 HTML 和 CSS 那樣簡單了，新的概念層出不窮，好比 ECMAScript 六、Node.js 、NPM 、前端工程化等。隨着這些技術的普及，一套可稱爲「萬金油「的技術棧被許多商業項目用於生產環境：

jQuery + RequireJS ( SeaJS ) + artTemplate ( doT ) + Gulp ( Grunt ) 。這套技術棧以 jQuery 爲核心，能兼容絕大部分瀏覽器；使用 RequireJS 或 SearJS 進行模塊化開發能夠解決代碼依賴混亂的問題，同時便於維護及團隊協做；使用輕量級的前端模板（如 doT）能夠將數據與 HTML 模板分離。最後，使用自動化構建工具（如 Gulp）能夠合併壓縮代碼，如寫 Less、Sass 以及如今流行的 ES 6，也能夠幫你進行預編譯。這樣一套看似完美的前端解決方案就構成了咱們所說的傳統前端開發模式，因爲它的簡單、高效、實用，至今仍有很多開發者使用。不過隨着項目的擴大和時間的推移，出現了更復雜的業務場景，好比 SPA ( 單頁面富應用 )、組件解耦等。這是就出現瞭如 Angular、React 以及 Vue.js 等。

Vue.js 的開發模式是十分多樣化的。Vue.js 是一個漸進式的 JavaScript 框架，根據項目需求，能夠選擇從不一樣的維度來使用它。對於一些業務邏輯複雜，對前端工程有要求的項目，可使用 Vue 單文件的形式配合 webpack 使用，必要時還會用到 vuex 來管理狀態，vue-router 來管理路由等等。

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。