vue中自定義指令的使用

2022-06-23 21:09:08 字數 486 閱讀 5733

vue中除了內建的指令(v-show,v-model)還允許我們自定義指令

想要建立自定義指令,就要註冊指令(以輸入框獲取焦點為例)

一、註冊全域性指令:

// 註冊乙個全域性自定義指令 `v-focus`

vue.directive('focus',

})

二、註冊區域性指令:

directives: 

}}

使用也很簡單:直接在元素上面使用v-focus即可:

type="text" v-focus/>

下面再舉乙個自定義指令的小例子:拖拽

拖拽1

拖拽2

使用也很簡單,只用在元素上新增v-drag或者v-drag.limit

"div1" v-drag.limit>div>

"div2" v-drag>div>

Vue 中自定義指令的使用

官網介紹 需求分析 當vue內建的指令滿足不了需求的時候,可以自己定義指令 鉤子函式 2.1 乙個指令定義物件可以提供如下幾個鉤子函式 均為可選 2.2bind只呼叫一次,指令第一次繫結到元素時呼叫。在這裡可以進行一次性的初始化設定。2.3inserted被繫結元素插入父節點時呼叫 僅保證父節點存在...

vue中的指令 自定義指令

之前我們已經了解過了內建指令,這些內建指令可以滿足我們學大部分的需求,但是在某些特殊情況下我們要對dom進行操作,這個時候我們就需要用到自定義智力了。自定義指令只有在註冊之後才能使用,兩種註冊方式 1.全域性註冊,這種定義方式可以在全域性進行使用 第一次引數是指令id,第二個引數是乙個定義物件或函式...

vue中自定義指令

鉤子函式 mounted 鉤子函式 會自動觸發的函式 生命週期 乙個例項從建立到銷毀的整個過程 vue中對元素進行識別 ref 相當於元素的id,可以使用ref為元素設定乙個唯一的標識 編號 type text v model newcar.id ref iidd this.ref s th is ...