Vue中jsx的最简单用法

前端  /  管理员 发布于 6年前   265

什么是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>