Get started with snabbdom CDN
MIT licensed
Snabbdom is a lightweight, fast, and flexible library for building component-based user interfaces.
Tags:- virtual
- dom
- light
- kiss
- performance
Stable version
Copied!
How to start using snabbdom CDN
<!DOCTYPE html>
<html>
<head>
<title>Get started with snabbdom CDN - cdnhub.io</title>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.min.js"></script>
<script src="https://cdn.cdnhub.io/snabbdom/3.6.2/snabbdom.min.js"></script>
<script src="https://cdn.cdnhub.io/snabbdom/3.6.2/snabbdom-compile.min.js"></script>
<style>
#app { font-family: 'Avenir', Helvetica, Arial, sans-serif; text-align: center; }
</style>
</head>
<body>
<div id="app">
<button id="toggle" @click="toggle">Toggle</button>
<template id="template">
<div v-if="show">Hello, World!</div>
</template>
</div>
<script>
const app = new Vue({
el: '#app',
data: {
show: false
},
methods: {
toggle() {
this.show = !this.show;
}
}
});
const template = document.getElementById('template');
const vnode = h('div', {}, [
h('div', { key: 'message' }, 'Hello, World!')
]);
const compiled = compile(template.innerHTML)();
const patch = new Patch();
function render() {
const vnode2 = h('div', {}, [
h('button', { on: { click: app.toggle } }, 'Toggle'),
compiled(app.$data)
]);
patch.apply(vnode, vnode2);
}
render();
setInterval(render, 1000);
</script>
</body>
</html>