VUE 響應式渲染

2021-10-04 10:40:21 字數 2268 閱讀 3720

(1)插值

a.文字 }

b.純html

v-html ,防止xss,csrf(

(1) 前端過濾

(2) 後台轉義(< > < >)

(3) 給cookie 加上屬性 http

)c.表示式

(2)指令:是帶有 v- 字首的特殊屬性

v-bind 動態繫結屬性

v-if 動態建立/刪除

v-show 動態顯示/隱藏

v-on:click 繫結事件

v-for 遍歷

v-model 雙向繫結表單

(3)縮寫

v-bind:src => :src

v-on:click => @click

(1)繫結html class

-物件語法

-陣列語法

(2)繫結內聯樣式

-物件語法

-陣列語法

//需要將 font-size =>fontsize

(1)v-if

(2)v-else v-else-if

(3)template v-if ,包裝元素template 不會被建立

(4)v-show

(1)v-for (特殊 v-for=「n in 10」)

a. in

b. of

沒有區別

(2)key:

*跟蹤每個節點的身份,從而重用和重新排序現有元素

*理想的 key 值是每項都有的且唯一的 id。data.id

(3)陣列更新檢測

a. 使用以下方法運算元組,可以檢測變動

push() pop() shift() unshift() splice() sort() reverse()

b. filter(), concat() 和 slice() ,map(),新陣列替換舊陣列

c. 不能檢測以下變動的陣列

vm.items[indexofitem] = newvalue

解決

(1)vue.set(example1.items, indexofitem, newvalue)

(2)splice

(4)應用:顯示過濾結果

(1)監聽事件-直接觸發**

(2)方法事件處理器-寫函式名 handleclick

(3)內聯處理器方法-執行函式表示式 handleclick($event) $event 事件物件

(4)事件修飾符

.stop

.prevent

.capture

.self

.once

.passive

每次事件產生,瀏覽器都會去查詢一下是否有preventdefault阻止該次

事件的預設動作。我們加上passive就是為了告訴瀏覽器,不用查詢了,我們沒

用preventdefault阻止預設動作。

這裡一般用在滾動監聽,@scroll,@touchmove 。因為滾動監聽過程

中,移動每個畫素都會產生一次事件,每次都使用核心執行緒查詢prevent會使

滑動卡頓。我們通過passive將核心執行緒查詢跳過,可以大大提公升滑動的流暢

度。(5)按鍵修飾符

v-model

(1)基本用法

-購物車

(2)修飾符

.lazy :失去焦點同步一次

.number :格式化數字

.trim : 去除首尾空格

複雜邏輯,模板難以維護

(1) 基礎例子

(2) 計算快取 vs methods

-計算屬性是基於它們的依賴進行快取的。

-計算屬性只有在它的相關依賴發生改變時才會重新求值

(3) data vs computed vs watch

混入 (mixins) 是一種分發 vue 元件中可復用功能的非常靈活的方式。

混入物件可以包含任意元件選項。

當元件使用混入物件時,所有混入物件的選項將被混入該元件本身的選項。

vue響應式布局 Vue 響應式原理

vue2 的資料偵測 在 src observer 目錄裡面,元件例項在初始化時,會呼叫 observe 函式處理 data function initdata vm observe 改寫了所有物件屬性的 getter setter 和陣列原型上的 7 個會改寫陣列方法,從而讓 data 變成可響應...

模仿vue實現模板渲染和響應式資料

第一次寫於 2020年5月2日 既然要最求刺激,那就要貫徹到底.品如 想要模仿vue,那就要知道vue實現了什麼功能.以及根據我現在的個人能力,我能夠實現的功能.為了方便區分,我把自己實現的內容稱為jue vue的功能 jue想要實現的功能 目前實現的只有插值表示式 其它的在日後可能更新 想要的效果...

Vue宣告式渲染

vue.js 的核心是乙個允許採用簡潔的模板語法來宣告式地將資料渲染進 dom 的系統 div new vue 除了文字插值,我們還可以像這樣來繫結元素特性 v bind title message 滑鼠懸停幾秒鐘檢視此處動態繫結的提示資訊!span div new vue 這裡我們遇到了一點新東西...