if,for,show,bind,on kullanımı

erselgulyaz · Mar 20, 2018 · fe921bd · fe921bd
1 parent bdef553
commit fe921bd
Show file tree

Hide file tree

Showing 2 changed files with 90 additions and 2 deletions.
diff --git a/src/App.vue b/src/App.vue
@@ -1,14 +1,80 @@
 <template>
   <div id="app">
-    {{message}}
+    <div class="if-kullanimi" v-if="ifControl">Bu alan ifControl isimli seçicinin true/false değerine göre görüntülenebilir.</div>
+    <hr>
+    <div class="for-kullanimi" v-for="item in forArray" :key="item">
+      {{item.id}} - {{item.name}} {{item.surname}}
+    </div>
+    <hr>
+    <div class="show-kullanimi" v-show="showControl">Bu alan showControl isimli seçicinin true/false değerine göre görüntülenebilir.</div>
+    <hr>
+    <basic-component v-bind:list=bindArray />
+    <hr>
+    <div class="on-kullanimi">
+      <button v-on:click="helloFunc('deneme mesajı')">Click Me!</button>
+    </div>
   </div>
 </template>
 
 <script>
+import BasicComponent from './components/BasicComponent.vue'
 export default {
   data () {
     return {
-      message: 'Hello World!'
+      ifControl: true,
+      forArray: [
+        {
+          id: 1,
+          name: 'Ahmet',
+          surname: 'CAN'
+        },
+        {
+          id: 2,
+          name: 'Veli',
+          surname: 'KARA'
+        },
+        {
+          id: 3,
+          name: 'Fatma',
+          surname: 'NUR'
+        },
+        {
+          id: 4,
+          name: 'Mamadou',
+          surname: 'Niang'
+        }
+      ],
+      showControl: false,
+      bindArray: [
+        {
+          id: 1,
+          name: 'Ahmet',
+          surname: 'CAN'
+        },
+        {
+          id: 2,
+          name: 'Veli',
+          surname: 'KARA'
+        },
+        {
+          id: 3,
+          name: 'Fatma',
+          surname: 'NUR'
+        },
+        {
+          id: 4,
+          name: 'Mamadou',
+          surname: 'Niang'
+        }
+      ]
+    }
+  },
+  components: {
+    BasicComponent
+  },
+  methods: {
+    helloFunc: function (parameter) {
+      alert(parameter)
     }
   }
 }

diff --git a/src/components/BasicComponent.vue b/src/components/BasicComponent.vue
@@ -0,0 +1,22 @@
+<template>
+    <div>
+      <div :key="item" v-for="item in list">
+        {{item.id}} - {{item.name}} {{item.surname}}
+      </div>
+    </div>
+</template>
+
+<script>
+export default {
+  data () {
+    return {
+    }
+  },
+  props: {
+    list: { type: Array, required: true }
+  }
+}
+</script>
+
+<style scoped>
+</style>