长春制作网站哪家好,怎么做试玩平台推广网站,钓鱼网站网址,可以查各种资料的appvue3中可以像下面这样使用自定义指令。 这里我们只是定义了一个vFoucs变量#xff0c;vue怎么知道这是一个指令呢#xff1f;
这是因为约定大于配置#xff0c;vue3中有这样一个约定#xff08;截图来自官方文档#xff09;#xff1a; 注意这里说的是驼峰命令#x…vue3中可以像下面这样使用自定义指令。 这里我们只是定义了一个vFoucs变量vue怎么知道这是一个指令呢
这是因为约定大于配置vue3中有这样一个约定截图来自官方文档 注意这里说的是驼峰命令如果是vfocus那么vue并不会把它当成自定义指令。
这里还有一个隐藏的细节就是vue只是约定了变量的名字而没有约定变量的内容。换句话说vue并不会检查变量值是否符合一个指令的必要条件只要这个变量满足 v 开头的驼峰式命名就会把他当成一个自定义指令比如
const vFocus 1
const vFocus 2;
const vFocus {}上面这几种形式都会被当成自定义指令来注册只是它不是一个完整的实现因此使用的时候没有任何效果但也不会报错。
所以为了尽量避免混淆我们应该尽量避免给非自定义指令的变量使用 v 开头的驼峰式命名。
此外我们应该注意到自定义指令本质上就是一个js对象因此我们完全可以将其独立到一个js文件中管理。
比如我们可以用一个单独的js文件定义一个大指令。
// vFocus.js
export default {mounted: (el) el.focus()
}使用的时候只需要把它import进来就可以了
script setup
import vFocus from ./vFocus
/scripttemplateinput v-focus /
/template或者你可以用一个js文件统一管理多个指令。
// directives.js
const vFocus {mounted: (el) { el.focus();}
}const vDefaultValue {mounted: (el) { el.value 123}}export {vFocus, vDefaultValue}使用时像下面这样引入
script setup
import { vFocus, vDefaultValue} from ./directives.js
/scripttemplateinput v-focus v-defaultValue /
/template注意由于自定义指令就是一个js对象所以定义的时候不必使用vXXX这种命名只要导入的时候确保vXXX这种命名即可。
比如
// directives.js
const focus {mounted: (el) { el.focus();}
}const defaultValue {mounted: (el) { el.value 123}}export {focus, defaultValue}使用时像下面这样引入
script setup
import { focus as vFocus, defaultValues as vDefaultValue} from ./directives.js
/scripttemplateinput v-focus v-defaultValue /
/template
