Vue中jsx的最简单用法

什么是JSX?

JSX就是Javascript和XML结合的一种格式。React发明了JSX，利用HTML语法来创建虚拟DOM。当遇到<，JSX就当HTML解析，遇到{就当JavaScript解析.

我为什么要在vue中用JSX?

最开始是因为近期在学习react,在里面体验了一把jsx语法,发现也并没有别人说的很难受的感觉啊,于是就想尝试在vue中也试下,Vue 推荐在绝大多数情况下使用 template 来创建你的 HTML。然而在一些场景中，你真的需要 JavaScript 的完全编程的能力，就需要使用 render 函数，它比 template 更接近编译器。

Vue中jsx的用法

最终页面显示效果为

<div class="open-service" style="color: #0199f0; cursor: pointer;">
    hello
    <p>world</p>
</div>

主页面

parent.vue

<template>
  <div class="hello">
    <vue-test :typeSpan="typeSpan"></vue-test>
  </div>
</template>

<script type="text/jsx">
  import VueTest from "./jsx/VueTest";
export default {
  name: 'HelloWorld',
  components:{
    VueTest,
  },
  computed:{
    typeSpan(){
      return {
        text:'hello',
        attrs:{
          class:"open-service",
          style:'color:#0199f0;cursor:pointer'
        },

      }
    }
  },
}
</script>

子页面child.vue有两种方法

第一种

<script type="text/jsx">
export default {
    props: {
        typeSpan:{
            type:Object,
            default:{}
        }
    },
    created(){

    },
    methods:{
        openContactService(){
            alert(1)
        },
    },
    render(createElement) {
        return(
            <div
                class={this.typeSpan.attrs.class}
                style={this.typeSpan.attrs.style}
                onClick={this.openContactService}>
                {this.typeSpan.text}
              <p >world</p>
            </div>
        )
    }
}
</script>

第二种

<script type="text/jsx">
export default  {
    props:{
        typeSpan:{
            type:Object,
            default:{}
        }
    },
    methods:{
        openContactService(){
          alert(1)
      }
    },
   render(createElement, context) {
        return createElement(
            'div',{
                class:this.typeSpan.attrs.class,
                style:this.typeSpan.attrs.style,
                on:{
                    click:this.openContactService
                }
            },[
                this.typeSpan.text,
                createElement('p','world'),
            ]

        )
   }
}
</script>

本文内容仅供个人学习、研究或参考使用，不构成任何形式的决策建议、专业指导或法律依据。未经授权，禁止任何单位或个人以商业售卖、虚假宣传、侵权传播等非学习研究目的使用本文内容。如需分享或转载，请保留原文来源信息，不得篡改、删减内容或侵犯相关权益。感谢您的理解与支持！

链接: https://shenqiku.cn/article/FLY_4682