Happy New Year!
Let’s learn how to code with Vue.js.
Are you a coder? Here lies the Vue.js MIT-licensed open source, and may the force be with you.
Preface: Web App Evolution
The “Web 1.0” approach of responding to HTTP requests with entire HTML documents for every HTTP request made, is now history. That’s as far as I’m going to entertain that thread. Web 2.0 applications take a single-page approach by manipulating the DOM on events; usually upon ECMA6 Promise fulfillment or during an AJAX Request’s callback. The Vue.js framework does exceedingly well at this approach.
Why Vue?
Approachability.
Knowing how the DOM works and having come from the Web 1.0 background, or era – we can incrementally adopt Vue easily, learn it quickly, and be productive with our – already – basic understanding of the XML-esque structure of an HTML5 web application.
Side note: The HTML5 additions to HTML are just a few extra JavaScript API calls. Under the surface, a JavaScript specification is the only difference.
Infinitely Scalable and Extensible.
Vue.js apps are fundamentally powered by the process of rendering “Components” with a “Vue” instance. The apps are – generally – extended by coding custom components for said Vues, additional Vues, or by importing 3rd party packages or libraries that contain components.
Side note: Be cognizant of the term Vue and it’s usage. There are Vue.js apps, and Vue JavaScript object instances.
Lightweight.
AngularJS was overkill for our project at 6Joes. Vue source files are clean, and human-readable without any prior knowledge of the Vue.js library API.
The production Vue.js framework Gzips to 20kb. Vue is the teeny-tiny match. You are the gasoline reservoir. Also, flames are good.
Code, Already!
Requirements
Here’s what we’ll need to prove the concept:
- A Browser (Chrome, duh!)
- A Text Editor (Hint: Atom)
- Lists are best with at least 3 items.
Warm Up
Usually, it’s best to use NPM and Webpack to transpile code, and serve JavaScript applications in the coder’s development environment. For now, just create a directory with one file in it named index.html. Paste this shell into the file.
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div id="app">
<v-app>
<v-content>
<v-container>Vue In 30</v-container>
</v-content>
</v-app>
</div>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script>
new Vue({ el: '#app' })
</script>
</body>
</html>
See the inline script tag? That’s our Vue instance instantiation. We should see a page like this one in the browser.
The v-container element is a container component. Like I mentioned above: We can define our own, so let’s go ahead and do that.
Global Component Registration
Add the following lines above the Vue instantiation, in the inline script tag.
<script>
Vue.component('global-component', {
template: '<div>I\'m global!</div>'
})
new Vue({ el: '#app' })
</script>
Now adjust the v-container component to have a global-component child.
<div id="app">
<v-app>
<v-content>
<v-container>
<global-component></global-component>
</v-container>
</v-content>
</v-app>
</div>
Voila. Now, obviously, we can make this far more extendable. We can actually assign the template property of the component a Vue model instance. Which has event handlers and logic of its own.
Scoped Components
Consider the above approach, had have we instantiated our Vue like so:
var Child = {
template: '<div>A child component!</div>'
}
new Vue({
components: {
'child-component': Child
}
})
The Beauty Of The .Vue File
The single file template approach to coding Vues is by far the king of approaches. This approach requires transpiling, and not all IDEs support syntax highlighting, but it kicks ass regardless.
<template>
<button :class="{'flagClass': flag}" @click="toggle">Click Me!</button>
</template>
<script>
export default {
data: () => ({
flag: false
}),
methods: {
toggle() {
this.flag = !this.flag
}
}
}
</script>
<style scoped>
button.flagClass {
color: red;
}
</style>
Here we have a Vue component that applies a CSS class to a button provided a condition – the flag variable – evaluates to true. Since we’ve committed to transpiling, we now have the arrow function feature of ECMA6 and many more at our disposal.
Here we’ve got template, logic, and stylizing code in one place, for one component.
Props Are Not HTML Attributes, Son.
Props are ways of passing state to components. They look similar to HTML element attributes, with the main difference being that HTML attributes always expect a string argument. There are many Vue components that expect arrays or objects. Look at Vuetify’s circular progress component for example. It expects integers to be bound to props using the colon syntax below.
<template>
<v-progress-circular :size="size" :width="width" :rotate="rotation" :value="value">
{{ value }}
</v-progress-circular>
</template>
<script>
export default {
data: () => ({
size: 100,
width: 15,
rotation: 360,
value: 50 // Or whatever %
})
}
</script>
Closing Statements
I’m pushing “30 Seconds” here so let’s wrap it up. There’s so much I’ve left out, and so much more that Vue is capable of. Here’s a list of Vue references.
