TPG

Phones, tablets, news, tutorials, technology, science.

miƩrcoles, 14 de marzo de 2018

9:40

Introduccion a VueJS Parte 4 - Directivas de VueJS



VueJS nos proporciona varias directivas para utilizarlas sobre los elementos del DOM, estas directivas son atributos especiales para cualquier elemente, suelen empezar por ‘v-prefijo’, donde prefijo es el nombre de la directiva.

Directiva v-show

Esta directiva se utiliza para mostrar o ocultar un elemento dependiendo de la variable que se le pase que debe de ser del tipo Boleana, y se mostrara si es true y se ocultara si el false.

<body>
<div id="app">
<div v-show="ver">
<span>No me ves!</span>
</div>
</div>
</body>
<script src="vue.js"></script>
<script type="text/javascript">
var App = new Vue({
el: '#app',
data: {
nombre: 'Pepe',
ver: false
}
});
</script>

martes, 13 de marzo de 2018

12:10

Introduccion a VueJS Parte 3 - Hola Mundo


Para crear una simple aplicación ‘Hola Mundo’ vamos a crear un archivo HTML e importa el script de VueJS:

<html>
<head>
<title>Hola Mundo - VueJS</title>
</head>
<body>
</body>
<script src="https://unpkg.com/vue"></script>
</html>

Y ahora que hemos creado el documento, necesitaremos aniadir un elemento donde se albergara nuestra aplicación:

<body>
<div id=”app”>
</div>
</body>

Lo siguiente sera crear un script donde existira el codigo de nuestra aplicación:

<script src="https://unpkg.com/vue"></script>
<script type="text/javascript" >
var App = new Vue({
el: "#app",
data: {
message: "Hola Mundo!",
}
});
</script>

Al crear una instancia de Vue tenemos que enlazar el elemento del DOM que controlara la aplicación, en este caso ‘app’, y data es una lista/diccionario donde podemos almacenar cualquier tipo de dato que luego podemos mostrar reactivamente en el DOM.



Si nos vamos al navegador web y al abrir este archivo ya sea utilizando un servidor web como XAMPP o simplemente con doble clic, nos aparecera un documento blanco, presionamos sobre el boton F12 para abrir la consola y se nos mostrara lo siguiente:



Desde la consola podemos modificar los valores de las variables de nuestra aplicación, y Vue se encargara de actualizar el valor de esta en todos los lugares que se utilice, por esto es llamado reactivo, ya que realiza estos cambios en tiempo real:



lunes, 12 de marzo de 2018

10:15

Introduccion a VueJS Parte 2 - Como instalar VueJS




La manera mas sencilla y rapida de instalar VueJS es usando un CDN, y se puede hacer importando este archivo javascript:

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

Y con ese simplemente, ya tenemos VueJS instalado, existe otra manera que es un poco mas complicada y que seria utilizando la aplicación por linea de commando vue-cli que necesita tener instalado NodeJS y que veremos mas adelante.