本文實例講述了Vue入門基本概念與使用。分享給大家供大家參考，具體如下：

1. Vue.js是什么?

1). 一位華裔前Google工程師(尤雨溪)開發的前端js庫

2). 作用: 動態構建用戶界面

3). 特點:

* 遵循MVVM模式
* 編碼簡潔, 體積小, 運行效率高, 移動/PC端開發
* 它本身只關注UI, 可以輕松引入vue插件和其它第三庫開發項目

4). 與其它框架的關聯:

* 借鑒angular的模板和數據綁定技術
* 借鑒react的組件化和虛擬DOM技術

5). vue包含一系列的擴展插件(庫):

* vue-cli: vue腳手架
* vue-resource(axios): ajax請求
* vue-router: 路由
* vuex: 狀態管理
* vue-lazyload: 圖片懶加載
* vue-scroller: 頁面滑動相關
* mint-ui: 基于vue的組件庫(移動端)
* element-ui: 基于vue的組件庫(PC端)

2. 基本使用

1). 引入vue.js

2). 創建Vue實例對象(vm), 指定選項(配置)對象

el : 指定dom標簽容器的選擇器
data : 指定初始化狀態數據的對象/函數(返回一個對象)

3). 在頁面模板中使用{{}}或vue指令

3. Vue對象的選項

1). el

指定dom標簽容器的選擇器

Vue就會管理對應的標簽及其子標簽

2). data

對象或函數類型

指定初始化狀態屬性數據的對象

vm也會自動擁有data中所有屬性

頁面中可以直接訪問使用

數據代理: 由vm對象來代理對data中所有屬性的操作(讀/寫)

3). methods

包含多個方法的對象

供頁面中的事件指令來綁定回調

回調函數默認有event參數, 但也可以指定自己的參數

所有的方法由vue對象來調用, 訪問data中的屬性直接使用this.xxx

4). computed

包含多個方法的對象

對狀態屬性進行計算返回一個新的數據, 供頁面獲取顯示

一般情況下是相當于是一個只讀的屬性

利用set/get方法來實現屬性數據的計算讀取, 同時監視屬性數據的變化

如何給對象定義get/set屬性

在創建對象時指定:

get name () {return xxx} / set name (value) {}

對象創建之后指定:

Object.defineProperty(obj, age, {get(){}, set(value){}})

5). watch

包含多個屬性監視的對象

分為一般監視和深度監視

'xxx' : {    deep : true,    handler : fun(value)}

另一種添加監視方式:

vm.$watch('xxx', funn)

4. 過渡動畫

利用vue去操控css的transition/animation動畫

模板: 使用<transition name='xxx'>包含帶動畫的標簽