Apa itu Vue.js?
Vue.js memungkinkan Anda memperluas HTML dengan atribut HTML yang disebut arahan
Arahan Vue.js menawarkan fungsionalitas ke aplikasi HTML
Vue.js menyediakan arahan bawaan dan arahan yang ditentukan pengguna
Arahan Vue.js
Vue.js menggunakan kurung kurawal ganda {{ }}sebagai tempat penampung data.
Direktif Vue.js adalah atribut HTML dengan awalanv-
Tampilan Contoh
Pada contoh di bawah ini, objek Vue baru dibuat dengan new Vue() .
Properti el: mengikat objek Vue baru ke elemen HTML dengan id="app" .
Contoh
<div id="app">
<h1>{{ message }}</h1>
</div>
<script>
var myObject = new Vue({
el: '#app',
data: {message: 'Hello Vue!'}
})
</script>
Pengikatan Vue.js
Ketika objek Vue terikat ke elemen HTML, elemen HTML akan berubah ketika objek Vue berubah:
Contoh
<div id="app">
{{ message }}
</div>
<script>
var myObject = new Vue({
el: '#app',
data: {message: 'Hello Vue!'}
})
function
myFunction() {
myObject.message = "John Doe";
}
</script>
Pengikatan Dua Arah Vue.js
Arahan v-modelmengikat nilai elemen HTML ke data aplikasi.
Ini disebut pengikatan dua arah:
Contoh
<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>
Pengikatan Loop Vue.js
Menggunakan v-fordirektif untuk mengikat array objek Vue ke "array" elemen HTML:
Contoh
<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>