Vue 3 Cheat Sheet

Ako začať

VUE CLI
Vytvorenie noveho projectu cez Vue Cli

npm install -g @vue/cli
The CLI (@vue/cli) is a globally installed npm package and provides the vue command in your terminal. 
(prida vue prikazy pre prikazovy riadok )

vue create "nazov projektu"

Projekt cez pridanie linku

<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>

<div id="app">  

const app = Vue.createApp({
    data() {
        return {
            message: 'Vue',
            filter:'',
            value: 20,
            newDude: '',
            show:true,
            pole: ['pole1', 'pole2', 'pole3'],
        }
    },
    methods: {
        add() {
            this.pole.push(
                this.newDude
            )
        },
        remove(dude) {
            this.pole = this.pole.filter( item => item !== dude)
        }
    },
    mounted() {
        console.log('spustene Vue');
    },
}).mount("#app");

Vue a WordPress

// ak chcem pridat sriptu type module pre import componentov
wp_register_script('vue-script', ADRESA_CHILD_TEMY_URI . '/vue.js', 'vue-js', null,true);
wp_enqueue_script('vue-script');

add_filter("script_loader_tag", "add_module_to_my_script", 10, 3);
function add_module_to_my_script($tag, $handle, $src)
{
    if ("vue-script" === $handle) {
        $tag = '<script type="module" src="' . esc_url($src) . '"></script>';
    }

    return $tag;
}

// pridaj vue a axios
function func_load_vuescripts() {
    wp_enqueue_script( 'vue-js', 'https://unpkg.com/vue@3/dist/vue.global.js', array(), '', false ); 

    wp_register_script('axios', 'https://unpkg.com/axios/dist/axios.min.js', 'vue-js', null);
    wp_enqueue_script('axios');


}
add_action('wp_enqueue_scripts', 'func_load_vuescripts');

// hook pre pridanie html
add_action('electro_before_content', 'pridaj_vue_script');
function pridaj_vue_script(){
    ?>

    <?php
}

Zaklady

Extensions pre VSCode: Vetur, Vue Snippets

vbase - vytvori template componentu
vdata - template pre data (vsetko zacat cey V)

Ak chces pisat javascript do HTML musit ho pisat do “{ }”

Krátke ukážky

// v-for loop, v-if a zmena class, style mozes pouzit aj v-show="visible"
 <p v-for="dude in pole"> 
        <a @click.prevent="remove(dude)" :class="{ faded: value < 18,  gold: value >20 }">
            {{dude}}
            <small v-if="dude.split(' ').length < 3">short name </small>
           <small v-else> dlhe meno </small>
        </a>
 </p>

// v model 
    <input v-model="message" :style="{color: 'red'}">
    <h3>{{message}}</h3>

//  submit and add do pola funkcia
<form @submit.prevent="add">  
<!-- @keydown.enter="add" -->
        <input type="text" v-model="newDude">
</form>

// v-model.number
<input type="number" v-model.number="value">{{value}}


// transition animacie, a link, click, mouseover  
// ku transition musis pridat stale css
<Transition name="slide-fade">
    <a :href="link" v-if="show" @mouseover="show = true" @mouseleave="show = false" > {{link}} </a>
</Transition>

// prepinac / toogle @click
<div @click="show = !show" >
     <i class="fas  fa-info">info</i>
</div>

Komponenty

// slot
<hello-world msg="mesage">Pecka slot</hello-world><br>

// zlozenie komponenetu 
<template>
    <li :title="title">
        <article>
            {{ name }}
            <span>{{ title }}</span>
        </article>
    </li>
</template>
  
  
<script>
export default {
    data() {
        return {
  
        }
    }
}
</script>
  
  
<style lang="scss">
li article {
    border: 10px solid gold;
}
</style>

Ďalšie ukážky

// cez props si preposielam data z rodica do componentu

<dude v-for="(dude, index) in characters" 
    title="hello, my good dude" 
    :name="wat"
    :key="dude"> {{ dude + index }}
</dude>

// cez this.$emit a $event posieladat data rodicovi
      valueChanged(e){
                console.log(e.target.value)
                this.$emit('add-dude' , e.target.value)
            }
<create-dude-form @add-dude="newDude = $event"/>

Príklad funkcie

 <input type="" name="slug" :value=toSlag()> {{ toSlag()}}

 methods: {
          toSlag() {
            return this.projectName
              .toLowerCase()
              .trim()
              .replace(/[^\w\s-]/g, '')
              .replace(/[\s_-]+/g, '-')
              .replace(/^-+|-+$/g, '');
          }
        },

hide() {
     this.$el.remove()
     // this.visible = false
     axios.delete(/comments/+ ID)
}
delete(dude) {
     console.log(dude)
     this.characters = this.characters.filter(item => item !== dude)
}

Uzitocne

ak priradim elementu ref=”toto” viem sa potom nanho odkazovat cez vue
this.$refs.toto.innerText – vytiahnem text z elementu ktory je ozceny cez ref=”toto”

@input=”nazovMetody” – odpali metodu pri zmene

Importovanie externych kniznic a komponentov

Vzdy si najprv skontroluj ci je to pre Vue 3 !!!!

import { VueTelInput } from 'vue-tel-input';
import 'vue-tel-input/dist/vue-tel-input.css';

import moment from 'moment'

export default {
    components: {
        VueTelInput
    },