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 HTML5 adauga o aplicatie externa (SWF, PDF) in pagina web?
<mark> <embed> <canvas>
<embed src="flash_game.swf" width="450" height="350" />
Ce pseudo-element adauga un anume stil la prima linie de text din element?
:first-letter :before :first-line
#id:first-line {
  font-weight: bold;
  color: blue;
}
Clic pe proprietatea obiectului window care preia sau seteaza adresa URL a paginii curente.
window.location window.self window.status
var url = window.location;
alert(url);
Indicati functia PHP care preia continutul unui fisier sau pagina si-l adauga intr-un sir.
fopen() file_put_contents() file_get_contents()
$homepage = file_get_contents("http://www.marplo.net/");
echo $homepage;
Care din urmatoarele perechi de numere sunt in ordine unul dupa altu?
seven - eight ten - six three - five
This fruit has seven or eight seeds.
- Acest fruct are sapte sau opt seminte.
Care din urmatoarele perechi de numere sunt in ordine unul dupa altu?
diez - seis siete - ocho tres - cinco
Esta fruta tiene siete u ocho semillas.
- Acest fruct are sapte sau opt seminte.
Utilizare v-model in campuri input in form

Last accessed pages

  1. Prezent perfect si Prezent perfect continuu - Present perfect and Continuous (64897)
  2. Break si Continue (2046)
  3. Zilele saptamanii, Lunile si Anotimpuri - Exercitii incepatori (6118)
  4. Curs ActionScript 3.0 - Lectii initiere (213)
  5. Cursuri Limba Italiana (4293)

Popular pages this month

  1. Cursuri si Tutoriale: Engleza, Spaniola, HTML, CSS, Php-Mysql, JavaScript, Ajax (2271)
  2. Curs HTML gratuit Tutoriale HTML5 (1855)
  3. Curs si Tutoriale JavaScript (1706)
  4. Curs CSS Online Tutoriale CSS3 (1563)
  5. Curs PHP MySQL, Tutoriale si Scripturi PHP (1536)