cihly

README.md

@@ -1,5 +1,15 @@
 # cihly
 
+## Instalace vue + vue-cli
+Předpokladem je nainstalovaný nodejs.
+
+    > cd C:\Users\uzivatel\Desktop
+    > npm install @vue/cli 
+    > node_modules\.bin\vue create cihly
+    > cd cihly
+    > npm run serve
+
+
 ## Project setup
 ```
 npm install

src/App.vue

@@ -1,28 +1,20 @@
 <template>
   <div id="app">
-    <img alt="Vue logo" src="./assets/logo.png">
-    <HelloWorld msg="Welcome to Your Vue.js App"/>
+    <Cihly pocet="25" />
   </div>
 </template>
 
 <script>
-import HelloWorld from './components/HelloWorld.vue'
+import Cihly from './components/Cihly.vue'
 
 export default {
   name: 'App',
   components: {
-    HelloWorld
+    Cihly
   }
 }
 </script>
 
 <style>
-#app {
-  font-family: Avenir, Helvetica, Arial, sans-serif;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-  text-align: center;
-  color: #2c3e50;
-  margin-top: 60px;
-}
+
 </style>

src/components/Cihly.vue

@@ -0,0 +1,44 @@
+<template>
+    <div>
+        <img v-on:click="prilozit(i)" v-for="i in hromada" :key="i" src="../assets/brick.png" alt="">
+
+        <hr>
+
+        <img v-for="i in komin" :key="i" src="../assets/brick.png" alt="">
+
+    </div>    
+</template>
+
+
+<script>
+export default {
+  name: 'Cihly',
+  data: function() {
+      return {
+          hromada: [0, 1, 2, 3, 4, 5],
+          komin: [],
+      }
+  },
+  methods: {
+      prilozit: function(i) {
+          this.hromada.splice(this.hromada.indexOf(i), 1);
+          this.komin.push(i);
+          
+      },
+  },
+  props: {
+      pocet: {default: () => 0},
+  },
+}
+</script>
+
+
+<style scoped>
+    img {
+        width: 60px;
+    }
+
+    img:hover {
+        cursor: pointer;
+    }
+</style>