- Notifications
You must be signed in to change notification settings - Fork132
babel plugin for vue 2.0 jsx
vuejs/babel-plugin-transform-vue-jsx
Folders and files
| Name | Name | Last commit message | Last commit date | |
|---|---|---|---|---|
Repository files navigation
Note theh function, which is a shorthand for a Vue instance's$createElement method, must be in the scope where the JSX is. Since this method is passed to component render functions as the first argument, in most cases you'd do this:
Vue.component('jsx-example',{render(h){// <-- h must be in scopereturn<divid="foo">bar</div>}})
Starting with version 3.4.0 we automatically injectconst h = this.$createElement in any method and getter (not functions or arrow functions) declared in ES2015 syntax that has JSX so you can drop the(h) parameter.
Vue.component('jsx-example',{render(){// h will be injectedreturn<divid="foo">bar</div>},myMethod:function(){// h will not be injectedreturn<divid="foo">bar</div>},someOtherMethod:()=>{// h will not be injectedreturn<divid="foo">bar</div>}})@ComponentclassAppextendsVue{getcomputed(){// h will be injectedreturn<divid="foo">bar</div>}}
First, Vue 2.0's vnode format is different from React's. The second argument to thecreateElement call is a "data object" that accepts nested objects. Each nested object will be then processed by corresponding modules:
render(h){returnh('div',{// Component propsprops:{msg:'hi',onCustomEvent:this.customEventHandler},// normal HTML attributesattrs:{id:'foo'},// DOM propsdomProps:{innerHTML:'bar'},// Event handlers are nested under "on", though// modifiers such as in v-on:keyup.enter are not// supported. You'll have to manually check the// keyCode in the handler instead.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 propertieskey:'key',ref:'ref',// assign the `ref` is used on elements/components with v-forrefInFor:true,slot:'slot'})}
The equivalent of the above in Vue 2.0 JSX is:
render(h){return(<div// normal attributes or prefix with on props.id="foo"propsOnCustomEvent={this.customEventHandler}// 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 propertiesclass={{foo:true,bar:false}}style={{color:'red',fontSize:'14px'}}key="key"ref="ref"// assign the `ref` is used on elements/components with v-forrefInForslot="slot"></div>)}
If a custom element starts with lowercase, it will be treated as a string id and used to lookup a registered component. If it starts with uppercase, it will be treated as an identifier, which allows you to do:
importTodofrom'./Todo.js'exportdefault{render(h){return<Todo/>// no need to register Todo via components option}}
JSX spread is supported, and this plugin will intelligently merge nested data properties. For example:
constdata={class:['b','c']}constvnode=<divclass="a"{...data}/>
The merged data will be:
{class:['a','b','c']}
Note that almost all built-in Vue directives are not supported when using JSX, the sole exception beingv-show, which can be used with thev-show={value} syntax. In most cases there are obvious programmatic equivalents, for examplev-if is just a ternary expression, andv-for is just anarray.map() expression, etc.
For custom directives, you can use thev-name={value} syntax. However, note that directive arguments and modifiers are not supported using this syntax. There are two workarounds:
Pass everything as an object via
value, e.g.v-name={{ value, modifier: true }}Use the raw vnode directive data format:
constdirectives=[{name:'my-dir',value:123,modifiers:{abc:true}}]return<div{...{ directives}}/>
About
babel plugin for vue 2.0 jsx
Resources
Uh oh!
There was an error while loading.Please reload this page.