[vue] JSX

官方文档基本没怎么说,很迷,
可以参考这个babel-plugin-transform-vue-jsx.

还有react的JSX

vnode似乎也需要了解

render (h) {
  return (
    <div
      // normal attributes or component props.
      id="foo"
      // DOM properties are prefixed with `domProps`
      domPropsInnerHTML="bar"
      // event listeners are prefixed with `on` or `nativeOn`
      onClick={this.clickHandler}
      nativeOnClick={this.nativeClickHandler}
      // other special top-level properties
      class={{ foo: true, bar: false }}
      style={{ color: 'red', fontSize: '14px' }}
      key="key"
      ref="ref"
      // assign the `ref` is used on elements/components with v-for
      refInFor
      slot="slot">
    </div>
  )
}

如果用了jsx，那么内置的指令都不会生效 (除了v-show).

自定义指令可以使用v-name={value}语法，如果要支持指令参数和modifier可以用v-name={{ value, modifier: true }}语法.

//vue
class
//react
className

插入 html 代码

// vue
<div domPropsInnerHTML={html} />
// react
<div dangerouslySetInnerHTML={{__html: html}} />

slot 和 children

//vue 中 slot 的用法
    render (h) {
        return (<div>{this.$slots.default}</div>);
    }

//react 中 children 的用法
    return (<div>{props.children}</div>);

<script>
import Vue from 'vue';
Vue.directive('my-bold', {
  inserted: function (el) {
    el.style.fontWeight = 900;
  }
})
export default {
  props: ['clickEvent', 'isShow'],
  data() {
    return {};
  },
  methods: {
    afterLeave() {
      console.log('afterLeave')
    }
  },
  render() {
    //?
    const directives = [
      { name: 'my-dir', value: 123, modifiers: { abc: true } }
    ]
    return (
      <div>
        <transition onAfterLeave={this.afterLeave} name="fade">
          <div class="test" v-show={this.isShow} v-my-bold>
            {this.test}
            {this.isShow + ''}
          </div>
        </transition>
        <button  {...{ directives }} onClick={this.clickEvent}>click</button>
      </div>
    );
  }
}
</script>
<style>
.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.5s;
}
.fade-enter,
.fade-leave-to {
  opacity: 0;
}
</style>