So führen Sie vue.js in HTML ein

So führen Sie vue.js in HTML ein: Laden Sie zuerst vue.js; herunter und fügen Sie dann das vue.js-Paket mit der Syntax wie „“.

Die Betriebsumgebung dieses Tutorials: Windows 7-System, Vue Version 2.0, Dell G3-Computer.

Empfohlen: „vue Tutorial“

vue.js wird in HTML eingeführt

Für Kinder, die noch nicht mit es6 und Webpack vertraut sind, wird nicht empfohlen, das offizielle Gerüstbau-Komponentenprojekt vue-cli direkt zu verwenden .

Lesen Sie zunächst mindestens die einzelnen Kapitel in der Reihenfolge des Dokuments. Fügen Sie vue.js direkt in die HTML-Datei ein, um mit dem Lernen zu beginnen, die grundlegenden Anweisungen von Vue und die Infrastruktur der gesamten Vue-Instanz zu verstehen.

Laden Sie vue.js herunter unter: https://vuejs.org/v2/guide/installation.html. Fügen Sie nach dem Herunterladen das vue.js-Paket zum HTML hinzu.

<script src="${path}/web/constant/vue.js"></script>

Schreiben Sie im aktuellen HTML den JS-Code:

<script type="text/javascript">
new Vue({
el:&#39;#app&#39;,
data: {
message:&#39;hello vue.js.&#39;
}
});
</script>

Fügen Sie im HTML den folgenden Code hinzu:

<h1>Vue demo</h1>
<div id="app">
<div>{{message}}</div>
<input type="text" v-model="message">
</div>

Ändern Sie den Inhalt im Textfeld. Sie können sehen, dass sich auch der Inhalt über dem Textfeld entsprechend ändert. Das ist vue Zwei-Wege-Bindung.

Das obige ist der detaillierte Inhalt vonSo führen Sie vue.js in HTML ein. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!