VueJS - Utilizare v-bind

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.

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

<<-Vue JS - Evenimente -- Componente in Vue JS->>

Un Test simplu in fiecare zi

HTML

CSS

JavaScript

PHP-MySQL

Engleza

Spaniola

Care tag HTML5 defineste un text marcat, evidentiat?

<p>Cursuri graruite: <mark>MarPlo.net</mark> , jocuri, anime.</p>

Ce pseudo-clasa CSS defineste un stil la element cand mouse-ul e deasupra lui?

:focus :hover :active

a:hover {
  font-weight: bold;
  color: #00da01;
}

Clic pe functia ce returneaza un sir cu un numar rotunjit la x decimale.

toPrecision(x) toFixed(x) floor(x)

var num = 12.34567;
num = num.toFixed(2);
alert(num);       // 12.35

Indicati functia PHP care adauga continutul unui fisier intr-un array.

[) file() readfile()

$arr = file("a_file.txt", FILE_IGNORE_NEW_LINES | FILE_SKIP_EMPTY_LINES);
var_export($arr);

Clic pe raspunsul potrivit la intrebarea: "What time is it?"

On the 7th of July 1996 It is a quarter to 5. Nice weather.

What time is it? It is a quarter to 5.
- Cat este ora? E 5 fara un sfert.

Indicati raspunsul potrivit la intrebarea: "¿Qué hora es?"

Hace buen tiempo. En el 7 de julio de 1996 Son las tres menos cuarto.

¿Qué hora es? Son las tres menos cuarto.
- Cat este ora? E 3 fara un sfert.