<vue-component :value="value" @click="handleClick" />
<input :value="value" @click="handleClick" />
<vue-component value={this.value} onClick={this.handleClick }/>
<input domPropsValue={this.value} onClick={this.handleClick} />
Notes:
- if the event's name is kebab-case, say,
foo-bar
, useonFoo-bar
- some vue 1.0 compatible/legacy components take also
on-foo-bar
as prop besides@foo-bar
- for native controls, use
domPropsValue
instead ofvalue
(see here) - for modifers, say,
@submit.native
, usenavtiveOnSubmit
, for other possibilities, see here
Might be supported with babel plugin (see here), but you could write in a reactive way:
<vue-component v-model="value" />
<input v-model="value" />
<vue-component value={this.value} onInput={(value) => { this.value = value }}/>
<input domPropsValue={this.value} onInput={(value) => { this.value = value }} />
Attention: the arrow function in onInput
is renewed after each update, it might cause performance issues
<span v-for="foo in bar" :key="foo.label" >
{{ foo.value }}
</span>
{
bar.map(foo => (
<span key={foo.label}>
{ foo.value }
</span>
))
}
Notes:
- if
bar
is an object, useObject.keys(bar)
to getbar
's enumerable keys and then you can iterate over keys. Other possibilities areObject.prototype.values
,Object.prototype.entries
andlodash
'smap
method - in JSX mode, there's no key warning, But using
key
is highly recommended because of Vue's DOM update strategy (Vue tries to reuse DOM nodes, and different keys prevent the reusage).
<span v-if="show">foo</span>
<span v-else>bar</span>
{
this.show
? <span>foo</span>
: <span>bar</span>
}
{
this.show &&
<span>foobar</span>
}
Notes:
- if show is a
Number
,show && ...
will result in displaying a number 0 if it is 0. Use!!show
orBoolean(show)
to turn it intoBoolean
- you don't have to change
v-show
because it is transformed differently, in some cases transformingv-show
might result in unexpected behaviours
The syntax will be the same if you're passing scopes to a component.
<vue-component>
<div>foobar</div>
<div slot="foo">bar</div>
</vue-component>
<vue-component>
<div>foobar</div>
<div slot="foo">bar</div>
</vue-component>
You may also use slots prop:
<vue-component
slots={{
default: () => (<div>foobar</div>),
foo: () => (<div>bar</div>),
}}
/>
For scoped slots, write like this:
<vue-component>
<div slot="foo" scope="props">{{ props.bar }}</div>
</vue-component>
<vue-component
scopedSlots={{
foo: (props) => (<div>{props.bar}</div>),
}}
/>
If you are designing a component that accepts scopes
<div>
<slot name="foo">
</slot>
</div>
<div>
{
this.$slots.foo
}
</div>
You don't have to register a component in components
field, simply use it in a React way.
import FooBar from './foor-bar'
export default {
render() {
return <FooBar />
}
}
You could use class syntax similar to React's thanks to vue-class-component
.
import Vue from 'vue'
import Component from 'vue-class-component'
@Component()
export default class FooBar {
render() {
return <span>foobar</span>
}
}
You may find more detail on vue-class-component
's readme.
To note: the ES decorator spec (@
) is not stable now (as of Aug. 2017) and is likely to change in the future.
<vue-component
{...{
attrs: this.$attrs,
listeners: this.$listeners,
}}
/>