Diferencia entre revisiones de «Usuario:ManuelRomero/Usuario:ManuelRomero/vuejs»
De WikiEducator
(→Vue.js) |
|||
| Línea 2: | Línea 2: | ||
*Es un framework de javascrip | *Es un framework de javascrip | ||
*Dicen que es dinámico potente y elegante (Ya veremos ...)) | *Dicen que es dinámico potente y elegante (Ya veremos ...)) | ||
| − | {{ | + | {{MRM_Recursos de la Web| |
*Página oficial :https://vuejs.org/v2/guide/ | *Página oficial :https://vuejs.org/v2/guide/ | ||
| Línea 32: | Línea 32: | ||
}); | }); | ||
</source> | </source> | ||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
===Controlar disabled/enabled de un submit con ckeckboox=== | ===Controlar disabled/enabled de un submit con ckeckboox=== | ||
Revisión de 10:17 21 abr 2018
Vue.js
- Es un framework de javascrip
- Dicen que es dinámico potente y elegante (Ya veremos ...))
|
- 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 ({ //*** aquí todo el código de javascript });
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>
