VUE基礎知識

2021-10-02 23:16:37 字數 1456 閱讀 4456

1、全域性定義:每個元件的命名不可重複

2、字串模板:缺乏語法高亮,可讀性較差

(1)屬性

屬性書寫方式

props:

["type"

,"name"

,...

]

list:

屬性時單向資料流,不可在子元件更改父元件傳遞的值,可通過onchange方法修改。

(2)事件

(3)插槽

插槽是元件的一塊html模板,其顯示與否由父元件決定。

//父元件

="father"

>

這裡是父元件<

/h3>

<

!--第一次使用:用flex展示資料--

>

"user"

>

="tmpl"

>

for=

"item in user.data"

>

}<

/span>

<

/div>

<

/template>

<

/child>

<

/div>

<

/template>

//子元件

="child"

>

這裡是子元件<

/h3>

// 作用域插槽

"data"

>

<

/slot>

<

/div>

<

/template>

export

default

}}

通過父元件傳遞給子元件的內容,讓子元件去執行相應的行為。

同層比較的機制,同一層級的一組節點可以使用唯一的id進行區分。

當頁面資料發生改變的時候,如果節點型別不同,則直接刪掉前面的節點,建立並插入新的節點,如果節點型別相同,則重新設定相應的屬性,進行節點的更新。

key屬性的引用(相同節點的移動,key的存在使得節點可以移動而不用刪除)

當資料有變化時才會觸發計算屬性computed,相對方法效能較好。

偵聽器watch

盡量使用計算屬性完成。

v-text

v-html

v-show

v-if v-

else

-if v-

else

v-for

v-bind(:)

v-on(@)

v-model

v-pre:繞過`}`

編譯直接輸出字串

v-once:繫結的變數只會解析一次

v-cloak

Vue基礎知識

vue.js的基本使用 1.引入vue.js 1 cdn 3 模組化安裝 npm i vue d s cnpm i vue yarn add vue 2.初始化vue 1 必須有乙個html容器,決定vue.js的作用範圍 2 初始化 new vue options data 資料 3 資料繫結 宣...

Vue基礎知識

資料雙向繫結 指令帶有v 的,表示vue特有的屬性,他們會在渲染的dom上,應用特殊的響應式行為 或者 click me v model 會忽略所有表單元素的 value checked selected attribute 的初始值 而總是將 vue 例項的資料作為資料 你應該通過 j ascri...

vue基礎知識回顧

vue主旨 運算元據,不操作dom 元件 例項 1 兩種安裝方式 a,script引入 b,使用v cli腳手架搭建模組化專案 2 掛載點 模板與例項 3 vue例項中的資料data 事件 事件 click.方法 methods 4 vue中的屬性繫結 屬性名 和雙向資料繫結 v model 5 v...