Creare instanta de obiect Vue

Fiecare aplicatie Vue incepe prin crearea unei instante de obiect Vue, cu instructiunea new Vue(); transmitand un obiect cu optiuni:
var vm = new Vue({
 // options
})

Data si Metode

Obiectul cu optiuni poate sa contina proprietati si metode (functii). Cele mai utilizate proprietati in obiectul Vue sunt data si el.
<div id='app'>
<h1>{{ title }}</h1>
</div>

<script>
var vue_ob = new Vue({
 el: '#app',
 data: {title: 'Vue Tutorial'}
})
</script>
- el: - contine referinta la elementele HTML la care e legat obiectul, poate fi un selector CSS, class, id.
- data: - un obiect cu date. Cand valorile din acest obiect se modifica, interfata "reactioneaza", si invers, cand datele din HTML sunt modificate se actualizeaza si cele din obiectul Vue.

Exemplu de cod

var data = { a: 1 } // Our data object

// The object is added to a Vue instance
var vm = new Vue({
 data: data
})

// Setting the property on the instance
// also affects the original data
vm.a = 2;
console.log(data.a); // 2

// ... and vice-versa
data.a = 3;
console.log(vm.a); // 3
Proprietatile din obiectul data sunt reactive doar daca au existat la crearea instantei.
Daca stiti ca veti avea nevoie de o proprietate mai tarziu, dar nu are valoare sau e inexistenta, va trebui sa o definiti cu o valoare initiala. De exemplu:
var data ={
 a:1,
 b:'',
 ar:[]
}

Pe langa proprietatea data, Instantele Vue expun o serie de proprietati si metode utile ale instantei. Acestea sunt prefixate cu $ pentru a le diferentia de proprietatile definite de utilizator.
De exemplu:
var data = { a: 12 } // Our data object

// The object is added to a Vue instance
var vm = new Vue({
 data: data
})

console.log(vm.$data); // { a: 12 }

// $watch is an instance method
vm.$watch('a', (newValue, oldValue)=>{
 // This callback will be called when vm.a changes
 console.log('old-value:'+oldValue, 'new-value:'+newValue);
})

//changing the value of vm.a, it will triger vm.$match()
vm.a = 8;
Puteti sa consultati Vue API reference pentru o lista completa de proprietati si metode.

Definire Metode

Metodele se definesc in proprietatea methods:.
var vm = new Vue({
 methods:{
 methodName:function(ev){
 //code..
 }
 }
})

Exemplu, la clic pe un buton se apeleaza o metoda definita in obiectul Vue:
<div id='app'>
<div>{{ str }}</div>
<button @click='newStr'>Click</button>
</div>

<script>
var vm = new Vue({
 el: '#app',
 data: {str: 'Sunt Eu insumi.'},
 methods:{
 newStr:function(ev){
 this.str ='Iubesc Viata';
 }
 }
})
</script>

Functii Lifecycle Hooks

Fiecare instanta Vue parcurge o serie de pasi de initializare cand este creata, ruleaza, de asemenea, functii denumite lifecycle hooks, oferind programatorilor posibilitatea de a executa propriul lor cod in anumite etape.

De exemplu, functia "hook" created poate fi folosita ca sa ruleze automat un cod dupa crearea instantei:
var vm = new Vue({
 data: { a: 1 },
 created: function(){
 // `this` points to the vm instance
 console.log('a is: ' + this.a)
 }
})

//Results in console: a is: 1
Mai sunt si alte functii "hook" care sunt apelate la diferite etape ale instantei, cum ar fi mounted, updated, si destroyed. Toate aceste functii "lifecycle hooks" se apeleaza in contextul lor cu this.

Un Test simplu in fiecare zi

HTML
CSS
JavaScript
PHP-MySQL
Engleza
Spaniola
Clic pe tag-ul care creaza celula in tabel.
<tr> <span> <td>
<table></tr>
  <td>Cell-1</td><td>Cell-2</td>
</tr></table>
Indicati proprietatea CSS care adauga o imagine pentru fundal
background-color background-image color
h3 {
  background-image: url("image.jpg");
}
Ce instructiune se foloseste la parcugerea elementelor unui Array?
for() [) object()
var arr = [1, "ab", "CoursesWeb.net"];
for(var i=0; i< arr.length; i++) { alert(arr[i]); };
Indicati functia PHP utilizata la parcurgerea elementelor unui Array asociativ.
for() foreach() if()
$arr =["k1"=>"v1", "k2"=>"v2", "k3"=>"v3");
foreach($arr AS $k => $v) { echo "<br/>". $k ." - ". $v; }
Care din urmatoarele cuvinte este sinonim cu "gentle" (bland)?
meek good beautiful
He is so kind and meek.
- El este atat de amabil si bland.
Care din urmatoarele cuvinte este sinonim cu "amable" (bland, prietenos)?
hermoso fuerte manso
Tu padre tiene un carácter muy manso.
- Tatal tau are un caracter foarte bland.
Instanta de Obiect Vue

Last accessed pages

  1. Verbe Dinamice si Statice - Dynamic and Static Verbs (5113)
  2. Conditional IF in Limba Engleza - Fraze Conditionale (57712)
  3. Curs CSS Online Tutoriale CSS3 (35539)
  4. Teste Programare Web (794)
  5. Cursuri si Tutoriale: Engleza, Spaniola, HTML, CSS, Php-Mysql, JavaScript, Ajax (113161)

Popular pages this month

  1. Cursuri si Tutoriale: Engleza, Spaniola, HTML, CSS, Php-Mysql, JavaScript, Ajax (6445)
  2. Curs HTML gratuit Tutoriale HTML5 (5678)
  3. Curs si Tutoriale JavaScript (4373)
  4. Curs PHP MySQL, Tutoriale si Scripturi PHP (4244)
  5. Curs CSS Online Tutoriale CSS3 (4062)