自定義指令

2022-05-18 15:42:11 字數 908 閱讀 3137

1.在components目錄下新建乙個validate.js:

export default

}

這就是我們的外掛程式,定義了乙個屬性

2.入口檔案jssrc/index.js加入:

// 引入

import validate from "./../components/validate";

// 使用

vue.use(validate);

3.我們到user-username.vue元件下驗證一下:

mounted(),

瀏覽器訪問登入頁面,成功彈出: 

4.剛剛我們已經學會外掛程式裡定義屬性,馬上來學一下如何定義方法:

export default/.test(value))else}}

}

同樣可以使用該方法:

我們修改user-name.vue元件,來實現文字框驗證:

使用者名稱label>

使用者不合法label>

div>

div>

template>

自定義指令

像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 接收兩個引數 第乙個引數表示自定義指令的名稱 在頁面中使用 分隔單詞,在自定義指令中通過駝峰式命名 第二個引數表示自定義指令處理函式 返回值是乙個物件,用來描述我們自定義指令的 描述自定義指令的物件有一...