vue jsx 转 html,vue怎么用react的JSX语法？

vue怎么用react的JSX语法？

vue中使用jsx语法，需要用到babel插件，具体的实现步骤如下：

1、安装相关的babel插件npm install\

babel-plugin-syntax-jsx\

babel-plugin-transform-vue-jsx\

babel-helper-vue-jsx-merge-props\

babel-preset-env\

--save-dev

2、.babelrc配置(相关课程推荐：Vue.js教程)

在plugins中添加transform-vue-jsx{

"presets": ["env"],

"plugins": ["transform-vue-jsx"]

}

3、基础示例

转义前

{this.text}

转译后h('div', {

attrs: {

id: 'foo'

}

}, [this.text])

Note：h函数为vue实例的$createElement方法，必须存在于jsx的作用域中，在渲染函数中必须以第一个参数传入，如：render (h) { //

return

bar

}

更多Vue.js相关技术文章，请访问Vue.js答疑栏目进行学习！