Vue - Snippets
Aus Wikizone
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;
}
