Vue - Snippets

Links

Vue.js
Vue - Basic Concepts
Vue CLI
Vue - Components

Snippets

Starters

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

Starter mit main.js (CLI)

import { createApp } from 'vue';
// Import Main App
import App from './App.vue';
// Import Global Components
import BaseBadge from './components/BaseBadge.vue';
import BaseCard from './components/BaseCard.vue'
// Create App Instance
const app = createApp(App);
// Register Components
app.component('base-badge', BaseBadge);
app.component('base-card', BaseCard)
// Mount App
app.mount('#app');

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

Basic Component

Parent

<template>
    <h1>My App</h1>
    <ul>
        <learning-resource v-for="res in storedResources" 
            :key="res.id"
            :title="res.title"
            :description="res.description"
            :link="res.link">
        </learning-resource>
    </ul>
</template>
<script> 
import LearningResource from './components/learning-resources/LearningResource.vue'

export default {
    components:{
        LearningResource,
    },
    data(){
        return {
            storedResources: [
                {   
                    id: 'official-guide',
                    title: 'Official Guide',
                    description: 'The official Vue.js documentation',
                    link: 'https://vuejs.org'
                },
                {
                    id: 'google',
                    title: 'Google',
                    description: 'Search for other things...',
                    link: 'https://google.de'
                },
            ]
        }
    }
}
</script>

Child

<template>
<li>
  <h3> {{ title }} </h3>
  <p>  {{ description }}  </p>
  <nav>
    <a :href="link">View resource</a>
  </nav>
</li>
</template>
<script>
export default {
    props: ['title', 'description', 'link']
}
</script>

Utilities / nützliche Funktionen

Normale JavaScript Funktionen die oft nützlich im Zusammenhang mit Vue sind.

Arrays

Gegeben ist ein Array items in der Art

[{id: 1, name: Anton, isFavourite: true}, {id: 2, name: Berta},...]

// add to end of array
this.friends.push(newFriend)

// find in array and change prop
const identifiedItem = this.items.find(
  (item) => item.id === searchId // the same as function(friend){return friend.id...}
)
// filter(callback) - callback is executed on every array (array item) first item match is returned
identifiedItem.isFavourite = !identifiedItem.isFavourite
// identifiedItem is a proxy connected to the original items array.
// thus why we can modify identifiedItems and items will be altered too

// delete item from array via id
deleteItem(id){
  this.items = this.items.filter( item => item.id !== sarchId)
  // filter( filterFunction ) uses filterFunction for every item in items.
  // If filterFunction returns true the item is kept. item.id !== id returns true for every
  // item which has NOT the id
}