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 组件，来实现文本框验证：
<template>
<div class="form-group">
<label class="col-sm-2 control-label">用户名</label>
<div class="col-sm-10">
<input type="text" v-model="username" v-on:change="userNameChange" class="form-control" :placeholder="username">
<label class="label label-danger" v-if="showErrorLabel">用户不合法</label>
</div>
</div>
</template>
<script>
export default{
props:["placeholder"],
data:function () {
return {
username:"",
showErrorLabel:false,
}
},
methods:{
userNameChange(){
// 用户名改变的方法里判断 用户名是否复合要求
if(this.checkUserName(this.username)){
this.showErrorLabel = false// 如果验证没有通过就显示错误提示
}else{
this.showErrorLabel = true
}
// 调用父组件的方法
this.$emit("childChange","username",this.username)
}
}
}
</script>
这里写图片描述
自定义指令
文档：
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)
}
Vue 打包后会生成很多数字开头的 JavaScript 文件，这些文件是由 Webpack 打包工具生成的，它们是 Vue 项目的依赖文件，用来实现 Vue 的功能，比如组件、指令、过滤器等。这些文件不需要手动编辑，只需要在打包时保留即可。
