Curs Vuejs

Mixins sunt obiecte JS care pot fi utilizate pentru distribuirea de cod reutilizabil intre componente. Cand o componenta foloseste un mixin, toate optiunile din mixin devin o parte a optiunilor componentei.

- Exemplu:
// define a mixin object
var mixin_1 = {
 //function automatically called when Vue instance is created
 created: function(){
 this.hello();
 },
 methods: {
 hello: function(){
 console.log('hello from mixin.')
 }
 }
}

// define a component that uses this mixin
var component = Vue.extend({
 mixins: [mixin_1]
})

var comp = new component() // hello from mixin.
Cand un mixin si o componenta contin optiuni care se suprapun, acestea sunt combinate. Daca au metode sau proprietati cu acelasi nume, datele din instanta principala Vue au prioritate si vor inlocui metoda sau proprietatea cu acelasi nume.

- In urmatorul exemplu avem un mixin si o instanta Vue cu obiectul data care au aceeasi proprietate "msg".
// define a mixin object
var mixin_2 = {
 //function automatically called when Vue instance is created
 data: function(){
 return {msg: 'Hello from Mixin', str:'String from mixin'};
 }
}

// vue instance
var vm = new Vue({
 mixins: [mixin_2],
 data: {msg:'Msg replaced from component.', txt:'Sunt o persoana buna'},
 created: function(){
 console.log(this.$data);
 }
})

// {"msg": "Msg replaced from component.", "txt": "Sunt o persoana buna", "str": "String from mixin"}
- In urmatorul exemplu avem o metoda (aici denumita "same_met") cu acelasi nume in mixin si in instanta Vue.
// define a mixin object
var mixin_3 = {
 methods: {
 met_mixin: function(){
 console.log('Doreste-ti doar si ai frecvent in viziune efectul implinit')
 },
 same_met: function(){
 console.log('Trecutul nu exista')
 }
 }
}

// define a component that uses this mixin
var vm = new Vue({
 mixins: [mixin_3],
 methods: {
 same_met: function(){
 console.log('Eu sunt Viata mea')
 },
 met_inst: function(){
 console.log('Miracolul e mereu posibil')
 }
 }
})

vm.met_inst(); // Miracolul e mereu posibil
vm.met_mixin(); // Doreste-ti doar si ai frecvent in viziune efectul implinit
vm.same_met(); // Eu sunt Viata mea
Functiile "Hook" cu acelasi nume sunt unite intr-un Array, astfel incat sa fie apelate toate. Functiile "Hook" din Mixin vor fi apelate inaintea celor din instanta Vue.
var mixin_4 ={
 created: function(){
 console.log('mixin - Dorinta este cererea')
 }
}

new Vue({
 mixins: [mixin_4],
 created: function(){
 console.log('component - Viziunea este primirea')
 }
})

// mixin - Dorinta este cererea
// component - Viziunea este primirea

Un Test simplu in fiecare zi

HTML
CSS
JavaScript
PHP-MySQL
Engleza
Spaniola
Ce tag HTML5 este indicat sa contina meniul cu link-uri de navigare in site?
<section> <nav> <article>
<nav><ul>
 <li><a href="http://coursesweb.net/css/" title="CSS Course">CSS Course</a></li>
 <li><a href="http://www.marplo.net/jocuri/" title="Flash Games">Flash Games</a></li>
</ul></nav>
Ce proprietate CSS muta elementrul in dreapta sau stanga de la locul unde e?
text-align clear float
.some_class {
  width: 30%;
  float: left;
}
Clic pe metoda obiectului Math care rotunjeste numarul x descrescator la cel mai apropiat intreg.
Math.ceil(x) Math.abs(x) Math.floor(x)
var num = 12.34567;
num = Math.floor(num);
alert(num);       // 12
Indicati functia PHP care returneaza numarul de caractere dintr-un sir.
mb_strlen() count() stristr()
$str = "sir cu caractere utf-8 åèö";
$nrchr = mb_strlen($str);
echo $nrchr;        // 29
Clic pe raspunsul potrivit la intrebarea: "When it happened?".
On the 7th of July 1996 It is a quarter to 5. Nice weather.
When it happened? On the 8th of August 2001.
- Cand s-a intamplat? Pe 8 August 2001.
Indicati raspunsul potrivit la intrebarea: "¿Cuando sucedió?".
Hace buen tiempo. En el 8 de Agosto de 2001 Son las tres menos cuarto.
¿Cuando sucedió? En el 8 de Agosto de 2001.
- Cand s-a intamplat? Pe 8 August 2001.
Mixins

Last accessed pages

  1. Protejare cu parole folosind .htaccess (416)
  2. Tag-urile iframe si object (3658)
  3. Jargon hispanic: Jerga - Slang - Argot - Modismo (2414)
  4. Trecutul simplu si continuu - Past Tense Simple and Continuous (80607)
  5. Gramatica limbii engleze - Prezentare Generala (210777)

Popular pages this month

  1. Cursuri si Tutoriale: Engleza, Spaniola, HTML, CSS, Php-Mysql, JavaScript, Ajax (570)
  2. Curs HTML gratuit Tutoriale HTML5 (490)
  3. Coduri pt culori (272)
  4. Creare si editare pagini HTML (245)
  5. Gramatica limbii spaniole. Indrumator si prezentare generala (220)
Chat
Discuta sau lasa un mesaj pt. ceilalti utilizatori
Full screenInchide