vue.js - Vue JSX 绑定(bind)到类名

Question

我正在使用 Vue + JSX 构建一个简单的 TodoMVC 应用程序，但文档似乎严重缺乏。因此，我正在写下我需要解决的要点，作为对适当项目的 CR 的一部分。迄今为止我读过的唯一文件是 guide ，它根本没有涵盖太多 JSX。我不太了解该框架的工作原理，但出于性能/网络原因，我肯定更喜欢使用 render 方法而不是字符串模板。

问题

在 Vue + JSX 中创建类名绑定(bind)的正确方法是什么？在我的 TodoItem 组件中，创建 class 或 className 属性会使 Babel 抛出一个编译错误，提示 API 已被弃用(并建议我添加几个看似无关的依赖关系)。另外，在数据对象中包含 class 属性似乎没有任何改变。

次要问题

缺少文档，加上wording on the guide给人的印象是 JSX 不是编写 Vue 组件的“正确”方式。是这样吗？如果我不想将编译器与我的应用程序一起发布，那么惯用的方法是什么？

链接

• code on codepan

Answer 1

I sure prefer using the render method over the string templates for performance/network reasons.

如果你正在编写 *.vue 文件并将它们与 vue-loader (Webpack) 捆绑在一起，HTML 模板无论如何都会被编译成 JavaScript 渲染函数，所以从这个意义上说，实际上不存在任何类型的性能问题。

另一方面，如果您使用这样的字符串模板编写 Vue 组件:

new Vue({
  template: '<div>Hello</div>'
})

然后您将需要 Vue 模板编译器在运行时将字符串转换为渲染函数。

通常，如果人们需要做一些单独使用 HTML 模板很难/不可能完成的特定事情，他们会选择手动编写渲染函数。

您可能已经阅读了文档，但为了以防万一，相关部分是:

• Render Functions & JSX
• The Data Object In-Depth
• babel-plugin-transform-vue-jsx Usage

What's the proper way to create a class name binding in Vue + JSX?

您只需像绑定(bind)任何其他属性一样绑定(bind)到 class 属性:

<div class={this.klass}>

data() {
  return {
    klass: 'foo'
  }
}

The lack of documentation, plus the wording on the guide gives the impression JSX is not the "proper" way to write Vue components. Is that so? What's the idiomatic way to do it, given I don't want to ship the compiler along with my app?

JSX 绝对受支持，但不是推荐的方法。推荐的方法是编写 *.vue 文件并使用 vue-loader 加载它们(如果使用 Webpack)。

Vue 有两个版本，一个有模板编译器，一个没有模板编译器。包含编译器的那个仅用于开发，不应用于生产构建(除非您需要字符串模板在运行时呈现函数编译，这是不太可能的)。参见 Explanation of Build Files了解更多信息。

通常您会编写 HTML 字符串模板，然后它们会在构建时通过 vue-loader 编译以呈现功能。