Usuario:ManuelRomero/Usuario:ManuelRomero/vuejs

Vue.js

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

Recursos de la Web

Página oficial :https://vuejs.org/v2/guide/

• 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 vm= new Vue ();

O directamente

new Vue ();

• Dentro de la clase irá todo el código (rarezas de javascript OO)

var vm= new Vue ({
 Objet de Opciones( propiedades y métdos de la clase Vue: datos, elementos donde montarlos, métodos, plantillas, ..)
 });

(: 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)
});

(: Las propiedades las estableceremos en el elemento data

var app= new Vue ({
  el:'#app',
  data:{
    nombre:
    edad:
    direccion:
  }
});

 Data (data props propsData computed methods watch)
 DOM(el template render renderError )
 Lifecycle Hooks( beforeCreate created beforeMount mounted beforeUpdate updated activated deactivated 

)

Escribiendo texto

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 <div id="app">   </div>   <script> var app; app = new Vue({ el: '#app' }); </script>

Vue 2: Escribiendo texto: Vue es interpolado

Vue es interpolado y reactivo. Interpolado Usa un sistema de plantillas sencilla usa Plantilla:Identificador para visualizar el valor de una variable o identificador en la página Esta sintaxis de dobles llaves se conoce como Mustache <div id="app"> {{ msg }} </div> <script> var app; app = new Vue({ el: '#app', data: { msg: "hola mundo" } });

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

Vue 4: Vue reactivo, no actualiza la etiqueta

<div id="app">   <p v-once> Esto no cambiará {{ msg }} </div> <script> var app; app = new Vue({ el: '#app', data: { msg: "hola mundo" } });

Vue 5: Accediendo a los atributos

En los atributos no podemos especificar variables con la sintaxis Mustache. Esto implica que a un atributo no le podemos dar un valor de un elemento data. El siguiente código no funcionará <div id="app"> <p title={{titulo}}> Esto es un texto</p> </div> new Vue({ el: "#app", data: { titulo:"Esto es el título" } }) En su lugar se usan directivas Una directiva (luego veremos) son atributos especiales propios de vue Para asociar un atributo a un atributo de vue usamos v-bind <div id="app"> <p v-bind:title='titulo'> Esto es un texto</p> </div> Vue tiene un modo corto o abreviado, de modo que en lugar de v-bind, podemos usar : <div id="app"> <p :title='titulo'> Esto es un texto</p> </div>

Vue 6: Expresiones

Dentro de un Mustache o enlace de datos, podemos poner valores de la propiedad data o bien expresiones simples de javascript <div id="app"> <p> {{total}} al cuadrado {{total * total}} </p> </div>   <script> new Vue({ el: "#app", data: { total:5 } }) </script> También expresiones ternarias <div id="app"> <p> {{total%2==0? 'par': 'impar'}} </p> </div> Puntos clave pero solo expresiones no instrucciones Esto no funcionará <div id="app"> <p> {{if (total%2==0) 'par' else 'impar'}} </p> </div>

Directivas

Vue 7: directivas

Las directivas son atributos especiales que empiezan por v- Se les asigna como valor una expresión Su efecto es reactivo sobre el DOM cuando cambia el valor de esa directiva #v-text   #v-html   #v-show   #v-if   #v-else   #v-else-if   #v-for   #v-on   #v-bind   #v-model   #v-pre   #v-cloak   #v-once

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>