Vue的學習總結

v-bindattribute被稱為指令。指令帶有字首v-，以表示它們是 vue 提供的特殊 attribute。

含義：將這個元素節點的titleattribute 和 vue 例項的messageproperty 保持一致

v-on新增事件***，用於使用者和應用互動

v-for指令可以繫結陣列的資料來渲染乙個專案列表

v-model實現表單輸入和應用狀態之間的雙向繫結

元件component

乙個元件本質上是乙個擁有預定義選項的乙個 vue 例項

註冊元件例1：

// 定義名為 todo-item 的新元件
vue.component('todo-item', )

父作用域將資料傳到子元件

現在我們為每個 todo-item 提供 todo 物件

todo 物件是變數，即其內容可以是動態的。

我們也需要為每個元件提供乙個「key」，稍後再

作詳細解釋。

-->

vue.component('todo-item', }'
})  data: ,,]
}})

生命週期鉤子

created在例項建立完成後被立即呼叫

mounted例項被掛載後呼叫，這時el被新建立的vm.$el替換了。

如果根例項掛載到了乙個文件內的元素上，當mounted被呼叫時vm.$el也在文件內。

注意mounted不會保證所有的子元件也都一起被掛載

updated由於資料更改導致的虛擬 dom 重新渲染和打補丁，在這之後會呼叫該鉤子

destroyed例項銷毀後呼叫。該鉤子被呼叫後，對應 vue 例項的所有指令都被解綁，所有的事件***被移除，所有的子例項也都被銷毀。

該鉤子在伺服器端渲染期間不被呼叫。

生命週期圖示

雙大括號會將資料解釋為普通文字，而非 html **。為了輸出真正的 html，你需要使用 v-html指令

縮寫v-bind縮寫

...... ...

v-on縮寫

...... ...

物件語法

給v-bind:class乙個物件，以動態地切換 class

例：

data: 渲染為：

陣列語法

例：

data: 渲染為：

v-if

v-if指令用於條件性地渲染一塊內容。這塊內容只會在指令的表示式返回 truthy 值的時候被渲染。

v-if v-else-if v-else

v-show

另乙個用於根據條件展示元素的選項是v-show指令

不同的是帶有v-show的元素始終會被渲染並保留在 dom 中。v-show只是簡單地切換元素的 css propertydisplay。

注意，v-show不支援元素，也不支援v-else。

v-if vs v-show

v-if是「真正」的條件渲染，因為它會確保在切換過程中條件塊內的事件***和子元件適當地被銷毀和重建。

v-if也是惰性的：如果在初始渲染時條件為假，則什麼也不做——直到條件第一次變為真時，才會開始渲染條件塊。

相比之下，v-show就簡單得多——不管初始條件是什麼，元素總是會被渲染，並且只是簡單地基於 css 進行切換。

一般來說，v-if有更高的切換開銷，而v-show有更高的初始渲染開銷。因此，如果需要非常頻繁地切換，則使用v-show較好；如果在執行時條件很少改變，則使用v-if較好。

v-if與v-for一起使用

當v-if與v-for一起使用時，v-for具有比v-if更高的優先順序。

用v-for把乙個陣列對應為一組元素

我們可以用v-for指令基於乙個陣列來渲染乙個列表。v-for指令需要使用item in items形式的特殊語法，其中items是源資料陣列，而item則是被迭代的陣列元素的別名。

例：

var example1 = new vue(,
]}})
結果：foo
bar

變更方法

vue 將被偵聽的陣列的變更方法進行了包裹，所以它們也將會觸發檢視更新。這些被包裹過的方法包括：

你可以開啟控制台，然後對前面例子的items陣列嘗試呼叫變更方法。比如example1.items.push()。

替換陣列

變更方法，顧名思義，會變更呼叫了這些方法的原始陣列。相比之下，也有非變更方法，例如filter()、concat()和slice()。它們不會變更原始陣列，而總是返回乙個新陣列。當使用非變更方法時，可以用新陣列替換舊陣列：

事件修飾符

v-on的修飾符

......

表單輸入繫結

v-model指令在表單、及元素上建立雙向資料繫結

slot 插槽

render 渲染函式

二級聯動

**增刪

@change多個聯動效果相互影響

Vue的學習總結

VUE學習總結

學習Vue總結

Vue學習總結

Vue的學習總結

VUE學習總結

學習Vue總結

Vue學習總結

相關推薦