Los watchers son funciones que se ejecutan cada vez que una propiedad cambia, deben llamarse igual que la propiedad a la que vamos a vigilar, y esto permite ejecutar un código que necesitemos:D
Introducción
VueJS: Creación de Aplicaciones Profesionales con Componentes y Herramientas
Características Clave de Vue.js para Desarrollo Web
CLI y Dev Tools
Instalación y uso de herramientas BioJS con Node y Vue CLI
Creación de una Aplicación Vue.js con Webpack paso a paso
Configuración avanzada de Webpack: de desarrollo a producción
Transpilación de JavaScript con Babel y Presets
Configuración de reglas EstándarJS con iSlimt en proyectos JavaScript
"Cómo Integrar Bulma en Proyectos de CSS con Sass"
Configuración de Pag en proyectos con Webpack
Diseño de Mockups con Software de Prototipado
Creación de Mockups con Vue.js: Paso a Paso
Manipulación del DOM
Expresiones en Vue: Manipulación del DOM desde el ViewModel
Directivas en Vue.js: Usar v-show y v-if eficazmente
Enlace de Datos en Vue: Directivas v-model y v-bind
Propiedades Computadas en JavaScript: Crear y Calcular Valores Dinámicos
Uso de Watchers para Gestionar Cambios en Vue.js
Manejo de Eventos y Métodos en JavaScript para Interactividad
Creación de Interfaces Responsivas con Bulma y VueJS
Creación de Apps Dinámicas con Vue.js y Local Storage
REST y HTTP
Consumo de APIs REST con Fetch y JavaScript Vainilla
Peticiones HTTP con Fetch API y la librería Trae en JavaScript
Conexión de APIs y manejo de promesas en JavaScript
Sistema de Componentes
Crear Componentes Reutilizables en Vue.js
Componentes Vue para Aplicaciones Web con Bulma
Reactividad en VueJS: Entiende y Optimiza tu Código
Ciclo de Vida de Componentes en Vue.js: Hooks y Su Uso Práctico
Comunicación entre Componentes Vue: Props y Eventos
Eventos en Vue: Comunicación de Componente Hijo a Padre
Inyección de HTML Dinámico con Slots en Componentes Vue
Optimización de Componentes Vue: Uso de EventBus y Plugins
Vue Router
Vue Router: Ruteo del Lado del Cliente con Vue.js
Rutas y Renderización con Vue Router
Navegación y Gestión de Rutas Dinámicas en Vue.js
Extendiendo VueJS
Modifiers en VueJS: Mejora de Eventos con Tecla Enter
Creación de Filtros en Vue para Formatear Tiempos de Canciones
Creación de Directivas Personalizadas en Vue.js
Reutilización de Funcionalidades en VueJS con Mixins
Clases, Animaciones y Transiciones36
Animaciones y Transiciones en Vue.js con CSS3
Vuex
Manejo de estados centralizados con BuX en Vue.js
Uso de VueX para Gestión de Estado en Vue.js
Mutaciones en Vuex: Actualización Reactiva del Estado
Getters en Vuex: Acceso Personalizado a Estado y Mutaciones
"Vuex: Gestión Asincrónica con Actions y Promesas"
Propiedades Computadas y Mutaciones en VueX
Nuxt.js
Server-Side Rendering con Vue.js y Nuxt: Ventajas y Desventajas
Renderizado de Servidor con Nact.js para Aplicaciones Vue
Integración de Vue.js con Nuxt.js para Server Side Rendering
Deploy a Producción con Now
Bildeo y Deployer de Apps con Now para Producción
Compilación con Webpack: De desarrollo a producción
Conclusiones
Desarrollo de Apps Profesionales con Vue.js
Bonus
Traducción de Texto en Vue con i18n
Tests unitarios en Vue.js con Karma y Mocha
Autenticación con JSON Web Tokens en Vue.js
No tienes acceso a esta clase
¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera
Si ya tienes una cuenta,
Uso de Watchers para Gestionar Cambios en Vue.js
16/53Recursos
Los Watchers nos permiten ejecutar código a partir de que una propiedad de nuestro View Model cambia.
A diferencia de las Computed Properties no devuelven un valor, no son propiedades y tampoco pueden ser utilizadas en expresiones.
Aportes 6
Preguntas 0
Ordenar por:
Los Watchers nos permiten ejecutar código a partir de que una propiedad de nuestro View Model cambia.
A diferencia de las Computed Properties no devuelven un valor, no son propiedades y tampoco pueden ser utilizadas en expresiones.
Se me ocurre una función de watch en las opciones de suscripcion de platzi. Cuando el usuario activa cancelar su suscripcion el valor cambia y por tanto se debe observar ese cambio para mostrarle un aviso del porque de su decisión.
WOOW
<template lang="pug">
#app
input(v-model="yearBorn", placeholder="año de nacimiento")
p tienes {{yearsOld}} años.
</template>
<script>
export default {
name: 'app',
data () {
return {
name: '',
lastname: '',
actualYear: 2019,
yearBorn: null
}
},
computed: {
yearsOld: function () {
return parseInt(this.yearBorn) - parseInt(this.actualYear)
}
}
}
</script>
<style lang="scss">
@import './css/main.scss'
</style>
Me recuerda a los keyloggers 😕
También se los puede utilizar con las computed properties
¿Quieres ver más aportes, preguntas y respuestas de la comunidad?