'is-disabled': false
},
attrs: {
name: this.name,
placeholder: this.placeholder,
'aria-invalid': false
}
})
}
}
...
上面的代码做了几件事：
render 方法从Vue获取一个 createElement 助手。
我们以编程方式定义我们的标签。
然后，我们创建标签并将其属性，类等作为对象传递。 我们可以传递给 createElement 的 选项 很多。
我们返回新创建的元素进行渲染。
我们为 Vue 组件定义的每个模板都将转换为可返回 createElement 函数的 render 方法。 因为这个原因， render 方法将优先于模板定义。
举个例子：
// HTML
<div>
<p>Only you can stop forest fires</p>
</div>模板编译器将把上面的 HTML 转换成:
...
render (createElement) {
return createElement(
'div',
{},
createElement(
'p',
{},
'Only you can stop forest fires'
)
)
}
...现在你可能会问这个问题：“对可读性来说这不好吗？” 答案是肯定的。 一旦定义了具有许多元素嵌套级别或具有多个同级元素的组件，我们就会遇到这个新问题。
这就是 JSX 出现的原因，它可以很好的解决此类问题。
JSX 是什么
JSX 是 Facebook 工程团队创造的一个术语。
JSX 是 JavaScript 的类似XML的语法扩展，没有任何定义的语义。
JSX 不打算由引擎或浏览器实现。相反，我们将使用 Babel 之类的转置器将JSX转换成常规的 JS 。
// 此行是JSX的示例
const heading = <h1>Welcome to Scotch</h1>;基本上，JSX 允许我们在 JS 中使用类似 Html 的语法。
配置 Vue 以使用 JSX
如果使用的 Vue-cli 大于或等于 3.0 版本，那么就直接可以使用JSX的语法了。
如果您使用的是不支持 JSX 的Vue-cli较旧版本，则可以通过安装 babel-preset-vue-app 来添加它，并将其添加到您的 .babelrc 文件中。
# Using npm
npm install --save-dev babel-preset-vue-app
# Using yarn
yarn add --dev babel-preset-vue-app在 .babelrc 文件中，添加：
{
"presets": ["vue-app"]}我们现在可以在组件的 render 函数中使用 JSX。
在 Vue 中使用 JSX 需要注意的地方
在 Vue 中使用JSX需要注意几点。
要监听 JSX 中的事件，我们需要 “on” 前缀。 例如，将 onClick 用于单击事件。
render (createElement) {
return (
