在vue安装jsx依赖包实现支持jsx语法
1、首先安装依赖:npm install postcss-loader autoprefixer babel-loader babel-core2、在 .babelrc文件中修改:把"presets": ["env", "stage-2"],"plugins": ["transform-vue-jsx&quo
·
1、首先安装依赖:
npm install postcss-loader autoprefixer babel-loader babel-core
2、在 .babelrc文件中修改:
把
"presets": ["env", "stage-2"],
"plugins": ["transform-vue-jsx", "transform-es2015-modules-commonjs", "dynamic-import-node"]
替换为:
"presets": ["es2015"],
"plugins": ["transform-vue-jsx"]
如下图:
然后在代码render函数中就可以这样写了 注意:render函数的参数 createElement 要用 h代替,一定要是h,要不就会报错的,这是jsx语法规定的写法
render: function (h) {
// return createElement('h1',{
// class: 'myClass',
// attrs:{
// id:'123',
// class:'myClass'
// },
// // domProps: {
// // innerHTML: this.title
// // },
// on:{
// }
// }, [
// createElement('p',{
// attrs:{class:'myP'}
// },'我是p节点'),
// createElement('a',{
// attrs:{class:'myA'}
// },'我是创建的a节点'),
// createElement('br',''),
// createElement('i',{
// attrs:{class:'myI'},
// on:{
// click:this.myClick
// }
// },'我是i节点'),
// createElement('br',''),
// this.$slots.default
// ])
return (
<div class='myRender'>
<h1>我是render渲染出来的东西</h1>
</div>
)
更多推荐
已为社区贡献2条内容
所有评论(0)