Usuario:ManuelRomero/Laravel/vue/introduccion

De WikiEducator
Saltar a: navegación, buscar


Qué es

  • Es un framework de JavaScript que se puede usar en laravel
  • https://vuejs.org/v2/guide/
  • Se usa en un fichero html añadiendo la libería 
 <script src="https://unpkg.com/vue"></script>
  • Podemos descargar el fichero de aquí 
https://vuejs.org/v2/guide/installation.html

Renderizando

  • Creo el código javascript creando un objeto de la clase Vue con atributos el y data 
   new Vue({
                    el: '#app',
                    data: {
                        mensaje: 'Hello Vue.js!'
                    }
                });

Ahora escribimos nuestro fichero html usando un elemento con ese div

Idioma no válido.

Necesita especificar un idioma como esto: <source lang="html4strict">...</source>

lenguajes soportados para sintaxis remarcada:

 [Expandir] 


<div id="mi_app">
{{ mensaje }}
</div>

Para que funcione queda especificar el evento para que se ejecute el código, quedando el código final

{{Plegable|hide|Código completo| 

<!DOCTYPE html>
<html>
    <head>
        <title>Vue Ej1</title>
        <meta charset="UTF-8">
        <script src="https://unpkg.com/vue/dist/vue.js">
        </script>
    <body>
        <h1>Probando Vue ejemplo 1</h1>
 
        <div id="app" >
            {{ message }}
        </div>
        <script>
            new Vue({
                el: '#app',
                data: {
                    message: 'Hello Vue!'
                }
            })
        </script>
 
    </body>
</html>
  • Ahora el DOM y el contenido del campo data están ligados. Para verificarlo vamos a guardar el objeto Vue en una variable, añadiendo la asignación 
<script>
   var mi_mensaje = new Vue({
   //Escribimos aquí lo mismo que antes
</script>
  • Ahora si abrimos la consola de nuestra aplicación (botón derecho - inspeccionar) y escribmos otro valor para message, vemos como cambia el valor de l a variable

</source>

Obtenido de «https://es.wikieducator.org/index.php?title=Usuario:ManuelRomero/Laravel/vue/introduccion&oldid=21822»