Heim >Web-Frontend >HTML-Tutorial >So verwenden Sie VUE im Frontend
So verwenden Sie VUE im Frontend
- php中世界最好的语言Original
- 2017-11-27 09:32:009868Durchsuche
Ich verwende VUE schon seit einiger Zeit für Projekte, habe aber noch nie einen Einführungsartikel über VUE geschrieben. Deshalb werde ich Ihnen heute ein paar Beispiele vorstellen, um VUE gut vorzustellen Werkzeug.
Verwandte Video-Tutorial-Empfehlungen: Vue.js-Tutorial-Empfehlungen: Die neuesten 5 vue.js-Video-Tutorial-Auswahlen im Jahr 2018
1 Die in diesem Artikel verwendete Vue-Version ist 2.4.2 und kann sich von der neuen Version unterscheiden. Daher sollte jeder darauf achten.
2. Ich gehe außerdem davon aus, dass Sie über Grundkenntnisse in HTML, CSS und Javascript verfügen. Sie haben auch die grundlegende Einführung auf der offiziellen Website gelesen und verfügen über ein allgemeines Verständnis von Vue. Erfahren Sie mehr über die häufig verwendeten Vue-Anweisungen (v-model, v-show, v-if, v-for, v-on, v-bind usw.)! Wenn Sie neu im Front-End sind, werden Sie beim Lesen des Artikels möglicherweise verwirrt sein. Es wird empfohlen, zuerst die Grundlagen zu lernen und ihn dann zu lesen, nachdem Sie die Grundkenntnisse beherrscht haben!
3. Für das folgende Beispiel schlage ich vor, dass Sie es tun, während Sie den Artikel lesen! Auf diese Weise wird Ihr Denken sehr klar und weniger verwirrend! Sie werden nicht das Gefühl haben, dass der Artikel zu lang ist (der Artikel ist lang, damit jeder mehr Informationen lesen kann, und es werden viele wiederholte Codes veröffentlicht. Diese Codes, HTML, CSS usw. können vollständig übersprungen werden.) . Wenn Sie den Artikel nur lesen, können Sie ihn möglicherweise nicht zu Ende lesen, da der Artikel ausführlicher und länger ist!
4. Diese Beispiele stammen aus meinen eigenen täglichen Übungsprojekten und der Code wurde auf Github (vue-demos) erwähnt. Begrüßen Sie alle zum Star. !
2. Was ist Vue?
Vue ist ein sehr beliebtes Front-End-Framework, das auf der Idee der Datensteuerung und Komponentisierung basiert als die drei wichtigsten Front-End-Frameworks zusammen mit Angular und React. Im Vergleich zu Angular und React ist Vue leichter, leistungsfähiger und benutzerfreundlicher. Sie können auch weitermachen und einen Blick auf die Einführung von Vue und die Einführung der Kernfunktionen auf der offiziellen Website werfen. Das einfache und grobe Verständnis lautet: Wenn Sie mit Vue entwickeln, verarbeiten Sie einfach die Daten, und dann verarbeitet Vue sie und verwendet die Daten, um die Änderung des DOM voranzutreiben (ich weiß nicht, ob ich das falsch verstehe, bitte geben Sie mir Bescheid.) ein paar Ratschläge, falls Sie dies tun).
Das Folgende ist das einfachste Beispiel für eine Erklärung
Der Code lautet wie folgt
html
<div id="app">
<p>{{ message }}</p>
<input v-model="message">
</div>
js
new Vue({
el: '#app',
data: {
message: 'Hello Vue!'
}
})Ich glaube, es ist nicht schwer zu verstehen, das heißt, die Eingabe ist gebunden zum Nachrichtenwert hinzufügen und dann in der Eingabe ändern. Aufgrund der bidirektionalen Bindung wurde gleichzeitig der HTML-Code ({{ message }}) der Seite geändert!
Okay, lasst uns aus Beispielen lernen!
3. Registerkarte
Prinzipielle Analyse und Implementierung
Das ist sehr einfach, es ist nichts weiter als ein Klick, um die Anzeige zu wechseln. Aber jeder muss es auch erkennen. Wenn Sie das verstehen, schauen Sie sich die nächsten beiden an! Dieses Beispiel soll nur ein Aufwärm- und Kennenlerneffekt sein!
Dieser Schritt besteht nur aus einem Schritt und das Prinzip ist dasselbe. Ich kommentiere direkt im Code. Nachdem ich die Kommentare gelesen habe, wird es jeder verstehen!
Vollständiger Code
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<style>
body{
font-family:"Microsoft YaHei";
}
#tab{
width: 600px;
margin: 0 auto;
}
.tab-tit{
font-size: 0;
width: 600px;
}
.tab-tit a{
display: inline-block;
height: 40px;
line-height: 40px;
font-size: 16px;
width: 25%;
text-align: center;
background: #ccc;
color: #333;
text-decoration: none;
}
.tab-tit .cur{
background: #09f;
color: #fff;
}
.tab-con div{
border: 1px solid #ccc;
height: 400px;
padding-top: 20px;
}
</style>
<body>
<div id="tab">
<div>
<!--点击设置curId的值 如果curId等于0，第一个a添加cur类名，如果curId等于1，第二个a添加cur类名，以此类推。添加了cur类名，a就会改变样式 @click,:class ,v-show这三个是vue常用的指令或添加事件的方式-->
<a href="javascript:;" @click="curId=0" :class="{'cur':curId===0}">html</a>
<a href="javascript:;" @click="curId=1" :class="{'cur':curId===1}">css</a>
<a href="javascript:;" @click="curId=2" :class="{'cur':curId===2}">javascript</a>
<a href="javascript:;" @click="curId=3" :class="{'cur':curId===3}">vue</a>
</div>
<div>
<!--根据curId的值显示div,如果curId等于0，第一个div显示，其它三个div不显示。如果curId等于1，第二个div显示，其它三个div不显示。以此类推-->
<div v-show="curId===0">
html<br/>
</div>
<div v-show="curId===1">
css
</div>
<div v-show="curId===2">
javascript
</div>
<div v-show="curId===3">
vue
</div>
</div>
</div>
</body>
<script src="vue.min.js"></script>
<script>
new Vue({
el: '#tab',
data: {
curId: 0
},
computed: {},
methods: {},
mounted: function () {
}
})
</script>
</html>Das war's. Ich glaube, dass Sie durch diesen Fall auch ein gewisses Verständnis für Vue haben. Weitere spannende Informationen finden Sie in anderen verwandten Themen zu PHP-Chinesisch Website-Artikel!
Verwandte Lektüre:
Hauptfunktionale Anwendungen von CSS3
So verwenden Sie Übergangsanimationen in CSS3
Das obige ist der detaillierte Inhalt vonSo verwenden Sie VUE im Frontend. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!