{"id":2338,"date":"2022-08-25T16:29:00","date_gmt":"2022-08-25T14:29:00","guid":{"rendered":"https:\/\/www.areaweb.sk\/?p=2338"},"modified":"2023-03-09T10:00:50","modified_gmt":"2023-03-09T09:00:50","slug":"vue-3-cheat-sheet","status":"publish","type":"post","link":"https:\/\/www.areaweb.sk\/cs\/vue-3-cheat-sheet\/","title":{"rendered":"Vue 3 Cheat Sheet"},"content":{"rendered":"

Ako za\u010da\u0165<\/strong><\/p>\n\n\n\n

VUE CLI<\/strong>
Vytvorenie noveho projectu cez Vue Cli<\/p>\n\n\n\n

npm install -g @vue\/cli\nThe CLI (@vue\/cli) is a globally installed npm package and provides the vue command in your terminal. \n(prida vue prikazy pre prikazovy riadok )\n\nvue create \"nazov projektu\"<\/code><\/pre>\n\n\n\n
Projekt cez pridanie linku<\/strong><\/p>\n\n\n\n
<script src="https:\/\/unpkg.com\/vue@3\/dist\/vue.global.js"><\/script>\n\n<div id="app">  \n\nconst app = Vue.createApp({\n    data() {\n        return {\n            message: 'Vue',\n            filter:'',\n            value: 20,\n            newDude: '',\n            show:true,\n            pole: ['pole1', 'pole2', 'pole3'],\n        }\n    },\n    methods: {\n        add() {\n            this.pole.push(\n                this.newDude\n            )\n        },\n        remove(dude) {\n            this.pole = this.pole.filter( item => item !== dude)\n        }\n    },\n    mounted() {\n        console.log('spustene Vue');\n    },\n}).mount("#app");\n\n<\/code><\/pre>\n\n\n\n
Vue a WordPress<\/strong><\/p>\n\n\n\n
\/\/ ak chcem pridat sriptu type module pre import componentov\nwp_register_script('vue-script', ADRESA_CHILD_TEMY_URI . '\/vue.js', 'vue-js', null,true);\nwp_enqueue_script('vue-script');\n\nadd_filter(\"script_loader_tag\", \"add_module_to_my_script\", 10, 3);\nfunction add_module_to_my_script($tag, $handle, $src)\n{\n    if (\"vue-script\" === $handle) {\n        $tag = '<script type=\"module\" src=\"' . esc_url($src) . '\"><\/script>';\n    }\n\n    return $tag;\n}<\/code><\/pre>\n\n\n\n
\/\/ pridaj vue a axios\nfunction func_load_vuescripts() {\n    wp_enqueue_script( 'vue-js', 'https:\/\/unpkg.com\/vue@3\/dist\/vue.global.js', array(), '', false ); \n\n    wp_register_script('axios', 'https:\/\/unpkg.com\/axios\/dist\/axios.min.js', 'vue-js', null);\n    wp_enqueue_script('axios');\n\n\n}\nadd_action('wp_enqueue_scripts', 'func_load_vuescripts');<\/code><\/pre>\n\n\n\n
\/\/ hook pre pridanie html\nadd_action('electro_before_content', 'pridaj_vue_script');\nfunction pridaj_vue_script(){\n    ?>\n\n    <?php\n}<\/code><\/pre>\n\n\n\n
Zaklady<\/strong><\/p>\n\n\n\n
Extensions pre VSCode: Vetur, Vue Snippets<\/p>\n\n\n\n
vbase - vytvori template componentu\nvdata - template pre data (vsetko zacat cey V)<\/code><\/pre>\n\n\n\n
Ak chces pisat javascript do HTML musit ho pisat do „{  }“<\/p>\n\n\n\n
Kr\u00e1tke uk\u00e1\u017eky<\/strong><\/p>\n\n\n\n
\/\/ v-for loop<\/strong>, v-if<\/strong> a zmena class<\/strong>, style<\/strong> mozes pouzit aj v-show<\/strong>=\"visible\"\n <p v-for=\"dude in pole\"> \n        <a @click.prevent=\"remove(dude)\" :class=\"{ faded: value < 18,  gold: value >20 }\">\n            {{dude}}\n            <small v-if=\"dude.split(' ').length < 3\">short name <\/small>\n           <small v-else> dlhe meno <\/small>\n        <\/a>\n <\/p>\n\n\/\/ v model<\/strong> \n    <input v-model=\"message\" :style=\"{color: 'red'}\">\n    <h3>{{message}}<\/h3>\n\n\/\/  submit <\/strong>and add<\/strong> do pola funkcia\n<form @submit.prevent=\"add\">  \n<!-- @keydown.enter=\"add\" -->\n        <input type=\"text\" v-model=\"newDude\">\n<\/form>\n\n\/\/ v-model.number<\/strong>\n<input type=\"number\" v-model.number=\"value\">{{value}}\n\n\n\/\/ transition<\/strong> animacie, a link, click, mouseover  <\/strong>\n\/\/ ku transition musis pridat stale css\n<Transition name=\"slide-fade\">\n    <a :href=\"link\" v-if=\"show\" @mouseover=\"show = true\" @mouseleave=\"show = false\" > {{link}} <\/a>\n<\/Transition>\n\n\/\/ prepinac \/ toogle @click<\/strong>\n<div @click=\"show = !show\" >\n     <i class=\"fas  fa-info\">info<\/i>\n<\/div><\/code><\/pre>\n\n\n\n
Komponenty<\/strong><\/p>\n\n\n\n
\/\/ slot<\/strong>\n<hello-world msg=\"mesage\">Pecka slot<\/hello-world><br>\n\n\/\/ zlozenie komponenetu <\/strong>\n<template>\n    <li :title=\"title\">\n        <article>\n            {{ name }}\n            <span>{{ title }}<\/span>\n        <\/article>\n    <\/li>\n<\/template>\n  \n  \n<script>\nexport default {\n    data() {\n        return {\n  \n        }\n    }\n}\n<\/script>\n  \n  \n<style lang=\"scss\">\nli article {\n    border: 10px solid gold;\n}\n<\/style><\/code><\/pre>\n\n\n\n
\u010eal\u0161ie uk\u00e1\u017eky<\/strong><\/p>\n\n\n\n
\/\/ cez props si preposielam data z rodica do componentu\n\n<dude v-for=\"(dude, index) in characters\" \n    title=\"hello, my good dude\" \n    :name=\"wat\"\n    :key=\"dude\"> {{ dude + index }}\n<\/dude>\n\n\/\/ cez this.$emit a $event posieladat data rodicovi\n      valueChanged(e){\n                console.log(e.target.value)\n                this.$emit('add-dude' , e.target.value)\n            }\n<create-dude-form @add-dude=\"newDude = $event\"\/><\/code><\/pre>\n\n\n\n
Pr\u00edklad funkcie<\/p>\n\n\n\n
 <input type=\"\" name=\"slug\" :value=toSlag()> {{ toSlag()}}\n\n methods: {\n          toSlag() {\n            return this.projectName\n              .toLowerCase()\n              .trim()\n              .replace(\/[^\\w\\s-]\/g, '')\n              .replace(\/[\\s_-]+\/g, '-')\n              .replace(\/^-+|-+$\/g, '');\n          }\n        },<\/code><\/pre>\n\n\n\n
hide() {\n     this.$el.remove()\n     \/\/ this.visible = false\n     axios.delete(\/comments\/+ ID)\n}\ndelete(dude) {\n     console.log(dude)\n     this.characters = this.characters.filter(item => item !== dude)\n}<\/code><\/pre>\n\n\n\n
Uzitocne<\/strong><\/p>\n\n\n\n
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“<\/p>\n\n\n\n

@input=“nazovMetody“ – odpali metodu pri zmene<\/p>\n\n\n\n
Importovanie externych kniznic a komponentov<\/strong><\/p>\n\n\n\n
Vzdy si najprv skontroluj ci je to pre Vue 3 !!!!<\/strong><\/p>\n\n\n\n
import { VueTelInput } from 'vue-tel-input';\nimport 'vue-tel-input\/dist\/vue-tel-input.css';\n\nimport moment from 'moment'\n\nexport default {\n    components: {\n        VueTelInput\n    },<\/code><\/pre>\n\n\n\n
<\/p>","protected":false},"excerpt":{"rendered":"
Ako za\u010da\u0165 VUE CLIVytvorenie 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\u2026<\/p>","protected":false},"author":1,"featured_media":2340,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[28,41],"tags":[],"class_list":["post-2338","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-js","category-vue"],"blocksy_meta":[],"_links":{"self":[{"href":"https:\/\/www.areaweb.sk\/cs\/wp-json\/wp\/v2\/posts\/2338","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.areaweb.sk\/cs\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.areaweb.sk\/cs\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.areaweb.sk\/cs\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.areaweb.sk\/cs\/wp-json\/wp\/v2\/comments?post=2338"}],"version-history":[{"count":0,"href":"https:\/\/www.areaweb.sk\/cs\/wp-json\/wp\/v2\/posts\/2338\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.areaweb.sk\/cs\/wp-json\/wp\/v2\/media\/2340"}],"wp:attachment":[{"href":"https:\/\/www.areaweb.sk\/cs\/wp-json\/wp\/v2\/media?parent=2338"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.areaweb.sk\/cs\/wp-json\/wp\/v2\/categories?post=2338"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.areaweb.sk\/cs\/wp-json\/wp\/v2\/tags?post=2338"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}