Vue - Snippets

Links

Vue.js
Vue - Basic Concepts
Vue CLI

Vue Konzepte

Basics

Vue - Basic Concepts

Components

Vue - Components

Snippets

Starter

const app = Vue.createApp({
  data(){
    return{
    }
  },
  methods:{
  },
  computed:{
  },
  watch:{
  }
});
app.mount('#assignment');

Using this in a submethod i.e. Timer

watch:{
  // it is allowed to watch computed properties
  result(value){
    const that = this;
    setTimeout(function(){
      console.log("timeout");
      that.counter = 0;
      return 0;
    },3000); 
  }
}

Toggle Classes

//...
data(){ return { boxSelected: false } },
methods:{ toggleBox(){ this.boxSelected = !this.boxSelected; } }
//...

<div @click="selectBox()" class="box" :class="{ active : boxSelected }"></div>

Add and remove items to / from a list

const app = Vue.createApp({
  data() {
    return { 
      enteredGoalValue: '',
      goals: []
     };
  },
  methods: {
    addGoal() {
      this.goals.push(this.enteredGoalValue);
      this.enteredGoalValue = '';
    },
    removeGoal(i){
      console.log("removeGoal " + i)
      this.goals.splice(i,1); // splice 1 item at index i 
    }
  }
});
app.mount('#user-goals');

   <section id="user-goals">
      <h2>My course goals</h2>
      <input type="text" v-model="enteredGoalValue" />
      <button @click="addGoal">Add Goal</button>
      <p v-if="goals.length === 0">No goals have been added yet - please start adding some!</p>
      <ul v-else> 
        <li v-for="(goal, i) in goals" @click="removeGoal(i)" :key="[myID]">#{{i}} {{goal}}</li> // use a unique id for key attribute
      </ul>
    </section>

Components

Component Todos

Mit CLI

• myComponent.vue Datei erstellen
• In main.js Import und component Funktion
• In App.vue Import
• In myComponent.vue props, emits festlegen
• In App.vue emits als v-on nutzen
• In App.vue props als Argumente übergeben