Vue JSX 绑定到类名

Question

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

问题

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

次要问题

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

链接

• code on codepan

Answer 1

出于性能/网络原因，我肯定更喜欢使用渲染方法而不是字符串模板。

如果您正在编写 *.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

在 Vue + JSX 中创建类名绑定的正确方法是什么？

您只需像绑定任何其他属性一样绑定到class 属性：

<div class={this.klass}>

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

缺乏文档，加上指南中的措辞给人的印象是 JSX 不是编写 Vue 组件的“正确”方式。是这样吗？鉴于我不想将编译器与我的应用程序一起提供，那么惯用的方法是什么？

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

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

通常您编写 HTML 字符串模板，然后在构建时编译它们以呈现函数（vue-loader）。