@abusix/babel-preset-vue 中文文档教程
babel-preset-vue
所有 Vue 插件的 Babel 预设。
Install
npm install -D babel-preset-vue
CDN: UNPKG
Usage
在你的.babelrc:
{
"presets": ["vue"]
}
你可以切换特定的功能，默认所有功能已启用，例如：
{
"presets": [
["vue", {
"eventModifiers": false
}]
]
}
JSX Features
请注意，目前 babel v7 不提供以下功能，如果需要，您可以禁用它们。
Event modifiers
选项名称：eventModifiers
使用 babel-plugin-jsx-event-modifier 用于添加事件修饰符支持。
示例：
Vue.component('hello-world', {
methods: {
method () {
console.log('clicked')
}
},
render () {
return (
<div>
<a href="/" onClick:prevent={this.method} />
</div>
)
}
})
v-model
选项名称：vModel
使用 babel-plugin-jsx-v -model 用于添加 v-model 支持。
示例：
Vue.component('hello-world', {
data: () => ({
text: 'Hello World!'
}),
render () {
return (
<div>
<input type="text" v-model={this.text} />
{this.text}
</div>
)
}
})
License
麻省理工学院 © EGOIST
babel-preset-vue
Babel preset for all Vue plugins.
Install
npm install -D babel-preset-vue
CDN: UNPKG
Usage
In your .babelrc:
{
"presets": ["vue"]
}
You can toggle specific features, by default all features are enabled, e.g.:
{
"presets": [
["vue", {
"eventModifiers": false
}]
]
}
JSX Features
Note that following features are not available for babel v7 currently, you may disable them if necessary.
Event modifiers
Option name: eventModifiers
Uses babel-plugin-jsx-event-modifier for adding event modifiers support.
Example:
Vue.component('hello-world', {
methods: {
method () {
console.log('clicked')
}
},
render () {
return (
<div>
<a href="/" onClick:prevent={this.method} />
</div>
)
}
})
v-model
Options name: vModel
Uses babel-plugin-jsx-v-model for adding v-model support.
Example:
Vue.component('hello-world', {
data: () => ({
text: 'Hello World!'
}),
render () {
return (
<div>
<input type="text" v-model={this.text} />
{this.text}
</div>
)
}
})
License
MIT © EGOIST
