Vue
The Vast World of Vue.js 0.12
Vue.js is the best JavaScript framework that you've likely never heard of. We've already covered React here at Laracasts, so let's move on to something else - something far more simple, many might say. Intrigued?
Difficulty
This series has been archived.
We instead recommend: Learn Vue 2: Step By Step
-
-
At a Glance
Run Time 30:07 FreeBefore we get our feet wet, give me a half hour, and we'll build a little tool together from scratch. Don't worry; I'll go fast in this video, but once we finish - and once you've had the chance to get really excited - we'll hit the brakes, and begin reviewing each fundamental piece of Vue.js.
View the completed source (all 77 lines of it) and demo for this lesson on GitHub.
-
Form Inputs and Two-Way Binding
Run Time 6:08 FreeLet's now step on the breaks, and review each component of Vue.js. Will begin with the basics: two-way binding between a piece of data on your Vue instance, and a form input.
-
Rendering Lists of Data
Run Time 5:00 FreeLet's continue with another baby-step. You have an array of data, and simply need to filter through it and render each item/key on the page. It couldn't be simpler with Vue.js!
-
Vue's Event System
Run Time 4:08 FreeListening for events is a basic requirement for any client-side work. While we once had to write tedious boilerplate to simply listen for a click or blur event, that's luckily no longer the case.
-
Basic Interactions Review
Run Time 9:05 FreeBefore we move on to other key areas of Vue.js, let's toy around for a bit to ensure that you have a good understanding of basic interactions.
-
Easy Filtering and Ordering
Run Time 13:23 FreeYou'll frequently find yourself in need of a way to filter and order a set of data. Because this is such a common need, Vue provides the functionality out of the box. It's laughably simple!
View the source for this episode on JSBin.
-
Custom Filters
Run Time 11:07 FreeNow that you've learned about some of the default filters, let's learn how to create our own custom filters! It's really easy. Don't forget: a filter is nothing more than a function that receives value, translates it however needed, and returns the result.
View the quick demo from this video on JSBin.
-
Laravel and Vue
Run Time 25:29 Free -
Workflow With Browserify and Elixir
Run Time 8:28 FreeLet's figure out a basic directory structure and workflow for using Browserify with Vue. Luckily, because we have Laravel Elixir, the process is significantly easier than it would be otherwise.
-
Components
Run Time 10:34Components allow us to create reusable pieces of functionality.
-
Props
Run Time 7:11 FreeProps allow you to pass data, from a parent, down to a child component.
-
All Together Now
Run Time 31:11Let's dive into workflow. In this video, we'll gather all of the things we've learned in this series, and put them together. We'll move pretty fast in this video, but if you've been following along, you should be fine. Lots to learn here, so let's get started!
View the source for this episode on GitHub.
-
Custom Directives
Run Time 10:17 FreeYou've already made use of a number of directives. Everything from
v-show, tov-on. But you can even create your own custom directives, when it's appropriate! -
Custom Components using Vueify
Run Time 8:31 Free -
Vue Routing: Part 1
Run Time 7:32 FreeIn this lesson, let's figure out how to use Vue's official router to form the beginnings of a single-page application.
-
The most concise screencasts for the working developer, updated daily.
There's no shortage of content at Laracasts. In fact, you could watch nonstop for days upon days, and still not see everything!