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>

Slots

Basic Slot

App.vue

Send Receive REST Data

Das folgende Beispiel bezieht und sendet JSON Daten von / zu einer Firebase Datenbank. Das Prinzip läßt sich auf alle REST Schnittstellen adaptieren.

loadExperiences() {
      this.isLoading = true;
      this.error = null;
      fetch('https://vue-course-http-01-default-rtdb.firebaseio.com/surveys.json')
        .then( (response) => { 
          // is executed when data arrived. Arg response is provided automatically.
          if (response.ok) {
            return response.json(); // parse json data and return promise
          }
        })
        .then( (data) => {
          // executed when promise returned
          // hint if we would use function(data) instead of arrow function 
          // the keyword this would not work
          this.isLoading = false;
          console.log('Received Data: ');
          console.log(data);
          const results = [];
          for( const id in data){
            results.push({ id: id, name: data[id].name, rating: data[id].rating})
          }
          this.results = results;
        })
        .catch(
          // catch will be triggered when an error in any of the previous promises occurs
          // argument error is provided automatically in the function
          (error) => {
            console.log('Error' + error);
            this.isLoading = false;
            this.error = 'Failed to fetch data: '  + error;
          }
        );
    }

submitSurvey() {
      if (this.enteredName === '' || !this.chosenRating) {
        this.invalidInput = true;
        return;
      }
      this.invalidInput = false;

      // this.$emit('survey-submit', {
      //   userName: this.enteredName,
      //   rating: this.chosenRating,
      // });
      this.error = null;
      fetch('https://vue-course-http-01-default-rtdb.firebaseio.com/surveys.json', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json'
        },
        body: JSON.stringify({
          name: this.enteredName,
          rating: this.chosenRating
        }),
      })
      .then( response => {
        if (response.ok) {
          console.log("We got a valid response from server: " + response);
        }else{
          throw new Error('Could not save data'); 
          // this creates new Error Object which we receive in catch()
        }
      })
      .catch(error => {
        console.log(error);
        this.error = error.message;
      });

      this.enteredName = '';
      this.chosenRating = null;
    }

Utilities / nützliche Funktionen

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

Siehe JavaScript - Snippets

Arrays

Elemente hinzufügen / entfernen

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)

// add to start of array
this.friends.unshift(newFriend)

// delete item from array via id (will not work with provide/inject data in components)
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
}
// this works because we change the array directly
deleteItem(id){
  const itemIndex = this.items.findIndex(item => item.id === id)
  this.items.splice(resIndex, 1);
}

Finden und Suchen

// 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

Validierung

submitData(){
  const enteredTitle = this.$refs.titleInput.value;
  if (enteredTitle.trim() === ''){
    this.inputIsValid = false;
    return;
}

Sonstiges

Underscore Argumente - nutze diese wenn du Argumente, die automatisch bereitgestellt werden nicht benötigst. Dann meckert der Compiler nicht:

scrollBehavior(to, from, savedPosition){// compiler tells you that you don't use them}
scrollBehavior(_, _2, savedPosition){
  console.log(savedPosition) // compiler does not complain :-)
 }