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)也發生改變)

使用MVVM模式有幾大好處：

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.0是操作的是真的dom元素而不是虛擬的

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

虛擬DOM有利也有弊。

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

且也正在刪除很多東西。

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

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

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

V: 通過變量模型

VueJS表達式：

步驟：

1引用

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

3.初始化vue 填寫vue參數

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

II.屬性：data 數據(狀態 || 屬性)，專門存儲一些數據的屬性，數據一定是對象格式

var vm = new Vue({

el:"#myapp",

data:{hello:"hello word vue app!",

message:"wyx",

result:{name:'xinxin',password:'123'}

}

});

4.表達式：通過{{}}形式將我們data里面數據顯示在頁面中，

比如：

data:{{message:'xxxxx'}}

view中：{{message}}

• {{hello}}
• {{message}}
• {{result.name}}

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 中的圖片地址”

如：

v-bind:src="img" />

style

data:{

img:"img/logo.png",

styles:{color:'red',fontSize:'30px'}

}

縮寫形式：

style

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(){

}

}

例：點擊methods:{

clickBtn:function(){

alert('觸發了button綁定的事件');

}

}

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

當一個行為所觸發了一個事件，發生事件交互的時候所產生的一種結果(出現一個事件列表)

vue中的事件列表$event

相關標簽：VueJS

本文原創發布php中文網，轉載請注明出處，感謝您的尊重！

總結

以上是生活随笔為你收集整理的vuejs和php的区别,VueJS全面解析的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。