自己寫個vue.js外掛(2):手動掛載子元件
前面我們使用原始的方法寫了一個驗證外掛
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.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