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)
}
刚开始学vue框架，公司要求项目打包的时候把服务器的ip地址单独留一个接口，方便后期商家可以自行配置自己的服务器地址。
解决办法：
1、新建一个js文件用于保存服务器的ip地址，将当前ip存入window对象，内容如下：
2、在webpack配置文件中找到plugins选项，配置插件：
3、在index.html文件中以script标签形式引入server.js(保存ip)文件，注意在打包的时候开发环境和生产环境的路径问题：
4、在main.js中将ip添加到vue原型中：Vue.prototype.ip = window.ip
5、最后在需要调用 的地方直接使用this.ip即可。
6、打包之后的目录结构，如果服务器的ip地址发生了变化，可直接修改server.js文件，然后保存。
1. 用style-resource把styl文件暴露到全局2. 外部.styl 文件,如果想导出变量供Vue文件使用,可以使用:export ,但是导出来的结果打印是空obj,需要将xx.styl文件名改为xxx.module.styl。
