You may have heard of or used such JavaScript frameworks as React, Angular and Ember. They are quite popular and have their pros and cons. I personally worked with Angular 1 and learned basic principles of others. You know there is no ideal framework, but there is one framework that I like more than others. It's Vue.js
Vue.js (pronounced /vjuː/, like view) is a library for building interactive web interfaces. The goal of Vue.js is to provide the benefits of reactive data binding and composable view components with an API that is as simple as possible. (from docs).
Vue.js is used by many companies and people across the globe. The thing that attracts me more is that a few open source products believed in Vue and included it in their code base. The products are Laravel, PageKit and some others.
In this quick tutorial we'll create a simple Vue.js component that will calculate the length of a word and display it on the fly. Let's get started...
1. Create an application skeleton
Create a directory and put index.html with the following content inside:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Your Title</title>
</head>
<body>
<h1>Your Title</h1>
</body>
</html>
Vue can be easily integrated into your Wordpress, Drupal or whatever site because of its independent nature. With Vue you can but you don't have to care about building strategy and spend time choosing and configuring tools like Grunt, Gulp or Webpack. Simply include single Vue.js file into your HTML and focus on the application logic rather than tooling.
Let's include Vue.js into our HTML head.
<head>
<!-- ... -->
<script src="https://npmcdn.com/vue@1.0.26/dist/vue.min.js"></script>
<!-- ... -->
</head>
Now run your app and you'll see a blank page with Your Title.
2. Create a Vue component
At this stage add the app container to the HTML body:
<body>
<!-- ... -->
<div id="app">
{{word}}
</div>
<!-- ... -->
</body>
After that add the following script right before the closing body tag:
<script>
new Vue({
el: '#app',
data: {
word: 'Hello'
}
})
</script>
The "el" property with the value "#add", as you may guess, points to the corresponding div#app in the markup and tells Vue where the app markup is located.
Properties from the data object are synchronized with the template variables wrapped into {{}}. Try adding some other data variables if you wish.
Okay, now open the page in a browser. Do you see the word Hello? If so, you're now a Vue.js Developer, go get some beer :) Or wait a minute, let's finish our app first... Just in case, the working demo is here.
3. Adding an input field
Almost every app communicates with user input and ours is not an exception. Let's add the following input field to our app.
<div id="app">
<input type="text" v-model="word" />
{{word}}
</div>
Done? Open the app in a browser then. Try to change the text field value. The app should react and the text next to the text field should reflect your changes.
See the demo. The magic happens when we add v-model directive, which binds "word" data property to the text field and vice versa (two-way binding).
4. Calculate the word length
Let's adjust our component so that it displays the word length next to the text field instead of just mirroring the word itself.
To do that, we can use "computed" property in the Vue component settings.
new Vue({
// ...
computed: {
length: function () {
return this.word.length;
}
}
})
As you may see, the "computed" property includes the length function, which calculates the entered word length. The only change necessary in our markup is to replace {{word}} with {{length}}.
<div id="app">
<input type="text" v-model="word" />
{{length}}
</div>
Easy, isn't it? Open the app in a browser or look at the demo to see the difference.
That's it. We've just created a simple Vue component that you may use as a boilerplate in your own apps.