筆記 前端基礎學習

2022-08-14 12:57:14 字數 2942 閱讀 3611

cdn 內容分發網路

這是一種加速策略,能從離自己最近的伺服器上獲得加速資源。

使用vue採用網路引用,如果是單一的伺服器,加入距離很遠,就會導致請求很慢,所以vue.js在多個伺服器上設定了『分身』,在此基礎上,可以從離自己最近的伺服器上獲取資源,這就是cdn

mvvm

vue技術是mvvm開發模式的實現者

mvvm : model view viewmodel(連線檢視和資料的中介軟體)

vm: viewmodel中內建了乙個觀察者,實現了雙向資料的繫結

補充知識

1) event.target.value:

比如在響應函式裡,可以指名使用 event (內建的引數物件)。該物件表示當前時間,可以通過 event.target.value 來獲取當前時間物件的value的值

2)插值表示式

插值表示式不能寫在html標籤中,不能作為屬性的值的一部分。例如這樣的使用是錯誤的:

在這種情況中,使用v-bind

1.通過插值表示式

2.計算屬性:computed

計算屬性首先是屬性,其次這個屬性擁有計算的能力(這裡的計算就是乙個函式),他就是乙個能將計算結果快取起來的屬性(將行為轉化成了靜態

一些常用的函式,可以快取起來,在呼叫的時候直接呼叫快取的結果,以此來提高效率

注意:computed裡面雖然存放的是函式,但在呼叫的時候computed裡的東西是乙個屬性

3.watch 監控屬性

通過watch裡給屬性繫結函式,當屬性的值發生變化時,該函式會自動被呼叫。呼叫時可以接收兩個引數,第乙個引數是屬性改變後的值,第二個引數是屬性改變前的值

1.通過給html的class屬性繫結vue中的屬性值,得到樣式的繫結

如果temp是true-->

否則-->

2.加入computed

通過computed返回乙個物件,物件裡面放著對個鍵值對,效果同方法1

點選

3.雙向繫結體現

4.多個樣式的操作

在html標籤中使用多個樣式的組合

//注意:不能這樣寫:

new vue(

})

5.通過style設定樣式

在內嵌的css樣式裡指明style的值

//注意:style引用了vue中的內容,因此**是乙個鍵值對,所以需要大括號**,物件的鍵不能出現"background-color",應改成"backgroundcolor"

6.使用computed設定樣式

7.設定style屬性的多個樣式

採用陣列的形式

//這裡的mystyle定義在computed裡面

vue的高效核心,就是虛擬dom和diff演算法,vue不通過修改dom樹來達到修改頁面的效果,而是直接在頁面上修改該元素,此時這個元素就是乙個虛擬的dom。通過diff演算法,計算出虛擬的dom修改後和修改前的區別,然後在虛擬dom的基礎上進行修改,大大提公升了效率。

v-if

!!!

當temp的值為true時,div中的內容才會顯示

`v-else`

v-if的對立面

`v-else-if`就是在else裡面再巢狀乙個if

### 2.v-show

用法上和v-if時相同的,v-show="布林值變數" 是true是就會顯示內容

但v-show僅改變樣式,不會消失(display)

而v-if是直接讓元素消失在vue中可以使用該標籤配合v-if實現多個元素一起出現一起消失,如:

hello

world

v-for

1.可以通過乙個vue物件操作另外乙個vue物件的屬性和方法

格式: vue物件名. 另乙個物件的屬性/方法

2.vue例項屬性

直接通過物件.的方式的呼叫的屬性,是來自於data或computed的屬性,但是vue中的el、data等等這些鍵也稱為屬性,這些屬性就是vue物件的例項屬性

1)例項屬性ref的用法:相當於id

在vue裡面常使用ref屬性來代替id的使用,那麼可以快速的呼叫ref的值來獲得頁面中的某個元素

點選

。。。this.$refs.mtbtn1.innerhtml="hello";

2)mount的使用

實現了頁面的元素和vue物件的動態繫結,之前都是通過el的方式來繫結

可以將vue物件作為乙個元件,反覆使用

1.註冊:(全域性註冊)

vue。component("元件名,)

2.使用元件:

在vue繫結了的html元素中才能使用元件

3.作為元件的vue物件

1)特點1:

寫法的區別。vue。component("元件名",),這個vue物件和之前的vue物件的data例項屬性的寫法是存在區別的:

new vue(  

})------>

}}

2)特點2:

這種元件中template的寫法:template裡必須有且只有乙個根元素

錯誤寫法:

template:"

點選"

正確寫法:

template:"

點選"

前端學習筆記(一)HTML基礎

charset utf 8 documenttitle head body html 常規標籤 標籤 屬性 屬性值 屬性 屬性值 空標籤 標籤 屬性 屬性值 說明 3.寫在 中的第乙個單詞叫做標記,標籤,元素。4.標記和屬性用空格隔開。屬性和屬性值用等號連線,屬性值必須放在 號內。5.乙個標記可以沒...

前端學習筆記 2 CSS 基礎

標籤 前端 css 布局模型 顏色和長度 設定小技巧 參考資料 css 樣式由選擇符和宣告組成,而宣告又由屬性和值組成。選擇器 從css 樣式 插入的形式來看基本可以分為以下3種 內聯式 嵌入式和外部式三種。優先順序遵循就近原則,一般來說,內聯式 嵌入式 外部式。例子這裡文字是紅色。type tex...

前端學習筆記

前端 做網頁 靜態網頁 動態的web應用 前後端分離的單頁應用 資料 json ajax html css js jquery ajax 開發工具notepad hbuilder vscode webstorm 瀏覽器 谷歌 firefox edge 什麼是html hypertext makeup...