API Reference
Functions
| Function |
Description |
ref(value) |
Reactive box around any value (objects/arrays use reactive() internally) |
reactive(object) |
Deep reactive proxy for objects/arrays |
computed(getter) |
Cached computed value |
watchEffect(fn, opts?) |
Auto-tracking reactive effect |
createApp(setup) |
Create app with .mount(), .unmount(), .use(), .component() |
nextTick(fn) |
Execute after DOM update |
onHook(name, fn) |
Register lifecycle hook |
Directives
| Directive |
Example |
{{ expr }} |
<p>{{ message }}</p> |
v-pre |
<code v-pre>{{ literal }}</code> |
v-if / v-else-if / v-else |
<div v-if="show">Text</div> |
v-for |
<li v-for="item in items" :key="item.id"> |
v-model |
<input v-model="value" /> |
v-show |
<div v-show="visible"> |
v-text |
<p v-text="msg"></p> |
v-html (plugin) |
<div v-html="raw"> — requires HtmlPlugin |
@event / v-on:event |
<button @click="handler">, <button @click.prevent.stop="h"> |
:attr / v-bind:attr |
<img :src="url" /> |
:class |
<div :class="{ active: isActive }">, <div :class="[base, { active }]"> |
:style |
<div :style="{ color: c }"> |
App Instance
| Method |
Description |
.mount(selector | element) |
Compile and attach the app to a root DOM node |
.unmount() |
Clean up all effects and listeners |
.use(plugin, options?) |
Install a plugin |
.component(name, { template, setup? }) |
Register a reusable component under a tag name |
Hooks
| Hook |
When it fires |
beforeCompile |
Before an element is compiled |
afterCompile |
After an element and its subtree are compiled |
onError |
When a compile-time or runtime error is reported (e.g. an unregistered directive, or the v-if + v-for combo) |
TypeScript
ref, reactive, computed, and createApp all carry proper generic
signatures via declaration files generated from source - editors get real
autocomplete without any hand-written type definitions.
Wrium