Vuejs.txt

====================
Guía de Vue.js by dM
====================

============
Introducción
============

¿Qué es Vue.js?

Vue (pronunciado /vjuː/ en inglés, como view) es un framework progresivo para
construir interfaces de usuario. A diferencia de otros frameworks monolíticos,
Vue está diseñado desde el inicio para ser adoptado incrementalmente.
La biblioteca principal se enfoca solo en la capa de la vista, y es muy simple
de utilizar e integrar con otros proyectos o bibliotecas existentes. Por otro
lado, Vue también es perfectamente capaz de soportar aplicaciones sofisticadas
de una sola página (en inglés single-page-application o SPA) cuando se utiliza
en combinación con herramientas modernas y librerías compatibles.

Vue combina buenas prácticas de Angular y de React.

================================
Progresividad de Vue y sus capas
================================

La progresividad de Vue se ve a través de varias capas:

-La capa más básica es el render declarativo, render significa dibujar elementos
en la pantalla del navegador y declarativo significa que la sintaxis es muy
fácil de entender.

-La siguiente capa sería el sistema de componentes, aquí ya se está hablando de
piezas de interfaz como por ejemplo la tarjeta de un producto, un menú de
navegación, un formulario, esos ya son componentes, piezas de la interfaz que se
pueden combinar para crear toda tu aplicación.

-La siguiente capa es el enrutamiento en el cliente, es decir tener diferentes
direcciones en tu aplicación, por ejemplo el inicio, el login, etc. Ya tu vas
creando tus diferentes URL para las diferentes vistas de tu aplicación, para las
paginas internas.

-La siguiente capa es el manejo de estado a gran escala, el estado es el
conjunto de datos en un momento específico de la aplicación, el ejemplo más
sencillo es un usuario que no ha agregado un producto a un carrito de compra
por ejemplo, ese es el estado, en el momento que un usuario agrega un producto
al carrito el estado cambia, porque ahora el carrito tiene un producto con un
precio y un total, entonces si el usuario cambia de página porque está viendo
otros productos, ese carrito debe mantenerse con ese producto, con ese precio
sin importar por donde se mueva el usuario, ese es el estado y lo podemos
manejar con Vue.

-La siguiente es Build system, Vue te permite empaquetar un proyecto para
mandarlo a producción de diferentes maneras.

-La última capa es la de Persistencia de datos entre cliente y servidor es decir
poder tener datos que se mantienen en una aplicación.

Las capas van creciendo creciendo y esa es la progesividad de las aplicaciones.

=========
Empezando
=========

La guia oficial asume un conocimiento intermedio de HTML, CSS y JavaScript. Si
eres totalmente nuevo en el desarrollo de frontend, puede no ser la mejor idea
empezar a utilizar un framework - ¡aprende los conceptos básicos y luego regresa
aquí! La experiencia previa con otros frameworks ayuda, pero no es obligatoria.

===========
Instalación
===========

Inclusión directa con <script>
==============================

La manera más sencilla de probar Vue.js es usando el ejemplo “hola mundo” creado
un archivo .html e incluir Vue con un llamado a un enlace CDN:

<!-- development version, includes helpful console warnings -->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>

NPM
===

NPM es el método de instalación recomendado para construir aplicaciones a gran
escala con Vue. Este combina perfectamente con empaquetadores de módulos, tales
como Webpack o Browserify. Vue también ofrece herramientas para la creación de
componentes de un solo archivo (en inglés Single-File Components).

$ npm install vue

Con esto se instalara la versión estable de Vue, no la más reciente, y se
actualizará el archivo package.json donde se habrá agregado la nueva dependencia
de Vue.

=================================
Vue.js devtools Firefox extensión
=================================

Cuando use Vue, le recomendamos que también instale Vue Devtools en su navegador
lo que le permite inspeccionar y depurar sus aplicaciones de Vue de una manera
más amigable:

https://github.com/vuejs/vue-devtools#vue-devtools

https://addons.mozilla.org/en-US/firefox/addon/vue-js-devtools/

=======================
Renderizado declarativo
=======================

En el núcleo de Vue.js se encuentra un sistema que nos permite renderizar
declarativamente datos en el DOM utilizando una sintaxis de plantillas directa:

El siguiente es un código html, bastante sencillo, posee una línea para llamar a
Vue en nuestra página web <script src="https://unpkg.com/vue@2"></script> no
significa que lo estemos instalando, también tenemos un "div" con el "id" = a
"app" que usaremos como punto de montaje y luego tenemos un pequeño script donde
instanciamos Vue con "new Vue" y le pasamos un objeto con el atributo "el"
donde ponemos el selector o referencia a "#app" del punto de montaje declarado
primero, de esta manera estamos diciento que esta instancia de Vue estará
conectada con ese punto de montaje, así se unen, luego tenemos el atributo data
se podrá imprimir luego en el html, etnonces como tengo la propiedad "message"
significa que voy a imprimir el contenido en "{{ message }}".

Dentro de esa instancia de Vue ya se podrían poner eventos, poner alguna lógica
pero es javascript convencional.

El ejemplo sería:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>My first Vue app</title>
  <script src="https://unpkg.com/vue@2"></script>
</head>
<body>
  <div id="app">
    {{ message }}
  </div>

  <script>
    var app = new Vue({
      el: '#app',
      data: {
        message: 'Hello Vue!'
      }
    })
  </script>
</body>
</html>

Esto nos muestra el mensaje Hello Vue! en el navegador.

=====================
Hola mundo en Vuejs 3
=====================

<!DOCTYPE html>
<html>
<head>
  <title>My first Vue app</title>
  <script src="https://unpkg.com/vue@next"></script>
</head>
<body>
  <div id="app">
    {{ message }}
  </div>

  <script>
    var app = Vue.createApp({
      data() {
        return {
          message: "Hello World!"
        };
      }
    }).mount("#app");
  </script>
</body>
</html>

=================
Directivas de Vue
=================

Son como una herencia que toma Vue de Angular 1 y son atributos en el html o el
template que insertan lógica de manera sencilla, siempre empiezan con "v-".

Ejemplos:

v-for: Lo que hace es recorrer una lista de elementos, es un ciclo for.

v-on: Que lo que hace es escuchar un evento, nativo o creado por el usuario.

v-bind: Vincula un atributo HTML a un valor que tengamos en nuestro modelo.
Encadena datos, es decir que establece comunicación con los datos que haya en el
componente asociado. Sirve para cualquier atributo, por ejemplo style.

v-if: Un condicional que inyecta un elemento al DOM según la condición.

v-else: El else de esa condicional.

v-show: Para mostrar u ocultar elementos usando la propiedad display de CSS.

v-model: Permite enlazar un elemento con alguna propiedad de un estado. Permite
la vinculación bidireccional entre los datos del dom y el estado de la
aplicación.

v-text: Esta directiva permite hacer un trabajo similar a la interpolación de
texto con la diferencia que la interpolación puede ser usada para renderizar un
fragmento del texto de un elemento, la directiva v-text renderizará todo el
contenido. Permite actualizar la propiedad textContent del elemento.

v-html: Esta directiva permite imprimir código html en el elemento en cuestión.
Es el equivalente al innerHTML de JavaScript.

v-pre: Le indica a Vue que no debe realizar ningún proceso de compilación en
este elemento y cualquiera de sus hijos.

v-once: Renderiza el elemento solo una vez. Si la expresión asociada al elemento
cambia no se verá reflejada en el template.

Y existen más directivas en Vue...

===========================================
Funciones de Javascript dentro del template
===========================================

Se pueden ejecutar expresiones javascript siempre y cuando sean de un solo
statement y a algunas variables globales como: Math, Number, Date, Array,
Object, Boolean, String, RegExp, Map, Set, JSON, Intl..

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Vue example</title>
  <script src="https://unpkg.com/vue@2"></script>
</head>
<body>
<div id="main">
  <p>{{ name.toUpperCase() }}</p>
  <p>{{ age >= 18 ? "Soy Mayor de Edad" : "Soy Menor de Edad" }}</p>
  <p>
    Mi sueldo es {{salary.toFixed(2)}}
  </p>
    <p>
    La fecha es {{new Date().toDateString()}}
  </p>
  <p>
    2 al cuadrado es {{Math.pow(2, 2)}}
  </p>
</div>
<script>
var demo = new Vue({
  el: '#main',
  data: {
    age: 18,
    lastname: "Horia",
    name: "Susana",
    salary: 250
  }
});
</script>
</body>
</html>

Ejemplo de la directiva v-bind
==============================

Enlace de atributos
===================

El enlace de atributos (attribute binding) es una característica de Vue que
permite enlazar atributos de elementos HTML con el valor de una propiedad.

La forma para generar la imagen de manera dinámica, o más bien, enlazarla desde
la data de Vue no es igual a la forma de imprimir un mensaje común con
interpolación como es el caso de la variable message. Para esto, Vue nos
proporciona la directiva v-bind. La sintaxis para esto sería la siguiente:

v-bind:attribute="property"

En donde attribute es el atributo del elemento HTML y property es la propiedad
en Vue.js. De acuerdo a esto, la forma de enlazar el atributo src de la imagen
con Vue sería de la siguiente manera.

En este punto, generalizando un poco la sintaxis en realidad permitiría no solo
colocar el valor de una propiedad en el contexto sino toda una expresión.

v-bind:attribute="expression"

Finalmente, Vue.js nos facilita un poco la vida agregando un shorthand para esta
directiva de la siguiente manera.

:attribute="expression"

-----

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Vue example</title>
  <script src="https://unpkg.com/vue@2"></script>
</head>
<body>
<div id="app">
  <img v-bind:src="image" width="80" /> {{ $message }}
</div>
<script>
var app = new Vue({
  el: '#app',
  data: {
    message: 'Vue.js',
    image: 'https://blog.pleets.org/img/articles/vuejs-icon.png'
  }
});
</script>
</body>
</html>

Fuente
======

https://blog.pleets.org/article/enlace-de-atributos-en-vuejs

Ejemplo de la directiva v-on
============================

Si queremos que un elemento responda a un evento click, por ejemplo, debemos
utilizar la directiva v-on:click o de la forma reducida @click seguida del
metodo manejador asociado:

<button @click="miMetodo()">Haz Click</button>

Al contrario de React, donde utilizamos el método render() del componente,
sintaxis JSX para definir la vista y mezclamos cierta lógica al permitirnos
utilizar JavaScript. En Vue, al igual que Angular, tenemos separado Vista de
Controlador utilizando puro HTML + directivas para la vista y JavaScript para la
lógica.

Ejemplo:

<!DOCTYPE html>
<html lang="">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>Component vue example</title>
    <script src="https://unpkg.com/vue@2"></script>
  </head>
  <body>
    <div id="app"></div>
    <script>
      const app = new Vue({
        el: '#app',
        template: `
          <div>
            <!--button v-on:click="showAlert()">Push me</button-->
            <button @click="showAlert()">Push me</button>
          </div>
        `,
        data: {
        },
        methods: {
          showAlert: function () {
            alert("Hello!");
          }
        }
      })
    </script>
  </body>
</html>

Otro ejemplo:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Vue example</title>
  <script src="https://unpkg.com/vue@2"></script>
</head>
<body>
<div id="main">
  <button type="button" v-on:click="saludar">
    Saludar
  </button>
</div>
<script>
var demo = new Vue({
  el: '#main',
  methods: {
    saludar: function() {
      alert("Hola");
    }
  }
});
</script>
</body>
</html>

Otro ejemplo:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>My first Vue component</title>
  <script src="https://unpkg.com/vue@2"></script>
</head>
<body>
<div id="app">
  <p>{{ message }}</p>
  <button v-on:click="reverseMessage">Reverse Message</button>
</div>

<script>
new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue.js!'
  },
  methods: {
    reverseMessage: function () {
      this.message = this.message.split('').reverse().join('')
    }
  }
})
</script>
</body>
</html>

Pasar parámetros a un método usando v-on
========================================

En el ejemplo anterior simplemente indicamos el nombre del método, pero
imaginemos que queremos pasar algún parámetro desde nuestro template al método,
tendríamos que enviar el parámetro tal como cuando invocamos un método en el
javascript de toda la vida.

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>My first Vue component</title>
  <script src="https://unpkg.com/vue@2"></script>
</head>
<body>
<div id="app">
  <button type="button" v-on:click="saludar('Eduardo')">
    Saludar
  </button>
</div>
<script>
new Vue({
  el: "#app",
  methods: {
    saludar: function(name) {
      alert("Hola" + name);
    }
  }
});
</script>
</body>
</html>

Otro ejemplo:

<!-- Pasando parámetros en la función -->
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>My first Vue component</title>
  <script src="https://unpkg.com/vue@2"></script>
</head>
<body>
<div id="app">
  <button type="button" v-on:click="saludar('Eduardo','Perez')">
    Saludar
  </button>
</div>
<script>
new Vue({
  el: "#app",
  methods: {
    saludar: function(name, lastname) {
      alert("Hola " + name + " " + lastname);
    }
  }
});
</script>
</body>
</html>

Accediendo a data desde los métodos
===================================

Dentro de los métodos podemos acceder a cualquier variable definida en nuestro
objeto data usando this más el nombre de la variable que deseamos usar.

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>My first Vue component</title>
  <script src="https://unpkg.com/vue@2"></script>
</head>
<body>
<div id="app">
  <button type="button" v-on:click="showFullName">
    Mostrar Nombre
  </button>
</div>
<script>
  new Vue({
    el: "#app",
    data: {
      firstName: "Eduardo",
      lastName: "P. Rivero"
    },
    methods: {
      showFullName: function() {
        alert(this.firstName + " " + this.lastName);
      }
    }
  });
</script>
</body>
</html>

Ejemplo de v-for
================

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>My first Vue app</title>
  <script src="https://unpkg.com/vue@2"></script>
</head>
<body>
  <div id="app">
    <ul>
      <li v-for="name in names">
        {{ name }}
      </li>
    </ul>
  </div>

  <script>
    var app = new Vue({
      el: '#app',
      data: {
        names: ["José","Pedro","Juan","María"]
      }
    })
  </script>
</body>
</html>

Otro ejemplo
============

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>My first Vue app</title>
  <script src="https://unpkg.com/vue@2"></script>
</head>
<body>
  <div id="app">
    <ul>
      <li v-for="name in names">
        {{ name }}
      </li>
    </ul>
    <ul>
      <li v-for="dog in dogs">
        {{ dog }}
      </li>
    </ul>
  </div>

  <script>
    var app = new Vue({
      el: '#app',
      data: {
        names: ["José","Pedro","Juan","María"],
        dogs: ["Alfie","Solomons"]
      }
    })
  </script>
</body>
</html>

Ejemplo con 2 puntos de montaje
===============================

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>My first Vue app</title>
  <script src="https://unpkg.com/vue@2"></script>
</head>
<body>
  <div id="list1">
    <ul>
      <li v-for="name in names">
        {{ name }}
      </li>
    </ul>
  </div>

  <br />

  <div id="list2">
    <ul>
      <li v-for="color in colors">
        {{ color }}
      </li>
    </ul>
  </div>

  <script>
    var list1 = new Vue({
      el: '#list1',
      data: {
        names: ["José","Pedro","Juan","María"]
      }
    })

    var list2 = new Vue({
      el: '#list2',
      data: {
        colors: ["Blue","Orange","Red","Green"]
      }
    })
  </script>
</body>
</html>

Otro ejemplo
============

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>My first Vue app</title>
  <script src="https://unpkg.com/vue@2"></script>
</head>
<body>
  <div id="app">
    <ul>
      <li v-for="(show, index) in tvshows" v-bind:key="index">
        {{ show.name }} ({{ show.seasons }} temporadas)
      </li>
    </ul>
  </div>

  <script>
    var app = new Vue({
      el: '#app',
      data: {
        tvshows: [
          { name: 'Serie 1', seasons: 3 },
          { name: 'Serie 2', seasons: 5 },
          { name: 'Serie 3', seasons: 2 },
        ]
      }
    })
  </script>
</body>
</html>

========================
Ejemplo de v-if y v-else
========================

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>My first Vue app</title>
  <script src="https://unpkg.com/vue@2"></script>
</head>
<body>
  <div id="app">
    <ul>
      <div v-if="show">
        <li v-for="(show, index) in tvshows" v-bind:key="index">
          {{ show.name }} ({{ show.seasons }} temporadas)
        </li>
      </div>
      <div v-else>
        No data
      </div>
    </ul>
  </div>

  <script>
    var app = new Vue({
      el: '#app',
      data: {
        //show: false,
        show: true,
        tvshows: [
          { name: 'Serie 1', seasons: 3 },
          { name: 'Serie 2', seasons: 5 },
          { name: 'Serie 3', seasons: 2 },
        ]
      }
    })
  </script>
</body>
</html>

Otro ejemplo
============

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>v-if y v-else</title>
  <script src="https://unpkg.com/vue@2"></script>
</head>
<body>
<main id="app">
  <template v-if="!mensaje">
    <!-- Este texto se mostrará si no existe un mensaje en el modelo -->
    <h3>Escriba un mensaje</h3>
    <p>Cualquier cosa será válida</p>
  </template>
  <template v-else>
    <!-- Este texto se mostrará si existe un mensaje en el modelo -->
    <h3>Ahora hay un mensaje</h3>
    <p>Qué interesante</p>
  </template>
  <textarea cols="30" rows="10" v-model="mensaje"></textarea>
  <br>
  {{ $data.mensaje }}
</main>
<script>
  var mostrarTextoCondicional = new Vue({
    el: '#app',
    data: {
      mensaje: ''
    }
  })
</script>
</body>
</html>

Otro ejemplo
============

Mostrar o no mostra algo dependiendo del valor del input select.

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>v-if with input select value</title>
  <script src="https://unpkg.com/vue@2"></script>
</head>
<body>
  <div id="app">
    <select v-model="carlist" name="carlist">
      <option value="volvo">Volvo</option>
      <option value="saab">Saab</option>
      <option value="opel">Opel</option>
      <option value="audi">Audi</option>
    </select>
    <div v-if="carlist === 'volvo'">
      Data
    </div>
    <div v-else>
      No data
    </div>
  </div>

  <script>
    var app = new Vue({
      el: '#app',
      data: {
        carlist: [],
      }
    })
  </script>
</body>
</html>

Ejemplo de eventos
==================

<!DOCTYPE html>
<html lang="">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>Component vue example</title>
    <script src="https://unpkg.com/vue@2"></script>
  </head>
  <body>
    <div id="app"></div>
    <script>
    const app = new Vue({
      el: '#app',
      template: `
        <div>

          <div v-if="show">
            <ul>
              <li v-for="(course, index) in courses" v-bind:key="index">
                <a v-bind:href="course.url"> {{ course.name }} </a>
              </li>
            </ul>
          </div>
          <button @click="toggleShow()">Show/Hide</button>

        </div>
      `,
      data: {
        show: true,
        courses: [
          { name: "PHP", url: 'https://www.youtube.com/1' },
          { name: "Python", url: 'https://www.youtube.com/2' },
          { name: "JavaScript", url: 'https://www.youtube.com/3' },
        ],
      },
      methods: {
        toggleShow: function () {
          this.show = !this.show
        }
      }
    })
    </script>
  </body>
</html>

================================
Validar si un arreglo está vacío
================================

En data sería:

records: [],

En template sería:

<div v-if="list.length > 0">
</div>

Ejemplo de v-model
==================

<!--
Vue también proporciona la directiva v-model que hace que la vinculación
bidireccional entre los datos del formulario y el estado de la aplicación sea
muy sencilla.
-->
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>My first Vue component</title>
  <script src="https://unpkg.com/vue@2"></script>
</head>
<body>
<div id="app-6">
  <p>{{ message }}</p>
  <input v-model="message">
</div>

<script>
var app6 = new Vue({
  el: '#app-6',
  data: {
    message: 'Hello Vue!'
  }
})
</script>
</body>
</html>

Otro ejemplo
============

=====================================
Enlace de datos doble o bidireccional
=====================================

Veremos cómo realizar un enlace doble de datos, el cuál nos permitirá actualizar
propiedades desde el HTML hacia Vue y viceversa.

Lo primero que hay que notar, es que este tipo de enlace funciona en los
elementos de formulario input, textarea y select. Antes de entrar en detalle en
cada uno de ellos veamos la directiva que hace posible el enlace bidirecciona.

v-model="property"

La directiva v-model permite realizar un enlace doble de datos. La sintaxis es
intuitita por si misma, simplemente basta asignar la propiedad del modelo a la
directiva.

Siempre que cambie el valor de la propiedad en la instancia de Vue se
actualizará el valor del input. De manera análoga, cada vez que cambie el valor
del input, se actualizará el valor de la propiedad en la instancia de Vue.

------

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Vue example</title>
  <script src="https://unpkg.com/vue@2"></script>
</head>
<body>
<div id="app">
  <input type="text" v-model="firstName" />
  <p>
    Your first name is {{ firstName }}
  </p>
</div>
<script>
var app = new Vue({
  el: '#app',
  data: {
    firstName: 'Steve'
  }
});
</script>
</body>
</html>

Otro ejemplo
============

<!-- Sumar dos números con evento click -->
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>My first Vue app</title>
  <script src="https://unpkg.com/vue@2"></script>
</head>
<body>
<div id="app">
  Type the first number:
  <input type="number" v-model.number="n1">
  <br />
  Type the second number:
  <input type="number" v-model.number="n2">
  <br />
  <button v-on:click="sum = n1 + n2">Sum</button>
  <br />
  The sum is: {{ sum }}
</div>

<script>
var vue = new Vue({
 el: "#app",
 data: {
   n1: 0,
   n2: 0,
   sum: 0
 }
});
</script>
</body>
</html>

Otro ejemplo usando métodos
===========================

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>My first Vue app</title>
  <script src="https://unpkg.com/vue@2"></script>
</head>
<body>
<div id="app">
 Type the first number:
 <input type="number" v-model.number="n1"><br />
 Type the second number:
 <input type="number" v-model.number="n2"><br />
 <button v-on:click="sum">Sum</button><br />
 The sum is: {{ ans }}
</div>

<script>
var vue = new Vue({
 el: "#app",
 data: {
   n1: 0,
   n2: 0,
   ans: 0
 },
 methods: {
  sum: function() {
    this.ans = this.n1 + this.n2;
  }
 }
});
</script>
</body>
</html>

Otro ejemplo de métodos con parámetros
======================================

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>My first Vue app</title>
  <script src="https://unpkg.com/vue@2"></script>
</head>
<body>
<div id="app">
 Type the first number:
 <input type="number" v-model.number="n1"><br />
 Type the second number:
 <input type="number" v-model.number="n2"><br />
 <button v-on:click="sum(n1,n2)">Sum</button><br />
 The sum is: {{ ans }}
</div>

<script>
var vue = new Vue({
 el: "#app",
 data: {
   n1: 0,
   n2: 0,
   ans: 0
 },
 methods: {
   sum: function(a, b) {
     this.ans = a + b;
   }
 }
});
</script>
</body>
</html>

Otro ejemplo
============

Una de las cosas interesantes de los enlaces de Vue, es que nos permite enlazar
los valores con respecto a una propiedad. Sí, eso ya lo hemos dicho antes pero
tal vez no hayas visto algunas de las posibilidades que esto conlleva. Cuando
realizas una selección de elementos mutuamente excluyentes utilizamos un input
de tipo radio. Para indicar que se trata del mismo contexto se coloca el valor
del mismo atributo name para todos. En Vue, no hace falta realizar esto ya que
con la directiva se obtiene el mismo efecto.

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Vue example</title>
  <script src="https://unpkg.com/vue@2"></script>
</head>
<body>
<div id="app">
  <input type="radio" v-model="profile" value="admin" />
  <label>Admin</label><br />
  <input type="radio" v-model="profile" value="guest" />
  <label>Guest</label><br />
  <p>
    Your profile is {{ profile }}
  </p>
</div>
<script>
var app = new Vue({
  el: "#app",
  data: {
    profile: 'admin'
  }
});
</script>
</body>
</html>

Otro ejemplo
============

El siguiente ejemplo muestra una selección múltiple en donde un usuario debe
escoger cero o más intereses.

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Vue example</title>
  <script src="https://unpkg.com/vue@2"></script>
</head>
<body>
<div id="app">
  <input type="checkbox" v-model="feeds" value="technology" />
  <label>Technology</label><br />
  <input type="checkbox" v-model="feeds" value="traveling" />
  <label>Traveling</label><br />
  <input type="checkbox" v-model="feeds" value="swimming" />
  <label>Swimming</label><br />
  <p>
    Interests: {{ feeds }}
  </p>
</div>
<script>
var app = new Vue({
  el: "#app",
  data: {
    feeds: ["technology"]
  }
});
</script>
</body>
</html>

Otro ejemplo
============

El siguiente ejemplo muestra un input de tipo checkbox sin el atributo value
inicial.

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Vue example</title>
  <script src="https://unpkg.com/vue@2"></script>
</head>
<body>
<div id="app">
  <label>Enabled</label>
  <input type="checkbox" v-model="enabled" />
  <p>
    User is {{ enabled ? 'enabled' : 'disabled' }}
  </p>
</div>
<script>
var app = new Vue({
  el: "#app",
  data: {
    enabled: true
  }
});
</script>
</body>
</html>

Otro ejemplo
============

Siempre que cambie el valor de la propiedad en la instancia de Vue se
actualizará el valor del textarea. De manera análoga, cada vez que cambie el
texto en el textarea, se actualizará el valor de la propiedad en la instancia de
Vue.

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Vue example</title>
  <script src="https://unpkg.com/vue@2"></script>
</head>
<body>
<div id="app">
  <textarea v-model="content"></textarea>
  <pre>{{ content }}</pre>
</div>
<script>
var app = new Vue({
  el: "#app",
  data: {
    content: "Hello\nWorld"
  }
});
</script>
</body>
</html>

Otro ejemplo
============

En el caso de los elementos select la directiva debe colocarse como atributo en
dicho elemento y no en los ítems que pudiese tener. Veamos el siguiente ejemplo.

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Vue example</title>
  <script src="https://unpkg.com/vue@2"></script>
</head>
<body>
<div id="app">
  <label>How many years did you take at college?</label>
  <br />
  <select v-model="years">
    <option value="1">one</option>
    <option value="2">two</option>
    <option value="3">three</option>
    <option value="4">four</option>
    <option value="5">five</option>
  </select>
  <p>You took {{ years }} years.</p>
</div>
<script>
var app = new Vue({
  el: "#app",
  data: {
    years: 3
  }
});
</script>
</body>
</html>

Ejemplo de v-show
=================

Esta directiva es utilizada para mostrar de manera condicional un elemento HTML.
Su uso es muy similar a la directiva v-if puesto que acepta una expresión y toma
su valor booleano para determinar si se muestra o no dicho elemento.

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>My first Vue app</title>
  <script src="https://unpkg.com/vue@2"></script>
</head>
<body>
<div id="app">
 Product X
 <br />
 <input type="number" v-model.number="items">
 <br />
 <p v-show="hasItems()">
   You order has {{ items }} items
 </p>
</div>

<script>
var app = new Vue({
  el: "#app",
  data: {
    items: 0
  },
  methods: {
    hasItems: function() {
      return this.items > 0;
    }
  }
});
</script>
</body>
</html>

Otro ejemplo
============

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Mostrar elementos condicionalmente</title>
  <script src="https://unpkg.com/vue@2"></script>
</head>
<body>

  <main id="mostrarElemento">
    <!-- Input que apunta al modelo comprobarTexto, y lo llena en tiempo real -->
    <input type="text" v-model="comprobarTexto"/>

    <!-- La directiva v-show ocultará el elemento hasta que comprobar texto devuelva un valor -->
    <input type="submit" v-show="comprobarTexto">
  </main>

  <script>
    var enviarDatos = new Vue({
      el: '#mostrarElemento',
      data: {
        comprobarTexto: ''
      }
    });
  </script>

</body>
</html>

==============
v-show vs v-if
==============

La diferencia entre v-showy v-ifes eso v-ifcrea (renderiza) el elemento
dependiendo de la condición, pero con v-showel elemento ya está creado, v-show
sólo cambia su visibilidad.

Fuente
======

https://www.w3schools.com/vue/vue_v-show.php

Ejemplo de v-text
=================

Esta directiva permite hacer un trabajo similar a la interpolación de texto con
la diferencia que la interpolación puede ser usada para renderizar un fragmento
del texto de un elemento, la directiva v-text renderizará todo el contenido.
Vemos un ejemplo.

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>My first Vue app</title>
  <script src="https://unpkg.com/vue@2"></script>
</head>
<body>
<div id="app">
  <p>Hello {{ message }}</p>
  <p v-text="greeting"></p>
</div>
<script type="text/javascript">
var app = new Vue({
  el: "#app",
  data: {
    message: "World",
    greeting: "Hello World"
  }
});
</script>
</body>
</html>

Ejemplo de v-html
=================

Esta directiva permite imprimer código html en el elemento en cuestión. Es el
equivalente al innerHTML de JavaScript. Veamos un ejemplo.

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>My first Vue app</title>
  <script src="https://unpkg.com/vue@2"></script>
</head>
<body>
<div id="app">
  <p v-html="greeting"></p>
</div>
<script type="text/javascript">
var app = new Vue({
  el: "#app",
  data: {
    greeting: "<h1>Hello World</h1>"
  }
});
</script>
</body>
</html>

Ejemplo de v-pre
=================

Esta directiva delegará la impresión del HTML al navegador sin realizar algún
renderizado a priori, es decir, no se puede utilizar directivas de Vue en el
código HTML que se desea imprimir.

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>My first Vue app</title>
  <script src="https://unpkg.com/vue@2"></script>
</head>
<body>
<div id="app">
  <div v-pre>
    <p v-if="false">Las directivas aca no tienen poder</p>
    <div>
      <p>{{preValue}}</p>
    </div>
  </div>
</div>
<script type="text/javascript">
var app = new Vue({
  el: "#app",
  data: {
    preValue: "Este mensaje no se verá en el template"
  }
});
</script>
</body>
</html>

Ejemplo de v-once
=================

Renderiza el elemento solo una vez. Si la expresión asociada al elemento cambia
no se verá reflejada en el template.

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>My first Vue app</title>
  <script src="https://unpkg.com/vue@2"></script>
</head>
<body>
<div id="app">
  <p v-once>{{onceMessage}}</p>
<script type="text/javascript">
var app = new Vue({
  el: "#app",
  data: {
    onceMessage: "Este mensaje nunca cambiará"
  }
});
</script>
</body>
</html>

=========================
Anatomía de un componente
=========================

El equipo de Vue y de Webpack han creado una plantilla que con la extensión de
fichero .vue podemos tener nuestro HTML, CSS y código JavaScript en un único
archivo.

Ésto es muy poderoso porque unimos 2 mundos. En React tenemos todo en un mismo
fichero, pero implica que personas del equipo de diseño y/o maquetacion
necesitaran saber React y JSX para poder añadir estilos y diseñar el layout de
las vistas.

Un componente contiene 3 partes principales:

-template.
-script.
-style.

En Vue puedes crear un fichero .vue de la siguiente forma

<template>
// Aquí va el código HTML
</template>

<script>
// Aquí va el código Javascript, puedes usar Babel, TypeScript,...)
</script>

<style>
// Aquí va el código CSS, puedes usar stylus, Sass, Less, etc...
</style>

=================================
Tipos de Web Components en Vue.js
=================================

Vue cuenta con dos tipos de componentes:

-Componentes Locales: son archivos con extensión .vue que el navegador por sí
solo no puede comprender y por ende es necesario del uso de herramientas como
Web Pack. Son bastante útiles para una aplicación web escalable por su sencillez
de mantenimiento.

-Componentes Globales: No necesitan archivos con extensión .vue, pueden ser
accedidos desde cualquier parte del código pero no se aconseja su uso en
aplicaciones web grandes por razones de mantenimiento. Son los más sencillos de
aprender.

===============================
Cómo crear un componente en Vue
===============================

Vue tiene un API para crear Componentes. No sigue el estándar de la W3C de los
WebComponents, pero el estilo es muy similar y puedes utilizar templates para
ello.

En éste tutorial vamos a crear un pequeño componente reutilizable que muestra la
información de una película: Su título y una imagen.

Para ello, creamos un fichero index.html que contendrá el elemento raíz #app
dónde colocaremos nuestra aplicación de Vue, el script con la librería y otro
script más dónde tendremos nuestro código:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>My first Vue component</title>
  <script src="https://unpkg.com/vue@2"></script>
</head>
<body>
  <div id="app"></div>
  <script src="app.js"></script>
</body>
</html>

A continuación creamos un fichero app.js al mismo nivel que index.html para que
el enlace del <script> funcione correctamente.

Aquí vamos a crear el componente <movie-card> e instanciar la aplicación de Vue.

Primero debemos crear el componente para que el código se interprete
correctamente. Si instanciamos antes la app de Vue y luego el componente
tendremos errores porque Vue no lo reconocerá.

Para crear un componente tenemos que usar la función Vue.component que recibe un
string con el nombre de nuestro componente, que será el nombre que tendrá el
elemento en el DOM, y un objeto de configuración que contendrá el nombre de las
props (Propiedades que recibe), el template, datos, métodos, etc...

Para crear un componente movie-card escribimos lo siguiente:

Vue.component('movie-card', {
  props: ['image', 'title'],
  template: `
    <div>
      <img width="100" v-bind:src="image" />
      <h2>{{ title }}</h2>
    </div>
  `,
})

El componente recibirá como propiedades una image y un title, y su aspecto en el
DOM será el de un <div> que contiene un elemento <img> que mostrará la imagen y
otro h2 que mostrará el título de la película.

Para ver el componente en acción, podemos hacer varias cosas. Como primera
opción, podemos insertar el componente <movie-card> en el HTML dentro del
<div id="app"> dónde tenemos instanciado Vue.

Para instanciar Vue, en el código de app.js justo debajo del componente que
acabamos de crear, escribimos lo siguiente:

new Vue({
  el: '#app'
})

Y así en index.html podemos escribir lo siguiente:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>My first Vue component</title>
  <script src="https://unpkg.com/vue@2"></script>
</head>
<body>
  <div id="app">
    <movie-card title="Regreso al Futuro" image="http://es.web.img3.acsta.net/pictures/14/04/03/13/45/034916.jpg"></movie-card>
  </div>
  <script src="app.js"></script>
</body>
</html>

Esto nos mostraría la imagen junto al título de la película en el navegador.
Pero si queremos mostrar varias <movie-card> cuyos datos obtengamos a través de
un API externo u otro servicio, sólo con esto no se podría.

Utilizando un v-for en este ejemplo
===================================

En la instancia de Vue, utilizaremos la propiedad data para emplear un array de
objetos con la información de varias películas.

El objeto movies contiene objetos con atributos title y image.

new Vue({
  el: '#app',
  data: {
    movies: [
      { title: 'Regreso al Futuro', image: 'http://es.web.img3.acsta.net/pictures/14/04/03/13/45/034916.jpg' },
      { title: 'Matrix', image: 'http://t0.gstatic.com/images?q=tbn:ANd9GcQq3pIz-aKgkmYX1dJ-EL-AlHSPcOO7wdqRIJ5gJy9qNinXpmle' },
      { title: 'Interestellar', image: 'http://t1.gstatic.com/images?q=tbn:ANd9GcRf61mker2o4KH3CbVE7Zw5B1-VogMH8LfZHEaq3UdCMLxARZAB' }
    ]
  }
})

De esta forma podemos acceder a estos datos dentro de Vue, y lo siguiente que
tenemos que hacer es pintarlos en el html.

Para ello, tendríamos que iterar por todos los elementos de éste array y pintar
un componente <movie-card> por cada uno de ellos.

Eso lo vamos a conseguir con la directiva v-for que hace precisamente eso, y
sería tan sencillo como lo siguiente en el fichero index.html:

<div id="app">
  <movie-card v-for="(movie, index) in movies"
    v-bind:key="index"
    v-bind:title="movie.title"
    v-bind:image="movie.image">
  </movie-card>
</div>

Cada elemento se va a llamar "movie" y tiene un "index" representa la posición
en el array del elemento que estamos mostrando en ese momento.

"movie.title" va a hacer referencia a la propiedad title dentro del objeto, al
igual que "movie.image"

El atributo "key" se agrega para que haya más eficiencia al momento de
renderizar los elementos.

Ejemplo completo:

app.js

Vue.component('movie-card', {
  props: ['image', 'title'],
  template: `
    <div>
      <img width="100" v-bind:src="image" v-bind:alt="title"/>
      <h2>{{ title }}</h2>
    </div>
  `,
})

new Vue({
  el: '#app',
  data: {
    movies: [
      { title: 'Regreso al Futuro', image: 'http://es.web.img3.acsta.net/pictures/14/04/03/13/45/034916.jpg' },
      { title: 'Matrix', image: 'http://t0.gstatic.com/images?q=tbn:ANd9GcQq3pIz-aKgkmYX1dJ-EL-AlHSPcOO7wdqRIJ5gJy9qNinXpmle' },
      { title: 'Interestellar', image: 'http://t1.gstatic.com/images?q=tbn:ANd9GcRf61mker2o4KH3CbVE7Zw5B1-VogMH8LfZHEaq3UdCMLxARZAB' }
    ]
  }
})

index.html

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>My first Vue component</title>
  <script src="https://unpkg.com/vue@2"></script>
</head>
<body>
  <div id="app">
    <movie-card v-for="(movie, index) in movies"
      v-bind:key="index"
      v-bind:title="movie.title"
      v-bind:image="movie.image">
    </movie-card>
  </div>
  <script src="app.js"></script>
</body>
</html>

-----

Si se quiere, en lugar de escribir esto en el HTML:

<div id="app">
  <movie-card v-for="(movie, index) in movies"
    v-bind:key="index"
    v-bind:title="movie.title"
    v-bind:image="movie.image">
  </movie-card>
</div>

Podemos utilizar la propiedad template de Vue en el código JavaScript y dejar el
index.html únicamente con el <div id='app'> sin nada en su interior, ya se
encargará Vue de insertarlo:

app.js

Vue.component('movie-card', {
  props: ['image', 'title'],
  template: `
    <div>
      <img width="100" v-bind:src="image" />
      <h2>{{ title }}</h2>
    </div>
  `,
})

new Vue({
  el: '#app',
  data: {
    movies: [
      { title: 'Regreso al Futuro', image: 'http://es.web.img3.acsta.net/pictures/14/04/03/13/45/034916.jpg' },
      { title: 'Matrix', image: 'http://t0.gstatic.com/images?q=tbn:ANd9GcQq3pIz-aKgkmYX1dJ-EL-AlHSPcOO7wdqRIJ5gJy9qNinXpmle' },
      { title: 'Interestellar', image: 'http://t1.gstatic.com/images?q=tbn:ANd9GcRf61mker2o4KH3CbVE7Zw5B1-VogMH8LfZHEaq3UdCMLxARZAB' }
    ]
  },
  template: `
    <div>
      <movie-card v-for="(movie, index) in movies"
        v-bind:key="index"
        v-bind:title="movie.title"
        v-bind:image="movie.image">
      </movie-card>
    </div>
  `
})

index.html

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>My first Vue component</title>
  <script src="https://unpkg.com/vue@2"></script>
</head>
<body>
  <div id="app">
    <movie-card></movie-card>
  </div>
  <script src="app.js"></script>
</body>
</html>

Esta es la forma que tiene Vue de crear componentes, que por supuesto no es la
única, pero que para algo sencillo nos puede servir sin necesidad de más
herramientas.

Otro ejemplo de primer componente
=================================

Comenzamos creando nuestro archivo index.html con una estructura básica con el
llamado a Vuejs desde un cdn y tambien creamos un div con el id app que es
donde mostraremos los datos del componente que crearemos luego:

<!DOCTYPE html>
<html lang="">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>Component vue example</title>
    <script src="https://unpkg.com/vue@2"></script>
  </head>
  <body>
    <div id="app"></div>
  </body>
</html>

Ahora, crearemos un archivo js, app.js por ejemplo, que es donde empezaremos a
crear nuestra instancia de vue:

Primero declaramos a "app" con "const", o "var", luego a "new Vue" que de
contener un objeto de configuración

const app = new Vue ()

Este objeto va a tener una propiedad llamada "el" donde vamos a ubicar que es
elemento del DOM o del html es donde queremos que funcione vuejs.

const app = new Vue ({
  el: '#app'
})

Con lo anterior declaramos que queremos dentro del div "app" del dom será donde
va a estar nuestra aplicación vue.

Para poderle pasar datos a esa plantilla html se usa la sintaxsis mustache o de
doble llames {{ }} que insertaremos dentrto del "div app"

<!DOCTYPE html>
<html lang="">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>Component vue example</title>
    <script src="https://unpkg.com/vue@2"></script>
  </head>
  <body>
    <div id="app">
      {{ message }}
    </div>
  </body>
</html>

Esta variable {{ message }} en el html la podemos llamar en nuestra aplicación
vue con una comunicación o vinculación "double data binding" que permite que si
el contenido de la variable en el DOM cambia, este a su vez también cambie en el
controlador que sería nuestro componente y si hay algún cambio en el controlador
también se vea reflejado en la vista o el DOM.

double data binding
===================

Este concepto heredado de Angular nos permite transmitir las propiedades de los
Component al DOM (la vista) para por ejemplo cambiar el color del fondo de la
página de blanco a negro. Y también necesitamos que los eventos de la vista sean
comunicados al Component, por ejemplo, para implementar un botón con el cual
mostrar / ocultar las imágenes de la lista de productos.

Para poder indicar en el controlador los datos que queremos que estén
comunicados con la vista usaremos la propiedad "data" que será un objeto, y
"data" va a contener todas las variables y datos que queramos que se comuniquen.

Dentro de data tendremos una propiedad que se llama "message" y que contendrá
una cadena con nuestro mensaje que vamos a mostrar en el DOM.

const app = new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!'
  }
})

Si abrimos index.html con nuestro navegador veremos el mensaje.

Ahora, vamos a hacer un poco más complejo nuestro ejemplo. Es común que nuestras
variables de los componentes que queremos que se comuniquen con la vista no sean
de tipo texto solamente sino que estén por ejemplo dentro de una etiqueta html
como el atributo de un enlace href que queremos que sea variable, dinámico y
cambie o por ejemplo una imagen que queremos que cambie con los datos que
mandamos desde el controlador.

Para seguir este ejemplo vamos a declarar otra propiedad dentro de "data" que
será "image" que contentra una "url" que apunta a una imagen de la web.

const app = new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!'
    image: 'http://t1.gstatic.com/images?q=tbn:ANd9GcRf61mker2o4KH3CbVE7Zw5B1-VogMH8LfZHEaq3UdCMLxARZAB'
  }
})

Ahora, como podemos mostrar esta imagen en el DOM?

Dentro de "div app" que es donde está funcionando nuestra aplicación vue vamos a
incluir un elemento "img" con su atributo "src" pero lo escribiremos usando la
directiva de vue v-bind que nos permite encadenar datos, es decir que establece
comunicación con los datos que haya en el componente asociado.

<!DOCTYPE html>
<html lang="">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>Component vue example</title>
    <script src="https://unpkg.com/vue@2"></script>
  </head>
  <body>
    <div id="app">
      {{ message }}
      <img v-bind:src="image">
    </div>
    <script src="app.js"></script>
  </body>
</html>

Si abrimos index.html con nuestro navegador veremos el mensaje y la imegen.

Hay una sintaxis más abreviada, y es que cuando se trata de atributos pordemos
ahorrarnos de escribir v-bind:src="image" y con solo :src="image" debe
funcionar.

Ahora vamos a ver un ejemplo de uso de directivas para poder mostrar/ocultar
elementos del DOM, dependiendo de un valor, con v-if que es un simple if
de toda la vida.

Dentro de "div app" vamos a agregar otro "div" y el contenido que tenemos
actualmente lo vamos a meter dentro de este nuevo "div" al cual también le
incluiremos la directiva "v-if" y una variable que será "show".

<!DOCTYPE html>
<html lang="">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>Component vue example</title>
    <script src="https://unpkg.com/vue@2"></script>
  </head>
  <body>
    <div id="app">
      <div v-if="show">
        {{ message }}
        <img v-bind:src="image" width="150">
      </div>
    </div>
    <script src="app.js"></script>
  </body>
</html>

Ahora, también hay que agregar esa variable "show" a nuestro componente y tendra
un valor, false o true:

const app = new Vue({
  el: '#app',
  data: {
    show: true,
    message: 'Hello Vue!',
    image: 'http://t1.gstatic.com/images?q=tbn:ANd9GcRf61mker2o4KH3CbVE7Zw5B1-VogMH8LfZHEaq3UdCMLxARZAB'
  }
})

Si abrimos index.html con nuestro navegador veremos el mensaje y la imegen o no,
dependindo del valor que tenga la variable show en el componente.

La gracia de estas directivas es dotar de dinamismo a las aplicaciones web.
Por lo tanto ese show no deberíamos tenerlo puesta así a mano sino que queremos
que esa variable cambie a través de algo, pues ese algo serían los métodos y
para poder trabajar con ellos y llamarlos es necesario tener eventos.

En el siguiente ejemplo veremos como con un botón podemos cambiar este valor de
"show" y mostrar u ocultar el contenido dependiendo de la acción del usuario.

Para eso vamos a crear un button en el html, este botón va a tener un evento de
click y con ese evento vamos a lanzar un método o una función, para lanzar el
evento, sería con la directiva "v-on" y el evento "click", en este caso
podríamos lanzar cualquier evento de del mouse o del mouse, como pasar por
encima de x elemento, o hacer click, o pulsar una tecla del teclado, etc.

Cuando este evento de click suceda, va a llamar a una función que llamaremos
"toggleShow".

De igual manera, en este caso con las directivas para eventos hay una sintaxis
más abreviada, v-on:click="" puede abreviarse a @click="".

<!DOCTYPE html>
<html lang="">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>Component vue example</title>
    <script src="https://unpkg.com/vue@2"></script>
  </head>
  <body>
    <div id="app">
      <div v-if="show">
        {{ message }}
        <img v-bind:src="image" width="150">
      </div>
      <button v-on:click="toggleShow()">Show/Hide</button>
    </div>
    <script src="app.js"></script>
  </body>
</html>

Ahora tenemos que añadir nuestra función "toggleShow" en nuestro componente, así
como tenemos el objeto data, donde tenemos ordenadas todas las variables
asociadas a la vista, ahora debemos añadir una nueva propiedad que se llama
"methods" y es donde van a ir todas las funciones que nosotros queramos usar.

Methods y Data
==============

Los datos o modelos del componente están dentro de un objeto data, y las
funciones o métodos que creamos los colocamos en un objeto methods.

Aquí se abandona la idea o sintaxis de clases de ES6 como se venía utilizando en
React con React.Component por una esctructura de objetos similar al método
createClass de las primeras versiones de React.

Parece un paso atrás, pero tal y cómo funciona Vue, parece una forma muy
correcta de uso.

Ejemplo:

Vue.component('mi-component', {
    data: {},
    methods: {}
})

Dentro de "methods" declaramos a "toggleShow" y esta función lo que va a hacer
es cambiar el valor de show por el contrario del que tenga en ese momento.

Para poder referenciar los datos dentro de los métodos tenemos que hacer uso del
objeto "this" de javascript para referencial a "show" con this.show y le
indicaremos que sea justo lo contrario de lo que ya tuviese como valor, eso lo
haremos con this.show = !this.show.

const app = new Vue({
  el: '#app',
  data: {
    show: true,
    message: 'Hello Vue!',
    image: 'http://t1.gstatic.com/images?q=tbn:ANd9GcRf61mker2o4KH3CbVE7Zw5B1-VogMH8LfZHEaq3UdCMLxARZAB'
  },
  methods: {
    toggleShow: function () {
      this.show = !this.show
    }
  }
})

Si abrimos index.html con nuestro navegador y todo está bien veremos el mensaje,
la imegen y el botón, y al darle click ocultara y mostrar el elemento contenido
dentro del div.

De igual manera, todo este contenido que hemos puesto dentro de nuestro
"div app" podemos tenerlo dentro de nuestro código js, eso se haría con la
propiedad "template" el cual le podemos pasar un string, entonces copiamos todo
el contenido que tiene "div app" y lo pegamos en "template" en nuestro
componente, pero hay un detalle importante y es que todo lo que va devolver
"template" debe estar englobado en un único elemento, en un "div" por lo que
debemos agregar un "div" padre dentro de template, esto si es que no lo tiene
que es nuestro caso.

En index.html

<!DOCTYPE html>
<html lang="">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>Component vue example</title>
    <script src="https://unpkg.com/vue@2"></script>
  </head>
  <body>
    <div id="app">
    </div>
    <script src="app.js"></script>
  </body>
</html>

y en app.js

const app = new Vue({
  el: '#app',
  template: `
    <div>
      <div v-if="show">
        {{ message }}
        <img v-bind:src="image" width="150">
      </div>
      <button @click="toggleShow()">Show/Hide</button>
    </div>
  `,
  data: {
    show: true,
    message: 'Hello Vue!',
    image: 'http://t1.gstatic.com/images?q=tbn:ANd9GcRf61mker2o4KH3CbVE7Zw5B1-VogMH8LfZHEaq3UdCMLxARZAB'
  },
  methods: {
    toggleShow: function () {
      this.show = !this.show
    }
  }
})

Si abrimos index.html con nuestro navegador y todo está bien veremos el mensaje,
la imegen y el botón, y al darle click ocultara y mostrar el elemento contenido
dentro del div tal cual como antes de probar la propiedad template.

Si no te gusta incrustar el html dentro del javascript, se puede sacar fuera
usando el tag "template" de html5 al cual le daremos un "id" para referenciarlo
en el componente, tal que:

<!DOCTYPE html>
<html lang="">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>Component vue example</title>
    <script src="https://unpkg.com/vue@2"></script>
  </head>
  <body>
    <div id="app"></div>

    <template id="example">
      <div>
        <div v-if="show">
          {{ message }}
          <img v-bind:src="image" width="150">
        </div>
        <button @click="toggleShow()">Show/Hide</button>
      </div>
    </template>
    <script src="app.js"></script>
  </body>
</html>

y

const app = new Vue({
  el: '#app',
  template: '#example',
  data: {
    show: true,
    message: 'Hello Vue!',
    image: 'http://t1.gstatic.com/images?q=tbn:ANd9GcRf61mker2o4KH3CbVE7Zw5B1-VogMH8LfZHEaq3UdCMLxARZAB'
  },
  methods: {
    toggleShow: function () {
      this.show = !this.show
    }
  }
})

Si abrimos index.html con nuestro navegador y todo está bien veremos el mensaje,
la imegen y el botón, y al darle click ocultara y mostrar el elemento contenido
dentro del div tal cual como antes de probar la propiedad template y
referenciarlo en el componente.

Ahora vamos a ver un ejemplo de como podemos poder recorrer un listado de
objetos de un arreglo para mostrar esos datos.

Entonces, en nuestro componente, vamos a agregar una nueva propiedad que sería
"courses" que sería un array de objetos, y cada objeto contiene dos propiedades
que serían "name" y "url"y queremos mostrarlos en el HTML como una lista y que
cada elemento sea un enlace, entonces dentro de template creamos una lista en
html "ul" y "li" a la cual le vamos agregar la directiva "v-for" que lo que hace
es recorrer una lista de elementos, es un ciclo for. e imprimiremos el name de
cada elemnto que recorramos, tal que:

<ul>
  <li v-for="course in courses">
    {{ course.name}}
  </li>
</ul>

Para hacer más elegante y más eficiente este código podemos usar el "index" que
proporciona cada elemento dentro del array ademá de agregar una etiqueta de
enlace a cada elemento de la lista y también agregamos un "v-bind" para el
"href" para que esté comunicado con la data del controlador o componente.

El ejemplo completo quedaría así:

<!DOCTYPE html>
<html lang="">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>Component vue example</title>
    <script src="https://unpkg.com/vue@2"></script>
  </head>
  <body>
    <div id="app"></div>
    <script src="app.js"></script>
  </body>
</html>

y

const app = new Vue({
  el: '#app',
  template: `
    <div>

      <ul>
        <li v-for="(course, index) in courses" v-bind:key="index">
          <a v-bind:href="course.url"> {{ course.name }} </a>
        </li>
      </ul>

      <div v-if="show">
        {{ message }}
        <img v-bind:src="image" width="150">
      </div>
      <button @click="toggleShow()">Show/Hide</button>

    </div>
  `,
  data: {
    courses: [
      { name: "PHP", url: 'https://www.youtube.com/1' },
      { name: "Python", url: 'https://www.youtube.com/2' },
      { name: "JavaScript", url: 'https://www.youtube.com/3' },
    ],
    show: true,
    message: 'Hello Vue!',
    image: 'http://t1.gstatic.com/images?q=tbn:ANd9GcRf61mker2o4KH3CbVE7Zw5B1-VogMH8LfZHEaq3UdCMLxARZAB'
  },
  methods: {
    toggleShow: function () {
      this.show = !this.show
    }
  }
})

Otro ejemplo
============

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>My first Vue component</title>
  <script src="https://unpkg.com/vue@2"></script>
</head>
<body>
<div id="app">
    <!-- Crea una instancia del componente paragraphs -->
    <paragraphs></paragraphs>
</div>

<script>
// Define un nuevo componente llamado paragraphs
Vue.component('paragraphs', {
  template: `
  <div>
    <p>This is a paragraphs</p>
  <div>
  `
})
new Vue({
  el: '#app'
})
</script>
</body>
</html>

Otro ejemplo
============

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>My first Vue component</title>
  <script src="https://unpkg.com/vue@2"></script>
</head>
<body>
<div id="app">
  <ul>
    <vegetables-list
      v-for="vegetal in vegetablesList"
      v-bind:prop="vegetal">
    </vegetables-list>
  </ul>
</div>

<script>
Vue.component('vegetables-list', {
  props: ['prop'],
  template: '<li>{{ prop.name }}</li>'
})

var app7 = new Vue({
  el: '#app',
  data: {
    vegetablesList: [
      { name: 'Vegetables' },
      { name: 'Cheese' },
      { name: 'Karrot' }
    ]
  }
})
</script>
</body>
</html>

Otro ejemplo
============

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>My first Vue component</title>
  <script src="https://unpkg.com/vue@2"></script>
</head>
<body>
<div id="app">
  <app-header></app-header>
  <ul>
    <app-content
      v-for="item in bookList"
      v-bind:prop="item">
    </app-content>
  </ul>
  <app-footer></app-footer>
</div>

<script>
Vue.component('app-header', {
  template: `
  <div>
    <h1>Header</h1>
  <div>
  `
})

Vue.component('app-content', {
  props: ['prop'],
  template: `
    <li>{{ prop.title }}</li>
  `
})

Vue.component('app-footer', {
  template: `
  <div>
    <h4>Footer</h4>
  <div>
  `
})

var app7 = new Vue({
  el: '#app',
  data: {
    bookList: [
      { title: 'Il cimpendium malefican' },
      { title: 'Free demololatrie' },
      { title: 'The nine gate' }
    ]
  }
})
</script>
</body>
</html>

Otro ejemplo
============

<!--
La variable active, que representa qué elemento
del menú está actualmente seleccionado.
-->
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Vue example</title>
  <script src="https://unpkg.com/vue@2"></script>
</head>
<body>
<div id="nav">
  <a href="#" v-on:click="makeActive('home')">Home</a>
  <a href="#" v-on:click="makeActive('projects')">Projects</a>
  <a href="#" v-on:click="makeActive('services')">Services</a>
  <a href="#" v-on:click="makeActive('contact')">Contact</a>
  <p>You chose <b>{{ active }}</b></p>
</div>
<script>
var demo = new Vue({
  el: '#nav',
  data: {
    active: 'home'
  },
  methods: {
    makeActive: function(item){
      this.active = item;
    }
  }
});
</script>
</body>
</html>

Otro ejemplo
============

<!--
Al darle click al texto aparece un campo que permite
editar el texto y salir de la edición con un click.
-->
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Vue example</title>
  <script src="https://unpkg.com/vue@2"></script>
</head>
<body>
<div id="main">
  <div v-on:click.stop v-if="show_input">
    <input type="text" v-model="text_content" />
  </div>
  <p v-on:click.stop="toggleTooltip">{{text_content}}</p>
</div>
<script>
var demo = new Vue({
  el: '#main',
  data: {
    show_input: false,
    text_content: 'Click and edit me'
  },
  methods: {
    toggleTooltip: function(){
      this.show_input = !this.show_input;
    }
  }
})
</script>
</body>
</html>

=======
Vue CLI
=======

Es una línea de comandos que nos permite crear proyectos más grandes y
complejos. Es un sistema completo para el desarrollo rápido de Vue.js.

Instalación
===========

Para instalar el nuevo paquete, use uno de los siguientes comandos. Necesita
privilegios de administrador para ejecutarlos a menos que npm se haya instalado
en su sistema a través de un administrador de versiones de Node.js

$ sudo npm install -g @vue/cli

Después de la instalación, tendrá acceso al binario vue en su línea de comando.

Puede verificar que esté instalado correctamente simplemente ejecutando vue, que
debería presentarle un mensaje de ayuda con una lista de todos los comandos
disponibles.

$ vue

y para chequear la versión:

$ vue --version

@vue/cli 4.5.13

Para actualizar la versión

$ sudo npm update -g @vue/cli

Crear un proyecto de vue
========================

$ vue create name_project

Luedo de darle crear nos va a mostrar los presets, que son un tipo de
configuración base que puedes ajustar a las necesidades del proyecto que se está
creando.

Se le pedirá que elija un ajuste preestablecido. Puede elegir el ajuste
preestablecido o predeterminado que viene con una configuración básica de Babel
+ ESLint, o seleccionar "Seleccionar funciones manualmente" para elegir las
funciones que necesita.

-Babel es un compilador de JavaScript.

-ESLint es una herramienta de análisis de código estático para identificar
patrones problemáticos encontrados en el código JavaScript.

La configuración predeterminada es excelente para crear rápidamente un prototipo
de un nuevo proyecto, mientras que la configuración manual proporciona más
opciones que probablemente sean necesarias para proyectos más orientados a la
producción.

Si opta por seleccionar funciones manualmente, al final de las indicaciones
también tiene la opción de guardar sus selecciones como un ajuste preestablecido
para poder reutilizarlas en el futuro.

El comando vue create tiene varias opciones y puede explorarlas todas
ejecutando:

$ vue create --help

Usage: create [options] <app-name>

create a new project powered by vue-cli-service

Options:

  -p, --preset <presetName>       Skip prompts and use saved or remote preset
  -d, --default                   Skip prompts and use default preset
  -i, --inlinePreset <json>       Skip prompts and use inline JSON string as preset
  -m, --packageManager <command>  Use specified npm client when installing dependencies
  -r, --registry <url>            Use specified npm registry when installing dependencies
  -g, --git [message|false]       Force / skip git initialization, optionally specify initial commit message
  -n, --no-git                    Skip git initialization
  -f, --force                     Overwrite target directory if it exists
  -c, --clone                     Use git clone when fetching remote preset
  -x, --proxy                     Use specified proxy when creating project
  -b, --bare                      Scaffold project without beginner instructions
  -h, --help                      Output usage information

Usando la GUI
=============

También puede crear y administrar proyectos usando una interfaz gráfica con el
comando

$ vue ui

El comando anterior abrirá una ventana del navegador con una GUI que lo guiará a
través del proceso de creación del proyecto.

Al crear un proyecto con Vue CLI nos queda esta estructura:

-src/
    /assets: Donde puedo colocar mis imágenes, fuentes de texto, etc.

    /components

    App.vue: Aplicación principal o componente de orden superior.

    main.js: Configuración principal e inicial. Donde se importa Vue y se hace
    la configuración base.

-babel.config.js

-node_modules

-package.json

-package-lock.json

-public

-README.md

Estructura de aplicación en proyectos Vue.js
============================================

/node_modules: Es la carpeta vendor de nuestro proyecto. Aquí se almacenarán
todos los paquetes que necesita nuestro proyecto para funcionar.

/public: En esta carpeta estarán los archivos públicos de la aplicación. Aquí
también estará el punto de entrada el cuál es el archivo index.html.

/public/index.html: Es el archivo de acceso principal de la aplicación.

/src: Aquí estará todo el código de la aplicación en Vue.js, es decir,
componentes principalmente.

/src/components: Contiene todos los componentes creados en Vue.js.

/src/App.vue: Es el componente principal de la aplicación. Este componente
llamará a todos los demás componentes creados en la carpeta components.

main.js: Es el archivo principal o punto de entrada JS de la aplicación. Aquí se
importan las librerías que hayamos instalado en la aplicación y se incia la
instancia principal de Vue.

package.json: Este archivo indica las dependencias de nuestro proyecto, los
comandos disponibles y otras configuraciones.

babel.config.js: Es la configuración de Babel. Básicamente indica como se va a
transpilar el código moderno a código más antiguo que entienda todos los
navegadores.

.gitignore: Indica que archivos omitir para el sistema de gestión de versiones.

Lo más importante de esta estructura es entender en dónde se deben crear los
nuevos componentes de Vue y cómo integrarlos a nuestra aplicación.

Fuente
======

-https://blog.pleets.org/article/estructura-de-directorios-en-vuejs

Correr la aplicación desde un servidor de desarrollo de node
============================================================

$ npm run serve

App running at:
  - Local:   http://localhost:8080/
  - Network: http://192.168.1.102:8080/

Correr la aplicación desde un servidor de desarrollo de vue
===========================================================

1) Instralar el paquete requerido:

$ npm i -g @vue/cli-service-global

2) Ejecutar el comando sobre el archivo principal del proyecto:

$ vue serve App.vue

App running at:
  - Local:   http://localhost:8080/
  - Network: http://192.168.1.102:8080/

============================================
.gitignore de un proyecto creado con Vue CLI
============================================

.DS_Store
node_modules
/dist

# local env files
.env.local
.env.*.local

# Log files
npm-debug.log*
yarn-debug.log*
yarn-error.log*
pnpm-debug.log*

# Editor directories and files
.idea
.vscode
*.suo
*.ntvs*
*.njsproj
*.sln
*.sw?

Fuentes
=======

-https://github.com/carlosazaustre/carlosazaustre.es/blob/master/content/posts//desarrollo-basado-en-componentes-con-vue-js/index.mdx

-https://medium.com/techwomenc/crea-tu-primer-componente-single-file-con-vue-js-8802381311

-https://dev.to/duxtech/crea-tu-primer-componente-con-vue-js-para-dummies-2n4c

-https://cli.vuejs.org/guide/installation.html

=================
Scoped CSS en Vue
=================

Cuando una etiqueta <style> tiene el atributo de scoped, su CSS se aplicará solo
a los elementos del componente actual. Esto es similar a la encapsulación de
estilo que se encuentra en Shadow DOM. Viene con algunas advertencias, pero no
requiere ningún polyfills.

<style scoped>
  h2 {
    font-size: 18pt;
  }
</style>

===========================
Vue: Single File Components
===========================

Con Vue podemos crear componentes de múltiples formas.

Existe una solución que junto con Webpack y un módulo (vue-loader) nos permite
tener en un único fichero la vista (template), el diseño (css) y la lógica
(javascript). Estos ficheros tienen una extensión .vue y tienen la siguiente
forma:

<template>
// Aquí va el código HTML
</template>

<script>
// Aquí va el código Javascript, puedes usar Babel, TypeScript,...)
</script>

<style>
// Aquí va el código CSS, puedes usar stylus, Sass, Less, etc...
</style>

Lo bueno de éste fichero, es que al no ser un fichero final de producción, es un
fichero de desarrollo que luego Webpack interpreta y extrae las diferentes
partes a sus ficheros correspondientes, nos da mucha versatilidad, por ejemplo:

Si preferimos utilizar Pug/Jade para el marcado en lugar de HTML convencional,
podemos hacerlo porque Webpack leerá el fichero y gracias a los "loaders"
transpilará el código al resultado final.

De igual manera, si prefieres utilizar TypeScript o CoffeeScript para el código
JavaScript, también es posible, al igual que el estilo, puedes utilizar
cualquier preprocesador que quieras: Less, Stylus, Sass, SCSS, PostCSS,...

Lo único que tienes que hacer es indicar en cada tag que tipo estás utilizando
con el atributo lang. Por ejemplo:

<template lang="pug">
  ...
</template>

<script lang="ts">
</script>

<style lang="scss">
</style>

Esto lo hace muy versátil y práctico para equipos de trabajo dónde haya personas
dedicadas al diseño y maquetación, y otras personas encargadas del código. De
esta manera, la persona dedicada al CSS puede utilizar el preprocesador que
prefiera, el desarrollador utilizar TypeScript si lo prefiere, etc...

para el ejemplo creamos MovieCard.vue

<template>
  <div>
    <img width="100" v-bind:src="image" v-bind:alt="title"/>
    <h2>{{ title }}</h2>
  </div>
</template>

<script>
  export default {
    name: 'movie-card',
    props: {
        image: String,
        title: String
    }
  }
</script>

<style scoped>
  h2 {
    font-size: 18pt;
  }
</style>

Descripción del código
======================

-Lo que hay en "template" es lo que vamos a representar en el html.

-"name" en el script, es el nombre del componente y con ese nombre lo vamos a
llamar desde index.html

-Dentro del script también se pueden llamar a otros componentes, y estos deben
ser importados para poder se usados con la variable "components", ejemplo:

<script>
import ImageMovie from './ImageMovie.vue'
  export default {
    name: 'movie-card',
    components: {
    }
    props: {
      image: String,
      title: String
    }
  }
</script>

Otro ejemplo
============

SkeletonComponent.vue

<template>
<h1>{{ greeting }}</h1>
</template>

<script>
export default {
    name: 'SkeletonComponent',
    data: function() {
        return {
            greeting: 'Hello'
        };
    },
    props: [],
    methods: {
    },
    created: function(){
    }
}
</script>

<style scoped>
h1 {
    font-size: 2em;
    text-align: center;
}
</style>

Llamar un componente dentro de otro
===================================

Supongamos que tenemos SiteNav.vue

<template>
  <ul class="nav">
    <li class="nav-item" v-for="item in items" :key="item">
      <a class="nav-link" href="#">{{ item }}</a>
    </li>
  </ul>
</template>

<script>
export default {
  props: {
    items: {
      type: Array,
      required: true,
    },
  },
};
</script>

<style scoped>
ul > li {
  border: solid 1px silver;
  margin-left: 2px;
  background: rgb(240, 240, 240);
}
</style>

Para utilizar el componente creado anteriormente dentro de otro componente basta
importarlo mediante un import y cargarlo al componente padre. Observemos por
ejemplo como el siguente componente carga SiteNav.

<template>
  <div id="app">
    <site-nav :items="nav"></site-nav>
  </div>
</template>

<script>
import SiteNav from "./components/SiteNav";

export default {
  name: "App",
  components: {
    SiteNav,
  },
  data() {
    return {
      nav: ["Home", "Products", "About Us"],
    };
  },
};
</script>

Otro ejemplo
============

<template>
  <div>
    {{ message }}
  </div>
</template>

<script>
export default {
  name: 'App',
  data() {
    return {
      message: 'Hello world!'
    }
  }
}
</script>

<style>
</style>

Otro ejemplo
============

<template>
  <div>
    <ul>
      <li v-for="(course, index) in courses" v-bind:key="index">
        <a v-bind:href="course.url"> {{ course.name }} </a>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  name: 'App',
  data() {
    return {
      courses: [
        { name: "PHP", url: 'https://www.youtube.com/1' },
        { name: "Python", url: 'https://www.youtube.com/2' },
        { name: "Python", url: 'https://www.youtube.com/2' },
      ]
    }
  }
}
</script>

<style>
</style>

Otro ejemplo con llamada a otro componente
==========================================

<template>
  <div>
    <HelloWorld msg="Hello world component!"/>
  </div>
</template>

<script>
import HelloWorld from './components/HelloWorld.vue'

export default {
  name: 'App',
  components: {
    HelloWorld
  }
}
</script>

<style>
</style>

Componente que llamamos src/components/HelloWorld.vue

<template>
  <div>
    <h1>{{ msg }}</h1>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  props: {
    msg: String
  }
}
</script>

<style>
</style>

Otro ejemplo con llamada a 2 componentes
========================================

App.vue

<template>
  <div>
    <AppHeader />
    <AppFooter />
  </div>
</template>

<script>
import AppHeader from './components/AppHeader.vue'
import AppFooter from './components/AppFooter.vue'

export default {
  name: 'App',
  components: {
    AppHeader,
    AppFooter,
  }
}
</script>

components/AppHeader.vue

<template>
  <h1>Header</h1>
</template>

components/AppFooter.vue

<template>
  <h4>Footer</h4>
</template>

============================================================================
Ejemplo de un componente para exportar con webpack en un proyecto de Laravel
============================================================================

En resources/js/app.js:

Vue.component(
  'name-component',
  () => import('./components/NameComponent.vue')
);

En resources/js/components/NameComponent.vue:

<template>
    sssss
</template>

<script>
export default {
  data () {
  },
  props :{
  },
}
</script>

resources/views/index.blade.php

<name-component></name-component>

======================================
Instalar Bootstrap en proyectos Vue.js
======================================

Lo primero que debes hacer es agregar Bootstrap y Popper al proyecto.

$ npm i --save bootstrap

$ npm i --save jquery popper.js

Después de esto basta simplemente importar bootstrap de la siguiente manera en
el archivo main.js.

import "bootstrap";
import "bootstrap/dist/css/bootstrap.min.css";

si recién creaste tu proyecto en Vue tu archivo main.js lucirá muy similar al
sighuiente.

import Vue from "vue";
import App from "./App.vue";
import "bootstrap";
import "bootstrap/dist/css/bootstrap.min.css";

Vue.config.productionTip = false;

new Vue({
  render: (h) => h(App),
}).$mount("#app");

Una vez hecho esto ya podrás empezar a utilizar bootstrap en tus componentes.

Fuente
======

-https://blog.pleets.org/article/instalar-bootstrap-en-proyecto-vuejs

==================================
Paso de parámetros a un componente
==================================

En el escript:

Vue.component('x-button', {
  props: ['url', 'text'],
  template: `
    <a :href="url" class="btn btn-primary">
      {{ text }}
    </a>
  `
});

var vue = new Vue({
  el: "#app",
});

En el index.html

<div id="app" class="m-3">
  <x-button
    text="Go"
    url="https://www.google.com">
  </x-button>
</div>

================
Clases dinámicas
================

Supogamos que queremos mostrar en rojo la facturación menor o igual a 100 USD y
en verde la facturación por encima de 100 USD. Para esto, podemos utilizar el
shortcut la directiva v-bind para colocar un objeto en el atributo array y
decidir si se aplica cada clase:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>My first Vue app</title>
  <script src="https://unpkg.com/vue@2"></script>
</head>
<body>
<style type="text/css">
.red {
  color: red;
}
.green {
  color: green;
}
</style>

<ul id="app">
  <li
    v-bind :class="{ red: price <= 100, green: price > 100 }"
    v-for="(price, date) in sales">
    {{ date }} - ${{ price }}
  </li>
</ul>

<script>
var vue = new Vue({
  el: "#app",
  data: {
    sales: {
      '2020-01-01': 100,
      '2020-01-02': 200,
      '2020-01-03': 300
    }
  }
});
</script>
</body>
</html>

Otro ejemplo de clase porsonalizada según valor de variable:

<button
  :class="['btn', isError ? 'btn-danger' : 'btn-success']"
>
  Submit
</button>

=================
Sintaxis de array
=================

Si bien es posible pasar un objeto en el atributo class, también es posible
pasar un array de clases a agregar. Veamos un ejemplo simple en donde adjuntamos
un par de clases a un botón.

<button :class="['btn', 'btn-success']">Submit</button>

Esto es exactamente igual a hacer lo siguiente:

<button class="btn btn-success">Submit</button>

A simple vista parece no tener mucha utilidad, el verdadero poder de esta
sintaxis consiste en que puedes combinarlo con la sintaxis de objeto. Entonces
puede ser útil que debas verificar si realmente necesitas la clase btn-success
en un botón o necesitas btn-danger. Dicho esto, podríamos tener algo como lo
siguiente:

<button
  :class="['btn', isError ? 'btn-danger' : 'btn-success']"
  @click="isError = !isError">
  Submit
</button>

Al dar clic en el botón cada vez cambiará de clase según el valor de isError.

======================================================
Ciclo de vida de Vue, created, mounted, destroyed, etc
======================================================

Los componentes, en todos los frameworks, tienen ciclo de vida, en otras
palabras, los componentes, se crean, se cargan, se insertan en ls vista y se
destruyen, y lo bueno de esto es que puedes ejecutar código en cada uno de estos
estados.

Vue tiene muchos métodos para distintos estados, explicare los mas habituales,
los que acabarás usando siempre, ya que el resto se usan mucho menos.

Por cierto, una limitación que tienen estos estados es que no puedes usar dentro
arrow functions, no puedes hacer esto porque se pierde el contexto del this y ya
no puedes acceder al data y a los métodos.

BeforeCreate
============

En ese punto Vue todavía no ha cargado el componente, esto quiere decir que no
puedes acceder a ninguna opción, ni método ni data del componente. Este
lifecycle se suele usar para hacer comprobaciones antes de entrar en las rutas,
por ejemplo, puedes comporbar que el usuario esté logueado antes de entrar en
una ruta para que en caso de no estarlo se redirija a la del login.

<script>
export default {
  beforeCreate() {
    console.log('No se ha ejecutado nada todavía')
  }
}
</script>

Created
=======

Uno de los que más se usan. Se ejecuta después de beforeCreated. En ese punto
Vue ya ha cargado todas las opciones del componente y por tanto ya existe la
sección data y los métodos. Aquí puedes hacer llamadas a variables y puedes
ejecutar métodos.

La única pega es que en este punto Vue todavía no ha cargado la vista, no la ha
renderizado y no puedes leer o modificar nada que afecte a ls vista porque
todavía no existe. No puedes acceder al DOM de ese componente.

Este método se suele usar para realizar las llamadas API REST, por ejemplo si
queremos pintar un array con información que provenga del backend lo que se
suele hacer es dentro del created hacer la llamada y almacenar el valor de
retorno de una de las variables del data. Como Vue es reactivo, cuando la vista
esté cargada se pintará el array.

Veamos un ejemplo:

<script>
export default {
  data: () => ({
    info: null,
  }),
  created() {
    this.info = "Componente cargado";
  }
};
</script>

Si te fijas lo que se hace es declarar un método created, usualmente debajo de
los métodos al final del componente.

Como vimos en los métodos, para acceder a las variables se utiliza el this, en
este caso para poner un valor a una variable. También podemos llamar a métodos
de la sección methods con el this e incluso podemos hacer uso de las propiedades
*computadas.*

===========
BeforeMount
===========

Se ejecuta justo antes de insertar el componente en el DOM, justamente, en
tiempo de la primera renderización de un componente. Es uno de los hooks que
menos usarás y, como muchos otros, se podrá utilizar para trazar el ciclo de
vida del componente.

A veces se usa para iniciar variables, pero yo te recomiendo que delegues esto
al hook created.

beforeMount () {
}

Mounted
=======

A diferencia del created, en el mounted si que tenemos acceso al DOM, es decir,
el mounted se ejecuta exactamente cuando se termina de pintar la vista en la
página web y por tanto desde aquí podemos hacer cambios en la vista.

<template>
  <a href="/link">link</a>
</template>
<script>
export default {
  data: () => ({
    info: null,
  }),
  mounted() {
    console.log(this.$el.querySelectorAll('a'));
  }
};
</script>

Si te fijas, para acceder a un elemento del DOM se puede hacer mediante la
variable que crea Vue al renderizar el componente this.$el.

Si te salta un error porque no existe el elemento, una forma de asegurarse de
que Vue ya ha renderizado todos los elementos del DOM es usar la función
nextTick de Vue.

<template>
  <a href="/link">link</a>
</template>
<script>
export default {
  data: () => ({
    info: null,
  }),
  mounted() {
    this.$nextTick(() => {
      console.log(this.$el.querySelectorAll('a'));
    });
  }
};
</script>

La función nextTick lo que hace es dejar pasar un pequeño intervalo de tiempo,
el correspondiente a un tick.

============
BeforeUpdate
============

Es el hook que se desencadena nada más que se provoca un actualización de
estado, antes de que se se comience con el re renderizado del Virtual DOM y su
posterior ‘mapeo’ en el DOM real.

Este hook es un buen sitio para trazar cuándo se provocan cambios de estado y
se desembocan renderizados que nosotros no preveíamos o que son muy poco
intuitivos a simple vista. Podríamos hacer lo siguiente:

beforeUpdate: function () {
  console.log('Empieza un nuevo renderizado de component');
}

Updated
=======

Con este método hay que tener mucho cuidado. Se ejecuta cada vez que se produce
un cambio en el componente y cambia algo de la vista. Se recomienda aquí no
hacer muchos cambios en el data o en la vista y utilizar propiedades computadas
o watchers.

<script>
export default {
  data: () => ({
    info: null,
  }),
  updated() {
    console.log("Componente actualizado");
  }
};
</script>

Hay que tener cuidado porque puede que se ejecute más veces de las que en
realidad queremos.

=============
BeforeDestroy
=============

Se produce justamente antes de eliminar la instancia. El componente es
totalmente operativo todavía y podemos acceder tanto al estado interno, como a
sus propiedades y eventos.

Suele usarse para quitar eventos o escuchadores. Por ejemplo:

beforeDestroy() {
  document.removeEventListener('keydown', this.onKeydown);
}

Destroyed
=========

Como puedes suponer, el destroyed se ejecuta cuando eliminamos un componente,
cuando ya no esta cargado. Esto puede pasar cuando cambias de vista o cuando o
cuando se borra un componente del DOM porque ha sido ocultado con v-if.

<script>
export default {
  data: () => ({
    info: null,
  }),
  destroyed() {
    console.log("Componente eliminado");
  }
};
</script>

Watch
=====

El estado watch en Vue.js te permite observar cambios en una propiedad
específica y ejecutar código en respuesta a esos cambios. Puedes utilizarlo para
realizar acciones personalizadas cuando una propiedad cambie su valor.

Para definir un watch en un componente Vue, debes agregar una sección llamada
watch al objeto de opciones del componente. Dentro de esta sección, puedes
definir diferentes propiedades a observar y las correspondientes funciones que
se ejecutarán cuando esas propiedades cambien.

Ejemplo:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>My first Vue app</title>
  <script src="https://unpkg.com/vue@2"></script>
</head>
<body>
  <div id="app">
    <input v-model="message" placeholder="Escribe algo">
    <p>El valor de "message": {{ message }}</p>
  </div>

  <script>
    var app = new Vue({
      el: '#app',
      data: {
        message: ''
      },
      watch: {
        message(newMessage, oldMessage) {
          console.log('El valor de "message" ha cambiado');
          console.log('Nuevo valor:', newMessage);
          console.log('Valor anterior:', oldMessage);
        },
      },
    })
  </script>
</body>
</html>

En la sección data, defines las propiedades del componente. En este caso, solo
tenemos una propiedad llamada message, que se inicializa como una cadena vacía.

A continuación, definimos la sección watch para observar cambios en la propiedad
message. Dentro de esta sección, especificamos una función que se ejecutará cada
vez que el valor de message cambie.

La función del watch toma dos parámetros: newMessage y oldMessage. Estos
parámetros representan el nuevo valor y el valor anterior de la propiedad
message, respectivamente.

Dentro de la función del watch, utilizamos console.log() para imprimir mensajes
en la consola del navegador. Mostramos el mensaje "El valor de 'message' ha
cambiado", seguido del nuevo valor y el valor anterior.

En el HTML, tenemos un <input> que está vinculado a la propiedad message
utilizando la directiva v-model. Esto significa que cualquier cambio en el input
actualizará automáticamente el valor de message.

También tenemos un párrafo <p> que muestra el valor actual de message utilizando
la interpolación de Vue {{ message }}. Este valor se actualizará automáticamente
cuando message cambie.

Cuando ejecutes este código en tu navegador, verás el input y el párrafo en la
página. Al escribir algo en el input, el valor de message se actualizará y se
mostrará en el párrafo. Además, en la consola del navegador verás los mensajes
de seguimiento que se imprimen cada vez que message cambia.

Esta es una forma básica de utilizar el estado watch en Vue.js para observar y
reaccionar a los cambios en las propiedades de un componente.

Conclusiones
============

Al final los que más vas a usar son el método created y el mounted. Te
recomiendo que hagas pruebas con tu cuenta con ellos ya que esta parte de Vue se
usa mucho en todos los proyectos y tienes que entenderla bien.

Existen muchos más métodos en el ciclo de un componente de Vue como el
beforeMounted o el beforeUpdated.

Fuentes
=======

-https://codingpotions.com/vue-ciclo-vida
-https://elabismodenull.wordpress.com/2017/05/05/vuejs-el-ciclo-de-vida-de-un-componente/
-ChatGPT

Directivas Personalizadas
=========================

Además del conjunto predeterminado de directivas incluidas en el núcleo (v-model
y v-show), Vue también le permite registrar sus propias directivas
personalizadas. Note que en Vue 2.0, la forma primaria de reutilización y
abstracción del código son los componentes; sin embargo, puede haber casos en
los que necesite un acceso al bajo nivel al DOM en elementos simples, y aquí es
donde las directivas personalizadas seguirían siendo útiles. Un ejemplo sería
enfocarse en un elemento input.

Cuando se carga la página, este elemento se enfoca (nota: el atributo nativo
autofocus no funciona en Safari para dispositivos mobiles). Imaginen el input
que debería estar enfocada ahora. Ahora vamos a construir la directiva que
realiza esto:

// Registra una directiva personalizada global llamada `v-focus`
Vue.directive('focus', {
  // Cuando el elemento enlazado se inserta en el DOM...
  inserted: function (el) {
    // Enfoca el elemento
    el.focus()
  }
})

Si desea registrar una directiva localmente en lugar de lo anterior, los
componentes también aceptan una opción directives:

directives: {
  focus: {
    // Definición de directiva
    inserted: function (el) {
      el.focus()
    }
  }
}

Luego, en un template, puede usar el nuevo atributo v-focus en cualquier
elemento, como este:

<input v-focus>

===============================
Propiedades computadas computed
===============================

Las expresiones en el template son muy convenientes, pero están diseñadas para
operaciones simples. Poner demasiada lógica en sus templates puede hacerlos
grandes, complejos y difíciles de mantener. Por ejemplo:

<div id="example">
  {{ message.split('').reverse().join('') }}
</div>

En este punto, el template ya no es simple y declarativo. Debe mirarlo por un
segundo antes de darse cuenta de que muestra message al revés. El problema se
agrava cuando desea incluir el mensaje invertido en su template más de una vez.

Es por eso que para cualquier lógica compleja, deberia usar una propiedad
computada.

Ejemplo:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Vue example</title>
  <script src="https://unpkg.com/vue@2"></script>
</head>
<body>
<div id="example">
  <p>Mensaje original: "{{ message }}"</p>
  <p>Mensaje invertido computado: "{{ reversedMessage }}"</p>
</div>
<script>
var vm = new Vue({
  el: '#example',
  data: {
    message: 'Hola'
  },
  computed: {
    // un getter computado
    reversedMessage: function () {
      // `this` apunta a la instancia vm
      return this.message.split('').reverse().join('')
    }
  }
})
</script>
</body>
</html>

Esto muestra en el navegador:

Mensaje original: "Hola"

Mensaje invertido computado: "aloH"

Aquí hemos declarado una propiedad computada reversedMessage. La función que
proporcionemos se utilizará como la función getter para la propiedad
vm.reversedMessage:

console.log(vm.reversedMessage) // => 'aloH'
vm.message = 'Adios'
console.log(vm.reversedMessage) // => 'soidA'

Ejemplo de ajax con axios y vuejs
=================================

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Ajax</title>
  <link rel="stylesheet" href="../css/bootstrap.min.css">
  <script src="https://unpkg.com/vue@2"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.21.1/axios.min.js"></script>
</head>
<body>
<div id="main" class="container">
  <div class="row">
    <div class="col-12">
      <div class="table-responsive">
        <table class="table">
          <thead>
            <tr>
              <th scope="col">First Name</th>
              <th scope="col">Age</th>
              <th scope="col">Picture</th>
            </tr>
          </thead>
          <tbody>
            <tr v-for="usuario in listaUsuarios">
              <td v-text="usuario.name.first"></td>
              <td v-text="usuario.dob.age"></td>
              <td>
                <img v-bind:src="usuario.picture.thumbnail" v-bind:alt="usuario.picture.thumbnail" class="rounded-circle" />
              </td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>
  <!--div class="row">
    <div class="col-12">
      <h2>Json</h2>
      <div class="jumbotron">
        <pre> {{ $data }} </pre>
      </div>
    </div>
  </div-->
</div>
<script>
  var urlUsuarios = 'https://randomuser.me/api/?results=3';
  var ajaxConVue = new Vue({
    el: '#main',
    data: {
      listaUsuarios: []
    },
    created: function(){
      this.consultarUsuarios();
    },
    methods: {
      consultarUsuarios: function() {
        axios.get(urlUsuarios).then(response => {
          this.listaUsuarios = response.data.results
        });
      }
    }
  })
</script>
</body>
</html>

Ejemplo de Data binding
=======================

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Data Binding</title>
  <script src="https://unpkg.com/vue@2"></script>
</head>
<body>

  <div id="main">

    <!-- Data binding como JS -->
    {{ 1 + 2 }}

    <!-- Data binding para modificar valores de atributos -->
    <input type="text" v-bind:style="color" v-bind:value="valorDelInput" >

    <!-- full syntax -->
    <p v-bind:style="color"> Sintaxis larga </p>

    <!-- shorthand -->
    <p :style="color"> Sintaxis corta </p>

  </div>

  <script>
    var binding = new Vue({
      el: '#main',
      data: {
        valorDelInput: 'Texto de ejemplo',
        color: 'color: #00f',
      }
    })
  </script>

</body>
</html>

=================================
Definir el tipo de cada propiedad
=================================

Las propiedades suelen ir listadas como un arreglo de cadenas de texto:

props: ['title', 'likes', 'isPublished', 'commentIds', 'author']

Sin embargo, por lo general, querrá que cada propiedad sea un tipo específico de
valor. En estos casos, puede enumerar las propiedades como un objeto, donde los
nombres y valores de las propiedades contienen los nombres y tipos de datos,
respectivamente:

props: {
  title: String,
  likes: Number,
  isPublished: Boolean,
  commentIds: Array,
  author: Object
}

Esto no solo documenta su componente, sino que también advertirá a los usuarios
en la consola de JavaScript del navegador si se está pasando el tipo incorrecto.

===============================================================================
Enviar datos a través del formulario que sirven para autenticarse con ellos por
ejemplo.
===============================================================================

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Login example</title>
  <script src="https://unpkg.com/vue@2"></script>
</head>
<body>
<div id="app">
  <form method="post" @submit.prevent="login">
    <label class="label">Email</label>
    <div class="control">
      <input
        v-model="email"
        type="email"
        name="email"
      />
    </div>
    <label class="label">Password</label>
    <div class="control">
      <input
        v-model="password"
        type="password"
        name="password"
      />
    </div>
    <br>
    <button type="submit" class="button">
      Log In
    </button>
  </form>
</div>
<script type="text/javascript">
var app = new Vue({
  el: "#app",
  data: {
    email: '',
    password: ''
  },
  methods: {
    login () {
      console.log(this.email)
      console.log(this.password)
    }
  }
});
</script>
</body>
</html>

=========================
Validación de Formularios
=========================

Ejemplo Base

La validación de formularios es soportada de forma nativa por el navegador. Sin
embargo, diferentes navegadores manejarán las cosas de una manera que puede ser
un poco complicada o tramposa. Incluso cuando la validación es soportada
perfectamente, algunas veces habrá la necesidad de personalizar las mismas, por
lo cual, una solución basada en Vue podrá ser más apropiada. Comencemos con un
simple ejemplo.

Dado un formulario con tres campos, haremos dos obligatorios. Veremos el HTML
primero:

<form
  id="app"
  @submit="checkForm"
  action="https://vuejs.org/"
  method="post"
>

  <p v-if="errors.length">
    <b>Please correct the following error(s):</b>
    <ul>
      <li v-for="error in errors">{{ error }}</li>
    </ul>
  </p>

  <p>
    <label for="name">Nombre</label>
    <input
      id="name"
      v-model="name"
      type="text"
      name="name"
    >
  </p>

  <p>
    <label for="age">Edad</label>
    <input
      id="age"
      v-model="age"
      type="number"
      name="age"
      min="0">
  </p>

  <p>
    <label for="movie">Película favorita</label>
    <select
      id="movie"
      v-model="movie"
      name="movie"
    >
      <option>Star Wars</option>
      <option>Vanilla Sky</option>
      <option>Atomic Blonde</option>
    </select>
  </p>

  <p>
    <input
      type="submit"
      value="Enviar"
    >
  </p>

</form>

Comencemos desde el inicio. El tag <form> tiene un ID que usaremos para el
componente Vue. Hay un botón de envío, del cual hablaremos en un momento y la
action del formulario que es una URL temporal que apuntaría a algo real en un
servidor (donde habrá una copia de la validación en el lado del servidor, por
supuesto).

Debajo del formulario, hay un párrafo que se mostrará o esconderá basado en el
estado del error. Esto renderizará una lista de errores arriba del formulario.
Además, note que la validación se lanza en el evento de envío del formulario, en
vez de hacerlo cada vez que un campo es modificado.

Lo último a notar es que cada uno de los tres campos tiene su correspondiente
v-model, para conectar los mismos a los valores con los que trabajaremos en
JavaScript. Ahora, veamos el ejemplo:

const app = new Vue({
  el: '#app',
  data: {
    errors: [],
    name: null,
    age: null,
    movie: null
  },
  methods:{
    checkForm: function (e) {
      if (this.name && this.age) {
        return true;
      }

      this.errors = [];

      if (!this.name) {
        this.errors.push('El nombre es obligatorio.');
      }
      if (!this.age) {
        this.errors.push('La edad es obligatoria.');
      }

      e.preventDefault();
    }
  }
})

Bastante corto y simple. Definimos un arreglo que contendrá los errores e
inicializamos los valores de los tres campos en null. La lógica del método
checkFrom (recordando que corre al enviar el formulario) valida solamente el
nombre y la edad, ya que la película es opcional. En caso que esten vacíos,
chequeamos cada uno y definimos un error específico (para cada uno de ellos). Y
es sólo eso. Puede probar el ejemplo abajo. No olvide que si los campos son
válidos, usted será redirigido a una URL temporal vacía.

Fuente
======

https://es.vuejs.org/v2/cookbook/form-validation.html#Ejemplo-Base

===================================
Almacenamiento del lado del cliente
===================================

El almacenamiento de datos de lado del cliente es una excelente forma de mejorar
el rendimiento de una aplicación. Al almacenar los datos directamente en el
navegador se evita tener que solicitar datos desde el servidor cada vez que el
usuario lo necesita. Es especialmente útil para soportar navegación fuera de
línea, pero también los usuarios que disponen de una conexión activa se pueden
ver beneficiados por el almacenamiento local. El almacenamiento del lado del
cliente se puede lograr de múltiples formas, por ejemplo cookies, Local Storage
(técnicamente “Web Storage”), IndexedDB y WebSQL (un método discontinuado que no
debería usarse en proyectos nuevos).

El enfoque de esta “receta” es particularmente en Local Storage, el cual es el
método más simple de almacenamiento. Local Storage usa un sistema de clave/valor
para almacenar datos. Está limitado a solo almacenar datos simples, pero se
puede lograr almacenar datos complejos si se desea implementar una forma de
codificación y decodificación de objetos JSON. En general Local Storage es
apropiado para almacenar pequeñas cantidades de datos, por ejemplo preferencias
del usuario. En caso de necesitar almacenar datos de mayor volumen y más
complejos se recomienda otras soluciones como IndexedDB.

Comencemos con un ejemplo basado en un formulario simple:

<div id="app">
  Mi nombre es <input v-model="name">
</div>

Este ejemplo tiene un campo en un formulario ligado a Vue a través del valor
name. A continuación se puede ver el JavaScript:

const app = new Vue({
  el: '#app',
  data: {
    name: ''
  },
  mounted() {
    if (localStorage.name) {
      this.name = localStorage.name;
    }
  },
  watch: {
    name(newName) {
      localStorage.name = newName;
    }
  }
});

Si se enfoca en la parte del mounted y el watch se puede ver que en este caso se
utiliza mounted para cargar el dato almacenado en localStorage. Luego se observa
el valor de name y automáticamente cuando ocurren cambios estos se almacenan en
la base datos.

Ejemplo completo:

<!--
Ejemplo de Almacenamiento del lado del cliente
con localStorage.

Escriba algo en el formulario y luego recargue la página.
Usted notará que el valor escrito anteriormente será mostrado
automáticamente. No se olvide que el navegador provee
las herramientas para desarrolladores, donde hay que pinchar
en la almacenamiento almacenamiento y luego en almacenamiento
local.
-->
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>localStorage</title>
  <link rel="stylesheet" href="../css/bootstrap.min.css">
  <script src="https://unpkg.com/vue@2"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.21.1/axios.min.js"></script>
</head>
<body>
<div id="main" class="container">
  <div id="app">
    Mi nombre es <input v-model="name">
  </div>
</div>
<script>
const app = new Vue({
  el: '#app',
  data: {
    name: ''
  },
  mounted() {
    if (localStorage.name) {
      this.name = localStorage.name;
    }
  },
  watch: {
    name(newName) {
      localStorage.name = newName;
    }
  }
});
</script>
</body>
</html>

=================================
Eliminar variable de localStorage
=================================

if (localStorage.token) {
  localStorage.removeItem('token')
} else {
  alert('No token exists')
}

=============================
Ejemplo básico de vue-table-2
=============================

<!DOCTYPE html>
<html>
<meta charset="utf-8">
<head>
  <!--script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17-beta.0/vue.js"></script-->
  <script src="https://unpkg.com/vue@2"></script>
  <script src="https://rawgit.com/matfish2/vue-tables-2/master/dist/vue-tables-2.min.js"></script>
  <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
</head>
<body>
<div style="padding: 20px;">
  <h3 class="vue-title">Vue tables 2</h3>
  <div id="app">
  <v-client-table :columns="columns" :data="data" :options="options"></v-client-table>
  </div>
</div>
<script type="text/javascript">
Vue.use(VueTables.ClientTable);
new Vue({
  el: "#app",
  data: {
    columns: [
      'id',
      'name',
      'email'
    ],
    data: getData(),
    options: {
      headings: {
        id: 'id',
        name: 'name',
        email: 'email'
      },
      sortable: [
        'id', 'name'
      ],
      texts: {
        filterPlaceholder: 'filter...'
      }
    }
  }
});
function getData() {
  return [
    {
      'id': 1,
      'name': 'sample1',
      'email': 'sample1@example.com',
      'group_name': 'Personnel Department'
    },
    {
      'id': 2,
      'name': 'sample2',
      'email': 'sample2@example.com',
      'group_name': 'Personnel Department'
    },

    {
      'id': 3,
      'name': 'sample3',
      'email': 'sample3@example.com',
      'group_name': 'Accounting department'
    },
    {
      'id': 4,
      'name': 'sample4',
      'email': 'sample4@example.com',
      'group_name': 'General Affairs Department'
    }
  ];
}
</script>
</body>
</html>

=====
Axios
=====

Axios es un cliente HTTP basado en promesas para node.js y el navegador. Puede
ejecutarse en el navegador y en nodejs con la misma base de código.  En el lado
del servidor, utiliza el módulo http nativo node.js, mientras que en el cliente
(navegador) utiliza XMLHttpRequests.

Instalación
===========

Para incluír e instalar Axios en nuestro proyecto ejecutamos:

$ npm install axios

Si no se está usando npm puedes incluirlo directamente desde el CDN agregando la
siguiente etiqueta a tu HTML:

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

Importar Axios en un proyecto
=============================

Luego de instalar Axios con npm en nuestro proyecto debemos importarlo de la
siquiente manera, probado en componente de Vue.js:

import axios from 'axios';

export default {
    // ...
}

Si estás incluyendo Axios desde el CDN, ya sea que estés utilizando Vue.js o no,
no necesitas utilizar el import.

========================================
Cambiar el title de un componente de Vue
========================================

1) Instalar el paquete vue-meta.

$ npm install vue-meta

2) importar e instanciar el paquete instalado.

// main.js

import Vue from "vue";
import App from "./App.vue";
import VueMeta from 'vue-meta';

Vue.use(VueMeta);
new Vue({
  render: h => h(App)
}).$mount("#app");

-----

3) Agregar la propiedad document.title en el método created del componente.

About.vue

<template>
  <div id="app">
    <h1>This About Us Page</h1>
  </div>
</template>

<script>
  export default {
    name: 'About',
    created () {
      document.title = "About Us"
    }
  }
</script>

Listo, se debería ver el nuevo title del componente en la pestañá del navegador.

Fuente
======

https://reactgo.com/vue-set-title/

==========
Vue router
==========

Vue, como muchos otros frameworks para el desarrollo web (Angular, React)
también tiene un sistema para crear rutas.

Vue permite crear páginas web SPA, es decir, el usuario tiene la sensación de
que está navegando entre las páginas pero lo que de verdad ocurre es que Vue por
debajo está cambiando el HTML al vuelo sin tener que recargar la página.

Por ejemplo, si estás en la página principal de una aplicación SPA y navegas a
la URL /users, Vue lo que hace es renderizar el componente asociado a esa ruta
en la página web. Como ese componente ya lo tiene cargado el cambio entre
páginas es inmediato.

Para conseguir esto, el creador del Vue router ha desarrollado un conjunto de
utilidades para crear rutas en Vue. En un fichero configuras las rutas que
quieres crear y las asocias a componentes que se cargarán cuando el usuario
navegue a la ruta.

Crear proyecto con Vue CLI + vue-router
=======================================

Chequear la versión de Vue CLI instalada:

$ vue --version

Si no está instalada, chequear la guía de Vuejs, si está instalada, prosiga.

$ vue create my-app

Le pedirá que seleccione un entorno preestablecido, seleccionar el manual, luego
le pedirá que seleccione las características necesarias para su proyecto, debe
escoger las siguientes con espacio y luego enter en la primera:

* Choose Vue version
* Babel
TypeScript
Progressive Web App (PWA) Support
* Router
Vuex
* CSS Pre-processors
* Linter / Formatter
Unit Testing
E2E Testing

Le seguirá pidiendo otras características pero ya ligadas a las selecciones
principales.

Una vez finalizado el proceso, navegue hasta el directorio creado

$ cd my-app

Correr la aplicación desde un servidor de desarrollo de node

$ npm run serve

La app correra desde http://localhost:8080/

Si quieres añadir más rutas lo que tienes que hacer simplemente es añadir más
objetos al array de rutas del archivo src/router/index.js que se acaba de crear:

-----

import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '../views/Home.vue'
import Home from '../views/Login.vue'

Vue.use(VueRouter)

const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home
  },
  {
    path: '/login',
    name: 'Login',
    component: Login
  }
]

const router = new VueRouter({
  routes
})

export default router

Fuente
======

https://codingpotions.com/vue-router

Crear proyecto con Vue CLI + vue-router + Vuetify
=================================================

Chequear la versión de Vue CLI instalada:

$ vue --version

Si no está instalada, chequear la guía de Vuejs, si está instalada, prosiga.

$ vue create my-app

Le pedirá que seleccione un entorno preestablecido, seleccionar el manual, luego
le pedirá que seleccione las características necesarias para su proyecto, debe
escoger las siguientes con espacio y luego enter en la primera:

* Choose Vue version
* Babel
TypeScript
Progressive Web App (PWA) Support
* Router
Vuex
* CSS Pre-processors
* Linter / Formatter
Unit Testing
E2E Testing

Le seguirá pidiendo otras características pero ya ligadas a las selecciones
principales.

Una vez finalizado el proceso, navegue hasta el directorio creado

$ cd my-app

Ahora que tiene un proyecto instanciado, puede agregar el paquete Vuetify:

$ vue add vuetify

Correr la aplicación desde un servidor de desarrollo de node

$ npm run serve

La app correra desde http://localhost:8080/

====================================
Uso de un spinner de carga o loading
====================================

Usaremos el paquete vue-loading-overlay para usarlo con Vue 2.

1- Instalar el paquete:

$ npm install vue-loading-overlay@^3.0

Ejemplo de uso:

<template>
    <div class="vld-parent">
        <loading v-model:active="isLoading"
                 :can-cancel="true"
                 :on-cancel="onCancel"
                 :is-full-page="fullPage"/>

        <label><input type="checkbox" v-model="fullPage">Full page?</label>
        <button @click.prevent="doAjax">fetch Data</button>
    </div>
</template>

<script>
    import Loading from 'vue-loading-overlay';
    import 'vue-loading-overlay/dist/vue-loading.css';

    export default {
        data() {
            return {
                isLoading: false,
                fullPage: true
            }
        },
        components: {
            Loading
        },
        methods: {
            doAjax() {
                this.isLoading = true;
                // simulate AJAX
                setTimeout(() => {
                    this.isLoading = false
                }, 5000)
            },
            onCancel() {
                console.log('User cancelled the loader.')
            }
        }
    }
</script>

Ejemplo real
============

<template>
    <div>
        <loading
            :active='isLoading'
            :is-full-page="fullPage"
            :loader='loader'
        />
        <div>
            <h1>Project form</h1>
            <label>Name</label>
            <input id="name" v-model="name" type="text">
            <br>
            <label>Introduction</label>
            <input id="introduction" v-model="introduction" type="text">
            <br>
            <button type="reset"  @click="reset()">RESET</button>
            <button type="button" @click="saveRecord()">SAVE</button>
        </div>
        <hr>
        <h1>List of projects</h1>
        <table border="1px">
            <thead>
                <tr>
                    <th scope="col">ID</th>
                    <th scope="col">Name</th>
                    <th scope="col">Introduction</th>
                    <th scope="col">Actions</th>
                </tr>
            </thead>
            <tbody>
                <tr v-for="project in projects">
                    <td v-text="project.id"></td>
                    <td v-text="project.name"></td>
                    <td v-text="project.introduction"></td>
                    <td>
                        <button type="button" @click="loadDataField(project)">UPDATE</button>
                        <button type="button" @click="deleteRecord(project)">DELETE</button>
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
</template>

<script>
import axios from 'axios';
import Loading from 'vue-loading-overlay';
import 'vue-loading-overlay/dist/vue-loading.css';
export default {
    data () {
        return {
            id:"",
            name:"",
            introduction:"",
            projects: [],
            isLoading: true,
            fullPage: true,
            loader: 'spinner' // bars, dots
        }
    },
    components: {
        Loading
    },
    mounted () {
        /*
        * Request that gets the saved data.
        */
        axios.get('http://127.0.0.1:8000/projects-vue-list')
        .then((response) => {
            this.projects = response.data.projects
            // this.isLoading = false;
            // Method that extends the spinner to visualize it more
            setTimeout(() => {
                this.isLoading = false
            }, 3000);
        })
        .catch((error) => {
            console.log('error')
        })
    },
    methods: {
        /*
        * Method to clean the form.
        */
        reset() {
            const vm = this;
            vm.name = "";
            vm.introduction = "";
            vm.id = "";
        },
        /*
        * Method for saving new data and updating one record saved.
        */
        async saveRecord() {
            const vm = this;
            const projectId = (typeof(vm.id)!=="undefined" && vm.id) ? vm.id : '';
            await axios({
                method: (projectId) ? 'put' : 'post',
                url: `http://127.0.0.1:8000/projects/${projectId}`,
                data: {
                    name: vm.name,
                    introduction: vm.introduction
                }
            })
            .then(response => {
                location.href = '/projects'
            })
            .catch(function (error) {
                console.log(error);
            });
        },
        /*
        * Method that allows you to delete a record.
        */
        deleteRecord (data) {
            let project_id = data.id
            if (confirm('Are you sure you want to delete the record?')) {
                axios.delete('http://127.0.0.1:8000/projects/'+project_id
                ).then(function (response) {
                    // console.log('done')
                    location.href = '/projects'
                })
                .catch(function (error) {
                    console.log(error);
                });
            }
        },
        /*
        * Function that loads data into form fields.
        */
        loadDataField (data) {
            let vm = this;
            axios.get('http://127.0.0.1:8000/projects/'+data.id
            )
            .then(function (response) {
                vm.name = data.name;
                vm.introduction = data.introduction;
                vm.id = data.id;
            })
            .catch(function (error) {
                console.log(error);
            });
        },
    }
}
</script>

Ejemplo completo Laravel+Vue
============================

https://github.com/argenisosorio/laravel-8-vue-crud/tree/loading-overlay-example

Ejemplo de uso en Laravel + vue3
================================

1- Instalar el paquete, está probado con la versión 6 del paquete:

$ npm install vue-loading-overlay

Luego:

<script setup>
import NavBar from '@/Layouts/NavBar.vue';
import { Head, Link } from '@inertiajs/vue3';
import { onMounted, onBeforeMount, ref } from 'vue';
import Loading from 'vue-loading-overlay';
import 'vue-loading-overlay/dist/css/index.css';

const isLoading = ref(false);
const fullPage = ref(true);
const imagePath = '/images/1.jpg';
const LogoQuimiecologi01 = '/images/Logo-Quimiecologi-01.png';

onBeforeMount(async () => {
    // Iniciar spinner de carga.
    isLoading.value = true;
});

onMounted(async () => {
    // Finalizar spinner de carga.
    isLoading.value = false;
});
</script>

<template>
    <Head title="Inicio" />

    <loading
        :active="isLoading"
        :is-full-page="fullPage"
    ></loading>
</template>

Fuente
======

https://www.npmjs.com/package/vue3-loading-overlay

===============================================
Establecer una variable global con archivo .env
===============================================

1- Crear un archivo .env en la raíz del proyecto

2- El contenido del archivo puede ser:

VUE_APP_API_URL=http://127.0.0.1:8000

Donde VUE_APP_API_URL hace referencia a un backend endpoid por ejemplo,
guardamos el archivo.

3- Ahora ya podemos referencia esa variable desde cualquier lugar de la app, por
ejemplo:

console.log(process.env.VUE_APP_API_URL)

=======================================================
Cómo agregar fuentes fonts locales a una aplicación Vue
=======================================================

1- Cree una nueva carpeta llamada fonts dentro de la carpeta src o assets.

2- Descarga tus fuentes favoritas y colócalas dentro de la carpeta de fonts,
por ejemplo: MuseoSansRounded900.otf

3- Abra su archivo App.vue e incluya la fuente haciendo referencia a la ruta:

<style>
  @font-face {
    font-family: "MuseoSansRounded";
    src: local("MuseoSansRounded"), url(assets/fonts/MuseoSansRounded900.otf) format("truetype");
  }
</style>

4- Ahora, podemos usar esta fuente en toda nuestra aplicación de esta manera.

App.vue o donde se necesite

<style>
  * {
    font-family: "Merienda";
    font-size: 20px;
  }
</>

Agregar fuentes de Google
=========================

App.vue

<style>
  @import url('https://fonts.googleapis.com/css2?family=Merienda&display=swap');
</style>

Fuente
======

https://reactgo.com/add-fonts-vue-app/

==================================================================
Capturar los errores de laravel y mostrarlos en el template de vue
==================================================================

En este completo de componente, al darle click al guardar el formulario con los
campos vacíos, laravel decuelve:

{"message":"The given data was invalid.","errors":{"name":["The name field is
required."],"introduction":["The introduction field is required."]}}

Capturamos el error con:

.catch(function (error) {
    // pass the errors to the template
    vm.errors = error.response.data.errors
});

y le pasamos la respuesta a la variable errors creada en data.

errors: [],

Los errores los mostramos en el template con:

<div v-if="errors">
  <div v-for="(x, key) in errors" :key="key">
      <p v-for="error in x" :key="error" class="text-sm">
      {{ error }}
      </p>
  </div>
</div>

<template>
    <div>
        <div v-if="errors">
            <div v-for="(x, key) in errors" :key="key">
                <p v-for="error in x" :key="error" class="text-sm">
                {{ error }}
                </p>
            </div>
        </div>
        <div>
            <h1>Project form</h1>
            <label>Name</label>
            <input id="name" v-model="name" type="text">
            <br>
            <label>Introduction</label>
            <input id="introduction" v-model="introduction" type="text">
            <br>
            <button type="reset"  @click="reset()">RESET</button>
            <button type="button" @click="saveRecord()">SAVE</button>
        </div>
        <hr>
        <h1>List of projects</h1>
        <table border="1px">
            <thead>
                <tr>
                    <th scope="col">ID</th>
                    <th scope="col">Name</th>
                    <th scope="col">Introduction</th>
                    <th scope="col">Actions</th>
                </tr>
            </thead>
            <tbody>
                <tr v-for="project in projects">
                    <td v-text="project.id"></td>
                    <td v-text="project.name"></td>
                    <td v-text="project.introduction"></td>
                    <td>
                        <button type="button" @click="loadDataField(project)">UPDATE</button>
                        <button type="button" @click="deleteRecord(project)">DELETE</button>
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
</template>

<script>
import axios from 'axios';
export default {
    data () {
        return {
            id:"",
            name:"",
            introduction:"",
            projects: [],
            errors: [],
        }
    },
    mounted () {
        /*
        * Request that gets the saved data.
        */
        axios.get('http://127.0.0.1:8000/projects-vue-list')
        .then((response) => {
            this.projects = response.data.projects
        })
        .catch((error) => {
            console.log('error')
        })
    },
    methods: {
        /*
        * Method to clean the form.
        */
        reset() {
            const vm = this;
            vm.name = "";
            vm.introduction = "";
            vm.id = "";
        },
        /*
        * Method for saving new data and updating one record saved.
        */
        async saveRecord() {
            const vm = this;
            const projectId = (typeof(vm.id)!=="undefined" && vm.id) ? vm.id : '';
            await axios({
                method: (projectId) ? 'put' : 'post',
                url: `http://127.0.0.1:8000/projects/${projectId}`,
                data: {
                    name: vm.name,
                    introduction: vm.introduction
                }
            })
            .then(response => {
                location.href = '/projects'
            })
            .catch(function (error) {
                // pass the errors to the template
                vm.errors = error.response.data.errors
            });
        },
        /*
        * Method that allows you to delete a record.
        */
        deleteRecord (data) {
            let project_id = data.id
            if (confirm('Are you sure you want to delete the record?')) {
                axios.delete('http://127.0.0.1:8000/projects/'+project_id
                ).then(function (response) {
                    // console.log('done')
                    location.href = '/projects'
                })
                .catch(function (error) {
                    console.log(error);
                });
            }
        },
        /*
        * Function that loads data into form fields.
        */
        loadDataField (data) {
            let vm = this;
            axios.get('http://127.0.0.1:8000/projects/'+data.id
            )
            .then(function (response) {
                vm.name = data.name;
                vm.introduction = data.introduction;
                vm.id = data.id;
            })
            .catch(function (error) {
                console.log(error);
            });
        },
    }
}
</script>

=================================================
Filtrar registros de un v-for con un campo buscar
=================================================

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Ajax</title>
  <script src="https://unpkg.com/vue@2"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.21.1/axios.min.js"></script>
</head>
<body>
<div id="main">
  <input v-model="searchQuery" />
  <div class="row top20">
    <div class="col-md-3" v-for="preset in filterItems(presets)" :key="preset.presetName">
      <div class="template-block" :id="preset.id">
        <h3>{{ preset.presetName }}</h3>
      </div>
    </div>
  </div>
</div>
<script>
  var app = new Vue({
    el: '#main',
    data: {
      searchQuery: '',
      presets: [{
        id: '2',
        presetName: 'WooCommerce',
        img: 'woocommerce.png'
      }, {
        id: '3',
        presetName: 'Magento',
        img: 'magento.png'
      }, {
        id: '1',
        presetName: 'Custom',
        img: 'custom.png'
      }]
    },
    created: function(){
      this.consultarUsuarios();
    },
    methods: {
      filterItems: function(presets) {
        var app = this;
        return presets.filter(function(preset) {
          let regex = new RegExp('(' + app.searchQuery + ')', 'i');
          return preset.presetName.match(regex);
        })
      }
    }
  })
</script>
</body>
</html>

=====================================
Llamar 2 o más funciones con un click
=====================================

Agregar punto y coma; al final de las llamadas de función para que ambos
funcionen.

<input id="btn" type="button" value="click" onclick="pay(); cls();"/>

===========================================================
Acceder a los datos de un v-table o v-client-table con slot
===========================================================

<v-client-table :columns="columns" :data="records" :options="table_options">
    <div slot="role" slot-scope="props">
        {{ showRole(props.row.role) }}
    </div>
    <div slot="created_at" slot-scope="props">
        {{ convertDate(props.row.created_at) }}
    </div>
    <div slot="id" slot-scope="props" class="text-center">
        <button class="btn btn-outline-primary-dark" type="button" title="Ver registro"
            @click="show_info('users', props.row.id)">
            <i class="fa fa-eye"></i>
        </button>
        <button type="button" class="btn btn-outline-primary" title="Editar registro"
            @click="getRecord('users-list', props.row.id)">
            <i class="fa fa-edit"></i>
        </button>
        <button class="btn btn-outline-danger" type="button" title="Eliminar registro"
            @click="deleteRecord(url, props.row.id)">
            <i class="fas fa-trash"></i>
        </button>
    </div>
</v-client-table>

data() {
    return {
        records: [],
        record: {
            name: '',
            surnames: '',
            email: '',
            password: '',
            role: '',
        },
        columns: ['name', 'email', 'role', 'created_at', 'id'],
    }
},

===============================================
Desplácese hasta la parte superior de la página
===============================================

/**
  * Método que lleva la pantalla al formulario
  */
scrollToTop() {
  window.scrollTo(0,0);
},

====================================================
Desplácese hasta una sección específica de la página
====================================================

Template:

<div ref="porto"></div>

<a class="porto-button" @click="scrollMeTo('porto')">Porto, Portugal</a>

Script:

methods: {
  scrollMeTo(refName) {
    var element = this.$refs[refName];
    var top = element.offsetTop;
    window.scrollTo(0, top);
  }
}

=================================================
Si el sistema redirecciona la url a popper.js.map
=================================================

ir a webpack.mix.js y agragrar .sourceMaps() tal que:

mix.js('resources/js/app.js', 'public/js')
    .sourceMaps()
    .vue()
    .sass('resources/sass/app.scss', 'public/css');

=============================
Operador ternario en template
=============================

<h1>{{ someProp ? 'Hello' : 'Bye' }}</h1>

=======
@change
=======

Asignas a tu select que ejecute una funcion cuando ocurra el evento onChange, y
luego habilitas o deshabilitas una propiedad de tu data para que apague o prenda
el textbox

<select id="pais" class="form-control" @change="onChange()" required>

Y tu textbox deberia tener

<input type="text" name="ciudad" id="ciudad" :disabled="habilitado == 1" class="form-control">

Y en tu control deberías tener:

data: {
  habilitado : 0
},
methods: {
  onChange() {
    if (lo que necesites) {
        this.habilitado = 1
    } else {
        this.habilitado = 0
    }
  }
}

====
Vuex
====

Es un patrón de gestión de estado + biblioteca para aplicaciones Vue.js. Sirve
como un almacén centralizado para todos los componentes de una aplicación, con
reglas que garantizan que el estado solo se puede modificar de forma predecible.

======================
v-for otions en select
======================

<select2
  v-model="record.position_reference_column"
>
  <option v-for="(value, key) in lines" :value="key">
      {{ value.text }}
  </option>
</select2>


========================
Remplazar coma por punto
========================

<p>{{ quantity | formatQuantity }}</p>

new Vue({
    el: '#app',

    data: {
        quantity: 0.25,
    },

    filters: {
        // you can call this whatever you want to
        formatQuantity (value) {
            return value.replace('.', ',');
        }
    }
});

Fuente
======

https://laracasts.com/discuss/channels/vue/how-to-replace-a-dot-with-a-comma-for-a-number-in-vuejs


================================
Eliminar elementos de un arreglo
================================

Template:

<div class="list-group-item" v-for="event in events">
  <h4 class="list-group-item-heading">
  {{ event.name }}
  </h4>
  <h5>
  {{ event.date }}
  </h5>
  <p class="list-group-item-text" v-if="event.description">{{ event.description }}</p>
  <button class="btn btn-xs btn-danger" @click="deleteEvent(event)">Delete</button>
</div>

Script:

deleteEvent: function(event) {
  this.events.splice(this.events.indexOf(event), 1);
}

==========================
Preview the selected image
==========================

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Preview the selected image</title>
  <script src="https://unpkg.com/vue@2"></script>
</head>
<body>
  <main id="app">
    <div style="border-style:solid">
      <input type="file" ref="file" @change="readFile()" />
      <div v-if="image">
        <img :src="preview" />
      </div>
    </div>
  </main>
<script>
  var example = new Vue({
    el: '#app',
    data: {
      file: null,
      image: false,
      preview: null
    },
    methods: {
      readFile: function() {
        this.file = this.$refs.file.files[0];
        if (this.file.name.includes(".png") || this.file.name.includes(".jpg")) {
          this.image = true;
          this.preview = URL.createObjectURL(this.file);
        }
        else {
          this.image = false;
        }
      }
    }
  })
</script>
</body>
</html>

=========================
Preview selected txt file
=========================

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Preview selected txt file</title>
  <script src="https://unpkg.com/vue@2"></script>
</head>
<body>
  <main id="app">
    <div style="border-style:solid">
      <input type="file" ref="doc" @change="readFile()" />
        <div>{{content}}</div>
      </div>
  </main>
<script>
  var example = new Vue({
    el: '#app',
    data: {
      file: null,
      content: null
    },
    methods: {
      readFile: function() {
        this.file = this.$refs.doc.files[0];
        const reader = new FileReader();
        if (this.file.name.includes(".txt")) {
          reader.onload = (res) => {
            this.content = res.target.result;
          };
          reader.onerror = (err) => console.log(err);
          reader.readAsText(this.file);
        }
        else {
          this.content = "File not is .txt, check the console for file output";
          reader.onload = (res) => {
            console.log(res.target.result);
          };
          reader.onerror = (err) => console.log(err);
          reader.readAsText(this.file);
        }
      }
    }
  })
</script>
</body>
</html>

==========================================================
Configuración de .htaccess de Apache para Vue y vue-router
==========================================================

<IfModule mod_rewrite.c>
  RewriteEngine On
  RewriteBase /
  RewriteRule ^index\.html$ - [L]
  RewriteCond %{REQUEST_FILENAME} !-f
  RewriteCond %{REQUEST_FILENAME} !-d
  RewriteRule . /index.html [L]
</IfModule>

============================
Recargar página con un click
============================

<template>
  <button @click="reloadPage">Reload</button>
</template>

<script>
export default {
  ...
  methods: {
    reloadPage() {
      window.location.reload();
    }
  }
}
</script>

=================================================
Importar una función desde otro archivo js en Vue
=================================================

1- Creamos el nuevo archivo js, por ejemplo test.js

2- Dentro del archivo creado agergamos y guardamos:

var test = {
  foo () {
    console.log('foo');
  },
}

export default test

2- En nuestro componente importamos el archivo, le pasamos la ruta relativa
donde esté, tal que:

import test from '../../test'

3- Llamamos nuestro método, invocando primero el nombre que declaramos en la
importación del archivo, tal que:

test.foo();

4- Esto nos debe imprimir en la consola de js lo siguiente:

foo

==========================================================
Llamar 2 funciones, 2 métodos o más funciones con un click
==========================================================

Agregar punto y coma; al final de las llamadas de función para que ambos
funcionen.

<input id="btn" type="button" value="click" onclick="pay(); cls();"/>

=======================================================
Validación, limitar el número de caracteres en un campo
=======================================================

<input v-model="amount"
  oninput="javascript: if (this.value.length > this.maxLength) this.value = this.value.slice(0, this.maxLength);"
  type = "number"
  maxlength = "10"
/>

===================================
Validación solo números en un campo
===================================

<input
  type="number"
  oninput="this.value=this.value.replace(/[^0-9]/g,'');"
  v-model="record.dni"
/>

====================================================
Validación de solo letras en un campo y sin espacios
====================================================

<input
  type="text"
  oninput="this.value = this.value.replace(/[^a-zA-Z]/g, '');"
  v-model="record.xxx"
/>

=====================================
Validación de solo letras en un campo
=====================================

<input
  type="text"
  oninput="this.value = this.value.replace(/[^a-zA-Z\s]/g, '');"
  v-model="record.xx"
/>

===========================================================================
Validación de solo letras, no números, permite acentos y espacios en blanco
===========================================================================

<input
  type="text"
  oninput="this.value = this.value.replace(/[^a-zA-ZáéíóúÁÉÍÓÚüÜ\s]/g, '');"
  v-model="record.xxx"
/>

===============================================
Enlace para volver atrás back en una spa de vue
===============================================

Usamos el objeto global window.history para navegar hacia atrás en la historia
del navegador. Puedes hacer esto mediante JavaScript. Aquí hay un ejemplo de
cómo podrías implementarlo:

<a
  href="#"
  @click.prevent="goBack"
>
  Atrás
</a>

<script>
export default {
  methods: {
    goBack() {
      window.history.back();
    }
  }
}
</script>

Fuente
======

ChatGPT

==============================================================
Truncar o limitar la cantidad de texto o información a mostrar
==============================================================

Para limitar la cantidad de caracteres que se muestran en Vue, puedes usar un
método para truncar el texto. Puedes crear un método personalizado en tu
componente Vue para lograr esto. Aquí tienes un ejemplo de cómo podrías hacerlo:

methods: {
  truncateText(text, maxLength) {
    if (text.length > maxLength) {
      return text.substring(0, maxLength) + '...';
    } else {
      return text;
    }
  }
}

Y en tu plantilla Vue, puedes llamar a este método para truncar el texto antes
de mostrarlo:

<span v-html="truncateText(service.description, 30)"></span>

De esta manera, el método `truncateText` tomará la descripción del servicio y la
truncará a un máximo de 30 caracteres antes de mostrarla en tu página.

Fuente
======

LuzIA

===============================================================================
La forma correcta de obligar a Vue a volver a renderizar recargar un componente
===============================================================================

#reload

Mejor manera: puedes usar forceUpdate
=====================================

Esta es una de las dos mejores formas de resolver este problema, las cuales
cuentan con el respaldo oficial de Vue.

Normalmente, Vue reaccionará a los cambios en las dependencias actualizando la
vista. Sin embargo, cuando llamas forceUpdate, puede forzar que se realice esa
actualización, incluso si ninguna de las dependencias ha cambiado realmente.

Esto evita todo el sistema de reactividad, por lo que no se recomienda como
solución.

Pero a veces, el sistema de reactividad de Vue puede resultar confuso y pensar
que Vue reaccionará a los cambios en una determinada propiedad o variable, pero
no es así.

Si está utilizando Vue 2, hay ciertos casos en los que El sistema de reactividad
de Vue no detectará ningún cambio . Pero Vue 3 tiene un sistema de reactividad
basado en proxy mucho más robusto que no sufre estos mismos problemas.

Nuevamente, si necesita forzar que su componente se vuelva a renderizar o
recargar, probablemente exista una mejor manera. Probablemente solo estés
tratando el síntoma y no el problema subyacente real.

Así es como puedes llamar forceUpdate usando la API de opciones:

export default {
  methods: {
    methodThatForcesUpdate() {
      // ...
      this.$forceUpdate();  // Notice we have to use a $ here
      // ...
    }
  }
}

Para llamarlo usando la API de composición en Vue 3, tenemos que ser un poco
inteligentes ya que este método solo vive en la instancia del componente:

import { getCurrentInstance } from 'vue';

const methodThatForcesUpdate = () => {
  // ...
  const instance = getCurrentInstance();
  instance.proxy.forceUpdate();
  // ...
};

Importante : Esto no actualizará ninguna propiedad calculada que tenga. Vocación
forceUpdate solo lo hará forzar la vista a volver a renderizarse.

La mejor manera: la técnica del cambio de claves
================================================

Hay muchos casos en los que tendrá una necesidad legítima de forzar la
actualización de un componente.

Para hacer esto de la manera correcta, le proporcionaremos un key atributo para
que Vue sepa que un componente específico está vinculado a un dato específico.
Si la clave permanece igual, no cambiará el componente, pero si la clave cambia,
Vue sabe que debería deshacerse del componente antiguo y crear uno nuevo.

¡Exactamente lo que necesitamos!

Primero, explicaré la técnica de cambio de clave. Luego, me tomaré un momento
para explicar por qué usamos el key atributo en Vue.

Cambio de clave para forzar la actualización de un componente

Finalmente, esta es la mejor manera (en mi opinión) de obligar a Vue a
actualizar un componente.

Agregamos un key atribuir a nuestro componente, y luego cambiar esa clave cada
vez que necesitemos volver a renderizar el componente.

Aquí tienes una forma muy básica de hacerlo con script setup:

<template>
  <MyComponent :key="componentKey" />
</template>

import { ref } from 'vue';
const componentKey = ref(0);

const forceRerender = () => {
  componentKey.value += 1;
};

Así es como lo harías con la API de opciones si no estás usando Vue 3 o la API
de composición:

export default {
  data() {
    return {
      componentKey: 0,
    };
  },
  methods: {
    forceRerender() {
      this.componentKey += 1;
    }
  }
}

Cada vez que forceRerender se llama, el valor de componentKey cambiará. Cuando
esto suceda, Vue sabrá que tiene que destruir el componente y crear uno nuevo.

Lo que obtiene es un componente secundario que se reinicializará y
"restablecerá" su estado, forzando una actualización y una nueva representación
del componente.

¡Una forma sencilla y elegante de resolver nuestro problema!

Escribo sobre esta técnica de cambio de clave en más detalles aquí .

¿Por qué necesitamos usar una clave en Vue?

Podemos profundizar un poco más en lo que esto key El atributo realmente está
funcionando aquí y por qué lo necesitamos.

Digamos que estás renderizando una lista de componentes que tiene uno o más de
los siguientes:

Es su propio estado local.

Algún tipo de proceso de inicialización, ya sea en el setup funcionar con Vue 3
o en el created y mounted ganchos si se utiliza la API de opciones

Manipulación DOM no reactiva, a través de jQuery o API vanilla

Si ordena esa lista o la actualiza de cualquier otra manera, deberá volver a
representar partes de la lista. Pero no querrás volver a renderizar todo en la
lista, solo las cosas que han cambiado.

Para ayudar a Vue a realizar un seguimiento de lo que ha cambiado y lo que no,
proporcionamos un key atributo. Usar el índice de una matriz no es útil aquí, ya
que el índice no está vinculado a objetos específicos en nuestra lista.

Aquí hay una lista de ejemplo que tenemos:

const people = [
  { name: 'Evan', age: 34 },
  { name: 'Sarah', age: 98 },
  { name: 'James', age: 45 },
];

Si lo representamos usando índices obtendremos esto:

<ul>
  <li v-for="(person, index) in people" :key="index">
    {{ person.name }} - {{ index }}
  </li>
</ul>

Evan - 0
Sarah - 1
James - 2

Si eliminamos a Sarah, obtendremos:

Evan - 0
James - 1

El índice asociado con James cambia, aunque James sigue siendo James. James será
re-presentado, incluso si no queremos que lo sea.

Queremos usar algún tipo de identificación única, sin embargo terminamos
generándola:

const people = [
  { id: 'this-is-an-id', name: 'Evan', age: 34 },
  { id: 'unique-id', name: 'Sarah', age: 98 },
  { id: 'another-unique-id', name: 'James', age: 45 },
];

<ul>
  <li v-for="person in people" :key="person.id">
    {{ person.name }} - {{ person.id }}
  </li>
</ul>

Antes, cuando eliminamos a Sarah de nuestra lista, Vue eliminó los componentes
de Sarah y James, y luego creó un nuevo componente para James. Ahora, Vue sabe
que puede conservar los dos componentes de Evan y James, y todo lo que tiene que
hacer es eliminar el de Sarah.

Pero se pone aún mejor.

Si agregamos una persona a la lista, también sabe que puede conservar todos los
componentes existentes, y solo tiene que crear un único componente nuevo e
insertarlo en el lugar correcto. Esto es realmente útil y nos ayuda mucho cuando
tenemos componentes más complejos que tienen su propio estado, tienen lógica de
inicialización o realizan algún tipo de manipulación DOM.

Solo recuerde, si necesita forzar a Vue a volver a renderizar un componente,
probablemente exista una mejor manera.

Si, sin embargo, usted hacer necesita volver a renderizar algo, elija el Técnica
de cambio de clave sobre cualquier otra cosa.

Fuente
======

https://michaelnthiessen.com/force-re-render/