React versus Vue
The driving force behind React's popularity and large development community is attributed to Facebook's dedicated engineers and its 2013 open source release at a time when Angular 2+ was nowhere to be seen. React's JSX pattern (a way of writing HTML and CSS in JavaScript) introduces with it a heightened learning curve for new developers who are both required to learn another language and also wrap their heads around component-based architecture. Components allow developers to build applications in a modular way; individual components describe their own piece of functionality and lifecycle, where they can be instantiated when they are required and destroyed when they are not used. Vue takes these core concepts of modular coding and enables developers to build these components using either JSX or writing HTML, CSS, and JavaScript as you would a traditional web application in a single file. Vue's separation of concerns in a single-file component simplifies this modular structure for developers.
Advantages of Using Vue for Your Project
Vue has a gentle learning curve and a vibrant ecosystem. This benefits teams of any size by not requiring a huge amount of overhead to educate teams of developers on how to use the Vue.js framework.
- Vue.js is another example of a pattern in development that is easy to learn but hard to master. A key benefit of Vue is its approachability for both new and veteran developers.
- Out of the box, developers can use a well-optimized and performant framework on which to build dynamic frontend applications of any size.
- The single-file component (SFC) pattern offers a modular and flexible blueprint to simplify the development process and provides an enjoyable experience for developers of all levels, bringing order to component chaos. Single-file components allow Vue to be genuinely versatile, where you can implement basic functionality and incrementally adopt pieces of a static site into Vue rather than overhauling your entire website.
- Official global state management support should come as a relief to any developer who is familiar with the Redux and NgRx patterns. As powerful as these libraries can be when used well, Vuex is a great middle-ground for creating robust global state patterns that are flexible to meet most development needs.
For those developers who are looking to get off the ground quickly, do not reinvent the wheel by building a custom reactive pattern unless individual use cases require it. You can save time and money by using Vue as a framework because it is already performant and officially supports libraries that are necessary to build an end-to-end app, which include vue-router, Vuex state management, dev tools, and more.
In this chapter, we will start by introducing the Vue architecture before familiarizing you with Vue's unique SFC pattern and HTML template syntax sugar. You will learn how to work with the Vue-specific template syntax and coding patterns that include Vue bindings, directives, lifecycle hooks, scopes, and the local state. Out of the Vue ecosystem of official plugins, we will primarily be focusing on the core Vue libraries. First, let's look at Vue's project architecture.
The Vue Instance in a Simple Vue Application
One of the easiest ways to get started with Vue is to import the Vue package through a Content Distribution Network (CDN). By doing this you can create a Vue instance with the Vue function. Each Vue application consists of one root Vue instance that is created using the new Vue function. All corresponding Vue components that are created are also defined using the same syntax, however, are considered as nested Vue instances that can contain their own options and properties:
var vm = new Vue({
// options
})
Note
vm is a term commonly used to refer to a View Model, which is an abstraction of the view that describes the state of the data in the model. Binding a Vue instance to vm helps you to keep track of your Vue instance in a block of code.
In this example, we import Vue using the jsdelivr CDN, which will allow you to utilize the Vue functions:
<!DOCTYPE html> <html> <head> <title>Vue.js CDN</title> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"> </script> </head> </html>
Declare an element in the <body> tag using a class, ID, or data attribute. Vue is known for its ability to declaratively render data to the DOM using simple template syntax such as double curly braces to specify reactive content, for example, {{ text }}:
<!DOCTYPE html>
<html>
<head>
<title>Vue.js CDN</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js">
</script>
</head>
<body>
<div>
<p class="reactive-text">{{ text }}</p>
</div>
</body>
</html>
In the <head> tag, we see some vanilla JavaScript code that fires off when the DOM loads. This constructs a Vue component bound to the element with class .reactive-text. The data property labeled text will replace the curly brace placeholder with the string defined as Start using Vue.js today!:
<head>
<title>Vue.js CDN</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js">
</script>
<script>
document.addEventListener('DOMContentLoaded', function () {
new Vue({
el: '.reactive-text',
data: {
text: "Start using Vue.js today!"
}
})
})
</script>
</head>
<body>
<div>
<p class="reactive-text">{{ text }}</p>
</div>
</body>
</html>
In the preceding script, you bind the <p> element with the reactive-text class to the new Vue instance. So, now that Vue understands this HTML element you can use the {{ text }} syntax to output the data property text inside of the <p> element.
The output of the preceding code will be as follows:
Start using Vue.js today!
While a CDN is a very portable way to start including Vue.js in your projects, using package managers is the recommended installation method for Vue, which is compiled by webpack, because it allows you to control third-party library versions easily. You can access it here: https://vuejs.org/v2/guide/installation.html. We will explore what a webpack example looks like next.