VueJS - Bileşenler
Vue Components HTML'de yeniden kullanılabilen özel öğeler oluşturan VueJS'nin önemli özelliklerinden biridir.
Bir örnekle çalışalım ve bileşenlerin VueJS ile nasıl çalıştığını daha iyi anlayacak bir bileşen oluşturalım.
Misal
<html>
<head>
<title>VueJs Instance</title>
<script type = "text/javascript" src = "js/vue.js"></script>
</head>
<body>
<div id = "component_test">
<testcomponent></testcomponent>
</div>
<div id = "component_test1">
<testcomponent></testcomponent>
</div>
<script type = "text/javascript" src = "js/vue_component.js"></script>
</body>
</html>vue_component.js
Vue.component('testcomponent',{
template : '<div><h1>This is coming from component</h1></div>'
});
var vm = new Vue({
el: '#component_test'
});
var vm1 = new Vue({
el: '#component_test1'
});.Html dosyasında id ile iki div oluşturduk component_test ve component_test1. İçinde.jsyukarıda gösterilen dosyalar, div kimlikleriyle iki Vue örneği oluşturulur. Her iki görünüm örneğiyle kullanılacak ortak bir bileşen oluşturduk.
Bir bileşen oluşturmak için sözdizimi aşağıdadır.
Vue.component('nameofthecomponent',{ // options});Bir bileşen oluşturulduktan sonra, bileşenin adı özel öğe olur ve aynı şey oluşturulan Vue örnek öğesinde, yani kimlikleri olan div içinde kullanılabilir component_test ve component_test1.
İçinde .js dosyasında, bileşenin adı olarak bir test bileşeni kullandık ve div'lerin içindeki özel öğe olarak aynı ad kullanıldı.
Misal
<div id = "component_test">
<testcomponent></testcomponent>
</div>
<div id = "component_test1">
<testcomponent></testcomponent>
</div>Oluşturulan bileşende .jsdosyasına bir HTML kodu atadığımız bir şablon ekledik. Bu bir yolregistering a global component, aşağıdaki komut dosyasında gösterildiği gibi herhangi bir vue örneğinin parçası yapılabilir.
Vue.component('testcomponent',{
template : '<div><h1>This is coming from component</h1></div>'
});Yürütme sırasında, aynısı tarayıcıya yansıtılacaktır.
Bileşenlere özel öğe etiketi verilir, yani <testcomponent></testcomponent>. Ancak, tarayıcıda aynısını incelediğimizde, aşağıdaki ekran görüntüsünde gösterildiği gibi şablonda bulunan düz HTML'deki özel etiketi fark etmeyeceğiz.
Ayrıca aşağıdaki komut dosyasında gösterildiği gibi bileşenleri doğrudan vue örneğinin bir parçası yaptık.
var vm = new Vue({
el: '#component_test',
components:{
'testcomponent': {
template : '<div><h1>This is coming from component</h1></div>'
}
}
});Bu denir local registration ve bileşenler yalnızca oluşturulan vue örneğinin bir parçası olacaktır.
Şimdiye kadar, temel seçeneklerle birlikte temel bileşeni gördük. Şimdi buna veri ve yöntem gibi birkaç seçenek daha ekleyelim. Vue örneğinin verileri ve yöntemleri olduğu gibi, bileşen de aynı şeyi paylaşır. Böylelikle daha önce gördüğümüz kodu veri ve yöntemlerle genişleteceğiz.
Misal
<html>
<head>
<title>VueJs Instance</title>
<script type = "text/javascript" src = "js/vue.js"></script>
</head>
<body>
<div id = "component_test">
<testcomponent></testcomponent>
</div>
<div id = "component_test1">
<testcomponent></testcomponent>
</div>
<script type = "text/javascript" src = "js/vue_component.js"></script>
</body>
</html>vue_component.js
Vue.component('testcomponent',{
template : '<div v-on:mouseover = "changename()" v-on:mouseout = "originalname();"><h1>Custom Component created by <span id = "name">{{name}}</span></h1></div>',
data: function() {
return {
name : "Ria"
}
},
methods:{
changename : function() {
this.name = "Ben";
},
originalname: function() {
this.name = "Ria";
}
}
});
var vm = new Vue({
el: '#component_test'
});
var vm1 = new Vue({
el: '#component_test1'
});İçinde .jsdosyasına, bir nesne döndüren bir işlev olan verileri ekledik. Nesne, 'Ria' değeri atanmış bir ad özelliğine sahiptir. Bu, aşağıdaki şablonda kullanılır.
template : '<div v-on:mouseover = "changename()" v-on:mouseout = "originalname();"><h1>Custom Component created by <span id = "name">{{name}}</span></h1></div>',Bileşenlerde bir işlev olarak veri bulunmasına rağmen, özelliklerini doğrudan Vue örneğiyle kullandığımız gibi kullanabiliriz. Ayrıca, değişiklik adı ve orijinal ad olmak üzere iki yöntem eklendi. Changename'de name özelliğini değiştiriyoruz ve originalname'de onu orijinal isme geri döndürüyoruz.
Ayrıca div üzerine mouseover ve mouseout olmak üzere iki olay ekledik. Olayların ayrıntıları Olaylar bölümünde tartışılacaktır. Şimdilik fareyle üzerine gelindiğindechangename yöntem ve mouseout çağrıları originalname yöntem.
Aynı ekran aşağıdaki tarayıcıda gösterilmektedir.
Yukarıdaki tarayıcıda görüldüğü gibi, aynı ad olan data özelliğinde atanan adı görüntüler. Ayrıca div üzerine bir mouseover olayı ve ayrıca bir mouseout atadık. Fareyle üzerine geldiğimizde ve fareyi çektiğimizde ne olacağını görelim.
Fareyle üzerine gelindiğinde, ilk bileşenin adının Ben olarak değiştirildiğini görüyoruz, ancak ikincisi olduğu gibi kalıyor. Bunun nedeni, veri bileşeninin bir işlev olması ve bir nesne döndürmesidir. Böylece, bir yerde değiştirildiğinde, diğer durumlarda aynı şeyin üzerine yazılmaz.
Dinamik Bileşenler
Dinamik bileşenler anahtar kelime kullanılarak oluşturulur <component></component> ve aşağıdaki örnekte gösterildiği gibi bir özellik kullanılarak bağlanır.
Misal
<html>
<head>
<title>VueJs Instance</title>
<script type = "text/javascript" src = "js/vue.js"></script>
</head>
<body>
<div id = "databinding">
<component v-bind:is = "view"></component>
</div>
<script type = "text/javascript">
var vm = new Vue({
el: '#databinding',
data: {
view: 'component1'
},
components: {
'component1': {
template: '<div><span style = "font-size:25;color:red;">Dynamic Component</span></div>'
}
}
});
</script>
</body>
</html>Çıktı
Dinamik bileşen, aşağıdaki sözdizimi kullanılarak oluşturulur.
<component v-bind:is = "view"></component>V-bind: is = ”view” a sahiptir ve ona bir değer görünümü atanmıştır. Görünüm, Vue örneğinde aşağıdaki gibi tanımlanır.
var vm = new Vue({
el: '#databinding',
data: {
view: 'component1'
},
components: {
'component1': {
template: '<div><span style = "font-size:25;color:red;">Dynamic Component</span></div>'
}
}
});Şablon çalıştırıldığında Dynamic Component tarayıcıda görüntülenir.