Vue.js 2 Basics in just 1 hour FREE

Discover the basics of Vue.js, a lightweight JavaScript framework touted as easy to learn, and start building real-world applications with practical setup guidance.

Install atom by loading it in your browser, choose Mac or Windows, then open a new folder to view the project structure and install packages.

Install essential plugins such as live server for refreshing the page and Emmet for rapid html generation, and set up basic icons for the project.

Create the boilerplate for a Vue.js 2 project, set up the index file, and integrate bootstrap via a CDN and script to bootstrap the layout.

Learn to create a view object, connect it to a page element, define a data object with a title, and render it using moustache-like templating in Vue.js 2.

Learn how to define a data object, create arrays of strings, numbers, booleans, and objects, and access object properties to display values in Vue.js 2.

Learn how to add and call methods in a Vue.js 2 object. Use arrays and objects, pass parameters, and access data with this in template syntax to display results.

Learn how to change Vue.js 2 data values from the browser console, display a title, call methods, and use console tips to debug reactivity and locate errors.

Learn how to use the v-show directive to dynamically show or hide elements by toggling a boolean in the data object.

Demonstrate how the v-html directive inserts code into elements, displaying saved text inside simple elements like p tags and composing directives for dynamic content.

Learn Vue.js 2 databinding by storing image attributes in a data object and binding the source from that object using the new binding directive.

Explore two-way data binding in Vue.js 2, linking input fields to the data object so typing updates the object and the display reflects changes in real time.

Learn how to attach events to elements in Vue.js 2 basics, using on click handlers, pass event objects, and log event properties like screenX and screenY for interactive behaviors.

Learn how to handle keyboard events in Vue.js 2 basics, wiring input models, and using key codes like 13 for enter to trigger actions via key up and key down.

discover how computed properties in vue.js connect to the data object and update automatically when data changes, and compare them to methods to understand triggers and performance.

Learn to dynamically add and remove classes in Vue.js 2 by binding an object of classes to a boolean active flag, and apply styles like color and border.

Learn css styling basics for Vue.js pages, including setting background color and text color, defining style objects and classes, and applying these styles to elements.

Explore Vue.js 2 conditional rendering with v-if and v-else, displaying or removing elements based on data values and binding conditions to a data object.

Learn how to render lists in Vue.js 2 using the v-for directive. Loop over arrays or objects, display names and indices, and use indexes to delete items.

Bind a checkbox to a view and connect it to an active property in the data model, enabling you to read its checked state and act on value changes.

Learn how to create and bind radio buttons in Vue.js, define values for gender options, and react to the selected value to drive form actions.

Learn how to use the select element in Vue.js 2 basics, bind it to a data model, define options like email or no entry, and read and save the selection.

Create and duplicate Vue view objects to build a two-view interface, then link them with a button to change each object's title using a simple change title method.