Vue
作者:尤雨溪
框架:MVVM
漸進式的Javascript框架
框架與類庫的區別?
舉例:
jquery好處:1.抹平了各個瀏覽器之間的差異
2.鏈式操作DOM
套餐
框架:全家桶
漸進式:vue只會包含核心語法,如需其他功能需要單獨安裝,例如:路由 vuex 前后端數據交互的方式
什么是MVVM?
mvc:model view controller 大多數會用在后端
MVVM: 大多數用在前端
M:model層 數據層 數據的增刪改查的操作
V:view層 視圖層 類似於這個html一樣的模板 主要用來做展示
VM:viewModel層 mode層與view之間的一個映射層 聯系model和view層
vue最大的優點 MVVM最大的優點
數據驅動視圖
1.MVC MVVM
2.傳統的DOM渲染過程:
html解析器,生成dom樹
css解析器,生成行間樣式表
3.,回流和重繪(博客-設計模式-單例模式)
回流:只要文檔布局發生了改變那么就會發生回流
重繪:當前元素對自己本身的樣式進行改變,
4.虛擬DOM的理解
真是的JS對象
操作內存中的js對象要比 操作DOM節省性能
vue的副本使用
vuejs官網
5.模塊
v-text:
底層原理:innerText
作用:渲染數據
v-text的指:任何js表達式
簡寫:{{}}
v-html:
底層原理:innerHTML
作用:渲染數據
v-html的值:任何js表達式
簡寫:{{{}}} 注意這個方法現在已經被淘汰了 vue1.0
v-show:顯示隱藏
值:布爾值
true為顯示
false為隱藏
原理:操作元素的display屬性
v-if:顯示隱藏
值:布爾值
true為顯示
false為隱藏
原理:操作元素的DOM節點增加和刪除
v-else-if
v-else
注意在使用v-else-if v-else 前面必須要有v-if
面試題:
v-if與v-show的兩個區別
前者是操作元素的DOM節點創建元素和刪除元素
后者是操作元素的display屬性
使用場景:
單純的元素顯示隱藏,不會涉及到權限.安全.頁面展示的情況下一般使用v-show
如果涉及到權限(例如vip權限).安全 .頁面展示的情況下用v-if
v-for
語法:v-for="(數組中的值,數組中的下標) in 需要遍歷的數據"
v-bind:綁定屬性
屬性:id class style src title href....
v-bind:簡寫:屬性名稱
v-on:事件的綁定
vue所需用到的一些事件函數必須放在methods中
v-on:click
v-on:dblclick
v-on:mouseover
修飾符:做事件的修飾
用法:v-on:事件mingc.修飾符.修飾符
一個事件可以有多個修飾符
.stop 阻止事件冒泡event.stopPropagation()
.prevent 組織瀏覽器默認事件event.preventDefault()
.once 只會觸發一次回調
.enter 按下回車的時候
.13
如果需要在事件中用到事件對象,需要在事件函數中傳遞一個$event
.capture - 添加事件偵聽器時使用 capture 模式。
.self - 只當事件是從偵聽器綁定的元素本身觸發時才觸發回調。
.{keyCode | keyAlias} - 只當事件是從特定鍵觸發時才觸發回調。
.native - 監聽組件根元素的原生事件。
.left - (2.2.0) 只當點擊鼠標左鍵時觸發。
.right - (2.2.0) 只當點擊鼠標右鍵時觸發。
.middle - (2.2.0) 只當點擊鼠標中鍵時觸發。
.passive - (2.3.0) 以 { passive: true } 模式添加偵聽器
v-once:只會渲染一次數據
當數據發生改變的時候,凡是加v-once指令的標簽數據不會發生改變
v-pre:不解析{{}}中的數據,包括{{}}
v-cloak:防止第一次渲染的時候{{}}的出現
v-model:實現雙數據綁定
使用的元素:form表單的元素都可以使用v-model
面試題:
v-model實現雙數據綁定的原理?
底層用了一個object.defineProperty() 做數據劫持 檢測當前對象數據發生了變化,就會觸發一個方法getter/setter
如何做到數據劫持:(vue.js中的深入響應式原理 詳見:https://cn.vuejs.org/v2/guide/reactivity.html#ad)
VUE3.0中廢除掉了Object.defineProperty 換成ES6的proxy() (詳見:https://www.cnblogs.com/nanianqiming/p/9164097.html)
回流(reflow)和重繪(repaint)
回流:當render tree的一部分或者全部的元素因改變了自身的寬高.布局,顯示或隱藏,或者元素內部的文字結構發生變化,導致需要重新構建頁面的時候,回流就產生了
重繪:當一個元素自身的寬高,布局,及顯示或者隱藏沒有改變,而只是改變看元素的外觀風格的時候,就會產生重繪.
回流必定出發重繪,而重繪不一定觸發回流
觸發回流的css屬性:
觸發重繪的:
避免回流的方法:
- 不使用以上能觸發圖層回流的屬性.
- 建立一個圖層,讓回流在這些圖層里面進行,限制回流和重繪的范圍,減少瀏覽器的運算工作量