2. 程式人生 > >自己寫個vue.js外掛(2):手動掛載子元件

自己寫個vue.js外掛(2):手動掛載子元件

阿新 • • 發佈：2019-01-15

前面我們使用原始的方法寫了一個驗證外掛
1、學會了外掛的建立的方式
2、學會了自定義指令
3、通過自定義指令返回true或false，來控制外部label的顯示和隱藏
（注意：外部的label是我們預先寫好的）

動手寫程式碼

1、先移除user-name.vue 裡顯示錯誤的label，因為我們要手動插入

<label class="label label-danger">使用者不合法</label>

2、先看一下我們外掛validate.js的全部程式碼，然後我們再分析

export default{
    install(Vue){

        Vue.prototype.checkUserName = (value
 
) => {
            if(value == ""){
                return true; // 如果沒有填寫,預設為true
            }

            if(/\w{6,20}/.test(value)){
                return true;
            }else{
                return false;
            }
        }

        Vue.prototype.errorLabel = null;
        Vue.prototype.hasError = false
 
;

        Vue.directive("uname",{
            bind(){
                let errorTpl = Vue.extend({
                    template:'<label class="label label-danger">使用者不合法</label>'
                });
                // 例項化並掛載
                Vue.errorLabel = (new errorTpl()).$mount().$el;
            },
            update(el,binding,vnode){
                if
 
(/\w{6,20}/.test(el.value)){
                    // 驗證通過
                    if (Vue.hasError){
                        el.parentNode.removeChild(Vue.errorLabel);
                        Vue.hasError = !Vue.hasError;
                    }
                }else{
                    // 驗證沒有通過
                    if (!Vue.hasError){
                        el.parentNode.appendChild(Vue.errorLabel);
                        Vue.hasError = ! Vue.hasError;
                    }

                }
            },
        })
    }
}

3、定義了2個prototype

Vue.prototype.errorLabel = null;
Vue.prototype.hasError = false;

errorLabel錯誤提示模板，我們在要bind() 方法中建立，然後掛載到它上面；hasError 是輔助屬性，方便我們用來判斷當前是有錯誤還是沒有錯誤。
4、在update() 方法中，實時監聽使用者的輸入，然後移除/新增 錯誤模板

 update(el,binding,vnode){
     if(/\w{6,20}/.test(el.value)){
         // 驗證通過
         if (Vue.hasError){
             el.parentNode.removeChild(Vue.errorLabel);
             Vue.hasError = !Vue.hasError;
         }
     }else{
         // 驗證沒有通過
         if (!Vue.hasError){
             el.parentNode.appendChild(Vue.errorLabel);
             Vue.hasError = ! Vue.hasError;
         }
     }
 },

5、演示效果如下圖
這裡寫圖片描述

相關推薦

自己寫個vue.js外掛(2):手動掛載子元件

前面我們使用原始的方法寫了一個驗證外掛 1、學會了外掛的建立的方式 2、學會了自定義指令 3、通過自定義指令返回true或false，來控制外部label的顯示和隱藏 （注意：外部的label是我們預先寫好的） 動手寫程式碼 1、先移除use

自己寫個vue.js外掛(1):自定義指令的妙用

寫個外掛 1.在components 目錄下新建一個validate.js： export default{ install(Vue){ Vue.prototype.$myName = "zhagngsan"; } }

自己寫個vue.js外掛(3):外掛裡面包含子元件

前面我們把文字框驗證的錯誤提示部分封裝到了validate.js 外掛中。 還不夠徹底，我們應該把文字框也封裝儘量，弄成子元件的形式。 1.這是使用者名稱文字框，原本是在user-name.vue 元件中的 input type="text" v-unam

Vue原理解析——自己寫個Vue

Vue由於其高效的效能和靈活入門簡單、輕量的特點下變得火熱。在當今前端越來越普遍的使用，今天來剖析一下Vue的深入響應式原理。 tips：轉自我的部落格唐益達部落格，此為原創。轉載請註明出處，原文連結 一、Vue對比其他框架原理 Vue相對於React，Angu

自己寫的vue無限輪播外掛

new Vue({ el:'#app', data:{ originalData:{ img_width:350, img_heig

將自己寫的vue元件整理成外掛，通過vue.use來使用

1，在main.js中引入components import components from './components' Vue.use(components) 2，外掛放到components資料夾中 3，components資料夾新建index.js檔案，註冊外

Vue.js（2.x）之計算屬性

眼睛 猜想 官網文檔 data ctype 小結 isp def 直接 昨天看完大神的文章後，深感慚愧，硬著頭皮繼續看官網文檔，然而這真的沒是沒辦法，介紹的實在有些敷衍： 1）、計算屬性:也不說下computed是計算屬性關鍵詞，vm實例是可以像代理data一樣代理comp

談談我對前端組件化中“組件”的理解，順帶寫個Vue與React的demo

Vue.js（2）- 過濾器

概念：過濾器本質上就是一個函式，可被用作一些常見的文字格式化。 過濾器只可以用在兩個地方：mustache 插值表示式和 v-bind 表示式。 過濾器應該被新增在 JavaScript 表示式的尾部，由“管道”符指示；  全域性過濾器 <div id=

Vue.js 外掛

外掛 外掛通常會為 Vue 新增全域性功能。外掛的範圍沒有限制——一般有下面幾種： 新增全域性方法或者屬性，如: vue-custom-element 新增全域性資源：指令/過濾器/過渡等，如 vue-touch 通過全域性 mixin 方法新

linux下自己寫個軟體

一、首先是建立三個檔案 test_1.c test_2.c test_3.c test_1.c     #include <stdio.h>     #include <stdlib.h>  &n

自己寫個Spring MVC

Spring mvc流程圖： 請求流程： ⑴ 使用者傳送請求至前端控制器DispatcherServlet ⑵ DispatcherServlet收到請求呼叫HandlerMapping處理器對映器。 ⑶ 處理器對映器根據請求url找到具體的處理器，生成處理器

自己寫個 Drools 檔案語法檢查工具——棧的應用之編譯器檢測語法錯誤

Drools 檔案語法檢查 一、背景 當前自己開發的 Android 專案是一個智慧推薦系統，用到 drools 規則引擎，於我來說是一個新知識點，以前都沒聽說過的東東，不過用起來也不算太難，經過一段時間學習，基本掌握。關於 drools 規則引擎的內容，後面再整理JBoss 官網上面有詳細的文件，網上資料也

idea vue.js外掛安裝

Vue.js for IntelliJ IDEA-based IDEs This plugin provides support for Vue.js in IntelliJ IDEA Ultimate, WebStorm, PhpStorm, PyCharm Professional and RubyMi

自己寫個activex控制元件，如何知道他的classid（轉載）

在網頁裡用的時候需要知道他的classid我在程式碼中看到有 const GUID CDECL BASED_CODE _tlid = { 0x89201950, 0x2CAC, 0x4CF7, { 0x99, 0x8, 0x73, 0x38, 0x61, 0x41, 0xEF, 0xD2 }

能不做自己寫個類，也叫java.lang.String

extends ClassLoader { private String fileName; public MyClassLoader(String fileName) { this.fileName = fileName; } protected Clas

2018年最應該關注的11個vue.js元件庫

Vue.js, React and Angular NPM 2017下半年下載情況不同於React和Angular，Vue.js是由Evan You通過人們進行專案資助來維持的一個開源的程式碼庫。你也許會說，這正是為什麼Vue.js很牛的一個重要原因，因為它鼓勵你“寫更高質量的程式碼和更好的文件內容，超出你通

只利用jquery ,自己寫個原生態的 彈框蒙層

ps:記每次不想或者不能去導其他的包,在給別人的專案中新增彈框蒙層. 我對css不是很會用.轉栽個別人的每次好複製. <!doctype html> <html lang="en"> <head> <meta charset="U

PHPstorm如何安裝vue.js外掛

1.什麼是PHPstorm？ 　　PhpStorm是一個輕量級且便捷的PHP IDE，其旨在提高使用者效率，可深刻理解使用者的編碼，提供智慧程式碼補全，快速導航以及即時錯誤檢查。----來自百度百科 　　一句話：PHP程式碼的一個整合開發環境，提高程式開發環境的應用程

Linux下用GCC自己寫個很簡單的小程式

最近研究LINUX，最近又搞了點GCC編譯玩玩，廢話不多，開始切入正題： 1：新建一個檔案 touch h.c 2：給h.c檔案寫程式碼： #include <stdio.h> int main(void) { printf("Hello,WT!"); retur