Autor: Dardo Arevalo
Formador Plan Ibirapitá
Educador Conenfor
Uruguay

Linkacademia

La educacion es la herramienta para el desarrollo humano

Cinque Terre


El potente framework reactivo Vue.js

Es digno de mencionar frameworks que están haciendo cada vez más simple y potente la tarea de los desarroladores para interactuar con los usuarios. Hoy vamos a dejar alguna líneas sobre el framework reactivo Vue.js destacando los aspectos que lo convierten en una alternativa actual a un nivel similar que otros frameworks como React o Angular, para citar alguno de los más importantes.

Para empezar, una de las propiedades que se observan como novedosas y útiles es la posibilidad que ofrece de trabajar con código HTML, CSS y JavaScript por separado. Esto es, poder visualizar con mayor claridad cada lenguaje y no perderse en el bosque de lenguajes combinados en el código.

Veamos un ejemplo. Yo puede iniciar una Single-Page App, abriendo un archivo index.html y colocando en el body el script:

<script src=“https://unpkg.com/vue”></script>

Simplemente con esto, ya estamos accediendo a todas la directivas de Vue.js que son muchas y soportando librerías en forma simple.

Si escribimos en nuestro index.html

<div id=“app”>
{{ message }}
</div>
y luego en un script
<div id=“app”>

<h1>{{ message }}</h1>

 </div>
<script src=“https://unpkg.com/vue”></script> ( script para acceder a Vue.js)
<script>
var app = new Vue({
el‘#app’,  ( le estoy indicando que el script actuará SOLAMENTE en el div id = app)
data: {
message‘Hello Vue!’   ( le paso a la variable message un string que se conectará con la doble llave dentro de div id)
}
});
 </script>
Simplemente con esto el navegador nos mostrará  HELLO VUE!.
En este ejemplo básico no hemos empleado ninguna directiva de Vue.js, las cuales son los elementos más importantes y los más útiles que presenta el framework.
Por ejemplo la directiva v – text (nótese que todas las directivas tienen una sintaxis de una v antes del nombre), me permite en forma rápida introducir un texto en el DOM del html.
En el mismo ejemplo anterior, en lugar de utilizar la doble llave {{ … }} para que el navegador nos muestre el contenido de la variable message, podemos usar la directiva v-text de la siguiente manera:
<div id=“app”>

<h1 v-text=”message”></h1>

 </div>
<script src=“https://unpkg.com/vue”></script> ( script para acceder a Vue.js)
<script>
var app = new Vue({
el‘#app’,  ( le estoy indicando que el script actuará SOLAMENTE en el div id = app)
data: {
message‘Hello Vue!’  
}
});
</script>
y obtendremos el mismo resultado en el navegador que usando la sintaxis anterior.

Con v-text además podremos concatenar textos, como por ejemplo añadir un Hola al texto de la variable message. Para realizar esto, simplemente modificamos el valor de v-text colocando lo siguiente:

 <h1 v-text = ” ‘Hola ‘ + message “> </h1>

Ahora el navegador nos entregará una vista de :     Hola Hello Vue.


Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Tableta Argos 710    $ 2.460

7 pulgadas 1Gb de RAM 16 Gb de almacenamiento

Camara frontal 0.3MP, Camara Trasera 2.0 MP, Wif, mini HDMI, micro usb, Bluetooth, Acelerómetro, giroscopio.
Android 4.2.

Comprar ahora

Tableta Argos 710

Celular Motorola Libre Droid Razr Hd 4.7    $ 4.600

4,7 pulgadas 1Gb de RAM 16 Gb de almacenamiento

Procesador Qualcomm Snapdragon S4 dual-core 1.5 GHz
OS Android OS, v4.0.4 Ice Cream Sandwich (actualizable a Android 4.1).
Comprar ahora DROID RAZR HD 4.7 1.0 GB RAM 16 GB

Aprenda a manejar tableta Ibirapitá

Menutabletaibirapita

Sitio dedicado a la educación informática, focalizando el tema en la importancia de la educación en general y en programas de Microsoft, Excel y Word