Diferencia entre revisiones de «Usuario:ManuelRomero/Usuario:ManuelRomero/vuejs»

De WikiEducator
Saltar a: navegación, buscar
(→‎Vue.js)
Línea 29: Línea 29:
 
<source lang =javascript>
 
<source lang =javascript>
 
var app= new Vue ({
 
var app= new Vue ({
−
  //*** aquí todo el código de javascript
+
  Options (propiedades y métdos de la clase Vue)
 
  });
 
  });
 
</source>
 
</source>
−
{{Note| ver el api de Vue https://vuejs.org/v2/api/#Server-Side-Rendering}}
+
{{Nota| ver el api de Vue https://vuejs.org/v2/api/#Server-Side-Rendering}}
 +
*Qué elementos puedo tener dentro de la clase de '''''Vue'''''
 +
 
 +
 
  
 
var app= new Vue ({
 
var app= new Vue ({
−
   Data (
+
   Data (data props propsData computed methods watch)
 +
  DOM(el template render renderError )
 +
  Lifecycle Hooks( beforeCreate created beforeMount mounted beforeUpdate updated activated deactivated beforeDestroy destroyed errorCaptured)
 +
  Assets (directives filters components)
 +
  Composition( parent mixins extends provide / inject)
 +
  Misc ( name delimiters functional model inheritAttrs comments)
 
  });
 
  });
 +
 +
 +
 +
===Escribiendo texto===
 +
<br />
 +
{{MRM_Actividad;Title:Vue 1: Estableciendo el ámbito del DOM|
 +
*Para usar Vue hay que especificar el ámbito del DOM en el cual va a ser usado mediante una etiqueta de id
 +
*Esta etiqueta no puede ser del elemento body ni html
 +
<source lang=javascript>
 +
<div id="app">
 +
 +
</div>
 +
 +
<script>
 +
    var app;
 +
    app = new Vue({
 +
        el: '#app'
 +
    });
 +
</source>
 +
}}
 +
{{MRM_Actividad;Title:Vue 2: Escribiendo texto: Vue es interpolado|
 +
*Vue es interpolado y reactivo.
 +
;Interpolado
 +
*Usa un sistema de plantillas sencilla
 +
usa {{ identificador }} para visualizar el valor de una variable o identificador en la página
 +
<source lang=javascript>
 +
<div id="app">
 +
    {{ msg }}
 +
</div>
 +
<script>
 +
    var app;
 +
    app = new Vue({
 +
        el: '#app',
 +
        data: {
 +
            msg: "hola mundo"
 +
        }
 +
    });
 +
</source>
 +
}}
 +
{{MRM_Actividad;Title:Vue 3: Escribiendo texto: Vue es reactivo|
 +
;Reactivo
 +
*Cuando cambie el valor de esa variable se vera reflejado de forma inmediata en el renderizado de la página
 +
prueba a abrir la consola y cambiar '''''app.msg'''''
 +
}}
  
 
===Controlar disabled/enabled de un submit con ckeckboox===
 
===Controlar disabled/enabled de un submit con ckeckboox===

Revisión de 08:52 22 abr 2018

Vue.js

  • Es un framework de javascrip
  • Dicen que es dinámico potente y elegante (Ya veremos ...))


Icon inter.gif
Recursos de la Web



  • Empecemos :
Cargar los fuentes.
  • dos maneras 
<!-- development version, includes helpful console warnings -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  • o: 
<!-- production version, optimized for size and speed -->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
  • Para usar Vue debemos instaciar un objeto de la clase Vue 
var app= new Vue ();

O directamente 

new Vue ();
  • Dentro de la clase irá todo el cogio (rarezas de javascript OO) 
var app= new Vue ({
 Options (propiedades y métdos de la clase Vue)
 });

(Comment.gif: ver el api de Vue https://vuejs.org/v2/api/#Server-Side-Rendering)


  • Qué elementos puedo tener dentro de la clase de Vue


var app= new Vue ({ 

 Data (data props propsData computed methods watch)
 DOM(el template render renderError )
 Lifecycle Hooks( beforeCreate created beforeMount mounted beforeUpdate updated activated deactivated beforeDestroy destroyed errorCaptured)
 Assets (directives filters components)
 Composition( parent mixins extends provide / inject)
 Misc ( name delimiters functional model inheritAttrs comments)
});


Escribiendo texto


Plantilla:MRM Actividad;Title:Vue 1: Estableciendo el ámbito del DOM Plantilla:MRM Actividad;Title:Vue 2: Escribiendo texto: Vue es interpolado Plantilla:MRM Actividad;Title:Vue 3: Escribiendo texto: Vue es reactivo

Controlar disabled/enabled de un submit con ckeckboox

Tengo unos checkbox El submit se habilita o no según tenga alguno selecconado 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src='https://unpkg.com/vue'></script>
</head>
<body>
<div id="app">
    <form action="">
        <!--RECORDAR:
        @click=funcion //funcion que se ejecuta al ocurrir un click en el input
        v-on:click=funcion //Original de @ es una abreviatura
        v-model=variable //Liga de forma reactiva el valor del input con la variable
        -->
        <input type="checkbox" value="a" name="c[]" @click="actualiza" v-model="c">a<br/>
        <input type="checkbox" value="b" name="c[]" @click="actualiza" v-model="c">b<br/>
        <input type="checkbox" value="c" name="c[]" @click="actualiza" v-model="c">c<br/>
        <input type="checkbox" value="d" name="c[]" @click="actualiza" v-model="c">d<br/>
        <input type="checkbox" value="e" name="c[]" @click="actualiza" v-model="c">e<br/>
 
        <!--RECORDAR:
        :atributo=variable //asocia de forma reactiva elvalor de la variable a este atributo
        v-bind:atributo  //Original de :, es una abreviatura
        -->
        <input type="submit" value="enviar" :disabled="deshabilitado">
        <!--Para ver los inputs seleccionados-->
        <h1>{{ c }}</h1>
 
    </form>
</div>
</body>
<script type="text/javascript">
    new Vue({
        el: "#app",
        data: {
            c: [],
            deshabilitado: '',
 
        },
        methods: {
            //No olvidar el this para acceder a las variables de la instancia de Vue
            actualiza: function (event) {
                if (event.target.checked)
                    this.deshabilitado = false;
                else {
                    var n = this.c.length;
                    this.deshabilitado = ((n - 1) > 0) ? false : true;
                }
            }
        }
 
    })
</script>
</html>
Obtenido de «https://es.wikieducator.org/index.php?title=Usuario:ManuelRomero/Usuario:ManuelRomero/vuejs&oldid=23242»