Vue2.x總結(1)

一、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.如果涉及到事件處理類似的行為，使用方法函數進行處理

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