带有对象文字的字面量自定义指令

Vue.js是一个用于开发 Web 用户界面的渐进式 JavaScript 框架。它是一个高性能、平易近人且通用的框架。我们可以创建单页应用程序以及全栈应用程序。它建立在 HTML、CSS 和 Javascript 之上，这使得开发人员可以更轻松地在任何阶段将 Vue.js 集成到任何应用程序中。

自定义指令允许开发人员在元素上轻松创建和使用一些自定义函数。就像 v-model、v-for、v-if 等内置指令一样，我们可以根据我们设置的内容创建自己的指令。它允许通过访问较低级别的 DOM 来重用某些逻辑。我们还可以将数据传递给自定义指令。

带有对象文字的字面量自定义指令允许我们将多个值作为 JSON 对象传递给指令。在绑定值中，我们将按名称接收值。

语法：将多个值作为对象字面量传递给指令，如下所示：

示例：在下面的示例中，我们有一个指令来设置 div 容器的样式并设置输入的样式。我们已经提供了我们可能会或可能不会根据您的选择使用的字段。这提供了一种将样式应用于我们的元素的简单方法，并且可以进一步扩展。

第 1 步：使用以下命令使用 npm node.js 包管理器创建一个新的 Vue.js 项目。

npm init vue@latest

输入项目名称并预设项目如下：

项目结构：安装成功后，会形成如下的项目结构。

项目结构

第 3 步：在 App.vue 文件的脚本部分，创建一个自定义指令并将其命名为 decorate。在已安装部分和更新部分中，添加元素和绑定字段。现在相应地修改这些值。在本教程中，我们将修改边框半径、颜色、背景颜色和占位符文本。最后，导出指令。

第 4 步：在 App.vue 文件的模板部分，添加一个 input 和 div 元素，并根据需要添加值。

这是完整的代码。

应用程序.vue

const decorate = {
  mounted: (el, binding) => {
    el.style.borderRadius = binding.value.borderRadius;
    el.style.backgroundColor = binding.value.backgroundColor;
    el.style.margin = binding.value.margin;
    el.placeholder = binding.value.placeholder;
    el.style.color = binding.value.color;
  },
  updated: (el, binding) => {
    el.style.borderRadius = binding.value.borderRadius;
    el.style.backgroundColor = binding.value.backgroundColor;
    el.style.margin = binding.value.margin;
    el.placeholder = binding.value.placeholder;
    el.style.color = binding.value.color;
  },
};
export default {
  directives: {
    decorate,
  },
};

第 5 步：使用以下命令运行项目并查看输出。

npm run dev

输出：成功构建项目后，打开http://localhost:3000 ，结果如下。

参考： https ://vuejs.org/guide/reusability/custom-directives.html#object-literals