vue2 0學習筆記(四) vue元件主要指令用法

2021-09-13 22:02:28 字數 1372 閱讀 9246

vue元件主要指令用法:github鏈結 (demo02--持續更新中)
v-text更新元素的 textcontent。如果要更新部分的 textcontent ,需要使用 } 插值。

v-html插入一段html片段

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

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

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

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

v-show 為true 時,元素顯示

v-show false 時,元素不顯示 渲染 但是 display:none;

v-if 為true 時,元素顯示

v-if 為false 時,元素不顯示 dom 不渲染

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

我們用 v-for 指令根據一組陣列的選項列表進行渲染。v-for 指令需要使用 item in items 形式的特殊語法,items 是源資料陣列並且 item 是陣列元素迭代的別名。

建議盡可能在使用 v-for 時提供 key,除非遍歷輸出的 dom 內容非常簡單,或者是刻意依賴預設行為以獲取效能上的提公升。

v-on

v-bind

v-model在表單控制項或者元件上建立雙向繫結。

}
demo02原始碼

預設按鈕

}v-show 為true 時,元素顯示

v-show false 時,元素不顯示 渲染 但是 display:none;可以開啟控制台看見

v-if 為true 時,元素顯示

v-if 為false 時,元素顯示 dom 不渲染

}

Vue2 0入門學習筆記(四) 例項和內建元件

目錄 外部技術引入 例項方法 例項事件 內建元件slot 可以在mounted中引入其他技術,例如jquery mounted function 銷毀重新整理 更改資料 reduce reduceonce off data console.log 執行了reduce this.count conso...

(一)vue2 0學習筆記

官方api位址 引用 body標籤的閉合標籤上面 2.1.0 新增 用法 繫結事件 事件型別由引數指定。表示式可以是乙個方法的名字或乙個內聯語句,如果沒有修飾符也可以省略。用在普通元素上時,只能監聽原生 dom 事件。用在自定義元素元件上時,也可以監聽子元件觸發的自定義事件。在監聽原生 dom 事件...

Vue 2 0學習(四)計算屬性

模板內的表示式常用於簡單的運算,當運算過長或邏輯複雜時,會難以維護。div div 這個表示式包含3個操作,在遇到複雜邏輯時應該使用計算屬性。上面的例子可以用計算屬性進行改寫 div id div vue computed 所有的計算屬性都以函式的形式寫在vue例項內的computed選項內,最終返...