使用没有特定领域语言的 vuejs 作为指令答案

【问题标题】：Using vuejs without the domain specific language for the directives使用没有特定领域语言的 vuejs 作为指令
【发布时间】：2018-07-22 16:44:27
【问题描述】：

我目前正在评估 vuejs，我非常喜欢它，除了在 html 模板中使用用于指令的领域特定语言。是否（至少理论上）可以在没有 dns 的情况下使用 vuejs 并在 javascript 中以编程方式指定指令中的信息？

例子：

有没有办法在 JavaScript 中单独指定 <a v-on:click="doSomething">...</a> 之类的模板而不需要指令和指令？

【问题讨论】：

当然，您可以使用 DOM 模板技术来做到这一点。但它有其警告，通常不鼓励用于更多或更少的高级项目。检查this article for details。
你为什么要这样做。您基本上是在使用纯 JavaScript 事件和函数式编程来创建列表等。
您也可以将 JSX 与 Vue 结合使用。如果你完全不喜欢模板，你可以自己编写渲染函数。
你可能有很好的理由提出这样的问题，但如果你没有太多使用 vue 指令（或其他 js 框架的指令）的经验，你应该自己做一个玩具项目并在决定反对指令之前获得一些指令经验。它们具有巨大的优势，并且在某种意义上可以以高度可读且功能强大的方式扩展 html 语言。
我确实了解嵌入在模板中的指令的优点，并且我还计划在一个综合示例项目中评估 vuejs。我的问题的原因是关于框架的一般可能性，并且（至少对我而言）使用编程 JavaScript API 作为声明性指令的替代品的可能性似乎很有用，例如，如果我可能想在没有的情况下更改指令必须更改模板本身。

标签： javascript vue.js vuejs2 vue-directives

【解决方案1】：

从 Vue 2.0 开始，有 support 用于在 vue 组件中使用 JSX。

如果你想完全避免任何 DSL，你可以直接使用 babel-plugin-transform-vue-jsx（Vue 的 JSX 转换插件）所针对的 API。

来自链接帖子的示例：

new Vue({
  el: '#app',
  data: {
    msg: 'Click to see the message'
  },
  methods: {
    hello () {
      alert('This is the message')
    }
  },
  render (createElement) {
    return createElement(
      'span',
      {
        class: { 'my-class': true },
        style: { cursor: 'pointer' },
        on: {
          click: this.hello
        }
      },
      [ this.msg ]
    );
  },
});

【讨论】：

在我看来，JSX 实际上只是一种不同类型的 DSL，但我知道它对 vuejs 中基于模板的方法提供了更多的过程控制。
是的。但基本上你实际上不必使用 JSX。您可以只使用它使用的 API，而无需使用标准 javascript 语法糖。
我理解并将对其进行更深入的研究。尽管如此，如果需要或需要命令式定义，您是否同意使用渲染函数最有可能？
我认为 UI 应该几乎总是以声明方式定义，并且组件（和渲染函数）仍然更好，因为它们不会分离通常紧密耦合的 DOM/内部组件层次结构和行为。
不过我不怎么用 Vue。

【解决方案2】：

您的问题的简短回答是“否”，没有（好的）方法可以使用模板并以编程方式对其应用指令。你最终会为指令系统编写自己的替代品。

你没有解释你不喜欢指令的什么地方，但由于它们是 Vue 中模板概念的核心，我不确定说你喜欢 Vue 除了它们是否有意义。

模板的作用是描述应用程序的外观和行为，以视图模型的形式，这是一个API。 viewmodel 代码提供了 API 的实现。在不改变模板的情况下改变行为的愿望似乎武断且毫无意义，或者至少误解了模板的目的。降低模板的表达性意味着它更难理解：任何东西都可以绑定到任何东西，如果不查看实现代码，您将不会知道。

【讨论】：

我确实理解您的观点，并看到了声明性方法的优势。我的问题旨在更好地理解程序方法是否可行以及选项是什么。我的动态更改模板的示例不是最好的示例，但一般来说，以声明性方式表达的内容总是有限制的，这就是我想说的。
请参阅 Render functions 了解“您确实需要 JavaScript 的全部编程能力”的情况。
我只是在更新我的问题并得出了相同的结论。谢谢！

【解决方案3】：

通过进一步挖掘 vuejs 文档，我似乎找到了我一直在寻找的东西。

在 vuejs 2 中，框架引入了 render 函数，允许从声明式（模板/指令）切换到组件的命令式 (JavaScript) 定义。

如果我做对了，并且在 vuejs 中使用渲染函数没有重大缺点，这就是我正在寻找的。p>

【讨论】：