Usuario:ManuelRomero/Laravel/vue/introduccion

De WikiEducator
< Usuario:ManuelRomero‎ | Laravel‎ | vue
Revisión a fecha de 10:52 26 mar 2017; ManuelRomero (Discusión | contribuciones)

(dif) ← Revisión anterior | Revisión actual (dif) | Revisión siguiente → (dif)
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:

4cs, 6502acme, 6502kickass, 6502tasm, 68000devpac, abap, actionscript, actionscript3, ada, algol68, apache, applescript, apt_sources, arm, asm, asp, asymptote, autoconf, autohotkey, autoit, avisynth, awk, bascomavr, bash, basic4gl, bf, bibtex, blitzbasic, bnf, boo, c, c_loadrunner, c_mac, caddcl, cadlisp, cfdg, cfm, chaiscript, cil, clojure, cmake, cobol, coffeescript, cpp, cpp-qt, csharp, css, cuesheet, d, dcl, dcpu16, dcs, delphi, diff, div, dos, dot, e, ecmascript, eiffel, email, epc, erlang, euphoria, f1, falcon, fo, fortran, freebasic, freeswitch, fsharp, gambas, gdb, genero, genie, gettext, glsl, gml, gnuplot, go, groovy, gwbasic, haskell, haxe, hicest, hq9plus, html4strict, html5, icon, idl, ini, inno, intercal, io, j, java, java5, javascript, jquery, kixtart, klonec, klonecpp, latex, lb, ldif, lisp, llvm, locobasic, logtalk, lolcode, lotusformulas, lotusscript, lscript, lsl2, lua, m68k, magiksf, make, mapbasic, matlab, mirc, mmix, modula2, modula3, mpasm, mxml, mysql, nagios, netrexx, newlisp, nsis, oberon2, objc, objeck, ocaml, ocaml-brief, octave, oobas, oorexx, oracle11, oracle8, oxygene, oz, parasail, parigp, pascal, pcre, per, perl, perl6, pf, php, php-brief, pic16, pike, pixelbender, pli, plsql, postgresql, povray, powerbuilder, powershell, proftpd, progress, prolog, properties, providex, purebasic, pycon, pys60, python, q, qbasic, rails, rebol, reg, rexx, robots, rpmspec, rsplus, ruby, sas, scala, scheme, scilab, sdlbasic, smalltalk, smarty, spark, sparql, sql, stonescript, systemverilog, tcl, teraterm, text, thinbasic, tsql, typoscript, unicon, upc, urbi, uscript, vala, vb, vbnet, vedit, verilog, vhdl, vim, visualfoxpro, visualprolog, whitespace, whois, winbatch, xbasic, xml, xorg_conf, xpp, yaml, z80, zxbasic


<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»