自定義指令

自定義指令的作用

除了內建指令外，vue 也允許註冊自定義指令。有的情況下，你仍然需要對普通 dom 元素進行底層操作，這時候

使用自定義指令更為方便。

自定義指令文件：

註冊與使用自定義指令方式

註冊全域性指令:

// 指令名不要帶 v-

vue.
directive
('指令名',}
)

directives :

}}

3. 使用指令：

引用指令時，指令名前面加上 v-

直接在元素上在使用即可 ： v-指令名='表示式

<

!doctype html>
"en"
>
"utf-8"
>
"viewport" content=
"width=device-width, initial-scale=1.0"
>
"x-ua-compatible" content=
"ie=edge"
>
document<
/title>
<
/head>
>
"message"
>***xx<
/p>
自動獲取焦點："text" v-focus>
<
/div>
>
"msg"
>***xx<
/p>
<
/div>
"./node_modules/vue/dist/vue.js"
>
<
/script>
// 註冊全域性自定義指令，可以在多個vue管理的入口下使用該指令
// 第乙個引數為指令名，但是不要有v-開頭
vue.
directive
('upper-text',,
//一般對js操作在inserted中，inserted也是只呼叫一次
// el是當前指令作用的那個dom元素，
// binding用於獲取使用了當前指令的繫結值(value)、表示式(expression)、指令名(name)等
inserted:
function
(el, binding)})
newvue(,
//註冊區域性自定義指令：只能在當前vue例項管理的入口 下引用這個指令
directives:
,// 重新整理頁面自動獲取焦點
inserted:
function
(el, binding)}}
})newvue(}
)<
/script>
<
/body>
<
/html>

自定義指令

像v if，v show等，是vue已經內建的指令，我們也可以使用directive來自定義指令 其中的blue要被引號所包裹，不然會被識別為變數來進行查詢全域性自定義指令 vue.directive focus vue.directive color var vm new vue 簡寫形式，代表我...

自定義指令

自定義指令有兩種方法 complieprovider.directive 指令名 function return restrict acem replace true,transclude true,template content return restrict acem replace true...

自定義指令

directives.js 存放 自定義標籤 strict require scope link 接收兩個引數 第乙個引數表示自定義指令的名稱 在頁面中使用 分隔單詞，在自定義指令中通過駝峰式命名 第二個引數表示自定義指令處理函式 返回值是乙個物件，用來描述我們自定義指令的 描述自定義指令的物件有一...