<h2>Introduction to the course</h2><p>Vue.js is a newly developed JavaScript framework that specializes in building User Interfaces on top of standard JavaScript, HTML, and CSS.</p><p>Vue specializes in both frontend development and Single Page Application development.</p><h2>Who is this course for?</h2><p>Vue.js takes on all the characteristics the JavaScript library has to offer for front-end development. </p><p>And with the flexibility of Vue.js in terms of handling applications with a simple, complex, and anything-in-between structure, it&#x27;s the perfect framework for front-end developers. If you&#x27;re looking for an easy, flexible and creative way to continue your frontend development journey, then you&#x27;re in the right place.</p>

Vue.js

<h2>What does this lesson cover?</h2><p>In this lesson, we scratch the surface of Vue.js. We start off with an in-depth definition of what Vue.js represents along with its advantages.</p><p>As Vue.js is utilized for both web application frontend development and SPA dev we dive into the concept of Single Page applications as well and describe their usage and how Vue fits into all of it.</p>

Introduction

<h2>What does this section cover?</h2><p>Here’s the right way to set up your Vue coding environment. In this lesson, you’ll find yourself learning all the intricacies that a once simple one-click installation entails.</p><p>Though, not necessarily complex, evaluating your options and reading the fine lining when installing could save you a lot of time in the future.</p><p>Note, that if developers choose to limit themselves to the one-click installation from the Vue.js official website, they may not be provided with the dynamic coding experience that we’ve referred to in the introduction.</p>

Installation

<h2>What does this lesson cover?</h2><p>Although we’ve referenced Instances in Creating First App, the essence of the concept conveys much more than that.</p><p>This lesson aims at uncovering instances as they are the backbone of every Vue.js program, so much so that no program can exist without one, and we’ll tell you why.</p><p>Another focal point of our lesson is Templates, which is a familiar term in HTML, and we’ll be revisiting it in this lesson as well.</p>

Instances & Template

<h2>What does this lesson cover?</h2><p>This lesson introduces the concept of Vue.js components, before slowly diving into the features and importance of components in Vue.js.</p><p>The main concept we&#x27;ll be orbiting is the ability components introduce developers to slice the User Interface into resuable pieces.</p>

Basics

<h2>What does this lesson cover?</h2><p>One of the special aspects of Vue.js is dynamically adding reactivity to properties. </p><p>This lesson uncovers Vue&#x27;s Reactive Interface, additionally, we&#x27;ll also talk about Vue.set and Vue.delete.</p>

Reactive Interface

<h2>What does this lesson cover?</h2><p>As we already know, components are the essential feature in Vue.js, and every component has a state, meaning, the state is an equally important subject worth our inspection.</p><p>A characteristic of the state is that it changes in retrospect to human user inputs from the view. This lesson will uncover, the one-way data flow, Reactivity API, State Management, and more.</p>

<h2>What does this lesson cover?</h2><p>In this lesson, we&#x27;ll be dipping out toe in the enormous ocean of Vue.js Events.</p><p>There are obvious, fundamental aspects that need to covered before we get into the specifics. Starting off with Event-Driven Porgramming in general, defining the term &quot;Event&quot; to is core, and Event Types in Vue.</p>

<h2>What does this lesson cover?</h2><p>In this lesson, we&#x27;ll get to know one of the outcomes of data binding which is manipulating an element&#x27;s class list and inline styles.</p><p>This lesson will extensively cover HTML Class Binding (to objects, and arrays), and Inline Style Bindings (to objects).</p><p>Each specific area of Class and Style Binding will be referred to separately and in-depth, alongside quizzes that will support each lesson to better grasp individual concepts.</p>

Class and Style Bindings

<h2>What does this lesson cover?</h2><p>In this lesson, we uncover the core concepts of Vue.js.</p><p>We expand on standard, fundamentals developers use in their everyday code such as components, animations, transitions, and templates. But also you can find hints of the unveiling of classic architectural attributes of Vue.js such as the data-binding techniques, reactivity systems, and Virtual DOM.</p>

Core Concepts

<h2>What does this lesson cover?</h2><p>Working with new build tools that incorporate tons of dependencies could seem overwhelming to the naked, inexperienced eye. This lesson aims at breaking down the complicated exterior that newbies face when associating with their first-ever Vue application. After all, Vue is meant to be one of the most engaging and fascinating JS frameworks so developers have no choice but to work it to their advantage.</p>

Creating a Vue Application

<h2>What does this lesson cover?</h2><p>This lesson affirms our knowledge of the overall understanding of rendering on a global scope, not only Vue.</p><p>We&#x27;ll be getting into the specifics of the different types of rendering Vue.js supports such as Conditional Rendering and Declarative Rendering. Exploring these types entails going over the Vue.js directives and how they&#x27;re incorporated in the rendering process.</p>

Rendering

<h2>What does this lesson cover?</h2><p>As surprising as it might sound, components in Vue.js require registrations, which permits them to be easily located in templates.</p><p>Vue.js recognizes two methods of component registration: Global Registration and Local Registration.</p><p>This lesson aims at uncovering the two methods, their perks and setbacks, and usage details.</p>

Registration

<h2>What does this lesson cover?</h2><p>In this lesson, we&#x27;ll be covering another one of the permissions of plugins.</p><p>We&#x27;ll get into the topic in a more detailed manner. Additionally, this lesson comes equipt with lesson challenges to help understand the concept.</p>

Provide / Inject

<h2>What does this lesson cover?</h2><p>It&#x27;s time to get serious with Events, this entails the introduction of Event Handling.</p><p>Event Handling entails the following sections: Listening to Events, Event Modifiers, and Key Modifiers.</p><p>This lesson will incorporate all those sections alongside lesson quizzes to help better digest the concept.</p>

Event Handling

<h2>What does this lesson cover?</h2><p>One of the two distinct built-in components that Vue.js presents is developed to implement transitions and animation.</p><p>This lesson will cover the different methods developers can use to approach transitions and animations in Vue.js. This includes CSS transitions, CSS-based transitions, and more (Transition Classes).</p>

Transition & Animation

Lesson Challenge

<h2>What does this lesson cover?</h2><p>One of the benefits of Vue.js is that it offers a variety of data binding types that developers should take advantage of when creating their applications.</p><p>This lesson defines the term Data Binding and its contribution to both the user and developer.</p><p>Data Binding entails the following two areas: Attribute Binding and HTML Class BInding.</p>

Data Binding

<h2>What does this lesson cover?</h2><p>Now that we have consumed the big fat main idea of components, it’s time to dive into properties in Vue.js and how they work with Vue components.</p><p>Components in require prop declaration for the sole purpose of letting Vue know the external props passed to the components should act as attributes.</p>

Props

<h2>What does this lesson cover?</h2><p>Complex applications tend to come in bigger sizes. Depending on largeness, developers may need to split up the applications into smaller chunks, and thus, load server components on a need-to basis. This concept is supported by Async Components. We&#x27;ll be covering Async Components by learning about their standard use (structure-wise, and syntax-wise) along with standard code examples to better guide developers in the right direction.</p>

Async Components

<h2>What does this lesson cover?</h2><p>With the v-on directive, components can emit custom events in template expressions.</p><p>But how?</p><p>That&#x27;s the question we aim at answering in this lesson by introducing concepts such as Component Event Listeners, Component Events Arguments, and so on.</p>

Component Events

<h2>What does this lesson cover?</h2><p>The scope of this lesson is combining animations and transitions. Event Listeners in Vue.js indicate when a given transition has stopped. Depending on the CSS it may be transitioned or animationed. </p><p>We&#x27;ll also reference  Explicit Transitions as a new feature of Vue.js and get into it more with code snippets, lesson quizzes, and other methods of learning.</p>

Explicit Transition

<h2>What does this lesson cover?</h2><p>List Rendering introduces a wide range of listing formats that come equipt with various looping concepts.</p><p>List rendering in Vue.js can be accomplished with a wide range of methods, these methods include using the Vue v-for directive in your code.</p><p>v-for offers a couple of ways of use, we&#x27;ll be going over them in this lesson. </p>

List Rendering

<h2>What does this lesson cover?</h2><p>We already know the main Vue.js directives from past lessons, but now it&#x27;s time to learn about custom directives, how to create them, and when to use them.</p><p>Then we&#x27;ll transition into the topic of Directive Hooks and provide lesson quizzes and standard code examples for an easier learning experience.</p>

Directives

<h2>What does this lesson cover?</h2><p>Components in require prop declaration for the sole purpose of letting Vue know the external props passed to the components should act as attributes.</p><p>This lesson uncover the use of mixins, their structure and behavior in code, and their overall contribution to your Viue.js application.</p>

Mixins

<h2>What does this lesson cover?</h2><p>Fallthrough Attributes are a small yet crucial point for developers to comprehend. This lesson will define the Falthrough Attributes, Class and Type Merging, and introduce their usage with lesson quizzes, and standard code examples.</p>

Fallthrough Attributes

<h2>What does this lesson cover?</h2><p>In this lesson, we assess the component properties in Vue.js.</p><p>Component properties have a lot in common with methods, the aim of this lesson is to differentiate between them and comprehend when exactly to use them instead of methods, structure differences, and the benefits they bring to your application.</p>

Computed Properties

<h2>What does this lesson cover?</h2><p>When building applications on Vue, developers mostly use templates as Vue.js recommends them also. That said there are some cases where the complete use of JavaScript is needed and hence your knowledge of the render function comes into play.</p><p>This lesson uncovers Vnodes, the declaration of functions, and more.</p>

Render Functions

<h2>What does this lesson cover?</h2><p>A Composable is a function that leverages Vue.js Composition Application Programming Interface (API). </p><p>This lesson will introduce developers to terms such as stateless l=and stateful logic. With the help of code snippets, examples, and lesson quizzes, developers will digest this topic in no time.</p>

Composables

<h2>What does this lesson cover?</h2><p>The Watcher, also known as the Watch property permits developers to listen to component data, and thus run the changes made to the said property.</p><p>There&#x27;s a lot to discover here, we&#x27;ll kick it off with Deep Watchers, Eager Watchers, and Callback Flush Timing. All very essential aspects that contribute to your overall Vue application.</p>

Watchers

<h2>What does this lesson cover?</h2><p>In this lesson, we shift our attention from props to templates and uncover the differeny ways slots bridge the gap between Vue.js components and template fragments.</p>

Slots

<h2>What does this lesson cover?</h2><p>Chances are, this is not the first time you&#x27;ve ehard about plugins. Plugins are widely used in various programming languages. Plugins for Vue.js are considered self-contained code blocks that are prone to adding app-level functionality to your Vue.js application.</p><p>This lesson will uncover everything you need to know about plugins, how they can incorporated in your application, and more.</p>

Plugins

<h2>What does this lesson cover?</h2><p>In this lesson, we&#x27;ll be referring to the Vue.js Life Cycle Hooks and template refs.</p><p>Lifecycle Hooks play an important role in the development of every Vue.js component in your application, the most used lifecycle hooks will be mentioned in this lesson, they are the mounted, unmounted, and updated lifecycle hooks.</p>

Lifecycle & Template Refs

<h2>What does this section over?</h2><p>Vue.js does not come equipt with a built-in router feature, therefore, developers will need to install it manually. </p><p>There are a couple of methods to choose from. </p><p>Our aim for this lesson is to assess those methods in depth with the help of standard code examples and lesson quizzes.</p>

Routing

Intro to Class and Style Bindings

<p>A key factor in achieving data binding is altering an element’s HTML classes and Inline Styles. <strong><samp>style </samp></strong>and <strong><samp>class</samp></strong> are both attributes, thus, developers should the <strong><samp>v-bind </samp></strong>directive and dynamically assign a string value to them.</p>

<p>Therefore, Vue.js offers a specific technique when pairing v-bind with class and style.</p>

<p>Style and class do not exclusively take on a string value, they evaluate objects and arrays as well.</p>

Binding HTML Classes: Binding to Objects

<p>Developers have the ability to transfer an <strong>object </strong>to a class (<strong><samp>:class</samp></strong>) to achieve dynamically toggling classes.</p>

<p>The shorthand version for this syntax is <strong><samp>v-bind:class</samp></strong>. The line of code above indicates that the an <strong>active </strong>class will be defined based on the data property’s (<strong><samp>isActive</samp></strong>) boolean values: truthiness. This will be structures like so:</p>

<p>Now the class will be seamlessly updated as soon as modifications are made to <strong><samp>isActive</samp> </strong>or <strong><samp>hasError</samp></strong>.</p>

Write Missing

Binding HTML Classes: Binding to arrays

<p>Developers can retrieve a list of classes by binding a class (<strong><samp>:class</samp></strong>) to an array. The code snippet below is the standard structure for execution.</p>

<p>This will thus render the following:</p>

<p>In standard practice we typically use the <strong><samp>class </samp></strong>attribute on a component with simply one oot element. Those classea are then counted to the root element of the component and integrated with classes that are already on it.</p>

<p>Let’s take a look at an example, assume your component is called WaterBottle and entails the following child component template:</p>

<p>Then we add classes to it while it’s in use:</p>

Fill Missing

<p>Add classes to the child component name <strong><samp>ChildComp </samp></strong>(while using the component).</p>

Binding Inline Styles: Binding to Objects

<p>The <strong><samp>:style</samp></strong> keywords aids in binding to JS object values by corresponding to an HTML element’s <strong>style </strong>property as depicted in the code below.</p>

<p>Syntax shouldn’t be an issue here as both camelCases and kebab-case are acceptable choices.</p>

<p>To achieve a cleaner more structured code developers are encouraged to conduct binding directly to the style object as depicted in the code snippet below:</p>

Select Correct Answer

<p>Which keyword binds JS object values to an HTML element’s style property.</p>

<h2>What does this section cover?</h2><p>This section introduces newbies to the absolute fundamentals and basics of Vue.js. After defining Vue.js and its perks, we&#x27;ll identify Vue characteristics such as Reactivity, SPA development, etc.</p><p>Another area we&#x27;ll uncover is concepts of Node that every developer should know, Animations, Templates, and Virtual DOM.</p>

Get Started

<h2>What does this section cover?</h2><p>It’s time to get your hands dirty with Vue.js, following the introduction, this section serves as a guideline for your first steps.</p><p>We’ll be kicking it off by installing Vue and finishing off with your first-ever application. A strong start brings forward a productive journey.</p><p>Even though installing an application seems like a no-brainer, this section will prove you wrong. Vue.js offers a wide range of installation methods, and choosing the best fit for your programming journey takes a little work.</p>

Setup

<h2>What does this section cover?</h2><p>A weak foundation is always the downfall of every application, and Vue applications are no exception.</p><p>In this section, we cover the basics of Vue that double as its foundational components.</p><p>We&#x27;ll start off with Instances and Templates, Rendering, Data Binding, List Rendering, Computed Properties, Watchers, Lifecycle Hooks, and Template Refs.</p>

<h2>What does this section cover?</h2><p>The prime factor of all programming languages are the components.</p><p>Components are the fundamental feature of Vude.js, they are used to develop custom and HTM-reusable elements.</p><p>This section analyzes that description with in-depth lessons on all the key aspects of components, including but not limited to Registration, Props, Mixins, Render Functions, Slots, etc.</p>

Components

<h2>What does this section cover?</h2><p>This section describes Vue&#x27;s response to user actions, in other words, events. </p><p>We&#x27;ll be discussing topics such as Event Drive programming, event types, event handling, event modifiers, key modifies, component events, v-model arguments, and fallthorugh attributes.</p><p>These sections will be given detailed introductions paired with code examples, exercises, and more. </p>

Events

<h2>What does this section cover?</h2><p>Vue.js specializes in developing the User Interface of applications, meaning the development of UI should be a priority by default.</p><p>We&#x27;ll be expanding on all the different ways to style a Vue.js application, as there is no specific one-way approach when it comes to styling. Styling in Vue entails multiple methods for every situation to provide the utmost efficient approach to both users and developers.</p>

Styling

<h2>What does this section cover?</h2><p>The concept of states in Vue.js is supported throughout every Vue application that developers will interact with in the near future.</p><p>What makes Vue.js stand out is that every component instance manages its very own reactive state by default. We&#x27;ll get into this more in the State Management section.</p>

State Management

<h2>What does this section cover?</h2><p>We&#x27;ll be assessing additional, essential Vue.js complects that lean more on the advanced side.</p><p>These include the Vue.js Rewact Interface, Provide / Inject, Prop Drilling, Async Components, Directives, Composables, Plugins, and Routing.</p><p>We already have the knowledge to back us up in comprehending these advanced topics with ease.</p>

Overview

Intro to Class and Style Bindings

Binding HTML Classes: Binding to Objects

Binding HTML Classes: Binding to arrays

Binding Inline Styles: Binding to Objects