You will need the jue
runtime and babel-preset-vue
for transforming Jue JSX:
yarn add jue
yarn add babel-preset-jue --dev
Configure .babelrc
:
{
"presets": ["jue"]
}
In:
const Counter = <Component>
<Data>{function () {
return { count: 0 }
}}</Data>
<Method>{function handleClick() {
this.count++
}}</Method>
<Template>{`
<button @click="handleClick">{{ count }}</button>
`}</Template>
</Component>
Out:
const Counter = {
data() {
return { count: 0 }
},
methods: {
handleClick() {
this.count++
}
},
template: `<button @click="handleClick">{{ count }}</button>`
}
Alternatively, you can use Vue JSX with Jue JSX! For example in render
function:
const Counter = <Component>
<Data>{function () {
return { count: 0 }
}}</Data>
<Method>{function handleClick() {
this.count++
}}</Method>
<Render>{function () {
return <button onClick={this.handleClick}>{this.count}</button>
}}</Render>
</Component>
For methods
and computed
whose value should be an object, you can define its name via function name or component prop:
<Method>{function handleClick() {
this.count++
}}</Method>
Is equivalent to:
<Method name="handleClick">{function () {
this.count++
}}</Method>
- Fork it!
- Create your feature branch:
git checkout -b my-new-feature
- Commit your changes:
git commit -am 'Add some feature'
- Push to the branch:
git push origin my-new-feature
- Submit a pull request :D
jue © egoist, Released under the MIT License.
Authored and maintained by egoist with help from contributors (list).
egoistian.com · GitHub @egoist · Twitter @_egoistlily