实现：动态编译js的方式有eval和new function
简单例子：
eval：
new function:
显然后者更利于扩展，详细了解区别可以参考链接内容：
https://www.zhihu.com/question/29743491
https://imys.net/20151222/eval-with-new-function.html
要注意使用new Function，在vue环境中直接赋值的方式函数作用域与赋值vue结构对象不同： https://jsfiddle.net/5neLzn1x/
vue压缩后的js可以反编译出来，反编译方法为：
1、在桌面找到自己下载的浏览器软件，点击浏览器图标。
2、在浏览器中随便找个网址登入。
3、在网页上右键鼠标，弹出右键菜单中选择“审查元素”选项（或按F12），弹出开发工具弹框，在弹框中选择“Sources”选项。如下图所示。
4、在左侧网络文件列表中随便找个js文件（如：mt_show_1.8.js文件），点击该文件并查看文件内容。发现文件一行展示证明被压缩过了。
5、找到该文件内容左下角的“{}”标签，找到后并点击该标签。
6、随后左侧会生成一个格式化后的文件（如：mt_show_1.8.js:formatted文件），查看js文件内容，内容展示成正常的格式了。现在就可以读懂里面的代码了。
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)
}
