認識Vue

vue是什麼

Vue (讀音 /vjuː/，類似於 view) 是一套用於構建用戶界面的漸進式JavaScript框架。

與其它大型框架不同的是，Vue 被設計爲可以自底向上逐層應用。Vue 的核心庫只關注視圖層，方便與第三方庫或既有項目整合。

Vue的目標是通過儘可能簡單的API實現響應式的數據綁定和組合的試圖組件。

Vue.js 自身不是一個全能框架——它只聚焦於視圖層。因此它非常容易學習，非常容易與其它庫或已有項目整合。另一方面，在與相關工具和支持庫一起使用時，Vue.js 也能完美地驅動複雜的單頁應用。

軟件名稱：Vue.js

作者：尤雨溪

版本：vue0.11、vue0.12、vue1.0、vue2.0

軟件語言：JavaScript

初始與穩定版本：0.11、2.6.16

MVVM

關於Vue的MVVM的概念介紹，可以分爲三個部分：

• M，Model 模型層，指的是數據部分，主要負責業務數據相關。
• V，View 視圖層，指的是視圖部分，負責視圖相關，也就是html+css層。
• VM，ViewModel V與M連接的橋樑，就是連接視圖與數據的中間件，相當於一個控制器，負責監聽M或者V的修改，實現數據的雙向綁定。

數據/視圖

數據（VM）

    const app = new Vue({
        el: '#main',
            data: {
                message: 1
        }
    })

視圖（V）

    <div id="main">
        <input v-model="message" />
        <br />
        <span>{{ message }}</span>
    </div>

組件化（Components）

官方定義：組件系統是Vue的另一個重要概念，因爲它是一種抽象，允許我們使用小型、獨立和通常可複用的組件構建大型應用，幾乎任何類型的應用界面都可以抽象爲一個組件樹。

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

所有的 Vue 組件同時也都是 Vue 的實例。

    Vue.component('todo-item', {
        template: '<li>這是個待辦項</li>'
    })
    
    <ol>
        <!-- 創建一個 todo-item 組件的實例 -->
        <todo-item></todo-item>
    </ol>

開發模式

• 聲明式渲染
• 組件系統
• 客戶端路由
• 大規模狀態管理
• 構建工具

瀏覽器兼容

Vue 不支持 IE8 及以下版本，因爲 Vue 使用了 IE8 無法模擬的 ECMAScript 5 特性。但它支持所有兼容 ECMAScript 5 的瀏覽器。

底層原理：ES5 -> Object.defineProperty()

更多學習參考：https://www.9xkd.com/site/sea...