Introducció al framework VueJs 2

abril 15, 2017

És un framework de javascript molt utilitzat, tan per pàgines HTML com per fer aplicacions webs SPA (single Page Aplications), molt lleuger i fàcil d’utilitzar. És un framework reactiu que implementa “two way data-binding” enllaç de dades en dues direccions  (entre la vista i el model) d’una manera molt ràpida. Es diu birideccional perquè s’actualitza la vista i el model, quan es produeix un canvi a qualsevol dels dos.

Ara crearem una carpeta per el projecte de Vue, jo treballo amb SublimeText, si no teniu el format de Vue perquè ressalti s’ha d’instal.lar la llibreria aquí: https://github.com/vuejs/vue-syntax-highlight.

Crearem un document index.html normal, i per tenir la llibreria de vue només hem d’ insertar la línia de codi

A la pàgina de vue https://vuejs.org/  trobarem l’enllaç i tota la documentació del framework

Ara el que hem de fer es crear un fixter main.js, on anirem introduint el codi. Primer de tot es crea un objecte Vue, al qual li passarem un JSON, amb les dades que vulguem mostrar en la pàgina index

I a l’index:

  • Primer creem l’instància Vue: new Vue
  • Es defineix la propietat “el” que correspongui amb l’element : miDiv, és a dir l’etiqueta Html on anirà el contingut
  • Propietat Data: es defineix l’informació que tindrà aquest model
  • Pot tenir més propietats, com methods (on es defineixen els metodes), computed(si es defineixen variables computades)

Directives

 Són atributs que afegim a les etiquetes HTML per donar-li una funcionalitat, es reconeixen perquè la seva sintaxi és v-, hi han de diferents tipus:
  •  v-model: Amb aquesta directiva activem la propietat reactiva a un element del DOM

Condicionals:

  • v-if agrega o elimina condicionalment un element al DOM.
  • v-else per mostrar un element quan v-if  avalua com fals.
  • v-else-if una condició dins d’una altra condició

Iteració:

  • v-for: Per recórrer els elements d’un array, un array o col.lecció d’objectes

Esdeveniments.

Al igual que javascript disposa d’esdeveniments com (click, submit..) Es fan amb v-on, i a continuació el nom de l’esdeveniment. Alguns exemples:

  • v-on:click

  • v-on:submit.prevent

  • v-on:stop.prevent

  •  v-bind: Enllaça el valor d’una propietat dinàmica en la instància de Vue.

Components

Controla una part de l’aplicació, és una de les parts  més potents de Vue, és reutilitzable. Encapsula informació creant un “pseudo-tags html” que després podrem utilitzar. Per exemple en aquest cas declarem un component “elMeuComponent” amb les opcions que vulguem. Si modifiquem contingut aquí es veurà afectada la vista HTML on utilitzem el component.

També té l’objecte data, però en aquest cas ha de ser una funció per tant es poden passar paràmetres, i ha de tenir un return

I ara en la nostra pàgina HTM, s’esn ha creat una etiqueta “elMeuComponent” amb l’informació que hem definit previament que podem utilitzar a la part de la web que ens interessi

També es poden crear plantilles,components dinàmics, components dins de components… això només és una introducció a les possibilitats que es poden realitzar amb els components, al la web de vue es pot consultar més informació https://vuejs.org/v2/guide/components.html

 

Feel free to share...Share on Facebook
Facebook
Share on Google+
Google+
Tweet about this on Twitter
Twitter
Share on LinkedIn
Linkedin


Deixa un comentari

L'adreça electrònica no es publicarà.