vue-jsx

vue-jsx

目标

简化 vue createElement 写法，从而可以手写 render vnode。

安装

npm install --save vue-jsx

使用

import jsx from 'vue-jsx'

const HelloWorld = {
  props: {
    msg: String,
  },
  render (h) {
    jsx.use(h)
    
    return jsx.create('div', {
      style_color:'red', 
      classes: 'hello world',
    }, this.msg)
  }
}

Api

1、jsx.use
  描述：指定依赖的 vue h
  用法：jsx.use(h)

2、jsx.create
  描述：创建 vnode 节点
  用法：
    jsx.create('div')

    // class 的简写模式
    jsx.create('div.hello + world')
    
    jsx.create('div', {
      // vif，就是 v-if
      vif: false,

      // vmodel，就是 v-model
      // 最多支持4个参数，vmodel: [this, 'val' ,'modelProp', 'modelEvent']
      vmodel: [this, 'val'],

      classes: 'hello world',
      class_hello: true,
      style_color: 'red',
      attrs_id: 'my_id',
      props_msg: 'hello, world',
      domProps_value: 'input value',
      on_click () {},
      nativeOn_click () {},
    })

    jsx.create('div', {style_color:'red'}, 'nihao', 'nihao2')

3、jsx.bind
  描述：构建快捷方式
  用法：
    const div = jsx.bind('div')
    const HelloWorld = jsx.bind('hello-world')

    const App = {
      render (h) {
        jsx.use(h)

        return div({style_color:'red'}, 
          HelloWorld()
        )
      }
    }
  备注：实际上 jsx 内置 bind 了大部分常用 dom 元素，比如 a,b,button,dd,div,dl,dt,em,form,i,iframe,img,input,textarea,label,li,ol,optgroup,option,p,select,span,table,th,thead,tbody,tr,td,col,colgroup,ul,h1,h2,h3,h4,h5,h6

演示

import jsx from 'vue-jsx'

const {div, h2, p, span, img} = jsx

const HelloWord = {
  props: {
    data: Array,
  },
  render (h) {
    jsx.use(h)

    return div('.hello-world'
      h2('hello-world-title'),
      div('.hello-world-list'
        ...this.data.map(item => {
          return div('.hello-world-item',
            img({attrs_src: item.imgSrc}),
            p(item.content),
          )
        })
      )
    )
  }
}