Creating An xy-Plane Component With Vue.js

We’re excited to announce something new we’ve been working on, which we are calling EchoCasts.

As our first EchoCasts offering, we present a free screencast series called Creating An xy-Plane Vue.js Component.

We think this series will be helpful for a wide range of JavaScript developers, whether they be new to Vue, new to JavaScript frameworks, or experienced in either.

Part I of our series is available now. It details the process of installing Vue CLI, using it to scaffold a new project, and creating our own components to handle number lines, points, and curves in the xy-plane.

Stay tuned for Part II coming soon.  If you like, you may also view the playlist on YouTube.

Part I

«

Prev

1

/

1

Next

»

00 Intro - Creating an xy-Plane Component With Vue.js

01 Scaffolding A New Project With Vue CLI

02 Exploring Our Scaffolded Vue.js Project

03 Creating A Number Line Vue.js Component

04 Data Binding On Our Vue.js Number Line Component

05 Adding Y-Axis For Two Dimensions Of Bound Motion

06 Functions In Two Dimensions With Vue.js

07 Creating Our Relation Component

08 Creating Our Curve Component

09 Making Our Vue App Configurable

«

Prev

1

/

1

Next

»

Part II

We are looking forward to bringing you Part II of this series in January 2018.  In Part II, we’ll work on the app configuration, making it easier to adjust things like the scale on the axes, labels for points and curves, and tick marks to better label the axes.

In addition, we’ll learn about new types of curves including exponentials and logarithms; and we’ll also learn about parametric curves and use them to make cool patterns like the one in the video below.