Curs Vuejs


Directiva v-model din VueJS se poate utiliza pentru actualizarea continutului dintr-un element HTML in functie de datele adaugate intr-o caseta input.
v-model va ignora atributele initiale value, checked sau selected din elementele de formular. Va prelua datele din obiectul data de la instanta Vue.

Testati si studiati urmatoarele exemple.


Campuri de text Input

<div id='demo'>
<input type='text' value='Ignored' v-model='msg' placeholder='Edit me'>
<p>Message is: {{ msg }}</p>
</div>

<script>
var vm = new Vue({
 el: '#demo',
 data:{msg:''}
});
</script>

Campuri Textarea

<div id='demo'>
<textarea style='height:80px; width:250px;' v-model='msg' placeholder='Add multiple lines'></textarea><br>
Message is:
<div style='height:80px; white-space:pre-line; width:200px;'>{{ msg }}</div>
</div>

<script>
var vm = new Vue({
 el: '#demo',
 data:{msg:''}
});
</script>
Interpolarea la textarea (<textarea>{{text}}</textarea>) nu functioneaza. Utilizati in locul ei: v-model='text'

Modificatorul lazy

In mod implicit, directiva v-model emite evenimentul input la elementele textarea si input. Se poate adauga modificatorul lazy pentru a sincroniza datele dupa evenimentul change.

- Exemplu:
<div id='demo'>
Without lazy modifier <input type='text' v-model='msg' placeholder='Edit me'>
<p>Message is: {{ msg }}</p>
v-model with lazy modifier <input type='text' v-model.lazy='msg2' placeholder='Edit and click outside'>
<p>Message is: {{ msg2 }}</p>
</div>

<script>
var vm = new Vue({
 el: '#demo',
 data:{msg:'', msg2:''}
});
</script>
Daca doriti ca spatiul liber de la inceputul si sfarsitul textului adaugat sa fie sters automat, adaugati modificatorul trim, precum: v-model.trim='msg'.

Elemente Checkbox

1. checkbox simplu, cu valoare booleana.

<div id='demo'>
<input type='checkbox' id='chb1' v-model='checked'>
<label for='chb1'>{{ checked }}</label>
</div>

<script>
var vm = new Vue({
 el: '#demo',
 data:{checked:false}
});
</script>

2. Pentru checkbox care nu face parte dintr-un Array de elemente, valorile setate cu v-model sunt True sau False. Daca doriti alte valori pentru checkbox, folositi atributele true-value si false-value, precum in urmatorul exemplu:

<div id='demo'>
<input type='checkbox' id='chb1' v-model='checked' true-value='yes' false-value='no'>
<label for='chb1'>{{ checked }}</label>
</div>

<script>
var vm = new Vue({
 el: '#demo',
 data:{checked:'no'}
});
</script>

3. Mai multe elemente checkboxe legate intr-un Array.

<div id='demo'>
<label><input type='checkbox' value='one' v-model='chk_val'> One</label>
<label><input type='checkbox' value='two' v-model='chk_val'> Two</label>
<label><input type='checkbox' value='three' v-model='chk_val'> Three</label>
<div>Checked values: {{ chk_val }}</div>
</div>

<script>
var vm = new Vue({
 el: '#demo',
 data:{chk_val:[] }
});
</script>

Butoane Radio

<div id='demo'>
<label><input type='radio' value='one' v-model='num'> One</label><br>
<label><input type='radio' value='two' v-model='num'> Two</label><br>
<label><input type='radio' value='three' v-model='num'> Three</label>
<div>Checked number: {{ num }}</div>
</div>

<script>
var vm = new Vue({
 el: '#demo',
 data:{num:''}
});
</script>

Lista Select

1. Lista select de optiuni cu o singura selectare.

<div id='demo'>
<select v-model='selected'>
<option disabled value=''>Select an option</option>
<option>A</option>
<option>B</option>
<option>C</option>
</select>
<div>Selected: {{ selected }}</div>
</div>

<script>
var vm = new Vue({
 el: '#demo',
 data:{selected:''}
});
</script>
Daca valoarea initiala a expresiei de la v-model nu se potriveste cu nici una dintre optiuni, elementul <select> va fi redat cu o stare "unselected". Este indicat sa adaugati o optiune cu atribut disabled si atributul value cu valoare goala, precum in exemplu de sus.

2. Lista select de optiuni cu selectare multipla (legata la un Array).

<div id='demo'>
<select v-model='selected' multiple>
<option>One</option>
<option>Two</option>
<option>Three</option>
</select>
<div>Selected: {{ selected }}</div>
</div>

<script>
var vm = new Vue({
 el: '#demo',
 data:{selected:[]}
});
</script>

3. Lista select creata dinamic (cu v-for).

<div id='demo'>
<select v-model='selected'>
 <option v-for='opt in options' v-bind:value='opt.val'>{{ opt.txt }}</option>
</select>
<div>Selected: {{ selected }}</div>
</div>

<script>
var vm = new Vue({
 el: '#demo',
 data:{
 selected:'A',
 options:[
 {txt:'One', val:'A'},
 {txt:'Two', val:'B'},
 {txt:'Three', val:'C'}
 ]
 }
});
</script>

Un Test simplu in fiecare zi

HTML
CSS
JavaScript
PHP-MySQL
Engleza
Spaniola
Care tag e folosit pentru a adauga liste cu definitii in element <dl>?
<dt> <dd> <li>
<dl>
 <dt>HTML</dt>
  <dd> - Hyper Text Markup Language</dd>
  <dd> - Limbaj de cod pentru pagini web</dd>
</dl>
Care proprietate CSS poate sa ascunda un element in pagina, lasand spatiu gol in locul lui?
display position visibility
#id {
  visibility: hidden;
}
Indicati evenimentul declansat cand se apasa clic pe un obiect in pagina.
onclick onmouseover onfocus
document.getElementById("id").onclick = function(){
  alert("http://www.MarPlo.net/");
}
Indicati variabila PHP ce contine datele din $_GET, $_POST si $_COOKIE.
$_SESSION $_GET $_REQUEST
if(isset($_REQUEST["id"])) {
  echo $_REQUEST["id"];
}
Care din urmatoarele cuvinte reprezinta un Verb?
lighting believe path
I believe in my path.
- Eu cred in calea mea.
Care din urmatoarele cuvinte reprezinta un Verb?
creer camino iluminaciĆ³n
creer = a crede; camino = cale /drum; iluminaciĆ³n = iluminare
Utilizare v-model in campuri input in form

Last accessed pages

  1. Alphabet and Pronunciation - Alfabetul si pronuntia in limba engleza (59069)
  2. Gramatica limbii engleze - Prezentare Generala (211648)
  3. Cursuri limba engleza gratuite si lectii online (62335)
  4. Articolul din limba engleza - The article (67631)
  5. Trecutul continuu - Exercitii si teste incepatori (13018)

Popular pages this month

  1. Cursuri si Tutoriale: Engleza, Spaniola, HTML, CSS, Php-Mysql, JavaScript, Ajax (525)
  2. Gramatica limbii spaniole. Indrumator si prezentare generala (324)
  3. Gramatica limbii engleze - Prezentare Generala (229)
  4. Cursuri limba engleza gratuite si lectii online (225)
  5. Limba spaniola curs online incepatori si avansati (199)