关于vue组件jsx语法的使用介绍

npm install\
 babel-plugin-syntax-jsx\
 babel-plugin-transform-vue-jsx\
 babel-helper-vue-jsx-merge-props\
 babel-preset-env\
 --save-dev

{
 "presets": ["env"],
 "plugins": ["transform-vue-jsx"]
}

{this.text}

h('p', {
 attrs: {
  id: 'foo'
 }
}, [this.text])

render (h) { // <-- h 函数必须在作用域内
 return 
bar
}

Vue.component('jsx-example', {
 render () { // h 会自动注入
  return 
bar
 },
 myMethod: function () { // h 不会注入
  return 
bar
 },
 someOtherMethod: () => { // h 不会注入
  return 
bar
 }
})

@Component
class App extends Vue {
 get computed () { // h 会自动注入
  return 
bar
 }
}

render (h) {
 return h('p', {
  // 组件props
  props: {
   msg: 'hi'
  },
  // 原生HTML属性
  attrs: {
   id: 'foo'
  },
  // DOM props
  domProps: {
   innerHTML: 'bar'
  },
  // 事件是嵌套在`on`下面的，所以将不支持修饰符，如：`v-on:keyup.enter`，只能在代码中手动判断keyCode
  on: {
   click: this.clickHandler
  },
  // For components only. Allows you to listen to
  // native events, rather than events emitted from
  // the component using vm.$emit.
  nativeOn: {
   click: this.nativeClickHandler
  },
  // class is a special module, same API as `v-bind:class`
  class: {
   foo: true,
   bar: false
  },
  // style is also same as `v-bind:style`
  style: {
   color: 'red',
   fontSize: '14px'
  },
  // other special top-level properties
  key: 'key',
  ref: 'ref',
  // assign the `ref` is used on elements/components with v-for
  refInFor: true,
  slot: 'slot'
 })
}

render (h) {
 return (
  

  
 )
}

const data = {
 class: ['b', 'c']
}
const vnode = 

{ class: ['a', 'b', 'c'] }

const directives = [
 { name: 'my-dir', value: 123, modifiers: { abc: true } }
]

return