Vue 框架 筆記

一、兼容

二、性能優化

 

vuejs

******做者：尤雨溪

***

*******MVVM框架：

M：model層 數據層 數據的增刪改查

V：view視圖層 相似於html的模板

vm:viewmodel映射層 model層與view層之間的一個映射層(嫁接的橋樑)

 

 

*******特色：

數據驅動視圖

 

不再會去操做DOM來改變view層的變化

 

操做DOM元素是很是耗費性能的

 

漸進式的JavaSrcipt框架

vuejs只會包含核心語法若是須要其餘模塊的時候須要單獨的安裝

在vue當中咱們能夠直接訪問data中的屬性

 

 

*******v-text:

底層原理主要應用了在數據解析這塊 innerText

 

v-text:

值能夠寫任何js表達式

 

 

v-text:簡寫 {{}}

 

 

*******{{}}在頁面第一次加載的時候會顯示{{}}

var vm = new Vue({

//掛載點 vue做用的範圍只會在id爲app的這個元素內部

el:"#app",//document.querySelector()

//定義當前組件所須要的一些狀態 定義當前vue所須要的一些屬性

data:{

message:"1824"

}

})

console.log(vm)

*******v-html 解析html innerHTML

 

通常狀況下不會使用

*******v-show：顯示隱藏 非權限

 

底層是操控元素的display屬性

 

 

*******v-if:顯示隱藏 設計到權限

底層是操控元素的建立和銷燬

 

進行多個選擇的處理

 

後臺管理系統

用戶會員級別

登錄與非登錄

 

 

選項卡

組件切換

動畫

*******v-for:數據的遍歷

*******v-on：進行事件的綁定 :冒號後面是事件的名稱

值爲事件的函數

 

v-on:事件名稱 = 事件函數

 

 

簡寫：

@事件名稱

 

 

指令後面用.連接的屬性叫作修飾符

 

 

 

stop:阻止事件冒泡

prevent:阻止瀏覽器默認事件

once:事件只觸發一次

enter:回車

 

 

 

若是須要使用事件對象則須要傳遞一個$event

cv

********v-bind：綁定屬性 簡寫 ：屬性 語法v-bind:屬性 =值

title class idd alt style src href

v-model:能夠用來實現雙數據綁定

 

v-model這個指令只能給表單進行使用

v-model是根據表單的value值來去改變data中屬性的值

 

做用:若是表單上面加了v-model那麼data中與表單綁定的那個屬性就會隨着表單的改變而改變