Vue漸進式JavaScript 框架

1. Vue簡介

1.1  初步瞭解Vue.js框架

Vue.js (讀音 /vjuː/，相似於 view) 是一種輕量級前端MVVM框架。同時吸取了React（組件化）和Angular（靈活指令頁面操做）的優勢。是一套構建用戶界面的漸進式框架，Vue 採用自底向上增量開發的設計。

【兼容性：Vue.js 不支持 IE8 及其如下版本，由於 Vue.js 使用了 IE8 不能模擬的 ECMAScript 5 特性。Vue.js 支持全部兼容 ECMAScript 5 的瀏覽器。】

表1.1  Vue.js與其餘框架對比

常見框架	React	AngularJS	Ember	Knockout	Polymer	Riot
相同點	² 用Virtual DOM ² 提供響應式 (Reactive) 和組件化 (Composable) 的視圖組件。 ² 將注意力集中保持在覈心庫，而將其餘功能如路由和全局狀態管理交給相關的庫。	Vue 的一些語法和 AngularJS 的很類似 (例如 v-if vs ng-if)。由於 AngularJS 是 Vue 早期開發的靈感來源。		Knockout 是 MVVM 領域內的先驅，而且追蹤依賴。
不一樣點	² 運行時性能 ² HTML & CSS ² 規模 ² 原生渲染 ² MobX	² 複雜性 ² 靈活性和模塊化 ² 數據綁定 ² 指令與組件 ² 運行時性能 ² TypeScript ² 體積 ² 學習曲線

注：https://cn.vuejs.org/v2/guide/comparison.html

1.2  環境搭建和腳手架工具的使用

1.2.1 環境搭建

Vue.js 提供一個官方命令行工具，可用於快速搭建大型單頁應用。該工具提供開箱即用的構建工具配置，帶來現代化的前端開發流程。只需幾分鐘便可建立並啓動一個帶熱重載、保存時靜態檢查以及可用於生產環境的構建配置的項目。

【對於Window系統，應該先安裝node和git】

1.安裝node.js(http://www.runoob.com/nodejs/nodejs-install-setup.html)

2.基於node.js,利用淘寶npm鏡像安裝相關依賴

在cmd裏直接輸入：npm install -g cnpm –registry=https://registry.npm.taobao.org，回車，等待安裝...(windows使用管理員身份進行安裝)

1. 安裝全局vue-cli腳手架,用於幫助搭建所需的模板框架在cmd裏

1)輸入：cnpm install -g vue-cli，回車，等待安裝...

2).輸入：vue，回車，若出現vue信息說明表示成功

 

1. 建立項目：

在cmd裏項目路徑下輸入：vue init webpack vue_test(項目文件夾名，不要有大寫)，回車，等待一小會兒，依次出現‘git’下的項，可按下圖操做

1. 安裝依賴：【下載項目運行所需文件——依賴node_modules】

在cmd裏  

1).輸入：cd  vue_test（項目名），回車，進入到具體項目文件夾

    2).輸入：cnpm  install，回車，等待一小會兒

6.測試環境是否搭建成功

方法1：在cmd裏輸入：npm run dev

方法2：在瀏覽裏輸入：localhost:8080    (默認端口爲8080)

注：NPM（Node Package Manager）在這裏指的是一個NodeJS包管理和分發工具，已經成爲了非官方的發佈Node模塊（包）的標準。Nodejs自身提供了基本的模塊，可是開發實際應用過程當中僅僅依靠這些基本模塊則還須要較多的工做。幸運的是，Nodejs庫和框架爲咱們提供了幫助，讓咱們減小工做量。可是成百上千的庫或者框架管理起來又很麻煩，有了NPM，能夠很快的找到特定服務要使用的包，進行下載、安裝以及管理已經安裝的包。 

無需關注多餘的結構，只須要編輯src中的文件便可，頁面主要由app.vue控制 

【注：每次須要打開時，先啓動cmd，在項目目錄下npm run dev，才能夠經過localhost:8080 進入】

1.2.2 腳手架工具的使用

注：腳手架：腳手架的意思是幫你快速開始一個vue的項目，也就是給你一套vue的結構，包含基礎的依賴庫，只須要 npm install就能夠安裝，讓咱們不須要爲了編輯或者一些其餘事情浪費時間 。 總而言之，就是快速搭建項目的，讓咱們能夠早點去寫代碼。

1.3  從*.vue到界面

1.3.1  Vue.js的組件概念

文件內容寫在【*.vue】文件中，主要包含三部份內容：HTML（<template>）、JavaScript（<script>）和CSS（<style>）。

從*.vue到界面是經過webpack的解析運行的。

 

1.3.2  vue.js的數據綁定

一個簡單的實例

 

1.4  Vue.js組件的重要選項（參數）

1.4.1  Vue對象的子對象

（1）data：建立Vue對象時，其子對象data是用於存儲頁面靜態數據

New Vue({

  data:{

    a：1

  }

}) 

<p>{{ a }}</p>

 

（2）method：建立Vue對象時，其子對象method是用於存儲 操做data的 方法

New Vue({

data:{

a:1

},

method:{

doSometing:function(){  this.a ++  }

}

})

（3）watch：建立Vue對象時，其子對象watch是用於存儲 方法操做引發的數據變化的監聽

New Vue({

data:{

a:1

},

method:{

doSometing:function(){  this.a ++  }

},

watch :{

‘a’:function( val, oldVal  ){    

console.log(val,oldVal);

}

}

})

監聽數據’a’,當方法改變a的值時，監聽的程序就會自動執行

1.4.2  模板指令-html和Vue對象的粘合劑

（1）數據渲染：v-text 、 v-html 、 {{}}    熱更新 

（2）控制模塊隱藏：v-if 、 v-show 

 

（3）渲染循環列表：v-for 

（4）模板指令：事件綁定 v-on  屬性綁定v-bind

 

1.5  學習基礎框架代碼

1.6  使用Vue.js作一個todolist

1.7  使用localstorage來存儲todolist

1、新建一個store.js文件

包含兩個方法，一個是讀取緩存中的數據——fetch()，一個是保存數據到緩存中——save()。

二、在App.vue的<script>模塊的第一行導入Store對象

 

在數據中存儲緩存中數據，表示加載完成時讀取緩存數據

 

定義watch，監聽items的全部變化，深度控制items數組的改變，保證不管是增刪改查，只要數據改變就存儲到緩存中。

 

 

1.8  如何劃分組件

1.8.1  劃分方式：

（1）功能模塊-select,pagenation……

（2）頁面區域-header,footer,sidebar……

1.8.2  組件之間的調用-重要選項-components

    //導入組件

    import Header from './header'   

    import Footer from './footer'   

    new Vue({

        data:{

            isShow:true

        },

        components:[

            header,footer //註冊組件，註冊後組件才能使用

        ]   

    })

1.8.3  組件之間的通訊

1、父組件向子組件傳參【props對象、$broadcast()廣播】

注意事項：父組件中有值，子組件使用props對象獲取父組件事先註冊的屬性參數

 

 

❤父向子組件傳參實例

① 在components文件夾中定義組件componentA.Vue

 

② 在父組件App.vue中導入子組件

 

③ 在父組件App.vue中使用屬性傳遞消息

 

④ 在子組件中使用props對象進行註冊獲取

 

三、子組件向父組件傳參【$on()、$emit()、$dispatch()派發】

注意事項：父組件中有值，子組件使用props對象獲取父組件事先註冊的參數

① 在子組件的時間函數中使用$emit()方法傳遞參數

 

② 在父組件中使用自定義事件獲取子組件傳遞過來的參數

 

父組件中使用v-on指令觸發自定義事件

 

2. Vue.js具體指令和項目實踐

工具使用：Visual Studio Code【Atom】

安裝完成後，須要安裝相應的插件去支持語法分析和代碼顯示等功能，注意事項：部分插件還不完善，如非必要不使用ESLint（禁用，不然函數簡寫報錯），在用戶設置中添加

不然指令v-for報錯。