Vue.js nedir?
Vue.js, HTML'yi yönergeler adı verilen HTML nitelikleriyle genişletmenize olanak tanır
Vue.js yönergeleri, HTML uygulamalarına işlevsellik sunar
Vue.js yerleşik yönergeler ve kullanıcı tanımlı yönergeler sağlar
Vue.js Yönergeleri
Vue.js, {{ }}veriler için yer tutucu olarak çift parantez kullanır.
Vue.js yönergeleri, ön eki olan HTML öznitelikleridir.v-
Örnek Görünüm
Aşağıdaki örnekte, new Vue() ile yeni bir Vue nesnesi oluşturulur .
el: özelliği , yeni Vue nesnesini id="app" ile HTML öğesine bağlar .
Örnek
<div id="app">
<h1>{{ message }}</h1>
</div>
<script>
var myObject = new Vue({
el: '#app',
data: {message: 'Hello Vue!'}
})
</script>
Vue.js Bağlama
Bir Vue nesnesi bir HTML öğesine bağlandığında, Vue nesnesi değiştiğinde HTML öğesi de değişecektir:
Örnek
<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 İki Yönlü Bağlama
Yönerge v-model, HTML öğelerinin değerini uygulama verilerine bağlar.
Buna iki yönlü bağlama denir:
Örnek
<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 Döngü Bağlama
v-forBir dizi Vue nesnesini bir HTML öğesi "dizisine" bağlamak için yönergeyi kullanma :
Örnek
<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>