Wat is Vue.js?
Met Vue.js kunt u HTML uitbreiden met HTML-kenmerken die richtlijnen worden genoemd
Vue.js-richtlijnen bieden functionaliteit voor HTML-toepassingen
Vue.js biedt ingebouwde richtlijnen en door de gebruiker gedefinieerde richtlijnen
Vue.js-richtlijnen
Vue.js gebruikt dubbele accolades {{ }}als tijdelijke aanduidingen voor gegevens.
Vue.js-richtlijnen zijn HTML-kenmerken met het voorvoegsel v-
Voorbeeldweergave
In het onderstaande voorbeeld wordt een nieuw Vue-object gemaakt met new Vue() .
De eigenschap el: bindt het nieuwe Vue-object aan het HTML-element met id="app" .
Voorbeeld
<div id="app">
<h1>{{ message }}</h1>
</div>
<script>
var myObject = new Vue({
el: '#app',
data: {message: 'Hello Vue!'}
})
</script>
Vue.js Binding
Wanneer een Vue-object is gebonden aan een HTML-element, verandert het HTML-element wanneer het Vue-object verandert:
Voorbeeld
<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 Tweerichtingsbinding
De v-modelrichtlijn bindt de waarde van HTML-elementen aan applicatiegegevens.
Dit wordt tweerichtingsbinding genoemd:
Voorbeeld
<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 Loop Binding
De v-forrichtlijn gebruiken om een array van Vue-objecten te binden aan een "array" van HTML-elementen:
Voorbeeld
<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>