vue2 jsx 语法

官网：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写法记录