一、vue2.x概述

1、vue，類似於view（讀音），是構建使用者介面的漸進式框架，採用自底向上增量開發的設計，vue的核心庫只關注檢視層的開發。不僅易於上手，還便於與第三方庫或既有的專案整合。

2、vue單檔案元件&第三方庫或=SPA應用

3、vue-cli提供可高效、快速、便捷的專案搭建。

4、完成的文件體系，不支援IE8及其一下瀏覽器。

二、vue的特徵

輕量級的框架、雙向資料繫結、單頁面應用；

核心：關注檢視層的開發

三、基礎語法（第一個vue程式）

1、專案開發第一步：引入vue.js

2、定義頁面結構：<div id="app">{{message}}</div>

3、定義模型 [vue例項]

<div id="app">
  {{ message }}
</div>
var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!'
  }
})

輸出： Hello Vue！

四、資料的雙向繫結（三種方式）

1、vue 的雙向繫結是什麼意思？

使用者在檢視上的修改會自動同步到資料模型中去，資料模型的值變化，試圖中的值也會隨之變化。

優點：無需進行和單向資料繫結的那些CRUD（做計算處理時的增加(Create)、讀取查詢(Retrieve)、更新(Update)和刪除(Delete)

2、繫結資料的三種方式

（1）普通文字繫結：mustache語法{{}}===使用v-text繫結（常用）

（2）解釋HTML標籤的繫結：使用v-html繫結（慎用）

    注：a.除非是信任的內容使用這樣的方式進行資料繫結

           b.這樣的繫結方式，如果內容不是被信任的，有可能造成XSS攻擊。

（3）將資料繫結到標籤的屬性上：使用v-bind：屬性名稱=“變數”來繫結（常用）。

舉個例子：

<div id="app">
	{{message}}
	<span v-text='message'></span><br/>
	<span v-html='info'></span><br/>
	<span v-bind:title='msg'>v-bind滑鼠放上去試試</span>
</div>
<script type="text/javascript">
	var app = new Vue({
		el:"#app",
		data:{
			message:"<p>我是message裡面的測試內容</p>",
			info:"<h1>info測試內容</h1>",
			msg:"哈哈，msg出現了"
		}
	});
</script>
輸出結果：<p>我是message裡面的測試內容</p>
	<p>我是message裡面的測試內容</p>
	info測試內容
	v-bind滑鼠放上去試試（滑鼠放上去會顯示'哈哈，msg出現了'）
 

五、內建指令

1、什麼是內建指令？

vue指令以“v-”開頭，作用在HTML元素上，將指令繫結在元素上時，會給繫結的元素新增一些特殊行為，可將指令視作特殊的HTML屬性（對元素進行操作）.

2、常見內建指令

v-text：渲染普通文字

v-html：渲染為瀏覽器解釋的html內容

v-show：用於定義元素的顯示/隱藏

v-if、v-else、v-else-if：判斷

v-for：迴圈

v-on：參考JQuery中on的用法----繫結事件

v-bind：v繫結資料到屬性

v-model：資料雙向繫結（表單元素）

v-clock：確保mustache語法在渲染完成之後顯示到頁面上（使用並不是很多，通常會用v-text進行替換）

v-once：資料只繫結一次

... ...

六、過濾器

1、什麼是過濾器？有什麼作用？

通過輸入資料，能夠對資料進行及時處理並返回，本質上是一個函式通過接收一個值，將其處理並返回，在指令中由一個管道符“|”標記，並可以跟隨一個或多個函式。

作用：主要用於文字轉換，針對展示的資料進行格式化的處理。

2、vue1.x中常見的內建過濾器完全參照了angular中的過濾器，並且都做了實現。

      vue2.x中廢棄了vue1.x中的內建過濾器，vue2.x中只有自定義過濾器，通過vue例項中的filters選項進行配置。

vue自帶的過濾器：

capitalize 首字母大寫

uppercase 全部大寫

lowercase 全部小寫

currency 貨幣過濾，輸出金錢及小數點

3、過濾器可以用在兩個地方：雙花括號插值和 v-bind 表示式 (後者從 2.1.0+ 開始支援)。過濾器應該被新增在 JavaScript 表示式的尾部，由“管道”符號指示：

語法：在雙花括號中 {{message | capitalize }}

           在v-bind中：<div v-bind:id="rawId | formatId"></div>

可以在一個元件的選項中定義本地的過濾器：

filters: {
  capitalize: function (value) {
    if (!value) return ''
    value = value.toString()
    return value.charAt(0).toUpperCase() + value.slice(1)
  }
}

更詳細的請參考官網：https://cn.vuejs.org/v2/guide/filters.html

七、縮寫

1、縮寫的優點和缺點

優：簡化開發，讓技術人員在開發過程中對於頻繁操作的指令進行了簡化的處理

缺：如果縮寫出現更多方式的時候，可能會造成其他困擾

2、vue的兩種縮寫

縮寫語法：vue針對經常頻繁使用的兩個指令進行簡化處理，並且預期以後會出現更多的縮寫語法。

（1）屬性繫結的縮寫： v-bind：屬性名稱===》：屬性名稱

（2）事件繫結的縮寫： v-on：事件名稱===>@事件名稱

八、例項

1、常見選項

var app = new Vue({

    el：入口元素

    template：模板

    data：資料物件

    methods：方法函式

    computed：計算屬性

    watch：觀察屬性

    filters：過濾器

    directives：自定義指令

    components：自定義元件

});

2、常見屬性

this.$el   獲取例項的入口元素

this.$data  獲取例項的資料

this.$parent/this.$children  獲取例項的父/子例項（元件）

this.$root  獲取例項的根例項

九、行為操作

1、含義：定義的要執行的函式/方法

2、在vue中，分三種類型：

計算屬性，通過computed進行配置

方法函式，通過methods進行配置

觀察屬性，通過watch進行配置

3、計算屬性（computed）和方法函式（methods）的對比

a.如果涉及到資料運算，儘量選擇使用計算屬性

b.如果涉及到事件處理類似的行為，使用方法函式進行處理

注：計算屬性中的資料，一旦運算完成，下次呼叫的時候會檢查計算屬性中各個資料有沒有發生變化，沒有發生變化的情況下，直接使用上一次快取的結果。