VueJS - komponenty
Vue Components to jedna z ważnych funkcji VueJS, która tworzy niestandardowe elementy, które można ponownie wykorzystać w HTML.
Popracujmy na przykładzie i stwórzmy komponent, który pozwoli lepiej zrozumieć, jak komponenty współpracują z VueJS.
Przykład
<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'
});W pliku .html utworzyliśmy dwa div o identyfikatorze component_test i component_test1. w.jspokazane powyżej, dwie instancje Vue są tworzone z identyfikatorami div. Stworzyliśmy wspólny komponent do użycia z obydwoma instancjami widoku.
Aby utworzyć komponent, postępuj zgodnie ze składnią.
Vue.component('nameofthecomponent',{ // options});Po utworzeniu komponentu nazwa komponentu staje się elementem niestandardowym i tego samego można użyć w utworzonym elemencie instancji Vue, tj. Wewnątrz elementu div z identyfikatorami component_test i component_test1.
w .js pliku, użyliśmy komponentu testowego jako nazwy komponentu i ta sama nazwa jest używana jako element niestandardowy wewnątrz elementów div.
Przykład
<div id = "component_test">
<testcomponent></testcomponent>
</div>
<div id = "component_test1">
<testcomponent></testcomponent>
</div>W komponencie utworzonym w .jsdodaliśmy szablon, do którego przypisaliśmy kod HTML. To jest sposóbregistering a global component, które można uczynić częścią dowolnej instancji vue, jak pokazano w poniższym skrypcie.
Vue.component('testcomponent',{
template : '<div><h1>This is coming from component</h1></div>'
});Po wykonaniu to samo zostanie odzwierciedlone w przeglądarce.
Komponenty otrzymują niestandardowy tag elementu, tj <testcomponent></testcomponent>. Jednak gdy sprawdzimy to samo w przeglądarce, nie zauważymy niestandardowego tagu w zwykłym kodzie HTML obecnego w szablonie, jak pokazano na poniższym zrzucie ekranu.
Uczyniliśmy również komponenty bezpośrednio częścią instancji vue, jak pokazano w poniższym skrypcie.
var vm = new Vue({
el: '#component_test',
components:{
'testcomponent': {
template : '<div><h1>This is coming from component</h1></div>'
}
}
});To się nazywa local registration a komponenty będą częścią tylko utworzonej instancji vue.
Do tej pory widzieliśmy podstawowy komponent z podstawowymi opcjami. Teraz dodajmy do niego więcej opcji, takich jak dane i metody. Podobnie jak instancja Vue ma dane i metody, komponent również udostępnia te same. Dlatego rozszerzymy kod, który widzieliśmy już z danymi i metodami.
Przykład
<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'
});w .jsplik powyżej, dodaliśmy dane, które są funkcją, która zwraca obiekt. Obiekt ma właściwość name, której przypisywana jest wartość „Ria”. Jest to używane w następującym szablonie.
template : '<div v-on:mouseover = "changename()" v-on:mouseout = "originalname();"><h1>Custom Component created by <span id = "name">{{name}}</span></h1></div>',Pomimo posiadania danych jako funkcji w komponentach, możemy używać ich właściwości w taki sam sposób, jak używamy z bezpośrednią instancją Vue. Dodane są również dwie metody, nazwa zmiany i nazwa_oryginalna. W changename zmieniamy właściwość name, aw originalname resetujemy ją z powrotem do oryginalnej nazwy.
Dodaliśmy również dwa zdarzenia dotyczące div, mouseover i mouseout. Szczegóły wydarzeń zostaną omówione w rozdziale Wydarzenia. Na razie więc woła kursor myszychangename wywołania metody i myszy originalname metoda.
Wyświetlanie tego samego jest wyświetlane w poniższej przeglądarce.
Jak widać w powyższej przeglądarce, wyświetla nazwę przypisaną we właściwości danych, która jest tą samą nazwą. Przypisaliśmy również zdarzenie najechania myszą na element div, a także wyprowadzenie myszy. Zobaczmy, co się stanie, gdy najedziemy kursorem myszy i wyprowadzimy kursor myszy.
Po najechaniu myszą widzimy, że nazwa pierwszego komponentu zostaje zmieniona na Ben, jednak druga pozostaje taka, jaka jest. Dzieje się tak, ponieważ komponent danych jest funkcją i zwraca obiekt. Tak więc, gdy zostanie zmieniony w jednym miejscu, to samo nie zostanie nadpisane w innych przypadkach.
Komponenty dynamiczne
Komponenty dynamiczne są tworzone za pomocą słowa kluczowego <component></component> i jest powiązany przy użyciu właściwości, jak pokazano w poniższym przykładzie.
Przykład
<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>Wynik
Komponent dynamiczny jest tworzony przy użyciu następującej składni.
<component v-bind:is = "view"></component>Ma v-bind: is = ”view” i przypisany jest do niego widok wartości. Widok jest definiowany w instancji Vue w następujący sposób.
var vm = new Vue({
el: '#databinding',
data: {
view: 'component1'
},
components: {
'component1': {
template: '<div><span style = "font-size:25;color:red;">Dynamic Component</span></div>'
}
}
});Po uruchomieniu plik template Dynamic Component jest wyświetlany w przeglądarce.