PetiteVue quickstart!
Download:
curl "https://unpkg.com/petite-vue@0.4.1/dist/petite-vue.es.js?module" > petite-vue.es.js
Init:
<!DOCTYPE html>
<script type="module">
import { createApp } from '/js/petite-vue.es.js'
createApp({
name: "Nivethan",
}).mount("#app");
</script>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Project</title>
<link rel="icon" href="data:;base64,=">
</head>
<body>
<div id="app">
<h1>Hello, {{ name }}!</h1>
</div>
</body>
</html>
<style>
</style>
Input binding:
<input type="text" v-model="searchString">
Looping:
<div v-for="(item, i) in workers">{{ i }} - {{ item }}</div>
Conditionals:
<div v-if="array.length ===0">Array is 0</div>
<div v-else>Array has contents</div>
Clicks - someFunc is defined inside the application:
<div @click="someFunc"></div>
Keypress - search is defined inside the application:
<input type="text" v-model="searchString" v-on:keyup.enter="search">
Lifecycle Events - mounted is defined inside the application:
<div id="app" @vue:mounted="mounted"></div>
Adding styles and classes:
<div :style="{'background-image': 'url('+banner+')'}"></div>
<div :class="{'active': true}"></div>