Vue.js Temel Ekleme - Silme İşlemleri [Sayfa Yenilemeden]
Çıktı
<html> <head>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> //vue.js çekmek için
<style type="text/css">
#form {
/* display: flex; */
justify-content: center;
flex: column;
align-items: center;
margin: auto;
width: 50%;
text-align: center;
padding: 2px;
}
#form .list {
text-align: center;
margin-bottom: 5px;
}
#form .list label {
display: block;
text-align: center;
}
#form .list input {
padding: 20px;
width: 100%;
}
#app .sonuc {
/* display: flex; */
justify-content: center;
flex: column;
align-items: center;
margin: auto;
width: 50%;
text-align: center;
padding: 2px;
}
.removebtn{
color:white;
background-color: red;
border: 0px;
padding: 2px;
cursor:pointer;
}
</style>
</head>
<body>
<div id="app">
<div id="form">
<div class="list">
<label>Ad Soyad</label>
<input type="text" v-model="name" id="">
</div>
<div class="list">
<label>Telefon</label>
<input type="text" v-model="phone" id="">
</div>
<div class="list">
<button @click="newContact">Yeni Ekle</button>
</div>
</div>
<!-- <a v-bind="LinkBindIslemi">{{ gidilecekURLTexti }}</a>
-->
<!-- <p >Ad Soyad:{{ vname }}</p>
<input type="text" v-model="vname" placeholder="Ad Girin"/>
<button @click="changeVname">Degiştir</button>
<hr>
<item-component :gelenveri="vname"></item-component>
<item-component :gelenveri="vname2"></item-component>
<hr> -->
<!-- <item-component v-for="item in contact" v-bind:data="item" v-bind:key="item.id"></item-component> -->
<!-- <item-component :data="name"></item-component> -->
<!-- <button @click="changetext" >Değiştir</button> -->
<!-- <list-component v-for="(item,index) in contacts" :data="item" :index="index" ></list-component> -->
<!-- <div class="sonuc" v-for="contact in contacts">{{ contact.name }}</div> -->
<list-component :data="contacts" @root-remove="removeContactA"></list-component>
</div>
</body>
<script type='text/javascript'>
// Vue.component('item-component',{
// // props:["gelenveri"],
// props:["data"],
// template:'<li>{{ /*data*/}}</li>'
// });
Vue.component('list-component',{
methods:{ //componentler kendi methodunu içeriide (template icinde buttondadki @click ile)tanımlayabilir.
removeContact(index){
// console.log(index)
// this.data.splice(index,1);//data nın içindeki indexten sonra 1 tane sil
//bu gelen datadakini kaldırıyoru
this.$emit('root-remove',index);
}
},
props:["data"], //componentdeki veriyi çekmek için
template:'<div><div v-for="(item,index) in data" class="sonuc">{{ item.name }} - {{ item.phone }} - <button class="removebtn" @click="removeContact(index)">Kaldır</button></div></div>'
});
var app = new Vue({
el: '#app',
data:{
name:"",
phone:"",
contacts:[]//formadikleri bu diziye aktaracagım
},
methods: {
newContact:function(){
//console.log(this.name,this.phone);//formdakileri böyle alıyorum
//contact dizisine aktarmak için
this.contacts.push({name:this.name,phone:this.phone});//obje olarak ekledim
this.name=""
this.phone=""
},
removeContactA:function(index){
//console.log(index)
this.contacts.splice(index,1)
}
},
// created() {//component uluşturuldugu anda
// console.log('1');
// },
// data:{
// name:"Alper"
// },
// computed:{ //vue componentinin render işlemini tamamladıktan sonraki adımı
// name1(){
// console.log('4');
// }
// },
// mounted(){ //componenntin render olduğu ana kadar tüm süreyi
// console.log('3');
// },
// watch:{//componentde var oldugu sürece değişlik oldugunda yakalamayı saglar
// name(){//name değişince
// console.log('4');
// }
// },
// methods: {
// changetext:function(){
// this.name="Veli";
// }
// },
// data: {
// // contact:[
// // {name:"Alper Öner"},
// // {name:"Alper Öner2"},
// // {name:"Alper Öner3"}
// // ]
// // vname:'alper şahin öner',
// // vname2:"berat öner"
// // LinkBindIslemi: {
// // href: 'https://www.mustafacagri.com/',
// // style:'fontSize: 36px; color: red'
// // },
// // gidilecekURLTexti: 'mustafacagri.com'
// },
// methods: {
// changeVname:function(){
// this.vname="Alper"
// }
// },
})
</script>
</html>
[/code_bitis]