簡介

因為公司業務和發展需要，需要學習前端開發，今天就來接觸下當下最流行的前端框架Vue.js.

中文官方文件:https://cn.vuejs.org/

Vue-UI: 網站快速成型工具Element（https://element.eleme.cn/#/zh-CN），一套為開發者、設計師和產品經理準備的基於 Vue 2.0 的桌面端元件庫。（餓了麼出品）

官方介紹:Vue (讀音 /vjuː/，類似於view) 是一套用於構建使用者介面的漸進式框架。與其它大型框架不同的是，Vue 被設計為可以自底向上逐層應用。Vue 的核心庫只關注檢視層，不僅易於上手，還便於與第三方庫或既有專案整合。另一方面，當與現代化的工具鏈以及各種支援類庫結合使用時，Vue 也完全能夠為複雜的單頁應用提供驅動。

安裝

開發版本：https://cn.vuejs.org/js/vue.js，包含完整的警告和除錯模式

生產版本：https://cn.vuejs.org/js/vue.min.js，刪除了警告，33.46KB min+gzip

<script src="相對路徑/vue.js" type="text/javascript" charset="utf-8"></script>

第一個Vue程式

　　Vue.js 的核心是一個允許採用簡潔的模板語法來宣告式地將資料渲染進 DOM 的系統：

使用最常用的編譯器搭建一個空的前端專案，新建一個html頁面在頁面中引用Vue.js，在頁面中新增一個div新增id屬性

<div id="app">
    <h3>{{msg}}</h3>
</div>

指令碼程式碼實現:

<script type="text/javascript">
    var vm = new  Vue({
        el:'#app',
        data:{
            msg:'你好,Vue.js'
        }
    })
</script>

這樣就實現了一個最簡單的Vue案例，使用瀏覽器開啟就能看到你的小案例。

　　注意我們不再和 HTML 直接互動了。一個 Vue 應用會將其掛載到一個 DOM 元素上 (對於這個例子是#app