Learn Vue.JS framework by hands-on examples
-
Free
-
-
About Course
Vue.js is a rapidly growing front-end framework for JavaScript, inspired by Angular.js, Reactive.js, and Rivets.js that offers simplistic user-interface design, manipulation, and deep reactivity.
Vue.js allows you to simply bind your data models to the representation layer. It also allows you to easily reuse components throughout the application.
You don’t need to create special models or collections and to register events object in there. You don’t need to follow some special syntax. You don’t need to install any of never-ending dependencies. Your models are plain JavaScript objects. They are being bound to whatever you want in your Views (text, input text, classes, attributes, and so on), and it just works.
Vue.JS is described as a MVVM patterned framework, Model-View View-Model, which is based on the concept of two-way binding data to components and views. It is incredibly fast, exceeding speeds of other top-tier JS frameworks, and very user friendly for easy integration and prototyping.
Learning Objectives
In this hands-on course, you will learn:
- What the MVVM architecture paradigm is and how it applies to Vue.js
- What declarative Views are
- What are Computed Properties
- How to use conditional like v-if, v-else, and v-show in Vue.JS
- How Vue.js explores defined properties, getters, and setters
- How reactivity and data binding works in Vue.js
- What dirty checking, DOM, and virtual DOM are
- The main differences between Vue.js 1.0 and Vue.js 2.0
- What reusable components are
- What are Custom Filters and how to apply Two-way Filters
- How Custom Components with v-model work
- What are Custom Directives and how they work
- How to install, start, run, and debug a Vue application
- How to harness the power of dynamic components in Vue.JS
- How to bind Data on a webpage in Vue.jS by exploring Text, Raw HTML, Attributes, and Filters examples
Topics and Subtopics
Here is the course outline:
1. Getting started with Vue.js
- Example 1: “Hello, World!” Program
- Example 2: Hello World in Vue 2
- Handling User Input
2. Vue Components
- Example 1: Component scoped (not global)
- What are components and how to define components?
- Local registration of components
- Inline registration
- Data registration in components
- Events
3. Computed Properties
- Data vs Computed Properties
- Computed properties vs watch
- Computed Setters
- Using computed setters for v-model
4. Conditional Rendering
- Syntax & Examples
- v-if
- v-else
- v-show and v-if / v-else
5. Custom Components with v-model
- v-model on a counter component
6. Custom Directives
- Syntax & Parameters & Examples
7. Custom Filters
- Syntax & Parameters & Examples
- Two-way Filters
8. Data Binding
- Example 1: Text
- Example 2: Raw HTML
- Example 3: Attributes
- Example 4: Filters
9. Dynamic Components
- Example 1: Simple Dynamic Components
- Example 2: Pages Navigation with keep-alive
Project- Shopping cart
- Implementing a shopping list using jQuery
- Implementing a shopping list using Vue.js
- Analyzing data binding using developer tools
- Bringing user input to the data with two-way binding
- Rendering the list of items using the v-for directive
- Check and uncheck shopping list items
- Adding new shopping list items using the v-on directive
Requirements
Basic knowledge of HTML and CSS as well as good knowledge of JavaScript.
Related Courses
- Intro to Angular.JS Framework
- Intro to React.JS Framework
- Web Design with WordPress
- Intro to Joomla CMS
- Introduction to Drupal CMS
- Web Design with Bootstrap
- User Experience Best Practices
Complete Training Bundle
If you are serious about learning web design and development, you should enroll in our Web Design and Development Training Bundle. This bundle covers all essential and practical topics related to web development. For $290 monthly subscription, you can have access to 300+ hours of hands-on project-based training covering all courses related to web development like JavaScript, PHP, JavaScript frameworks like React or Angular and many more. Click here to learn more.
Private Tutoring Classes
To take skills you learn from this course to the next level, taking the following tutoring classes are highly recommended. It is also a great opportunity to discuss your questions and problems related to this course with an experienced instructor:
- Web design and development tutoring sessions- Weekly and monthly plans
- Vue JS framework- Private tutoring sessions
What Is Next?
After finishing this course, you can enroll in any of following classes:
- Learn Node.JS, Express.JS and MongoDB
- Learn PHP Programming
- Intro to PHP OOP
- Web Development with PHP & MySQL
- User Experience Best Practices
- Intro to Search Engine Optimization
Recommended Free Courses
If you are new to the IT or programming, we suggest the following free courses:
