VueJS全面解析

Vue.js是什麼

Vue.js（發音 /vjuː/, 類似 view） 是一套建構使用者介面的 漸進式框架。與其他重量級框架不同的是，Vue 採用自底向上增量開發的設計。 Vue 的核心庫只專注於視圖層，而且非常容易學習，非常容易與其它庫或已有專案整合。另一方面，Vue 完全有能力驅動採用單文件元件和Vue生態系統支援的庫開發的複雜單頁應用。

Vue.js 的目標是透過盡可能簡單的 API 實現回應的資料綁定和組合的視圖元件。

如果你是有經驗的前端開發者，想知道 Vue.js 與其它庫/框架的區別，查看對比其它框架。

1.VueJS 目的：

VueJs的產生核心是為了解決：

a: 解決資料綁定的問題，

b: vue框架產生的主要目的是為了開發大型單頁應用

c: 它還支援元件化，也就是可以將頁面封裝成若干個元件，採用積木式進行編程，這樣使頁面復用性達到最高（支援元件化）。

2.VueJS 特性：

I: MVVM模式（資料變數（model）發生改變視圖（view）也改變， 視圖（view）改變，資料變數（model）也改變）

MV使用使用使用使用VM模式模式有幾大好處：

　　1. 低耦合。 View可以獨立於Model變化和修改，一個ViewModel可以綁定到不同的View上，當View變化的時候Model可以不變，當Model變化的時候View也可以不變。

　　2. 可重複使用性。可以把一些視圖的邏輯放在ViewModel裡面，讓很多View重用這段視圖邏輯。

　　3. 獨立開發。開發人員可以專注與業務邏輯和資料的開發(ViewModel)。設計人員可以專注於介面(View)的設計。

　　4. 可測試性。可以針對ViewModel來對介面(View)進行測試

II: 組件化

III 指令系統

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

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

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

虛擬DOM有利有弊。

A：大小 - 其中之一就是更多的功能意味著程式碼包中更多行的程式碼。幸運的是，Vue.js 2.0 依舊比 較小（目前版本 21.4kb），並且

且也正在刪除很多東西。

B: 記憶體 -同樣，虛擬DOM需要將現有的DOM拷貝後保存在記憶體中，這是一個在DOM更新速度和記憶體使用中的權衡。

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

DOM更新都會使虛擬DOM帶來無意義的預計算。

V: 透過變數模型

VueJS表達式：

步驟：

1引用

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

   

3.初始化vue 填寫vue參數

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

II.屬性：data 資料（狀態|| 屬性），專門儲存一些資料的屬性，資料一定是物件格式

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

   

4.表達式：透過{{}}形式將我們data裡面資料顯示在頁面中，

例如：

'}}

view中：{{message}}

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

   

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

data 對存放顯示在頁面中的資料（model）（對獲取的model與頁面上要顯示的內容產生了一種映射關係），就是說，如果我們實現前後端交互只要將得到的數據存放在data中，頁面就會自動綁定，這樣就實作了從model------> view 的資料流向。

3.VueJS 指令：

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

指令的用法：v-指令名稱=「表達式判斷或是model屬性或是事件」

v-model :

作用：接收用戶輸入的一些數據，直接就可以將這些數據掛載到data屬性裡面

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

在data中的處理：最好在data中也定義這個這個屬性值，不然一開始會報錯

v-if:

作用：透過判斷載入固定的內容，若為真加載，為假時刪除元素

用在什麼地方：用在權限管理，頁面模組條件載入

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

特點：控制元素插進來或刪除並不是隱藏

v-show:

元素會始終渲染並保持在dom中，並且安全性沒有v-if高，因為v-show 用法和v-if相同，只是v-show將元素display設定成none，並不是將元素直接移除。

v-ifVS. v-show

一般来说，v-if有更高的切换消耗而
v-show有更高的初始渲染消耗。因此，如果需要频繁切换使用 v-show较好，如果在运行时条件不大可能改变则使用v-if较好。

v-else

元素必须紧跟在v-if或v-show元素的后面——否则它不能被识别。

v-bind:

缩写：：

{{}}表达式绑定数据的时候，可以直接将数据显示在页面中（html）里面，

v-bind img src 属性，

作用：v-bind 给页面中html属性进行绑定

语法：v-bind：图片里面src属性=“data 中的图片地址”

如：

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

   

缩写形式：

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

   

v-bind添加的style样式是添加在内联中的。

v-on：

缩写形式：v-on:click ---- >@click

@+事件

作用：对页面中的事件进行绑定 vue自定义了一套事件机制

angularjs中对pc端支持比较良好，对移动端支持一般，vue主要支持移动端，也支持pc端

事件开发中，事件 v-on: 绑定在页面（view）中，再vue实例里面，在methods中去监听

在页面中 我们做的行为： v-on:click="函数名称"

函数应该写在vue实例的methods属性里面

methods也要写成对象：

methods:{
clickBtn:function(){
}
}

   

例：f8901362721699ea6890ed926129bc8b点击65281c5ac262bf6d81768915a4a77ac0

methods:{
clickBtn:function(){
alert('触发了button绑定的事件');
}
}

   

在事件中传递值,事件中通过$event传递事件列表，在methods里面就可以直接获取事件列表里面的值

当一个行为所触发了一个事件，发生事件交互的时候所产生的一种结果(出现一个事件列表)

vue中的事件列表$event