video #22: Props
in Vue.js, data gets passed down as a prop from one component to another.
video #23: Primitive vs Reference Types
primitive types are STRINGS, BOOLEANS, and NUMBERS reference types are OBJECTS and ARRAYS
if you pass primitive types (e.g. STRINGS) from parent to child component, it will edit that local version only. original data will not be affected.
if you reference an OBJECT or ARRAY, if you edit the data in one the local component(s), then it will also edit the data in original component. -ex. if you have 3 child instances of a component that reference the same ARRAY, and you delete an item from the local array, it will automatically delete that item from the other child array as well.
video #24: Events (child to parent) the behavior of reference types (updating both child and parent component's data) - can be duplicated for primitive types by using EVENTS...instead of changing locally, by emitting an event listener can pass the changes in data up to root Component, then re-render the template down to all the included child components (e.g. update Header and Footer components).
code example: methods: { changeTitle: function(){ this.$emit('changeTitle', 'Vue Wizards'); } }
video #25: Event Bus
event bus is a Vue instance that can emit events, listen to events, and react to them.
-create event bus -import into the other child components -communicate between them without the parent, by emitting an event on the event bus, then listening to that event in a sibling component.
code example of Event Bus: export const bus = new Vue();
import in the other component: import { bus } from '../main';
when do we listen to that event bus? listen to it from the point that the component is created. To do that you have to use a life cycle hook.
video #26: Lifecycle Hooks
- beforeMount - before the component is mounted
- mounted - good place to manipulate the DOM
- beforeUpdate
- updated - occurs after DOM has been updated and re-rendered
- beforeDestroy
- beforeCreate - runs before the component has been created
- created - fetch data from a DB
video #27: Slots Use SLOTS to pass HTML templates down to a child component examples: `
video #29: Input Binding
a textbox input can be binding to (e.g.) a tag and update immediately.
v-model.lazy will wait until user tabs out of the box before outputting the duplicate text...
video #30: Checkbox Binding
video #32: HTTP Requests
you can use a plugin called vue-resource to handle http requests
use jsonplaceholder.typicode.com (a fake online REST API) for testing
- import into main.js import VueResource from 'vue-resource' Vue.use(VueResource)
for POST Requests (Create)
video #33: GET requests (Read)
video #34: Custom Directives
Vue's built-in directives include:
- v-model
- v-on:click
- v-for
- v-if
directives can be created with Local or Global (any component can use it) scope
-
Define the custom directive in main.js file (for global access)
Vue.directive('rainbow',{ bind(el, binding, vnode){ el.style.color = "#" + Math.random().toString().slice(2,8); } }); -
Call the Custom directive:
<h2 v-rainbow>{{ title }}</h2>
video #35: Filters
Filters can be used to change the output of data to the browser. It doesn't alter the original data, just how it is displayed in the browser...
for a global filter, register it globally in main.js
then call that filter with a pipe and filter-name
video #36: Custom Search Filter Create custom search filters using Computed Properties
video #38: Mixins
video #42: Route Parameters
used for READing 1 record (usually) by id.
example:
www.simon.com/blog/25
video #43: POSTing to Firebase
video #44: READing posts from Firebase