nodejs_projects/vue/intro2_/src/components/HelloWorld.vue

<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
    <h3>{{ undertitle }}</h3>

    <hr>
    <!-- práce s tláčítkem a proměnou -->
    <button 
    @click.left="num1++"
    @click.right="num1--"
    >CLICK</button>
    <h2>{{num1}}</h2>

    <div v-if="(num1>10) && showmu">
      <button @click.once="megaupgrade()">MEGA UPGRADE</button>
    </div>
    
    <hr>
    <!-- for cyklus aka duplikovaní tagu -->
    <p>muj oblíbený programovaci jazyk: {{ prolang }}</p>
    <!-- způsob psaní v-for cyklu -->
    <button v-for="(data,index) in listlang" 
      :key="index" 
      @click="prolang = data"> 
        {{ data }}
    </button>
    <!-- druhy způsob psaní v-for cyklu -->
    <div v-for="(data,index) in listlang" :key="index">
        <button @click="prolang = data"> {{ data }}</button>
    </div>



  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  //props - vstupní data z tagu <HelloWorld msg="Intro_2"/>
  props: {
    msg: String
  },
  //data
  data() {
    return {
      undertitle: "podtext",
      num1: 0,
      showmu: true,
      prolang: "",
      listlang: ["C#", "Vue", "JS", "PHP", "HTML"]
    };
  },
  methods: {
    megaupgrade() {
      this.num1 += 1000;
      this.showmu = false;
    }
  }
}
</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>