官网：https://github.com/vuejs/jsx#installation

v-mode

<template>   <el-input v-model.trim="inputValue"/></template>
// 形式1：export default {render(){           return(                  <el-input vModel_trim={inputValue}/>          )    }}// 形式2：export default {       render(){                return(      <el-input           value={this.inputValue}          onInput={val => this.inputValue = val.trim()}/>   )       ｝｝

v-if

<template>    <div v-if="user.age > 18">      Welcome, {{user.name}}    </div></template>
export default { methods: {        checkStatement(){     if (this.user.age > 18) {                      return <div> Welcome, { this.user.name }</div>;     }       }    },    render(){         return(                {this.checkStatement()}             )      }}

v-for

<template> <div v-for="item in items" :key="item.id">     {{ item }}  </div></template>
render(){ return( {  this.items.map(item => {   return (  <div> {item} </div>)  })}

v-on 事件绑定

<template> <button v-on:click="handleButtonClick()"> click me</button></template><script>export default { methods: {   handleButtonClick(e){     e.preventDefault();     alert('button clicked')   } },  }</script>
export default { methods: {  handleButtonClick(){            e.preventDefault();          alert('button clicked')  } },   render(){    return(     <div>      // 不传值       <button onClick={this.handleButtonClick}> click me</button>      // 须要传值      <button onClick={this.re.bind(this, args)}> click me</button>     // 须要传值       <button {...onClick: {this.re.bind(this, args)}}> click me</button>     </div>    ) }}

事件绑定修饰符: 修饰符须要本人在代码中实现。或者能够应用修饰符简写，对照官网的语法, jsx写法为

<template> <button v-on:click.stop="handleButtonClick()"> click me</button></template><script>export default { methods: {  handleButtonClick(e){    e.preventDefault();    alert('button clicked') } },  }</script>
export default { const handleButtonClick =   function(){        e.preventDefault();      alert('button clicked') } render(){  return(   <input {...{      on: {       '!click': () => this.doThisInCapturingMode,        '~keyup': () => this.doThisOnce,          '~!mouseover': () => this.doThisOnceInCapturingMode   }}} />  ) }}

v-html

<template> <div v-html="rawHtml"> </div></template><script> export default { data () {  return {        rawHtml: "<h1> This is some HTML </h1>",      } }}</script>
 export default { data(){  return{   rawHtml: "<h1> This is some HTML </h1>",  } },   render(){  return(   <div>    <div domPropsInnerHTML={this.rawHtml}> </div>   </div>  ) }}

引入组件

<template>   <div>    <NewComponent/>  </div></template><script>import NewComponent from "NewComponent.vue";export default {  components:{           NewComponent,  },}</script>
import NewComponent from 'NewComponent.vue'render(){  return(     <div> <NewComponent/></div>    )}

props传值

// 父组件<template>   <childCompents  :diunilaomu="445646">   </childCompents></template>// 子组件<template>   <div>  {{diunilaomu}} </div></template><script>export default { props:{  diunilaomu:{   type: Number,   default: 0  } }}</script>
render(){ return(    <childCompents  diunilaomu="2131231"><button>  )}

高阶组件中的v-on="$listeners"和v-bind="$attrs"

<template>   <div v-bind="$attrs" v-on="$listeners">   </div></template>
const data = { props: {             ...$attrs,             otherProp: value,  }, on: {              ...$listeners,           click() {     }, }}render(){ return(    <button { ...data }><button>  )}

slot写法

默认插槽模板写法

<template>  <button>  <slot></slot></button></template>
 ....  render(){ return( <button>    {this.$scopedSlots.default()}</button> )}

具名插槽模板写法

<template>   <button>      <slot name="before"></slot>  <slot></slot> </button></template>
 render(){    let before = '';if (this.$scopedSlots.before) {          before = this.$scopedSlots.before(props => props.text);}return( <button>     { before } {this.$scopedSlots.default()}</button>  )}

作用域插槽模板写法1

<template>  <button>     <div slot="file" slot-scope="{file}">  ----做点啥--- </div></button></template>
render(){    const slotScope = {          scopedSlots: {             file: (props = {}) => {       // 这个值就是file        props.file    },  },    }; return( <button  scopedSlots={scopedSlots}>   </button> )}

指令

作用域插槽实例: 饿了么table template 如何转换成jsx
<template>    <div v-qq>  </div></template>
import NewComponent from 'NewComponent.vue'render(){  const directives = [  { name: 'my-dir', value: 123, modifiers: { abc: true } }]  return(   <div directives ={directives }/>   ) }

参考资料

  • Vue中应用JSX
  • vue的jsx写法记录
  • 优雅应用el-table组件
  • vue的jsx写法记录