Learning is a unique experience. It requires relating our previous background to new concepts and patterns. Those experiences are remembered specifically and each person recalls a concept a little differently. I remember a picture of a ball falling with labelled symbols, others might remember the equation, and some may remember the sounds of the physics hall. Recollection can be a little different and thus, learning requires varied approaches.
It can seem daunting to learn a framework, but Vue helps out by providing multiple ways to setup a project and get started. Without exploring all of the options, getting started is difficult. What follows are a series of gateways to learning Vue. These should help align your learning strategy and highlight relevant framework features for getting started:
Just bind some data. A great starting point for those new to web applications. Data binding also offers an easy way to prototype out simple webpages that are populated by a Vue application. Online tooling helps to deliver a rich environment for learning the basic building blocks to developing with Vue.
Use the vue-cli to generate a project. An introduction point for those familiar with other web development frameworks like React and Angular. This approach uses the CLI and has the added benefit of exposing how Vue is configured for those familiar with build toolchains.
Setup a Vue project with types. TypeScript typings can help those who enjoy working with an IDE to help discover Vue’s APIs and learn how to use it organically. Those more comfortable using class focused languages and objects will find something familiar on this path.
Click into the section that sounds most familiar or approachable. Building a base understanding that is familiar will help you learn more about the framework by establishing foundational mental connections. If you’re curious, take a look at the other sections but don’t feel pressured to take in everything.
Just Bind Some Data
Data binding is the process of tying data to an HTML element or attribute. When the data changes, the page updates automatically.
This core frontend concept is an exciting one to use when beginning to learn Vue because it offers a lot of functionality without needing to know how Vue works. Here’s a simple example:
See the Pen Vue Template Bind Example by Ben Hofferber (@hoffination) on CodePen.
The Vue docs have a good reference for what’s going on here
This code is running on an online editor called CodePen which simply allows experimentation with Vue code. Having something running in a browser environment like this is a great place to start learning because everything is available in one place. CodePen also supports hot-reloading which will re-render the entire page whenever code is changed. This is the perfect playground for getting started with binding because it’s very easy to visualize changes.
This understanding of bindings will ignite curiosity. “What more can I do with this?" "I wonder what happens if I change this?" By understanding how data can be rendered it becomes interesting what might be possible.
This simple curiosity drove me to keep learning. Here’s a rough prototype that I built when I was first learning Vue and was deciding how to render some data for Farmers Markets:
See the Pen Market Vue Example by Ben Hofferber (@hoffination) on CodePen.
I learned a lot on this example because I just wanted to keep getting something working. First I wanted to use some actual data to populate a list of the markets. Next, I actually wanted to show the details of a market. As a finishing touch I wanted to add a little "routing" to change the whole view when a market was selected. Each of these steps motivated me to learn what I needed to get the next feature working the way I intended.
With a simple binding introduction, those new to frameworks have everything they need to get started learning more Vue and modern web development:
Render repeated a list
Handle clicks and events
Show and Hide parts of the view
Generate A Project With The vue-cli
Learning a new framework can be easier with an example code base. As the creatives of history have frequently stated, nothing is more intimidating than a blank page. The vue-cli can create an application with everything a basic Vue app needs including a webpack build system. The instructions can be found in the Vue docs.
It’s fine to just click through, with ‘ENTER’, on everything selected as default during the setup process. The settings there are extra and aren’t required for getting started.
The CLI has a lot of other advantages. It’s opinionated about folder structure and defines where assets, components, and tests are located. This folder structure can be easily changed, but it’s convenient to have the structure setup for us. Using .vue files, it shows framework users how to structure files and includes all of the required pieces. The Webpack based build system does the work to compile the project and serve it up in a state where changes are automatically reloaded to visualize code changes.
Because it’s a full-featured project, those familiar with other frameworks can make connections to how they worked with other frameworks in the past. This builds curiosity. "What’s different here?" "I wonder how Vue handles that issue…" "I’ve never heard of this feature…" These questions will drive more learning.
Here’s an interactive example of a simple loading bar that I added to a basic Vue template project:
See the Sandbox for Vue Loading Spinner by Ben Hofferber on CodeSandbox.
By having all of the code for a component in one .vue file, it’s easy to see everything at once and to quickly debug and iterate on components. CodeSandbox is great for prototyping out from the vue-cli base configuration without having to actually install anything locally and it provides a great way to share code.
Here are some things I’ve found interesting that may ignite further curiosity:
Simplified Routing with Vue Router
Element: A crazy easy to use UI library
Standard Files using a CDN import