万象更新 Html5 - vue.js: vue 指令(自定义指令)
示例如下:
vue\directive\vcustom.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vue 指令(自定义指令)</title>
<script src="../../node_modules/vue/dist/vue.global.js"></script>
</head>
<body>
<div id="root">
<!--使用自定义指令-->
<div v-webabcd="128">自定义指令</div>
</div>
<script>
var app = Vue.createApp({});
// 定义一个自定义指令(注:定义的名称不包括 v- 前缀)
// el - 指定绑定的元素
// binding - 一个对象
// name - 指令名,不包括 v- 前缀
// value - 指令的绑定值(比如 v-webabcd="1 + 1" 其 value 为 2)
// expression - 指令的表达式,字符串类型(比如 v-webabcd="1 + 1" 其 expression 为 "1 + 1")
// arg - 指令的参数(比如 v-webabcd:abc 其 arg 为 "abc")
// modifiers - 指令的修饰符对象(比如 v-webabcd.x.y 其 modifiers 为 { x: true, y true })
app.directive('webabcd', function (el, binding) {
el.style.fontSize = binding.value + "px";
});
var vm = app.mount('#root');
</script>
</body>
</html>
标签:vue,自定义,万象更新,webabcd,指令,Html5 From: https://www.cnblogs.com/webabcd/p/18428758/html5_vue_directive_vcustom