当前位置: 首页 > 工具软件 > vue-jekyll > 使用案例 >

vuecli项目怎样使用jsx

韦胜泫
2023-12-01

有时候用jsx写页面可能更灵活,当然在vue中写jsx需要插件的支持

我用了一些官方给出的,感觉不怎么好用,推荐安装这个

安装babel-plugin-transform-vue-jsx插件

GitHub地址

https://github.com/vuejs/jsx/tree/master/packages/babel-plugin-transform-vue-jsx
看文档安装配置吧

这个配置起来更简单方便

然后在vue文件组件里面写

以下就是简单的jsx语法,不熟悉的可以去看看react的一些基础,当然,大多数时候模板也是很好用的

而且vue中的方法自动绑定了this,感觉混用也不错


<script>
export default {
    name: "MyJsx",
    data () {
        return {
            msg: 'hello vue-jsx'
        };
    },
    methods: {
        handleClick () {
            console.log(this);
        }
    },
    render () {
        return (
            <div on-click={this.handleClick}>{this.msg}</div>
        )
    }
};
</script>

 

 类似资料: