关于前端: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 写法记录