自己寫個vue.js外掛(1):自定義指令的妙用
阿新 • • 發佈：2019-02-13
寫個外掛
1.在components 目錄下新建一個validate.js：
export default{
install(Vue){
Vue.prototype.$myName = "zhagngsan";
}
}這就是我們的外掛，定義了一個屬性
2.入口檔案jssrc/index.js 加入：
// 引入
import validate from "./../components/validate";
// 使用
Vue.use(validate);3.我們到user-username.vue 元件下驗證一下:
mounted(){
alert(this.$myName) 瀏覽器訪問登入頁面，成功彈出：
4.剛剛我們已經學會外掛裡定義屬性，馬上來學一下如何定義方法：
export default{
install(Vue){
// Vue.prototype.$myName = "zhagngsan";
Vue.prototype.checkUserName = (value) => {
if(/\w{6,20}/.test(value)){
return true;
}else{
return 同樣可以使用該方法：
if(this.checkUserName("hello")){
alert("ok");
}else{
alert("error");
}5.
我們修改user-name.vue 元件，來實現文字框驗證：
<template>
<div class="form-group">
<label class="col-sm-2 control-label">使用者名稱</label>
<div 
自定義指令
1、validate.js:
export default{
install(Vue){
// Vue.prototype.$myName = "zhagngsan";
Vue.prototype.checkUserName = (value) => {
if(value == ""){
return true; // 如果沒有填寫,預設為true
}
if(/\w{6,20}/.test(value)){
return true;
}else{
return false;
}
}
Vue.directive("uname",{
bind(){
console.log("bind"); // 只會呼叫一次
},
update(el,binding,vnode){
console.log(el);
console.log(binding);
console.log(vnode);
},
})
}
}2、我們自定了一個uname 指令，下面來看一下如何使用的？
<input type="text" v-uname="username" v-model="username" v-on:change="userNameChange" class="form-control" :placeholder="username">
我們在元件的模板裡使用了 v-uname ，並且給綁定了”username”資料。
我們開啟瀏覽器的控制檯：
說明我們定義的指令裡，這個方法執行了：
bind(){
console.log("bind"); // 只會呼叫一次
},3、下面我們來看一下update 裡的東東
update(el,binding,vnode){
console.log(el);
console.log(binding);
console.log(vnode);
}