Vue Flashcards
Vue
Framework progresivo
Por qué es progresivo?
Conocemos a Vue como el Framework progresivo justamente por su vesatilidad. Es una pequeña librería que se encarga de resolver el problema de la vista dentro de lo que es el patrón MVC (Modelo, Vista, Controlador), pero también puede ser muy potente cuando la combinamos con parte de su ecosistema, es decir,que Vue puede ir escalando a medida que nuestro proyecto vaya incrementando los requerimientos o vaya incrementando su complejidad.
Vue es una librería enfocada a la vista que utiliza el Virtual DOM y es totalmente reactiva. Tiene dos caracteristicas principales, ___ y ___
Tiene dos caracteristicas principales, el sistema declarativo y el sistema de componentes.
___ is a state management pattern and library for the application using Vue JS. it acts as a centralized store for all the different components in your Vue JS application. It has rules to ensure that the state can be only mutated in a predictable fashion.
VueX
____ helps in applying common text formatting. It is used in two places, mustache interpolations, and v-bind expressions. It mainly filters the data on the DOM level. So you get data that is still intact in the storage but is represented in the custom specified manner. I
Filters
____ in Vue JS are a single, independent unit of an interface. They have their own state, markup, and style.
Components
A Vue component can be defined in four ways.
The first is new Vue({ /*options */ }).
The second is Vue.component(‘component-name’, { /* options */ }).
The third way is by using the local components.
The fourth is in the .vue files or Single File Components.
Vue js comes with following features
Templates
Reactivity
Components
Transitions
Routing
Create new vue instance
You can create Vue instance with the Vue function:
var vm = new Vue({ // options })
Explain one way data in Vue
In one-way data flow the view(UI) part of application does not updates automatically when data Model is change we need to write some custom code to make it updated every time a data model is changed.
In Vue js ___ is used for one-way data flow or binding.
v-bind
two-way data binding the view(UI)
In two-way data binding the view(UI) part of application automatically updates when data Model is changed.
In Vue.js ___ directive is used for two way data binding.
v-model
13) How to create Two-Way Bindings in Vue.js?
In Vue js ___ are used to transform the output that are going to rendered on browser.
filters
How create a custom filter
Vue.filter(‘reverse’, function (value) { return value.split(‘’).reverse().join(‘’) })
what is component and how to create one in the main
Vue Components are one of most powerful features of Vue js.In Vue components are custom elements that help you extend basic HTML elements to encapsulate reusable code.
Directivea
Maneras de extender el HTML con nuevos atributos y tags
Directivas de vue
v-show
v-if
v-model
v-else
v-on
Ciclo de vida de vue
Pbservar la data, iniciar eventos, created y compilar, indicar cuando está ready en el document, y tenemos el destroyed
Crear un app hola mundo en el app , como sería el HTML
Hacer app hola mundo en #app como sería el JS con el title
{{ title }}
expresion que llama al data title
El ___ es la opción que nos propone VueJS para interactuar con el DOM, principal con el concepto de Two Way Data Binding, esto quiere decir que vamos a tener:
Vista: aquí tenemos el HTML.
Estado: aquí tenemos nuestros datos de JS.
Usuario: es el que introduce cambios en la vista.
Declarative Rendering
Permite mantener sincronizados los datos con el DOM sin tener que hacer nada.
Two-way data binding
Dentro de una expresión se evalua algo y devuelve algo, no se pueden usan
if, loop, while
El shorthand para v-bind es :
Podemos user el shorthand así:
Usar v-if (condición)
v-bind:src=”” –>Para las imágenes v-if=”condición” –> para poner una condición EJ: v-if=”changePercent > 0” v-else-if=”sino se cumple la condición” –> cuando no se cumple el v-if Ej: v-else-if=”changePercent < 0” v-else –> tambien puede ir solo el else sin una condicion v-show –>igual que un if, la unica diferencia es que me muestra las etiquetas pero en display none.```
v-show
sew muestra si se cumple condición
v-for
para mostrar cosas de un array
We can use the ___ directive to listen to DOM events and run some JavaScript when they’re triggered.
v-on
Ejemplo de v-on de counter
v-on con metodo
registering a component
Vue.component(‘my-component-name’, { /* … */ })
Global registartion
local registration
Clases en tiempo real
0 ? ‘green’: ‘red’”>{{name}}
v-style
Propiedades computadas (Computed)
propiedades que se calculan en tiempo real en base a los valores de otras propiedades.
computed: {
title(){ return this.name + ' ' + this.symbol }
}
Donde llamar un API en vue ciclo
Mounted
Crea un componente counter y que partes necesita
- new component
- methods
- template
Como decirle a un hijo que cosas le comparte el padre
con props, aquí salen los que el componente padre le va a setear
<!-- \_\_\_in HTML -->
and
// ___in JavaScript
kebab-case
<blog-post></blog-post>
camelCase
postTitle
comunicación de padre a hijo por props y de hijo a padre por eventos
En el hijo emitimos
this.$emit(‘change-color’)
en el HTML asignamos como lo escucha el padre
v-on:change-color=”updateColor”
y el padre tiene ese metodo
methods:{ updateColor(){ this.color = this.color.split(‘’).reverse().join(‘’) } } })
slots
nos permite hacer como props.children inyectar contenido del padre al hijo
Lifecycle Hooks
beforeCreate
created
beforeMount
Mounted
beforeUpdate
updated
beforeDestroy
destroyed
