1、Vue.js介紹
Vue (讀音 /vju?/，類似于 view) 是一套用于構建用戶界面的漸進式框架。
所謂漸進式（Progressive）,就是你可以一步一步、有階段性的來使用Vue.js,不必一開始就使用所有的東西。
1.1 Vue特點
- 輕量級的框架(壓縮后大小僅有17KB)
- 雙向數據綁定 (MVVM模式)
- 指令
- 插件化
- 虛擬DOM(Virtual DOM)
1.2 MVVM模式簡介
MVVM模式是由經典軟件架構MVC衍生來的。 MVVM框架主要包含3個部分:Model、View和 Viewmodel。
Model:指的是數據部分，對應到前端相當于javascript對象
View:指的是視圖部分，對應前端相當于dom
Viewmodel:就是連接視圖與數據的中間件通訊 數據(Model)和視圖(View)是不能直接通訊的，而是需要通過ViewModel來實現雙方的通訊。當數據變化的時候，viewModel能夠監聽到這種變化，并及時的通知view做出修改。同樣的，當頁面有事件觸發時，viewMOdel也能夠監聽到事件，并通知model進行響應。Viewmodel就相當于一個觀察者，監控著雙方的動作，并及時通知對方進行相應的操作。
1.3 Vue.js有什么不同
傳統前端開發模式，是針對DOM進行操作,以jQuery為例，給指定DOM中插入一個元素，并給他綁定一個點擊事件：
if(showBtn){
var btn = $('<button>Click me</button>');
btn.on('click',function(){
console.log('Clicked!');
});
$('#app').append(btn);
}
這段代碼不難理解，操作內容也不復雜，不過這樣讓我們的視圖代碼和業務邏輯緊耦合在一起，隨著功能不斷增加，直接操作DOM會使得代碼越來越難以維護。
而Vue.js通過MVVM的模式拆分視圖與數據兩部分，并將其分離。因此，你只需要關心你的數據即可，DOM的事情Vue會幫你自動搞定，比如上面的實例我們可以改為：
<body>
<div id="app">
<button v-if="showBtn" v-on:click="handleClick">Click me</button>
</div>
</body>
<script>
new Vue({
el: '#app',
data:{
showBtn: true
},
methods:{
handleClick: function(){
console.log('Clicked!');
}
}
})
</script>
2、如何使用Vue.js
Vue Devtools
在使用 Vue 時，我們推薦在你的瀏覽器上安裝 Vue Devtools。它允許你在一個更友好的界面中審查和調試 Vue 應用。
2.1 通過 script 加載 CDN文件
<!-- 自動是被最新穩定版本的vue.js-->
<script src="https://unpkg.com/vue/dist/vue.min.js></script>
<!-- 指定某個具體版本的vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
2.2 直接用 <script> 引入
直接下載并用 <script> 標簽引入，Vue 會被注冊為一個全局變量。
在開發環境下不要使用壓縮版本，不然你就失去了所有常見錯誤相關的警告!
2.3 使用 NPM 安裝
在用 Vue 構建大型應用時推薦使用 NPM 安裝。NPM 能很好地和諸如 webpack 或 Browserify模塊打包器配合使用。同時Vue也提供配套工具來開發單文件組件。
# 最新穩定版，須確保已經安裝node
$ npm install vue
2.4 命令行工具 (CLI)
Vue 提供了一個官方的 CLI，為單頁面應用快速搭建 (SPA) 繁雜的腳手架。它為現代前端工作流提供了batteries-included 的構建設置。只需要幾分鐘的時間就可以運行起來并帶有熱重載、保存時 lint校驗，以及生產環境可用的構建版本。更多詳情可查閱 Vue CLI 的文檔
下面簡單介紹使用Vue CLI 快速創建項目
- 全局安裝 vue-cli
npm install --global vue-cli- 選擇文件夾創建項目
vue init webpack my-project（my-project：項目名稱）
出現一下文字說明已經創建成功安裝步驟
成功顯示- 進入創建的項目下
cd my-project- 安裝項目依賴
npm install- 安裝其他插件
npm install vuex element-ui axios mockjs --save(假設需要安裝 vuex element-ui axios mockjs等，可自定義)
此時的目錄結構
目錄結構- 運行項目
npm run dev
此時瀏覽器輸入http://localhost:8080 顯示以下頁面說明項目創建成功。也可以修改config文件下的index.js 文件,修改后每次運行會自動打開瀏覽器。my-project
index.js
參考資料-Vue.js
