Vue指令 元件

2022-08-21 14:54:12 字數 1151 閱讀 7495

1.指令

v-cloak 解決插值閃爍問題

v-bind 繫結屬性,簡寫':'

v-on 繫結事件,簡寫'@'

v-show 讓這個元素顯示隱藏(需要來回切換用)

v-if 每次都會刪除建立節點(不需要來回切換用)

v-for 迴圈,加 :key="index"屬性,提高迴圈效能

v-text 相當於之前的innertext

v-html 相當於之前的innerhtml

v-model 雙向資料繫結,適用於表單元素

2.自定義指令

ⅰ、全域性指令(directive )

註冊全域性指令 v-focus, 讓他在頁面載入時,元素獲得焦點:

"

">

"text

" v-focus>

ⅱ、區域性指令(directives )

指令定義函式提供的鉤子函式有bind、inserted、update、componentupdated、unbind

鉤子函式的引數有el、binding、vnode、oldvnode

其中,binding包含的屬性有name、value、oldvalue、expression、arg、modifiers

舉例:註冊區域性的自定義指令 v-focus,讓他在頁面載入時,元素獲得焦點:

"

">

"text

" v-focus>

3.元件

元件分為全域性的元件和區域性元件

一:全域性元件(component)

定義全域性元件 第乙個引數是元件的名稱,第二個引數是元件的配置項

"

">

簡寫2:

"

">

"com2

">

"getmsg

">獲取msg

二、區域性元件(components)

區域性元件寫法:

"

">

"count

">

}"button

" @click="

countup

">++

Vue動態元件與v once指令

動態元件 動態元件會根據is屬性 is屬性的值是元件名 資料的變化動態自動載入不同的元件,下面這段 就是通過動態元件實現了乙個toggle的功能 root type component handleclick change button div vue.component child one vue...

vue 基本指令 元件通訊的方式

逆戰班方長君老師 指令 directive 指令後面跟的都是表示式或者變數 內建指令 vue內部提供的直接使用 自定義指令 實現自定義某些功能的指令 條件渲染 都可以控制乙個元素的顯示或者隱藏 v show 通過樣式 display none v if 直接控制div元素有還是沒有 v else v...

Vue學習筆記 指令和部分元件

vue例項 2 v model 2 v if v else v show 2 v for 3 computed運算資料 3 computed運算資料之排序陣列 4 v text和 v html 4 methods 4 v model和 form 表單的繫結 5 三個修飾符 5 核取方塊中加v mod...