Vuejs para programadores jQuery. Clases y estilos VI

Vuejs para programadores jQuery. 

Clases y estilos VI

Gracias a las sugerencias y comentarios realizados en las diferentes redes sociales sobre los artículos anteriores.

En este caso trabajaremos con botones en dos formas diferentes. El primer código permitirá que se escriba un estilo inline y se agregue a un contenido para probar el resultado.


Ponemos los enlaces. Codesandbox: https://codesandbox.io/s/wild-bird-i24fw?file=/Button/Estilos/jQueryButtonStyle.html

GitHub: https://github.com/Gonzalo2310/jQuery-Vuejs/blob/master/Button/Estilos/jQueryButtonStyle.html Empezamos con el código HTML.

<form> <div class="form-group row"> <label for="inputStyle" class="col-sm-6 col-form-label">Agregue estilo</label> <input type="text" class="form-control" id="inputStyle" placeholder="Estilo"> </div> </form> <button type="button" class="btn btn-primary mb-2" id="buttonStyle">Aplicar estilo</button> <blockquote id="bloque"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas et sem varius, pretium diam eget, hendrerit nisl. Pellentesque ac gravida ante. Nullam gravida purus ac arcu laoreet consectetur. Mauris porta felis venenatis magna sollicitudin, vel pellentesque felis rutrum. Vestibulum posuere ornare blandit. Donec at euismod odio. Aenean eleifend faucibus dui, nec pellentesque est rhoncus malesuada. Suspendisse a laoreet libero. Donec ac mauris in lorem congue bibendum. Curabitur vulputate pretium massa, non rhoncus purus imperdiet lacinia. In vitae est finibus, cursus nisi in, facilisis nulla. </blockquote> Creamos aquí 3 cosas: * Un input que permita que escribamos el estilo * Un botón para aplicar el estilo * Un texto para reflejar los cambios de estilos El código js no tiene sorpresas: <script> const bloque = jQuery('#bloque') const inputStyle = jQuery('#inputStyle') jQuery('#buttonStyle').on('click', actualiza) function actualiza() { bloque.attr('style', inputStyle.val()) } </script> Creamos la constante bloque apuntando al contenido de texto, la constante inputStyle apuntando al form input y luego asociamos la función con el evento click del boton. La función aplica el contenido del input en el atributo style del bloque de texto. Veamos esto mismo en Vue.

Codesandbox: https://codesandbox.io/s/wild-bird-i24fw?file=/Button/Estilos/VueJsButtonStyle.html GitHub: https://github.com/Gonzalo2310/jQuery-Vuejs/blob/master/Button/Estilos/VueJsButtonStyle.html Codigo: <form> <div class="form-group row"> <label for="inputStyle" class="col-sm-6 col-form-label">Agregue estilo</label> <input type="text" class="form-control" id="inputStyle" placeholder="Estilo" v-model="inputStyle"> </div> </form> <button type="button" class="btn btn-primary mb-2" @click="runStyle=inputStyle">Aplicar estilo</button> <blockquote :style="runStyle"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas et sem varius, pretium diam eget, hendrerit nisl. Pellentesque ac gravida ante. Nullam gravida purus ac arcu laoreet consectetur. Mauris porta felis venenatis magna sollicitudin, vel pellentesque felis rutrum. Vestibulum posuere ornare blandit. Donec at euismod odio. Aenean eleifend faucibus dui, nec pellentesque est rhoncus malesuada. Suspendisse a laoreet libero. Donec ac mauris in lorem congue bibendum. Curabitur vulputate pretium massa, non rhoncus purus imperdiet lacinia. In vitae est finibus, cursus nisi in, facilisis nulla. </blockquote> Veamos los cambios que hemos hecho: En el input usamos v-model para tenemos el contenido en una variable. En button usamos el evento click para una acción. No necesitamos un método para la accion aqui requerida (una simple asignacion) aunque podria usarse un método perfectamente. @click="runStyle=inputStyle" Cuando suceda el evento click guarda en runStyle el contenido de inputStyle. El último cambio es en el bloque de texto en donde asociamos el resultado de runStyle al style. Vemos otra vez el uso de : con un atributo HTML para indicar a vuejs que debe parsear el valor. ¿Porque usamos dos variable? Esto es porque el style debe actualizarse solo cuando se pulse el botón. Como el v-model actualiza su valor inmediatamente debemos usar una segunda variable que se actualice solo cuando se pulse el botón. El js aplicado no trae sorpresas: <script> new Vue({ el: '#app', data: { inputStyle: '', runStyle: '' } }) </script> Lo único que necesitamos es declarar las variables que vamos a usar Vayamos ahora a un código algo mas completo. Configuraremos un botón con varios radioButtons para estilo y dos checkbox, uno para un estilo y el otro para el estado disable.




Enlace: Codesanbox: https://codesandbox.io/s/wild-bird-i24fw?file=/Button/Clases/jQueryButtonClass.html GitHub: https://github.com/Gonzalo2310/jQuery-Vuejs/blob/master/Button/Clases/jQueryButtonClass.html El codigo es largo en esta ocasión. Vamos por partes: <form> <div class="custom-control custom-checkbox mb-3"> <input type="checkbox" class="custom-control-input" id="customControlValidation10"> <label class="custom-control-label" for="customControlValidation10">Disable</label> </div> <div class="custom-control custom-checkbox mb-3"> <input type="checkbox" class="custom-control-input" id="customControlValidation11"> <label class="custom-control-label" for="customControlValidation11">Outline</label> </div> </form> Creamos dos checkbox de la forma tradicional. A continuación ponemos uno de los checkbox pero se repite 6 veces mas variando el id: <div class="custom-control custom-radio mb-3"> <input type="radio" class="custom-control-input" value="primary" id="customControlValidation2" name="buttonStyle" checked> <label class="custom-control-label" for="customControlValidation2">Primary</label> </div>

La clave está en los valores value, ya que cada uno de ellos tendrá el nombre de las diferentes variantes de los botones de Bootstrap. Si no conoce ese estilo de los botones de Bootstrap revise el siguiente link: https://getbootstrap.com/docs/4.5/components/buttons/ Lo único a recordar es que los RadioButtons deben tener el mismo name para que solo se pueda elegir uno de ellos. Finalmente agregamos: <div> <button id="buttonDestiny" type="button">Ver código generado</button> </div> <div class="code" id="code"> </div> Un botón donde veremos los cambios y un espacio para mostrar el código generado (en caso que se pulse el botón) y si queremos ocultar el código nuevamente simplemente volvemos a pulsar el botón. Todo reside en el código js así que vayamos a ello: Esta vez iremos por partes: const radioButton = jQuery('input:radio[name=buttonStyle]') const checkDisable = jQuery('#customControlValidation10') const checkOutline = jQuery('#customControlValidation11') const buttonDestiny = jQuery('#buttonDestiny') let status = 0 La primer constante apunta a TODOS los radioButtons (los indentifica por el mismo name) La segunda y la tercer constante apuntan a los checkbox. Uno controlara el estilo disable y el otro el estilo outline.


La última constante apunta al botón y al final creamos una variable con un valor inicial 0. Esta variable controlará el estado del botón. Si se ha pulsado por primera vez (status === 0) se mostrara el código debajo del botón y el status pasara a 1. Si por el contrario se está mostrando el código (status === 1) el código se ocultara y el status pasara a 0. Eso se resuelve en la siguiente función: function buttonCode() { if (!status) { status = 1 showCode() } else { status = 0 vaciaCode() } } Cuando status tiene 0 es para el if (en JS) un valor FALSE, invertimos el resultado en el if con !. Actualizamos la variable y mostramos / ocultamos el código según la lógica explicada antes. Las funciones usadas ahí son: function vaciaCode() { jQuery('#code').empty() } function showCode() { jQuery('#code').empty().append('<blockoute>&lt;button class=\'btn ' + createClass() + '\'&gt;&lt;/button&gt;</blockoute>') } Las funciones son sencillas y podrían ser sustituidas por el código en lugar de invocar la función pero como lo usaremos en varios sitios del código es mejor tenerlo en una función para no repetir ese código continuamente. vaciaCode es sencillo. Vacía el div con el id code que está bajo el botón. showCode vacía el contenido y agrega un bloque de texto con el contenido del código. Para que HTML no interprete el botón como un botón real se codifican los símbolos de < (&lt;) y de >(&gt;) y se evita el conflicto de las comillas usando el \' que indica que es una comilla para imprimir y no el final de la cadena. Sobre símbolos ascii en HTML: https://ascii.cl/es/codigos-html.htm Para el uso de caracteres especiales en cadenas de texto mirar: https://developer.mozilla.org/es/docs/Web/JavaScript/Referencia/template_strings La funcion createClass() construye la clase usando los últimos valores elegidos function createClass() { let btn = jQuery('input:radio[name=buttonStyle]:checked').val() if (checkOutline.prop('checked')) { btn = 'outline-' + btn } return 'btn-' + btn

} Se recoge el value del radioButton elegido, se verifica si el checkbox de outline esta checkeado (de ser así se agrega el estilo) y se devuelve las clases en un string. Lo primero es recoger los valores Sigamos: buttonDestiny.on('click', buttonCode) radioButton.on('input', actualiza) // cuando cambien los radiobutton se actualizara el botón checkOutline.on('input', actualiza) // cuando cambie el checkbox de outline se actualizara el botón checkDisable.on('input', actualiza) // cuando se cambie el checkbox del disable se actualizara el botón

actualiza() Asociamos los checkBox y los radioButtons a la función actualiza, el botón de click a la función mostrada antes y lanzamos actualiza por primera vez. Veamos esa función:

function actualiza() { buttonDestiny.removeClass().addClass('btn ' + createClass()) buttonDestiny.attr('disabled', checkDisable.prop('checked')) if (status) { showCode() } else { vaciaCode() } } Lo primero es remover todas las clases existentes para evitar sobrescritura. Lo siguiente es agregar las clases según los últimos valores elegidos (a través de la función createClass()) En la siguiente linea asociamos el estado checked del checkbox al atributo disable del boton: checkDisable.prop('checked') Devolvera true o false si segun este chequeado o no y en: buttonDestiny.attr('disabled', checkDisable.prop('checked')) asociamos ese resultado al atributo HTML disabled Luego verificamos stauts (Si se esta mostrando el código o no) y actuamos en consecuencia. Ha sido una larga explicación. Espero no haberme saltado nada. Ahora vamos a Vuejs. Enlaces: Codesandbox: https://codesandbox.io/s/wild-bird-i24fw?file=/Button/Clases/VueJsButtonClass.html GitHub: https://github.com/Gonzalo2310/jQuery-Vuejs/blob/master/Button/Clases/VueJsButtonClass.html Codigo: <form> <div class="custom-control custom-checkbox mb-3"> <input type="checkbox" class="custom-control-input" id="customControlValidation10" v-model="checkDisable"> <label class="custom-control-label" for="customControlValidation10">Disable</label> </div> <div class="custom-control custom-checkbox mb-3"> <input type="checkbox" class="custom-control-input" id="customControlValidation11" v-model="checkOutline"> <label class="custom-control-label" for="customControlValidation11">Outline</label> </div> </form> Vemos el cambio esperado. v-model asocia el resultado a una variable. En cuanto a los radioButton pasa lo mismo: <div class="custom-control custom-radio mb-3"> <input type="radio" class="custom-control-input" value="primary" id="customControlValidation2" name="buttonStyle" v-model="checkButton"> <label class="custom-control-label" for="customControlValidation2">Primary</label> </div> Con la diferencia de que usaremos la misma variable para TODOS los radiobuttons Y algunos cambios finales: <div> <button id="buttonDestiny" :class="styleButton" type="button" :disabled="checkDisable" @click="showCode=!showCode">Ver código generado</button> </div> <div class="code" > <blockquote v-if="showCode"> {{code}} </blockquote> </div> En button hay varios cambios. El tributo HTML class con los dos puntos antes :class asocia ese atributo a una variable, lo mismo para :disabled. y por ultimo el evento click ejecuta una acción. La acción es sobre una variable llamada showCode que es Boolean (TRUE o FALSE).

showCode =!showCode Indica: Guardar en showCode el valor opuesto (!) al que tiene en ese momento. Lo que significa que si es TRUE lo cambiara a FALSE y a la inversa. Por último el bloque de texto tiene un condicional (v-if) cuya consecuencia es que renderiza el elemento solo si el valor tiene verdadero. Hablemos de v-if. Es un condicional que funciona como cualquier otro if de cualquier lenguaje. Espera un resultado boolean (TRUE o FALSE) y se puede usar para devolver el valor una variable, método o una acción directa. v-if no renderiza el elemento. Eso quiere decir que el navegador NO tendrá ese elemento. Estoy es mas eficaz que un display: none porque esta acción le da el elemento al navegador, se renderiza y luego se oculta. Este punto se entiende mejor si se conoce el Virtual DOM. Un DOM controlado por Vue y que actúa sobre el navegador entregado solamente lo que necesita, cuando lo necesite. Y cuando suceden cambios no se renderiza todo de nuevo sino solo aquellos elementos que cambiaron.

El virtual DOM no es parte de estos artículos pero pueden saber más del tema aquí: (ingles) https://medium.com/js-dojo/whats-the-deal-with-vue-s-virtual-dom-3ed4fc0dbb20 v-if permite también un v-else: <div v-if="valor"> <span>Verdadero</span> <div> <div v-else> <span>Falso</span> </div> En este caso mostrara el mensaje Verdadero si valor es TRUE y si no mostrara el mensaje Falso. Lo veremos en mas detalle más adelante. Volviendo al código, dentro del bloque de texto mostramos el resultado de una variable (el código del botón) Miremos el JS: <script> new Vue({ el: '#app', data: { checkDisable: false, checkOutline: false, checkButton: 'primary', showCode: false }, computed: { code () { return '<button class="btn '+this.styleButton+'"></button>' }, styleButton() { let btn='btn btn-' if (this.checkOutline) { btn += 'outline-' } return btn + this.checkButton } } }) </script> Hemos definido 4 variables que definen estados iniciales: * checkDisable se usa en el checkbox de Disable * checkOutline se usa en el checkbox de Outline * checkButton se usa en los radioButton y se define como chequeado el que tiene el value primary (recordar que los value son los estilos de botones de bootstrap) * showCode para mostrar o no el codigo del boton. En este código usamos la palabra computed para definir computadas. Las computadas son variables complejas que se actualizan cuando cualquiera de los valores que usa cambia y siempre deben devolver un valor. Una variable normal en Vuejs se actualiza en todos los sitios donde se use pero las variables solo permiten guardar valores propios de Js. Si necesitamos algo más (como en este código) podemos recurrir a computadas. Se definen como un método (styleButton()) pero se usa como una variable (styleButton) por ahora diremos que definidas así lo único que no permiten es una asignación (ya veremos ese punto más adelante) pero por todo lo demás son para el sistema variables normales. Definimos dos computadas: styleButton() { let btn='btn btn-' if (this.checkOutline) { btn += 'outline-' } return btn + this.checkButton } Esta computada es bastante similar a la función createClass de jQuery. Primero guardamos un valor en btn que es lo básico de las clases de botones, en el if verificamos si checkOutline esta chequeado y si es así modificamos la variable agregando el estilo outline. Finalmente devolvemos el resultado agregando el value actual de los radioButton. La computada siguiente: code () { return '<button class="btn '+this.styleButton+'"></button>' } Sencillamente devuelve el código con el último valor actualizado. Este post ha sido un poco largo y tiene algunos conceptos nuevos. Si hay dudas preguntar. Tanto v-if como las computadas las seguiremos usando (Que es la mejor manera de entenderlas) en próximos códigos. Espero que sea útil. Códigos completos: Estilos: Codesandbox: https://codesandbox.io/s/wild-bird-i24fw?file=/Button/Estilos/indexButtonStyle.html GitHub: https://github.com/Gonzalo2310/jQuery-Vuejs/tree/master/Button/Estilos Configuración de botón:

Codesandbox: https://codesandbox.io/s/wild-bird-i24fw?file=/Button/Clases/indexButtonClass.html GitHub: https://github.com/Gonzalo2310/jQuery-Vuejs/tree/master/Button/Clases


Consultas, dudas, comentarios: Slack de PEUM o en Twitter.

No hay comentarios:

Publicar un comentario

Vuejs para programadores jQuery. Tablas simple. Paginación. XV

Vuejs para programadores jQuery. Tablas simple. Paginación. XV Hoy veremos el código de una tabla sencilla con paginación y modal para ver ...