VueJS全面解析

更新時(shí)間：2016年11月10日 08:58:11 作者：玉米_欣

Vue.js（讀音 /vjuː/, 類似于 view）是一套構(gòu)建用戶界面的漸進(jìn)式框架。與其他重量級(jí)框架不同的是，Vue 采用自底向上增量開發(fā)的設(shè)計(jì)。這篇文章主要介紹了VueJS全面解析的相關(guān)資料,需要的朋友可以參考下

Vue.js是什么

Vue.js（讀音 /vjuː/, 類似于 view）是一套構(gòu)建用戶界面的漸進(jìn)式框架。與其他重量級(jí)框架不同的是，Vue 采用自底向上增量開發(fā)的設(shè)計(jì)。Vue 的核心庫只關(guān)注視圖層，并且非常容易學(xué)習(xí)，非常容易與其它庫或已有項(xiàng)目整合。另一方面，Vue 完全有能力驅(qū)動(dòng)采用單文件組件和Vue生態(tài)系統(tǒng)支持的庫開發(fā)的復(fù)雜單頁應(yīng)用。

Vue.js 的目標(biāo)是通過盡可能簡單的 API 實(shí)現(xiàn)響應(yīng)的數(shù)據(jù)綁定和組合的視圖組件。

如果你是有經(jīng)驗(yàn)的前端開發(fā)者，想知道 Vue.js 與其它庫/框架的區(qū)別，查看對比其它框架。

1.VueJS 目的：

VueJs的產(chǎn)生核心是為了解決：

a: 解決數(shù)據(jù)綁定的問題，

b: vue框架產(chǎn)生的主要目的是為了開發(fā)大型單頁面應(yīng)用，

c: 它還支持組件化，也就是可以將頁面封裝成若干個(gè)組件，采用積木式進(jìn)行編程，這樣使頁面復(fù)用性達(dá)到最高（支持組件化）。

2.VueJS 特性：

I: MVVM模式（數(shù)據(jù)變量（model）發(fā)生改變視圖（view）也改變，視圖（view）改變，數(shù)據(jù)變量（model）也發(fā)生改變）

使用MVVM模式有幾大好處：

　　1. 低耦合。View可以獨(dú)立于Model變化和修改，一個(gè)ViewModel可以綁定到不同的View上，當(dāng)View變化的時(shí)候Model可以不變，當(dāng)Model變化的時(shí)候View也可以不變。

　　2. 可重用性?？梢园岩恍┮晥D的邏輯放在ViewModel里面，讓很多View重用這段視圖邏輯。

　　3. 獨(dú)立開發(fā)。開發(fā)人員可以專注與業(yè)務(wù)邏輯和數(shù)據(jù)的開發(fā)(ViewModel)。設(shè)計(jì)人員可以專注于界面(View)的設(shè)計(jì)。

　　4. 可測試性?？梢葬槍iewModel來對界面(View)進(jìn)行測試

II: 組件化

III 指令系統(tǒng)

IIII: vue2.0開始支持虛擬dom

vue1.0是操作的是真的dom元素而不是虛擬的

虛擬dom:可以提升頁面的刷新速度

虛擬DOM有利也有弊。

A：大小 - 其中之一就是更多的功能意味著代碼包中更多行的代碼。幸運(yùn)的是，Vue.js 2.0 依舊比較?。ó?dāng)前版本 21.4kb），并

且也正在刪除很多東西。

B: 內(nèi)存 -同樣，虛擬DOM需要將現(xiàn)有的DOM拷貝后保存在內(nèi)存中，這是一個(gè)在DOM更新速度和內(nèi)存使用中的權(quán)衡。

C: 并不適用所有情況 -如果虛擬DOM可以一次性進(jìn)行批量的修改是非常好的。但是如果是單獨(dú)的、稀少的更新呢？這樣的任何

DOM更新都將會(huì)使虛擬DOM帶來無意義的預(yù)計(jì)算。

V: 通過變量模型

VueJS表達(dá)式：

步驟：

1引用

<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>

2.聲明一段HTML被框架管理

<div id="myapp"> 
<ul> 
<li></li> 
<li></li> 
<li></li> 
</ul> 
</div>

3.初始化vue 填寫vue參數(shù)

I.屬性：el 聲明vuejs管理的邊界拓展：ng-app 類似（這個(gè)是 AngularJS中的）

II.屬性：data 數(shù)據(jù)（狀態(tài) || 屬性），專門存儲(chǔ)一些數(shù)據(jù)的屬性，數(shù)據(jù)一定是對象格式

<script type="text/javascript"> 
var vm = new Vue({ 
el:"#myapp", 
data:{hello:"hello word vue app!", 
message:"wyx", 
result:{name:'xinxin',password:'123'} 
} 
}); 
</script>

4.表達(dá)式：通過{{}}形式將我們data里面數(shù)據(jù)顯示在頁面中，

比如：

data:{{message:'xxxxx'}}

view中：{{message}}

<div id="myapp"> 
<ul> 
<li>{{hello}}</li> 
<li>{{message}}</li> 
<li>{{result.name}}</li> 
</ul> 
</div>

view中：{{message}} 代碼中綁定key 而在頁面中顯示的是value

data 核心作用是存放顯示在頁面中的數(shù)據(jù)（model）（對獲取的model與頁面上要顯示的內(nèi)容產(chǎn)生了一種映射關(guān)系），就是說，如果我們實(shí)現(xiàn)前后端交互只要將得到的數(shù)據(jù)存放在data中，頁面就會(huì)自動(dòng)綁定，這樣就實(shí)現(xiàn)了從 model------> view 的數(shù)據(jù)流向。

3.VueJS 指令：

指令：其實(shí)指的就是vue定義了以v-開頭的自定義屬性，每個(gè)不同的屬性都有各自的意義和功能，

指令的用法：v-指令名稱=“表達(dá)式判斷或者是model屬性或者是事件”

v-model :

作用：接收用戶輸入的一些數(shù)據(jù)，直接就可以將這些數(shù)據(jù) 掛載到data屬性里面

語法：v-model ="屬性值" {屬性值：文本值}

在data中的處理：最好在data中也定義這個(gè)這個(gè)屬性值，不然開始時(shí)會(huì)報(bào)錯(cuò)

v-if:

作用：通過判斷加載固定的內(nèi)容，若為真加載，為假時(shí)刪除元素

用在什么地方：用在權(quán)限管理，頁面模塊條件加載

語法：v-if=" 判斷表達(dá)式 " 使用方式和if一樣的

特點(diǎn)：控制元素插進(jìn)來或者刪除并不是隱藏

v-show:

元素會(huì)始終渲染并保持在dom中，并且安全性沒有v-if高，因?yàn)関-show 用法和v-if相同，只是v-show將元素display設(shè)置成none，并不是將元素直接移除。

v-ifVS. v-show

一般來說，v-if有更高的切換消耗而
v-show有更高的初始渲染消耗。因此，如果需要頻繁切換使用 v-show較好，如果在運(yùn)行時(shí)條件不大可能改變則使用v-if較好。

v-else

元素必須緊跟在v-if或v-show元素的后面——否則它不能被識(shí)別。

v-bind:

縮寫：：

{{}}表達(dá)式綁定數(shù)據(jù)的時(shí)候，可以直接將數(shù)據(jù)顯示在頁面中（html）里面，

v-bind img src 屬性，

作用：v-bind 給頁面中html屬性進(jìn)行綁定

語法：v-bind：圖片里面src屬性=“data 中的圖片地址”

如：

<img 
v-bind:src="img" />
<div v-bind:style="styles">style</div>
data:{ 
img:"img/logo.png",
styles:{color:'red',fontSize:'30px'}
}

縮寫形式：

<img :src="img" />
<div :style="styles">style</div>

v-bind添加的style樣式是添加在內(nèi)聯(lián)中的。

v-on：

縮寫形式：v-on:click ---- >@click

@+事件

作用：對頁面中的事件進(jìn)行綁定 vue自定義了一套事件機(jī)制

angularjs中對pc端支持比較良好，對移動(dòng)端支持一般，vue主要支持移動(dòng)端，也支持pc端

事件開發(fā)中，事件 v-on: 綁定在頁面（view）中，再vue實(shí)例里面，在methods中去監(jiān)聽

在頁面中我們做的行為： v-on:click="函數(shù)名稱"

函數(shù)應(yīng)該寫在vue實(shí)例的methods屬性里面

methods也要寫成對象：

methods:{
clickBtn:function(){
}
}

例：<button v-on:click="clickBtn()">點(diǎn)擊</button>

methods:{ 
clickBtn:function(){ 
alert('觸發(fā)了button綁定的事件'); 
} 
}

在事件中傳遞值,事件中通過$event傳遞事件列表，在methods里面就可以直接獲取事件列表里面的值

當(dāng)一個(gè)行為所觸發(fā)了一個(gè)事件，發(fā)生事件交互的時(shí)候所產(chǎn)生的一種結(jié)果(出現(xiàn)一個(gè)事件列表)

vue中的事件列表$event

事件列表：

補(bǔ)充：事件修飾符

通過由點(diǎn)(.)表示的指令后綴來調(diào)用修飾符。

.stop

.prevent

.capture

.self

<!-- 阻止單擊事件冒泡 -->
<a v-on:click.stop="doThis"></a>
<!-- 提交事件不再重載頁面 -->
<form v-on:submit.prevent="onSubmit"></form>
<!-- 修飾符可以串聯(lián) -->
<a v-on:click.stop.prevent="doThat"></a>
<!-- 只有修飾符 -->
<form v-on:submit.prevent></form>
<!-- 添加事件偵聽器時(shí)使用事件捕獲模式 -->
<div v-on:click.capture="doThis">...</div>
<!-- 只當(dāng)事件在該元素本身（而不是子元素）觸發(fā)時(shí)觸發(fā)回調(diào) -->
<div v-on:click.self="doThat">...</div>

v-for :

作用：控制html元素的循環(huán)，實(shí)現(xiàn)數(shù)據(jù)列表的生成

用法：

view： v-for="item in 集合"

item:每個(gè)集合的子項(xiàng)

集合：被遍歷的集合

寫在誰上誰循環(huán)