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

出于性能/网络原因，我确定更喜欢在字符串模板上使用render方法。

如果您正在编写*.vue个文件并将它们与vue-loader（Webpack）捆绑在一起，那么HTML模板无论如何都会被编译成JavaScript渲染函数，所以实际上并没有从那个意义上来说，这是一种性能问题。

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

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

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

通常人们会选择手动编写渲染函数，如果他们需要做一些特别难以/不可能单独使用HTML模板的东西。

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

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

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

<div class={this.klass}>

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

缺乏文档，加上指南中的措辞给人的印象是JSX不是＆＃34;正确的＆＃34;编写Vue组件的方法。是这样吗？考虑到我不想将编译器与我的应用程序一起发送，这是一种惯用的方法吗？

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

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

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

Vue JSX绑定到类名

问题

次要问题

链接

1 个答案: