交互式爱情
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 false; } } } } 同使用该: if(this.checkUserName("hello")){ alert("ok"); }else{ alert("error"); } 5. 写图片描述 我修改user-name.vue 组件实现文本框验证: 用户名 用户合 写图片描述 自定义指令 文档: 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 指令面看何使用 我组件模板使用 v-uname 并且给绑定username数据 我打浏览器控制台: 写图片描述 说明我定义指令执行: bind(){ console.log("bind"); // 调用 }, 3、面我看update 东东 update(el,binding,vnode){ console.log(el); console.log(binding); console.log(vnode); }