前端~vue.js筆記(一)

1.設計模式:

?MVVM 模式:在實例對象中所寫的數(shù)據(jù)就是M層,html模板標簽視圖層就是v層。當數(shù)據(jù)變化的時候視圖層會改變,相互的改變是由vm層來控制的,也就是由vue框架來實現(xiàn)的。

MVP(JQ)是面向dom操作。MVVM?是對數(shù)據(jù)進行操作

2.基礎知識

? 1)什么是實例:

? 2)實例中可以包括:

(注:從控制臺中看到實例(vm)中其他的內(nèi)容(實例方法):vm.$data vm.$el)

? 3)實例的生命周期函數(shù)(8個)

? ? ? ?生命周期函數(shù)就是vue實例在某一個時間點會自動執(zhí)行的函數(shù)

? 4)vue的模板語法

???差值表達式:{{}} ? ? v-text:? ? 前兩個的作用是一樣的? v-html:(三者的區(qū)別)

? ?eg: ?{{name + 'Lee'}} ? ? ?v-text = "name +'Lee'" ? (可以寫js的表達式或者變量)

? ?v-bind: "title"

當我們看到一個vue指令后邊跟著一個值的時候,這個值不再是一個字符串,而是一個js的表達式

?3.計算屬性,方法與偵聽器

計算屬性:緩存機制 ?當它依賴的數(shù)據(jù)不變的時候,頁面在渲染的時候,就不會重新再次計算(復用上次的結(jié)果)

方法:每一次渲染頁面,不管值是否改變,方法都會執(zhí)行,重新計算。

watch(監(jiān)聽)也有緩存,但是比計算屬性復雜

計算屬性有緩存 ?,但方法沒有,故當三個方法都能實現(xiàn)時,優(yōu)先選擇計算屬性(性能優(yōu)化)

eg:實現(xiàn)由姓和名組合顯示全名(三種方法)

2)計算屬性的getter和setter

get:獲取值 ? ? ?set:設置值 ? ??

一下是通過改變傳入的設置值,使獲取值發(fā)生改變

4. vue中的樣式綁定

class的對象綁定

數(shù)組改變樣式

style改變樣式

對象綁定和數(shù)組綁定

5.vue中的條件渲染

v-if? v-show? :是否顯示

區(qū)別:v-if :只要對應的變量值是false,它就不存在了(dom的刪除和添加)

v-show:(性能會高)對應的變量值是false,它依然存在,只是display:none

v-if 和 v-else放在一起使用

v-if? v-else-if? v-else(多個條件的使用)

key值的作用:如果給一個標簽加一個key值,vue會知道它是頁面上唯一的一個元素,

如果key值不同,那么vue就不會嘗試去復用之前的? (提高性能,盡量key值是唯一的)

6. vue中的列表渲染

改變數(shù)組中的內(nèi)容:不能直接的通過下標的形式改變數(shù)組,只能通過幾個數(shù)組的變異方法來改變

7個方法:pop? (刪除)? push? shift? unshift? splice(截取) sort reserve

數(shù)組變化,頁面也會跟著變化。

方法二:改變數(shù)組的引用地址

關(guān)于template:模板占位符,可以幫我們包裹一些元素,但是在循環(huán)的過程中不會被渲染

循環(huán)對象:

改變對象里邊的值的方法:1)改變引用

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?2)用set方法

vue 中的set的方法

1)改變對象里邊的數(shù)據(jù)(全局)

Vue.set(vm.userInfo,"address","beijing")

vm.$set(vm.userInfo,"address","beijing")(實例的方法)

2)改變數(shù)組的數(shù)據(jù)

Vue.set(vm.userInfo,1,5)

vm.$set(vm.userInfo,1,5)

7.前端組件化 ?:

? ?1) ?什么是前端組件化: ?簡單說就是頁面的邏輯拆分成小的區(qū)域?qū)崿F(xiàn)?

? ?2)使用組件化的優(yōu)點:?提高代碼的可維護性

? ?3) 父子組件的傳值

? ? ? 父組件把內(nèi)容傳遞給子組件:v-bind ? 簡寫:

? ? ? 子組件給父組件傳值($emit)

? 4)使用is屬性解決模板標簽上的bug?

在標簽中使用組件,又不能直接使用,故可以通過is屬性,使其滿足html格式規(guī)范

5)在子組件中data必須是個函數(shù),而不能是對象(根組件是對象),并且返回對象

子組件會被多次調(diào)用,這樣會是的每一個子組件都擁有獨立的數(shù)據(jù)存儲

6)在vue中如何操作DOM

通話ref獲取dom節(jié)點,在元素標簽上加一個ref


如果在組件上加了ref,會怎么樣(獲取到的是組件的引用)


簡單計數(shù)器
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務。

友情鏈接更多精彩內(nèi)容