Vue (pronounced /vjuː/, like view) is a progressive framework for building user interfaces. Unlike other monolithic frameworks, Vue is designed from the ground up to be incrementally adoptable. The core library is focused on the view layer only, and is very easy to pick up and integrate with other libraries or existing projects. On the other hand, Vue is also perfectly capable of powering sophisticated Single-Page Applications when used in combination with modern tooling and supporting libraries.

Vue is a "progressive framework for building user interfaces." Its core library is designed to be fast and flexible and is only focused on the view layer.

In this course, you'll gain a basic understanding on how to construct components and nested components and see how Vue reactively keeps the DOM up to date when data is changed. You should get a taste of what Vue has to offer and gain a better understanding of how you can use it for your own application development.

Vue.js is a "progressive framework for building user interfaces." The core of Vue is focused on the view layer only. It's easy to get started and quick to set up.

In this lesson, we will create a basic Vue component using the `new Vue()` method and add `data` properties to show dynamic content in window.

Create a Basic Component using Vue.js

In this lesson, we will learn how to iterate over an array in a Vue.js template using the `v-for` property. We can add to and remove from that list using `v-on:click` and `v-on:keypress.enter`.

Create a List Component in Vue.js

Just like in the command line, you can pipe a property through a filter to get a desired result. You can even chain them together!

Create Filters in Vue.js

You can add `computed` properties to a component to calculate a property on the fly. The benefit of this over invoking a `method` is that computed properties are cached based on their dependencies.

Use Vue.js Component Computed Properties

Use `watchers` to keep an eye on your data. Watchers are methods that are invoked when the specified attribute changes. They are useful when you want to perform asynchronous operations in response to changing data. 

Use Vue.js Watchers to Respond to Async Updates

Use `v-bind:class` and `v-bind:style` to compute html classes and inline styles from component data. Vue.js will automatically add vendor prefixes when using `v-bind:style`.

Update Attributes, Classes and Styles in Vue.js with v-bind

You can use `v-if` and `v-else` to display content based on assertions on your data. Similarly, `v-show` can be used to render the content, but hide it with css. `v-if` can also be used on an invisible wrapper `<template>` element. 

Conditionally Render DOM Elements in Vue.js 

`v-on` can be used to handle interaction with elements in your template. Modifiers like `stop` and `prevent` can be used in place to `preventDefault()` and `stopPropagation`. Vue.js can also capture key bindings such as `v-on:keyup.enter` and `v-on:keyup.13`.

Handle DOM Events in Vue.js with v-on

Use `v-model` to create 2-way data binding. You can render dynamic options in a select element and bind them to their data. Use `v-bind` on inputs to use dynamic properties on the Vue instance. Adding modifiers like `.lazy`, `.number` and `.trim` allow us to trim our methods and let Vue take care of things like trimming white space.

Bind Values to Input Fields in Vue.js

By building components, you can extend basic HTML elements and reuse encapsulated code. Most options that are passed into a Vue constructor can be passed into a component. Each instance of a component has an isolated scope. Data can only be passed one direction and it  must be from parent to child using `props`. To communicate with the parent element, use the `$emit` method. 

Build Reusable Vue.js Components

You can dynamically switch between components in a template by using the reserved `<component>` element and dynamically bind to its `is` attribute. By using `<keep-alive>` you can tell Vue to keep the component in memory.

Develop Basic Web Apps with Vue.js

Greg Thoman

Free Community Resource

Free Community Resource

Course Content