Wat is Vue.js?
Met Vue.js kan jy HTML uitbrei met HTML-kenmerke wat aanwysings genoem word
Vue.js-aanwysings bied funksionaliteit aan HTML-toepassings
Vue.js bied ingeboude riglyne en gebruikergedefinieerde riglyne
Vue.js-aanwysings
Vue.js gebruik dubbelhakies {{ }}as plekhouers vir data.
Vue.js-aanwysings is HTML-kenmerke met die voorvoegsel v-
Voorbeeld aansig
In die voorbeeld hieronder word 'n nuwe Vue-objek geskep met nuwe Vue() .
Die eienskap el: bind die nuwe Vue-objek aan die 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 'n Vue-objek aan 'n HTML-element gebind is, sal die HTML-element verander wanneer die Vue-objek verander:
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 Tweerigtingbinding
Die v-modelrichtlijn bind die waarde van HTML-elemente aan toepassingsdata.
Dit word tweerigtingbinding genoem:
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-lusbinding
Gebruik die v-foropdrag om 'n verskeidenheid Vue-objekte aan 'n "skikking" HTML-element te bind:
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>