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">
<!-- Dasahicons -->
<link rel="stylesheet" href="https://unpkg.com/@icon/dashicons/dashicons.css">
<link rel="stylesheet" href="node_modules/@icon/dashicons/dashicons.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