VUE之自定义指令

Posted 2023-04-27

参考技术A 声明自定义指令：

bind:只调用一次，指令第一次绑定到元素时，用这个钩子函数可以定义一个在绑定时执行一次的初始化动作。
inserted：被绑定元素插入父节点时调用（父节点存在即可调用，不必存在与document中）
update：被绑定的元素所在的模板更新时调用，而不论绑定值是否变化。通过比较更新前后的绑定值，可以忽略不必要的模板更新
componentUpdated：被绑定元素所在模板完成一次更新周期时调用。
unbind：只调用一次，指令与元素解绑时调用。
钩子函数参数有：
el：指令所绑定的元素，可以用来直接操作DOM
bindng：一个对象，包含以下属性
1）name：指令名，不包含v-前缀
2）value：指令的绑定值，例如：v-my-directive=“1+1”，value的值就是2
3）oldValue:指令绑定的前一个值，仅在update和componentUpdated钩子中可用，无论值是否改变都可用
4）expression：绑定值的表达式或变量名。例如 v-my-directive="1 + 1" ， expression 的值是 "1 + 1"。
5）arg：传给指令的参数。例如v-my-directive：foo，arg的值是foo
6）modifiers：一个包含修饰符的对象。例如： v-my-directive.foo.bar, 修饰符对象 modifiers 的值是 foo: true, bar: true 。
vnode：vue编译生成的虚拟节点
oldVnode：上一个虚拟节点，仅在update和componentUpdated钩子中可用，

Vue 之自定义编译生成目录名称等

在vue项目根目录下创建vue.config.js文件，如果不是在网站根目录下，设置publicPath。

module.exports = {
    publicPath: ./,
    assetsDir: static,
    outputDir: dist
}