This repo contains some simplest case examples on VueJS 2 for learning purpose. I also add my daily logs here, about what I have learned so far to keep track of my progress.
- Learned about creating a new Vue Instance and declarative rendering.
- Learned about handling data and methods in VueJS 2.
- Learned about data binding and interpolation.
- Learned about event handling in VueJS 2
- Looked into various event modifiers provided by Vue
- Learned about keyboard event handling and key modifiers
- Two-way data binding using v-model
- Learned about Computed Properties
- Dynamic CSS Classes using
v-bind:class - Conditional rendering of DOM elements
- Learned about how we can use the
v-fordirective to render a list of items based on an array, object and template. - Worked on a small assignment to create a small game using all VueJS concepts learned so far.
- Learned about using multiple Vue Instances and interacting between them.
- Also, learned about using Components in Vue.
- Learned about using Refs in VueJS.
-
refis used to register a reference to an element or a child component. - Learned about vue-cli, for scaffolding Vue.js projects.
- Looked into Vue files & the root Component.
- Created our first
*.vuefile. - Learned about nesting components both globally and locally.
- Learned about Component-Scoped CSS
- Component-Scoped CSS helps in creating styling that is scoped to single-file component only and this styling does not interferes with other component styling.
- Learned more about nesting components.
- Created separate components for header, footer & content
- Learned about props in VueJS.
- A
propis a custom attribute for passing information from parent components. - In Vue, the parent-child component relationship can be summarized as props down, events
up. The parent passes data down to the child via props, and the child sends messages to
the parent via events.
- Today learned about Primitive vs Reference types of props passed from parent to child and how it effects parent data once prop data is modified in child components in case of reference type data.
- Primitive types include
String,Number,BooleanandSymbol. - Reference types include
ObjectandArray.
- Learned about using
v-onwith Custom Events. - We can actually listen to an
$emitevent from a child withv-onin parent component.
- Learned about creating a global Event Bus with VueJS.
- We could manage communication between components with a single event bus.
- Learned about Vue lifecycle hooks.
- It gives users the opportunity to add their own code at specific stages Vue instance initialization.
- For example, the
createdhook can be used to run code after an instance is created.
new Vue({
data: {
a: 1
},
created: function() {
// `this` points to the vm instance
console.log('a is: ' + this.a);
}
});
// => "a is: 1"- Today learned about using slots in VueJS.
- It mainly allow a parent component to pass DOM elements into a child component.
- Learned about using Dynamic Components.
- We can dynamically switch between multiple components using the reserved
<d>element and dynamically bind to itsisattribute.
<component v-bind:is="currentView">
<!-- component changes when currentView data changes! -->
</component>- Learned about basic usage of form input binding.
- Learned about form modifiers like
.lazy,.numberand.trim.
- Learned about single checkbox and multiple checkboxes binding.
- Learned about select box binding.
- Also, about how we can make HTTP post requests using
vue-resource.
- Learned about how we can make HTTP GET request using
vue-resource. - Also, about how we can read & display the response data returned from this http request.
- Learned about how we can create custom directives and implement custom behaviours in our applications.
- Learned about directive hook functions and hook arguments.
- Using filters to apply common text formatting.
<div>
<!-- 'capitalize' is a filter function which will receive the value of 'message' as its argument -->
{{ message | capitalize }}
</div>- Created a custom search filter using computed properties.
- Learned about how we can register filters and directives locally.
- Also, about how to use mixins.
- Mixins are a flexible way to distribute reusable functionalities for Vue components.
- Learned about basic usage of vue-router library.
- Learned about routing modes: "hash" & "history".
- Enabling user navigation using
<router-link>component.
- Learned about Dynamic Route Matching.
- Also, learned how we can fetch dynamic segment in route path, which start with a colon
:.
const router = new VueRouter({
routes: [
// dynamic segments start with a colon
{ path: '/user/:id', component: User }
]
});- You can check out a simple live example here.
- Learned about setting up Firebase database.
- Learned about saving data to Firebase database.
- Learned about how we can retrieve posts from Firebase.
- Display specific post based on post key stored in Firebase.