Instalacija
15. октобар 2023. 12:16
1. Node.js
2. Npm install -g @vue/cli
3. Napravi folder recimo sajt
4. Pokreni komandu vue create modal-project
5. Posle instalacije otici u folder sajt
6. Pokrenuti komadnu npm run serve
Vue.js Page 1
Main tree
15. октобар 2023. 12:35
U data() funkciji mogu se prosledjivati: objekti,stringovi, bool vrednosti, redovi, brojevi
U methods properties se ubaciju funkcije koje reaguju na click I ostale evente, radi manipulaciju sa DOM-om ….
U computed properties se ubaciju funkcije koje zavise od data() objects, dakle manipulisu podacima dobijenim iz data
Vue.js Page 2
Props
15. октобар 2023. 11:05
Props se koriste da se ubaciju stringovi, boolean vrednosti
To Modal.vue
From App.vue
<template> <template>
<h1>{{ title }}</h1> <div class="backdrop" @click.self="closeModal">
<div v-if="showModal"> <div class="modal" :class="{trt: theme === 'sale'}">
<Modal :header="header" :text="text" theme="sale" @zatvoriModal="toggleModal"/> <h1>{{ header }}</h1>
</div> <p>{{ text }}</p>
<button @click="toggleModal">open modal</button> </div>
</template> </div>
</template>
<script> <script>
import Modal from './components/Modal.vue' export default{
export default { props:['header', 'text', 'theme'],
name: 'App', methods:{
components: { Modal }, closeModal(){
data(){ this.$emit('zatvoriModal')
return { }
title:'My first Vue app from data', }
header:'Sign up for the Giveway', }
text:'Jos jedan props!', </script>
showModal : false,
}
},
methods: {
toggleModal(){
this.showModal = !this.showModal
}
}
}
</script>
Vue.js Page 3
Slots
15. октобар 2023. 11:16
Regular slots
To Modal.vue
From App.vue
<template>
<h1>{{ title }}</h1>
<template>
<div v-if="showModal">
<div class="backdrop" @click.self="closeModal">
<Modal theme="sale" @zatvoriModal="toggleModal">
<div class="modal" :class="{trt: theme === 'sale'}">
<h1>Navusoft Giveway</h1>
<slot></slot>
<p>Grab your navusoft swag for half price</p>
</div>
</Modal>
</div>
</div>
</template>
<button @click="toggleModal">open modal</button>
</template>
Named slots
From App.vue To Modal.vue
<template> <template>
<h1>{{ title }}</h1> <div class="backdrop" @click.self="closeModal">
<div v-if="showModal"> <div class="modal" :class="{trt: theme === 'sale'}">
<Modal theme="sale" @zatvoriModal="toggleModal"> <slot></slot>
<template v-slot:links> <div class="actions">
<a href="#">sign up now</a> <slot name="links"></slot>
<a href="#">more info</a> </div>
</template> </div>
<h1>Navusoft Giveway</h1> </div>
<p>Grab your navusoft swag for half price</p> </template>
</Modal>
</div>
<button @click="toggleModal">open modal</button>
</template>
Vue.js Page 4
Teleport
15. октобар 2023. 12:06
On index.html
From App.vue
<template> <!DOCTYPE html>
<h1>{{ title }}</h1> <html lang="">
<teleport to=".modals" v-if="showModal"> <head>
<Modal theme="sale" @zatvoriModal="toggleModal"> <meta charset="utf-8">
<template v-slot:links> <meta http-equiv="X-UA-Compatible" content="IE=edge">
<a href="#">sign up now</a> <meta name="viewport" content="width=device-width,initial-scale=1.0">
<a href="#">more info</a> <link rel="icon" href="<%= BASE_URL %>favicon.ico">
</template> <title><%= htmlWebpackPlugin.options.title %></title>
<h1>Navusoft Giveway</h1> </head>
<p>Grab your navusoft swag for half price</p> <body>
<noscript>
</Modal> <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't
</teleport> work properly without JavaScript enabled. Please enable it to
<teleport to=".modals" v-if="showModalTwo"> continue.</strong>
<Modal @zatvoriModal="toggleModalTwo"> </noscript>
<h1>Drugi Modal</h1> <div id="app"></div>
<p>Ovo je drugi modal</p> <!-- built files will be auto injected -->
</body>
</Modal> <div class="modals"></div>
</teleport> </html>
<button @click="toggleModal">open modal</button>
<button @click="toggleModalTwo">open modal</button>
</template>
Sad se umesto u glavnom divu id="app" renderuju modali u divu class="modals"
Vue.js Page 5
