Vue.component()
.new Vue()
, precum data, computed, watch, methods, si functii "lifecycle hooks". Singura exceptie fiind cateva proprietati specifice pentru elementul radacina, precum el.data
trebuie sa fie o functie care returneaza un obiect, astfel incat fiecare instanta sa poata mentine o copie independenta a datelor returnate.// Define a new component called test_comp Vue.component('test_comp', { data: function(){ return { txt:'Viata este miracol' } }, template: '<div><h4>Acesta sunt Eu</h4><p>{{txt}}.</p></div>' });
<div id='demo'> <test_comp></test_comp> </div> <script> new Vue({ el: '#demo' }); </script>Tag-ul personalizat (aici <test_comp>) e inlocuit cu valoarea proprietatii template definita in component.
Daca aveti mai multe taguri html in template-ul componentei, trebuie sa le adaugati pe toate intr-un element parinte.
In exemplul nostru am adaugat tagurile H4 si P in interiorul unui Div.
<div id='demo'> <test_comp></test_comp> <test_comp></test_comp> <test_comp></test_comp> </div> <script> // Define a new component called test_comp Vue.component('test_comp', { data: function(){ return { txt:'Viata este miracol' } }, template: '<div><h4>Aceasta sunt EU</h4><p>{{txt}}.</p></div>' }); // Create a Vue instance new Vue({ el: '#demo' }); </script>
<div id='demo'> Click on these: <comp_test></comp_test> <comp_test></comp_test> </div> <script> // Define a new component called comp_test Vue.component('comp_test', { template: '<div v-bind:style="styleobj" @click="countClicks">Nr. clicks: {{ nr_c }}.</div>', data: function(){ return {nr_c:0, styleobj:{background:'#babafe', height:'80px', margin:'8px', width:'111px'}}; }, methods:{ countClicks: function(ev){ this.nr_c++; } } }); // Create a Vue instance new Vue({ el: '#demo'}); </script>
props
.<div id='demo'> <comp_button text='Comments'></comp_button> <comp_button text='Likes'></comp_button> <comp_button text='Shares'></comp_button> </div> <script> // Define a new component called comp_button Vue.component('comp_button', { props: ['text'], template: '<button>{{text}}</button> ' }); // Create a Vue instance new Vue({ el: '#demo' }); </script>
v-for
); formula mai eleganta:
<div id='demo'> <comp_button v-for='txt in ar_txt' v-bind:text='txt'></comp_button> </div> <script> // Define a new component called comp_button Vue.component('comp_button', { props: ['text'], template: '<button>{{text}}</button> ' }); const btn_txt =['Comments', 'Likes', 'Shares']; //array with data for text in component // Create a Vue instance new Vue({ el: '#demo', data:{ ar_txt: btn_txt } }); </script>
Vue.component()
, dar componentele pot fi inregistrate si direct in instanta Vue, in proprietatea components
. Aceasta se numeste inregistrare Locala, dupa cum se vede si in urmatorul script:
<div id='demo'> <comp_arti v-for='obj in article' v-bind:post='obj'></comp_arti> </div> <script> //array with data for article content in component const arti =[ {title: 'Sunt Fericit', cnt:'<i>Transmit doar bucurie</i>'}, {title: 'Sunt Bun', cnt:'<b>Recunosc sfintenie si inocenta in tot ce percep.</b>'}, {title: 'Sunt (in) Pace', cnt:'<b>Doar sunt Eu insumi.</b>'} ]; // Create a Vue instance new Vue({ el: '#demo', data:{ article: arti }, components:{ comp_arti:{ props:['post'], template:'<div><h3>{{post.title}}</h3><div v-html="post.cnt"></div></div>' } } }); </script>
<slot>
in template-ul componentei.<div id='demo'> <msg_box> <i>Sunt Liber.</i> </msg_box> </div> <script> Vue.component('msg_box', { template:'<div class="my_msg"><b>Succes:</b> <slot></slot></div>' }) // Create a Vue instance new Vue({ el: '#demo' }); </script>
<input type="text" name="a_name" value="val" />
h3 { font-variant: small-caps; }
var msg = "Viziteaza CoursesWeb.net"; alert(msg);
$ip = $_SERVER["REMOTE_ADDR"]; echo $ip;
He actually came on time. - De fapt, el a venit la timp.
Hoy hace buen tiempo. - Astazi e vreme frumoasa.