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答疑栏目进行学习!