每年培训输出1000+合格IT工程师
培训影响全国各大知名IT企业和部门

Vue中使用jsx来创建视图

Vue中使用jsx来创建视图

1、需要安装的babel模块

npm install  @babel/core babel-loader 

2、需要安装vue的jsx插件

参考文档: https://github.com/vuejs/jsx#installation
npm install @vue/babel-preset-jsx @vue/babel-helper-vue-jsx-merge-props

3、配置webpack.config文件

const path = require("path")
const {VueLoaderPlugin} = require("vue-loader")


module.exports = {
    mode: "development",
    entry: {
        app: path.resolve(__dirname, "main.js")
    },
    output: {
        filename: "[name].bundle.js",
        path: path.resolve(__dirname)
    },
    resolve: {
        extensions: [".css", ".js", ".vue", ".jsx"]
    },
    module: {
        rules: [
            {
                test: /\.vue$/,
                loader: "vue-loader"
            },
            {
                test:/\.js$/,
                loader:"babel-loader",
                query: {
                    "presets": ["@vue/babel-preset-jsx"]
                }
            },
            {
                test:/\.css$/,
                loader:"style-loader!css-loader"
            }
        ]
    },
    plugins: [
        new VueLoaderPlugin()
    ]
}

4、接下来,我们创建 App.vue

<script>
    export default {
        name: "App",
        data() {
            return {
                title: "hello app!"
            }
        },
        render() {
            return <div class="title">
                <input vModel={this.title}/>
                <h1 vOn:click={this.show}>{this.title}</h1>
            </div>
        },
        methods: {
            show() {
                alert(1)
            }
        }
    }
</script>

<style scoped>
    .title {
        color: red;
    }
</style>

5、创建main.js

import Vue from "vue"
import App from "./App"


new Vue({
    el:"#app",
    render(){
        return <App/>
    }
})
赞(1) 打赏
未经允许不得转载:徐礼文的技术博客 » Vue中使用jsx来创建视图
分享到: 更多 (0)

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏