PetiteVue = import("petite-vue")
<div v-scope="{ count: 0 }">
{{ count }}
<button @click="count++">inc</button>
</div>
(template1, PetiteVue.createApp().mount())
<div v-scope v-effect="fetchData()">
<template v-for="branch in branches">
<input
type="radio"
:id="branch"
:value="branch"
name="branch"
v-model="currentBranch"
/>
<label :for="branch">{{ branch }}</label>
</template>
<p><em>vuejs/vue</em>@{{ currentBranch }}</p>
<ul>
<li v-for="{ html_url, sha, author, commit } in commits">
<a :href="html_url" target="_blank" class="commit">{{ sha.slice(0, 7) }}</a>
- <span class="message">{{ truncate(commit.message) }}</span><br />
by
<span class="author"><a :href="author.html_url" target="_blank">{{ commit.author.name }}</a></span>
at <span class="date">{{ formatDate(commit.author.date) }}</span>
</li>
</ul>
</div>
{
template2;
const { createApp, reactive } = PetiteVue;
const API_URL = `https://api.github.com/repos/vuejs/vue-next/commits?per_page=3&sha=`;
createApp({
branches: ["main", "v2-compat"],
currentBranch: "main",
commits: null,
truncate(v) {
const newline = v.indexOf("\n");
return newline > 0 ? v.slice(0, newline) : v;
},
formatDate(v) {
return v.replace(/T|Z/g, " ");
},
fetchData() {
fetch(`${API_URL}${this.currentBranch}`)
.then((res) => res.json())
.then((data) => {
this.commits = data;
});
}
}).mount();
}
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
