Monday | 15 APR 2024
[ previous ]
[ next ]

PetiteVue Cheatsheet

Title:
Date: 2023-01-29
Tags:  cheatsheet

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>