1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 |
<html> <head> <title>Udemy Vue JS</title> </head> <body> <div id="app"> {{ message }} <span v-bind:title="message">ali</span> <br> <span :title="messagex">ali</span> <br> <div v-if="isUploaded">Görüntü başarı ile eklendi</div> <br> <a :href="url">alicancanpolat.com</a> <br> <div v-if="isProfile"> <img :src="url"> </div> <br> <div v-if="isLoading"> <div v-for="item in contacts"> {{ item.name }} </div> </div> <p>{{ messageLast }}</p> <button @click="changeText">Yazıyı Değiştir</button> <label>Ad Soyad: {{ textValue }}</label> <input type="text" v-model="textValue" placeholder="Ad Soyad Giriniz"> <button @click="changeName">Ad Değiştir</button> <br> <item-component v-for="item in contacts" v-bind:data="item" v-bind:key="item.id"></item-component> </div> <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script> <script type="module"> const { createApp } = Vue; const app = createApp({ data() { return { isUploaded:true, isProfile:false, message: 'Hello Vue 3.0!', messagex: 'Hello Vue 3.12310!', url:'https://alicancanpolat.com', isLoading:true, contacts:[ { name: 'ali veli'}, { name: 'cafer'}, { name: "huseyin"} ], messageLast: "Merhaba Udemy", textValue: "Merhaba Udemy", isim: "ali" }; }, methods: { changeText() { this.messageLast = "Yeni Mesaj"; }, changeName(){ this.textValue = 'Cec' } }, created(){ // başlarken console.log(1); }, computed(){ // render işlemi tamamladıktan sonrası console.log(2); }, mounted(){ // console.log(3); }, watch:{ textValue(){ console.log(4) } } }); app.component('item-component', { props:['data'], template: '<li>{{ data.name }}</li>' }); app.mount('#app'); </script> </body> </html> |