skrabanek
/
4j_node
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

update

master
Jakub Škrabánek 16 hours ago
parent
542c6d2df6
commit
92fae72896
5 changed files with 141 additions and 27 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 17
      vue/09_bootstrap_intro/src/App.vue
  2. 41
      vue/09_bootstrap_intro/src/components/BootCard.vue
  3. 31
      vue/09_bootstrap_intro/src/components/EzPocitadlo.vue
  4. 52
      vue/09_bootstrap_intro/src/components/FavForm.vue
  5. 27
      vue/09_bootstrap_intro/src/components/HelloWorld.vue

17
vue/09_bootstrap_intro/src/App.vue
View File

@ -14,17 +14,32 @@
</div> </div>
<HelloWorld msg="Welcome to Your Vue.js App"/> <HelloWorld msg="Welcome to Your Vue.js App"/>
<br>
<EzPocitadlo/>
<FavForm/>
<div class="row">
<BootCard class="col-md-3 col-12" name="John Smith" age="43" pos="CEO of Company"/>
<BootCard class="col-md-3 col-12" name="Peter Parker" age="18" pos="Fotograf"/>
<BootCard class="col-md-3 col-12" name="Franta Pepa" age="50" pos="Uživatel"/>
<BootCard class="col-md-3 col-12" name="Luboš Hnízdo" age="3" pos="Kiddo"/>
</div>
</div> </div>
</template> </template>
<script> <script>
import BootCard from './components/BootCard.vue';
import EzPocitadlo from './components/EzPocitadlo.vue';
import FavForm from './components/FavForm.vue';
import HelloWorld from './components/HelloWorld.vue' import HelloWorld from './components/HelloWorld.vue'
export default { export default {
name: 'App', name: 'App',
components: { components: {
HelloWorld
HelloWorld,
BootCard,
EzPocitadlo,
FavForm
} }
} }
</script> </script>

41
vue/09_bootstrap_intro/src/components/BootCard.vue
View File

@ -0,0 +1,41 @@
<template>
<div class="hello">
<h1>{{ msg }}</h1>
<div class="card">
<div class="card-body">
<h5 class="card-title">{{ name }} | Věk: {{ age }}</h5>
<h6 class="card-subtitle mb-2 text-body-secondary">{{ pos }}</h6>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Aperiam pariatur voluptas natus error deleniti saepe odio, aliquam vel beatae eaque nemo, minima laborum, iste provident obcaecati impedit rerum aspernatur magni.</p>
</div>
</div>
</div>
</template>
<script>
export default {
name: 'BootCard',
props: {
name: String,
pos: String,
age: Number
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h3 {
margin: 40px 0 0;
}
ul {
list-style-type: none;
padding: 0;
}
li {
display: inline-block;
margin: 0 10px;
}
a {
color: #42b983;
}
</style>

31
vue/09_bootstrap_intro/src/components/EzPocitadlo.vue
View File

@ -0,0 +1,31 @@
<template>
<div class="card shadow">
<div class="header bg-primary text-white">
<h5>Počitadlo</h5>
</div>
<div class="card-body text-center">
<h1 class="display-1 tex-primary">{{ count }}</h1>
<div class="btn-group mt-3">
<button class="btn btn-danger" @click="count--">-1</button>
<button class="btn btn-secondary" @click="count = 0">reset</button>
<button class="btn btn-success" @click="count++">+1</button>
</div>
<div v-if="count>10" class="alert alert-danger mt-3">
ČÍSLO JE VĚTŠÍ NEŽ 10
</div>
</div>
</div>
</template>
<script>
export default {
name: "EzPocitadlo",
data() {
return {
count:0
}
}
}
</script>

52
vue/09_bootstrap_intro/src/components/FavForm.vue
View File

@ -0,0 +1,52 @@
<template>
<div class="card shadow">
<div class="card-header bg-success text-white">
<h5>Formulář</h5>
</div>
<div class="card-body">
<div class="mb-3">
<label class="form-label">Jméno:</label>
<input type="text" class="form-control"
v-model="name" placeholder="Zadej jméno">
</div>
<div class="mb-3">
<label class="form-label">Oblíbená Barva:</label>
<select class="form-select" v-model="color">
<option value="">---vyber---</option>
<option value="primary">Modrá</option>
<option value="success">Zelená</option>
<option value="danger">Červená</option>
<option value="warning">Žlutá</option>
</select>
</div>
<div v-if="name && color" :class="`alert alert-${color}`">
<strong>Ahoj {{ name }}.</strong> Tvoje fav.c je {{ colorName }}
</div>
</div>
</div>
</template>
<script>
export default{
name:"FavForm",
data() {
return {
name: "",
color: ""
}
},
computed:{
colorName() {
const colors = {
"primary": "modrá",
"success" : "zelená",
"danger" : "červená",
"warning" : "žlutá"
}
return colors[this.color] || ""
}
}
}
</script>

27
vue/09_bootstrap_intro/src/components/HelloWorld.vue
View File

@ -1,32 +1,7 @@
<template> <template>
<div class="hello"> <div class="hello">
<h1>{{ msg }}</h1> <h1>{{ msg }}</h1>
<p>
For a guide and recipes on how to configure / customize this project,<br>
check out the
<a href="https://cli.vuejs.org" target="_blank" rel="noopener">vue-cli documentation</a>.
</p>
<h3>Installed CLI Plugins</h3>
<ul>
<li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-babel" target="_blank" rel="noopener">babel</a></li>
<li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-eslint" target="_blank" rel="noopener">eslint</a></li>
</ul>
<h3>Essential Links</h3>
<ul>
<li><a href="https://vuejs.org" target="_blank" rel="noopener">Core Docs</a></li>
<li><a href="https://forum.vuejs.org" target="_blank" rel="noopener">Forum</a></li>
<li><a href="https://chat.vuejs.org" target="_blank" rel="noopener">Community Chat</a></li>
<li><a href="https://twitter.com/vuejs" target="_blank" rel="noopener">Twitter</a></li>
<li><a href="https://news.vuejs.org" target="_blank" rel="noopener">News</a></li>
</ul>
<h3>Ecosystem</h3>
<ul>
<li><a href="https://router.vuejs.org" target="_blank" rel="noopener">vue-router</a></li>
<li><a href="https://vuex.vuejs.org" target="_blank" rel="noopener">vuex</a></li>
<li><a href="https://github.com/vuejs/vue-devtools#vue-devtools" target="_blank" rel="noopener">vue-devtools</a></li>
<li><a href="https://vue-loader.vuejs.org" target="_blank" rel="noopener">vue-loader</a></li>
<li><a href="https://github.com/vuejs/awesome-vue" target="_blank" rel="noopener">awesome-vue</a></li>
</ul>
</div> </div>
</template> </template>

Write Preview
Loading…
Cancel
Save