Rýchle pripojenie súborov a zoznam knižníc

Pripojenie tvojho CSS a JS

<link rel="stylesheet" href="assets/css/style.css">
<script src="assets/js/app.js"></script>

Časté knižnice / frameworky

<!-- Bootstrap -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.2.0-beta1/css/bootstrap.min.css" integrity="sha512-o/MhoRPVLExxZjCFVBsm17Pkztkzmh7Dp8k7/3JrtNCHh0AQ489kwpfA3dPSHzKDe8YCuEhxXq3Y71eb/o6amg==" crossorigin="anonymous" referrerpolicy="no-referrer" />

<!-- FontAwesome -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">

<!-- jQuery -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>


<!-- Vue -->
<script src="https://unpkg.com/vue@3"></script>  <!-- do head -->

<div id="app"></div>  <!-- v tomto elemente bude fungovat vue -->

<script>  <!-- na koniec body -->
    const { createApp } = Vue

    createApp({
        data() {  // data
            return {
                count: 0,
                newDude:'',
                message: 'Vue - obojstranne prepojenie cez v-model ',
                author: {
                    name: 'John Doe',
                    books: [
                    'Vue 2 - Advanced Guide',
                    'Vue 3 - Basic Guide',
                    'Vue 4 - The Mystery'
                    ]
                },
                characters: [
                    'Meno1',
                    'Meno 2',
                    'Vue 4 - The Mystery'
                    ],
            }
        },
        methods:{   // funkcie
            add(){
                this.characters.push(this.message)
            }
        },
        computed: {  // vypocitane vlastnosti ( vypocita do html a uvedie len publishedBooksMessage aby sme sa neopakovali)
            publishedBooksMessage() {
                return this.author.books.length > 0 ? 'Yes' : 'No'
            },
            vypisCount(){
               return this.count
            },

        },
        mounted() {  // po nacitani
            console.log(this.count) // => 1
            this.count = 1
        }
    }).mount('#app')
</script>

Na stránkach ako jsdelivr.com alebo cdnjs.com je možné vyhľadať si takmer všetky knižnice

Pridaj komentár

Vaša e-mailová adresa nebude zverejnená.