Curs Vuejs


v-bind este o directiva in VueJS folosita pentru a lega dinamic unul sau mai multe atribute sau o componenta prop de o expresie.

Valori dinamice la atribute HTML

Directiva v-bind se poate folosi pentru actualizare reactiva a unui atribut din tagul HTML.

- Sintaxa:
v-bind:attribute_name='value'

- Exemplu, setare dinamica a atributului src dintr-un tag <img>:
<div id='demo'>
 <img v-bind:src='img' alt='Image' />
</div>

<script>
var vm = new Vue({
 el: '#demo',
 data: {img:'/imgs/smile_gift.png'}
});
</script>
VueJS are si prescurtare pentru v-bind, se inlocuieste cu caracterul doua-puncte ":", precum in codul urmator.
<img :src='img'/>

Se poate adauga si un obiect cu atribute la un singur v-bind.
<tag_name v-bind='{attribute_1:variable_1, attribute_2:variable_2}'>Content</tag_name>

- In urmatorul exemplu setam dinamic atributele src si class cu un singur v-bind:
<style'>
.st_img {
border: 7px solid #e0e000;
height:110px;
margin:35px 2px 2px 20px;
transform: rotate(40deg);
}
</style>

<div id='demo'>
 <img v-bind='{src:img, class:im_cls}' alt='Image'/>
</div>

<script>
var vm = new Vue({
 el: '#demo',
 data: {
 img:'/imgs/smile_gift.png',
 im_cls:'st_img'
 }
});
</script>

v-bind cu HTML style si class

Cand v-bind e folosit pentru definirea atributelor class sau style, accepta tipuri de valoare suplimentare cum ar fi Array sau Obiect.

Exemple cu html style

<div :style="{ fontSize: size + 'px' }"></div>
<div :style='[style_obj1, style_obj2]'></div>

Exemple cu html class

<div :class='{ red: is_red }'></div>
<div :class='[class_a, class_b]'></div>
<div :class='[class_a, { class_b: is_b, class_c: is_c }]'></div>
- Pentru detalii despre v-bind cu atributele html style si class, vedeti tutorialul: Class si Style cu Vue.js

Atribute dinamice cu v-bind

Se pot utiliza si argumente dinamice, adaugate intre paranteze patrate.
- Sintaxa:
<img v-bind:[attr_name]='value'/>

// shorthand
<img :[attr_name]='value'/>

- In exemplul urmator, setam in mod dinamic atributul ID la o imagine:
<style'>
#im_rot {
border: 7px solid #ffbe00;
height:110px;
margin:35px 2px 2px 20px;
transform: rotate(40deg);
}
</style>

<div id='demo'>
 <img :src='img' :[attr]='atr_val' alt='Image'/>
</div>

<script>
var vm = new Vue({
 el: '#demo',
 data: {
 img:'/imgs/smile_gift.png',
 attr:'id',
 atr_val:'im_rot'
 }
});
</script>

v-bind si Componente

v-bind se poate folosi pentru a transmite date de la Componenta parinte la elementele din ea, utilizand proprietatea props.
- Sintaxa:
<component_name :prop='item'></component_name>

- In urmatorul exemplu legam o variabila text din component cu o variabila de la instanta Vue. Valoarea ei va fi transmisa la elementele din template-ul definit in component:
<div id='demo'>
 <comp_h :text='ar_txt[0]'></comp_h>
 <comp_h :text='ar_txt[2]'></comp_h>
</div>

<script>
// Define a new component called comp_h
Vue.component('comp_h', {
 props: ['text'],
 template: '<h3>{{text}}</h3>'
});

//array with data for text in component
const ar_t =['Pacea e buna.', 'Sunt intelept.', 'Imi pastrez si dau pacea mea.'];

// Create a Vue instance
new Vue({
 el: '#demo',
 data:{
 ar_txt: ar_t
 }
});
</script>
- Pentru detalii despre Componente in Vue, vedeti tutorialul: Componente in Vue JS

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.
VueJS - Utilizare v-bind

Last accessed pages

  1. PHP PDO Introducere Conectari la Baze de Date (1370)
  2. Configurare fonturi (1704)
  3. Curs cu Tutoriale Node.js (2746)
  4. Jokes - Glume, Bancuri, Humor (2) (8182)
  5. Download carti electronice si programe pentru Limba Engleza (30733)

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)