Vue.js-Beispiele
Dieses Kapitel stellt mehrere Vue.js-Beispiele vor. Durch das Üben mit diesen Beispielen kannst du das Gelernte festigen.
Navigationsmenü-Beispiel
Navigationsmenü
Erstelle ein einfaches Navigationsmenü:
<div id="main">
<!--Der Stil des aktiven Menüs ist die Klasse `active`.-->
<!--Um zu verhindern, dass der Link beim Anklicken springt, verwenden wir den Modifikator "prevent" (Kurzform für preventDefault).-->
<nav v-bind:class="active" v-on:click.prevent>
<!--Wenn auf einen Link im Menü geklickt wird, rufen wir die Methode `makeActive` auf, die in der Vue-Instanz erstellt wird.-->
<a href="#" class="home" v-on:click="makeActive('home')">Startseite</a>
<a href="#" class="projects" v-on:click="makeActive('projects')">Projekte</a>
<a href="#" class="services" v-on:click="makeActive('services')">Dienstleistungen</a>
<a href="#" class="contact" v-on:click="makeActive('contact')">Kontakt</a>
</nav>
<!--Die Variable `active` unten ändert sich automatisch entsprechend dem aktuell ausgewählten Wert.-->
<p>Sie haben das<b>{{active}}-Menü ausgewählt</b></p>
</div>
<script>// Eine neue Vue-Instanz erstellen
var demo = new Vue({
// DOM-Element, View-Modell einbinden
el: '#main',
// Eigenschaften definieren und Anfangswerte festlegen
data: {
active: 'home'
},
// Funktion, die beim Klicken auf das Menü verwendet wird
methods: {
makeActive: function(item){
// Wenn sich das Modell ändert, aktualisiert sich die Ansicht automatisch
this.active = item;
}
}
});</script>
Ausprobieren »
Beispiel zur Textbearbeitung
Textbearbeitung
Klicken Sie auf den angegebenen Text, um den Inhalt zu bearbeiten:
<!--`v-cloak` verbirgt nicht kompilierte Variablen, bis die Vue-Instanz bereit ist.-->
<!--Nachdem auf das Element geklickt wurde, wird die Methode `hideTooltp()` aufgerufen.-->
<div id="main" v-cloak v-on:click="hideTooltip">
<!--Dies ist ein Tooltip
`v-on:click.stop` ist ein Klick-Event-Handler, der `stop`-Modifier wird verwendet, um die Ereignispropagation zu verhindern
`v-if` wird verwendet, um zu prüfen, ob `show_tooltip` true ist; nur dann wird es angezeigt-->
<div class="tooltip" v-on:click.stop v-if="show_tooltip">
<!--`v-model` bindet den Inhalt des Textbereichs
Wenn sich der Inhalt des Textbereichs ändert, ändert sich die entsprechende Variable ebenfalls in Echtzeit-->
<input type="text" v-model="text_content" />
</div>
<!--Nach dem Klicken wird die Methode "toggleTooltip" aufgerufen und die Ereignispropagation verhindert.-->
<!--Die Variable `text_content` ändert sich entsprechend dem Inhalt des Textbereichs.-->
<p v-on:click.stop="toggleTooltip">{{text_content}}</p>
</div>
<script>var demo = new Vue({
el: '#main',
data: {
show_tooltip: false,
text_content: 'Klicken Sie hier und bearbeiten Sie den Inhalt.'
},
methods: {
hideTooltip: function(){
// Wenn sich das Modell ändert, wird die Ansicht automatisch aktualisiert
this.show_tooltip = false;
},
toggleTooltip: function(){
this.show_tooltip = !this.show_tooltip;
}
}
})</script>
Ausprobieren »
Beispiel für eine geordnete Liste
Bestellliste
Erstelle eine Bestellliste und berechne den Gesamtpreis:
<form id="main" v-cloak>
<h1>Dienste</h1>
<ul>
<!--Durchlaufe das `services`-Array und setze den Stil, nachdem eine Option angeklickt wurde.-->
<li v-for="service in services" v-on:click="toggleActive(service)" v-bind:class="{ 'active': service.active}">
<!--Zeige den Dienstnamen und den Preis in der Bestellung an
Vue.js definiert einen Währungsfilter zum Formatieren des Preises-->
{{service.name}} <span>{{service.price | currency}}</span>
</li>
</ul>
<div class="total">
<!--Berechne den Preis aller Dienste und formatiere die Währung.-->
Gesamt: <span>{{total() | currency}}</span>
</div>
</form>
<script>// Benutzerdefinierter Filter "currency"
Vue.filter('currency', function (value) {
return '$' + value.toFixed(2);
});
var demo = new Vue({
el: '#main',
data: {
// Modelleigenschaften definieren
// Die Ansicht durchläuft das Array und gibt die Daten aus
services: [
{
name: 'Web Development',
price: 300,
active:true
},{
name: 'Design',
price: 400,
active:false
},{
name: 'Integration',
price: 250,
active:false
},{
name: 'Training',
price: 220,
active:false
}
]
},
methods: {
toggleActive: function(s){
s.active = !s.active;
},
total: function(){
var total = 0;
this.services.forEach(function(s){
if (s.active){
total+= s.price;
}
});
return total;
}
}
});</script>
Ausprobieren »
Suchseiten-Beispiel
Suchseite
Geben Sie den Suchinhalt in das Eingabefeld ein, und die Liste zeigt die konfigurierte Liste an:
<form id="main" v-cloak>
<div class="bar">
<!--Das `searchString`-Modell ist an das Textfeld gebunden.-->
<input type="text" v-model="searchString" placeholder="Suchinhalt eingeben" />
</div>
<ul>
<!--Durchlaufen und die Daten ausgeben-->
<li v-for="article in filteredArticles">
<a v-bind:href="article.url"><img v-bind:src="article.image" /></a>
<p>{{article.title}}</p>
</li>
</ul>
</form>
<script>var demo = new Vue({
el: '#main',
data: {
searchString: "",
// Data model, in real environment you can get it via Ajax
articles: [
{
"title": "What You Need To Know About CSS Variables",
"url": "https://www.example.com/css/css-tutorial.html",
"image": "/static.jyshare.com/images/icon/css.png?v=2"
},
{
"title": "Freebie: 4 Great Looking Pricing Tables",
"url": "https://www.example.com/html/html-tutorial.html",
"image": "/static.jyshare.com/images/icon/html.png?v=2"
},
{
"title": "20 Interesting JavaScript and CSS Libraries for February 2016",
"url": "https://www.example.com/css3/css3-tutorial.html",
"image": "/static.jyshare.com/images/icon/css3.png?v=2"
},
{
"title": "Quick Tip: The Easiest Way To Make Responsive Headers",
"url": "https://www.example.com/css3/css3-tutorial.html",
"image": "/static.jyshare.com/images/icon/css3.png?v=2"
},
{
"title": "Learn SQL In 20 Minutes",
"url": "https://www.example.com/sql/sql-tutorial.html",
"image": "/static.jyshare.com/images/icon/sql.png?v=2"
},
{
"title": "Creating Your First Desktop App With HTML, JS and Electron",
"url": "https://www.example.com/js/js-tutorial.html",
"image": "/static.jyshare.com/images/icon/html.png?v=2"
}
]
},
computed: {
// Computed property, match search
filteredArticles: function () {
var articles_array = this.articles,
searchString = this.searchString;
if(!searchString){
return articles_array;
}
searchString = searchString.trim().toLowerCase();
articles_array = articles_array.filter(function(item){
if(item.title.toLowerCase().indexOf(searchString) !== -1){
return item;
}
})
// Return the filtered data
return articles_array;;
}
}
});</script>
Selbst ausprobieren »
Beispiel für das Umschalten zwischen verschiedenen Layouts
Zwischen verschiedenen Layouts wechseln
Klicken Sie auf die Schaltfläche oben rechts, um zwischen verschiedenen Seitenlayouts zu wechseln:
<form id="main" v-cloak>
<div class="bar">
<!--Zwei Schaltflächen werden verwendet, um zwischen verschiedenen Listenlayouts umzuschalten-->
<a class="list-icon" v-bind:class="{ 'active': layout == 'list'}" v-on:click="layout = 'list'"></a>
<a class="grid-icon" v-bind:class="{ 'active': layout == 'grid'}" v-on:click="layout = 'grid'"></a>
</div>
<!--Wir haben zwei Layoutseiten eingerichtet. Welche verwendet wird, hängt von der "layout"-Bindung ab-->
<ul v-if="layout == 'grid'" class="grid">
<!--Große Bilder verwenden, kein Text-->
<li v-for="a in articles">
<a v-bind:href="a.url" target="_blank" rel="noopener noreferrer"><img v-bind:src="a.image.large" /></a>
</li>
</ul>
<ul v-if="layout == 'list'" class="list">
<!--Kleine Bilder und Titel verwenden-->
<li v-for="a in articles">
<a v-bind:href="a.url" target="_blank" rel="noopener noreferrer"><img v-bind:src="a.image.small" /></a>
<p>{{a.title}}</p>
</li>
</ul>
</form>
<script>var demo = new Vue({
el: '#main',
data: {
// Ansichtsmodell, mögliche Werte sind "grid" oder "list".
layout: 'grid',
articles: [{
"title": "HTML-Tutorial",
"url": "https://www.example.com/html/html-tutorial.html",
"image": {
"large": "/static.jyshare.com/images/mix/htmlbig.png?v=2",
"small": "/static.jyshare.com/images/icon/html.png?v=2"
}
},
{
"title": "CSS-Tutorial",
"url": "https://www.example.com/css/css-tutorial.html",
"image": {
"large": "/static.jyshare.com/images/mix/cssbig.png?v=2",
"small": "/static.jyshare.com/images/icon/css.png?v=2"
}
},
{
"title": "JS-Tutorial",
"url": "https://www.example.com/js/js-tutorial.html",
"image": {
"large": "/static.jyshare.com/images/mix/jsbig.jpeg?v=2",
"small": "/static.jyshare.com/images/icon/js.png?v=2"
}
},
{
"title": "SQL-Tutorial",
"url": "https://www.example.com/sql/sql-tutorial.html",
"image": {
"large": "/static.jyshare.com/images/mix/sqlbig.png?v=2",
"small": "/static.jyshare.com/images/icon/sql.png?v=2"
}
},
{
"title": "Ajax-Tutorial",
"url": "https://www.example.com/ajax/ajax-tutorial.html",
"image": {
"large": "/static.jyshare.com/images/mix/ajaxbig.png?v=2",
"small": "/static.jyshare.com/images/icon/ajax.png?v=2"
}
},
{
"title": Python-Tutorial,
"url": "https://www.example.com/pyhton/pyhton-tutorial.html",
"image": {
"large": "/static.jyshare.com/images/mix/pythonbig.png?v=2",
"small": "/static.jyshare.com/images/icon/python.png?v=2"
}
}]
}
});</script>
Selbst ausprobieren »