Curs Vuejs


Proprietatile computed sunt ca si metodele, dar cu unele diferente. Proprietatile computed se definesc in obiectul computed, si in general se folosesc sa actualizeze automat anumite proprietati sau structuri template cand alte date din template se modifica.

Sintaxa:
var vm = new Vue({
//...
 computed: {
 prop_name: function(){
 //code and value to return
 }
 }
});

Iata un exemplu, textul adaugat intr-o caseta input va modifica valoarea template-ului {{msg}}. Iar prin definirea unei proprietati computed (aici reversedMsg), cand datele pentru {{msg}} se schimba, expresia vm.reversedMsg e automat actualizata si returneaza textul in sens invers.
<div id='example'>
 Add some text: <input type='text' v-model='msg'/>
 <p>Messag: {{msg}}</p>
 <p>Computed reversed message: "{{ reversedMsg }}".</p>
</div>

<script>
var vm = new Vue({
 el: '#example',
 data: {
 msg: 'Hello'
 },
 computed: {
 // a computed getter
 reversedMsg: function(){
 // `this` points to the vm instance
 return this.msg.split('').reverse().join('')
 }
 }
});
</script>
Functia computed de la reversedMsg e folosita ca un getter (transmite valoare) pentru vm.reversedMsg.
Vue stie ca vm.reversedMsg depinde de valoarea proprietatii vm.msg, astfel se va actualiza orice legatura care depinde de vm.reversedMsg cand vm.msg se modifica, dupa cum puteti vedea in urmatorul exemplu.
var vm = new Vue({
 data: {
 msg: 'Hello'
 },
 computed: {
 // a computed getter
 reversedMsg: function(){
 // `this` points to the vm instance
 return this.msg.split('').reverse().join('')
 }
 }
});

console.log(vm.reversedMsg) // olleH
vm.msg = 'Goodbye';
console.log(vm.reversedMsg) // eybdooG
Proprietatile computed sunt memorate in cache pe baza dependentelor lor reactive. O proprietate computed se va reevalua doar atunci cand una din dependentele sale se modifica.
Cat timp vm.msg nu se modifica, accesarile la proprietatea computed vm.reversedMsg vor returna rapid valoarea din cache fara sa ruleze iar functia.

Computed Set si Get

In mod implicit, proprietatile computed sunt "getter-only" (doar pentru a returna valoare), dar se poate face si un setter (care seteaza o valoare) cand aveti nevoie. In acest caz sintaxa e:
var vm = new Vue({
//...
 computed: {
 prop_name: {
 get: function(){
 //code for getter
 },
 set: function(){
 //code for setter
 }
 }
 }
});

Iata un exemplu:
<div id='demo'>
 Full Name: <input type = 'text' v-model='fullname' /><br><br>
 First Name: {{first_name}}<br>
 Last Name: {{last_name}}
</div>

<script>
var vm = new Vue({
 el: '#demo',
 data: {
 first_name :'Mar',
 last_name : 'Plo'
 },
 computed :{
 fullname : {
 get : function(){
 return this.first_name+' '+this.last_name;
 },
 set : function(name){
 var fname = name.split(' ');
 this.first_name = fname[0];
 this.last_name = fname[1]
 }
 }
 }
});
</script>
Cand rulam codul si scriem in caseta de text, first_name si last_name se vor actualiza prin functia set.
Functia get returneaza first_name si last_name, iar functia set le seteaza valoarea cand se editeaza caseta de text.

Un Test simplu in fiecare zi

HTML
CSS
JavaScript
PHP-MySQL
Engleza
Spaniola
Ce atribut face ca valoarea din caseta de text sa nu poata fi modificata de utilizator?
checked="checked" readonly="readonly" disabled="disabled"
<input type="text" value="valoare-fixa" readonly="readonly" name="a_name" />
Ce proprietate CSS permite crearea de colturi rotunjite?
background-size border-size border-radius
.class {
  border:2px solid blue;
  border-radius:1.2em;
}
Ce instructiune afiseaza o fereastra cu mesaj si butoane OK si Cancel?
indexOf() confirm() prompt()
var ques = window.confirm("Rezultatul lui 0+0 este 0?");
if (ques) alert("Corect");
else alert("Incorect");
Indicati functia PHP care returneaza numarul cel mai mic dintr-o multime de numere.
floor() ceil() min()
$min_nr = min(12, 8, 25, 13);
echo $min_nr;        // 8
Alegeti verbul corect care trebuie in propozitia: "Its ears ... big".
are is has
Its ears are big.
- Urechile lui sunt mari.
Alegeti verbul corect care trebuie in propozitia: "Los niños ... deportistas"
soy son está
Los niños son deportistas.
- Copii sunt sportivi.
Proprietati Computed

Last accessed pages

  1. Utilizare getElementById (1864)
  2. Citeste date din fisier Excel in PHP - PhpExcelReader (549)
  3. Ora curenta JavaScript (1451)
  4. Verbe modale - Modal verbs - CAN, COULD, MAY, MIGHT, MUST (56304)
  5. Exercitii engleza - English Tests and exercises - Grammar (84823)

Popular pages this month

  1. Cursuri si Tutoriale: Engleza, Spaniola, HTML, CSS, Php-Mysql, JavaScript, Ajax (321)
  2. Curs CSS Online Tutoriale CSS3 (218)
  3. Curs HTML gratuit Tutoriale HTML5 (216)
  4. Curs si Tutoriale Ajax (207)
  5. Curs si Tutoriale JavaScript (201)