Was ist Vue.js?
Mit Vue.js können Sie HTML mit HTML-Attributen erweitern, die als Direktiven bezeichnet werden
Vue.js-Direktiven bieten Funktionalität für HTML-Anwendungen
Vue.js bietet integrierte Anweisungen und benutzerdefinierte Anweisungen
Vue.js-Direktiven
Vue.js verwendet doppelte Klammern {{ }}als Platzhalter für Daten.
Vue.js-Direktiven sind HTML-Attribute mit dem Präfix v-
Beispielansicht
Im folgenden Beispiel wird mit new Vue() ein neues Vue-Objekt erstellt .
Die Eigenschaft el: bindet das neue Vue-Objekt an das HTML-Element mit id="app" .
Beispiel
<div id="app">
<h1>{{ message }}</h1>
</div>
<script>
var myObject = new Vue({
el: '#app',
data: {message: 'Hello Vue!'}
})
</script>
Vue.js-Bindung
Wenn ein Vue-Objekt an ein HTML-Element gebunden ist, ändert sich das HTML-Element, wenn sich das Vue-Objekt ändert:
Beispiel
<div id="app">
{{ message }}
</div>
<script>
var myObject = new Vue({
el: '#app',
data: {message: 'Hello Vue!'}
})
function
myFunction() {
myObject.message = "John Doe";
}
</script>
Vue.js Zwei-Wege-Bindung
Die v-modelDirektive bindet den Wert von HTML-Elementen an Anwendungsdaten.
Dies wird als Zwei-Wege-Bindung bezeichnet:
Beispiel
<div id="app">
<p>{{ message }}</p>
<p><input v-model="message"></p>
</div>
<script>
var myObject = new Vue({
el: '#app',
data: {message: 'Hello Vue!'}
})
</script>
Vue.js-Schleifenbindung
Verwenden der v-forDirektive zum Binden eines Arrays von Vue-Objekten an ein "Array" von HTML-Elementen:
Beispiel
<div id="app">
<ul>
<li v-for="x in todos">
{{
x.text }}
</li>
</ul>
</div>
<script>
myObject =
new Vue({
el: '#app',
data: {
todos: [
{ text: 'Learn
JavaScript' },
{ text: 'Learn
Vue.js' },
{ text: 'Build
Something Awesome' }
]
}
})
</script>