- 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.
Stars
Watchers
Forks
Releases
Packages0
Uh oh!
There was an error while loading.Please reload this page.