By Alex Mungai Muchiri, Alibaba Cloud Tech Share Author. Tech Share is Alibaba Cloud's incentive program to encourage the sharing of technical knowledge and best practices within the cloud community.
When building a web application, it is easy to over-emphasize the back-end and fail to recognize the importance of the client-facing side. Vue.JS is a reactive framework based on JavaScript that is used for building web applications. Vue.JS is non-intrusive and includes a set of libraries besides the core libraries, which when combined can enable the creation of very advanced applications.
Due to the componentization, you can gradually adopt the framework and also have your website powered in part by Vue and other frameworks. The major advantage of the Vue framework is that you can rewrite existing applications progressively instead of having to deal with the entire project at once. Other frameworks such as Angular do not allow as much flexibility.
Vue uses a rather simple library but it is a very scalable tool. It can be applied to build single page applications in combination with extension libraries. Such libraries include:
The Vue.JS community is growing, supplying a large database of libraries that you can use to customize your application. It is also becoming very popular, which makes it a potent technology for the future. If you have not considered learning the framework, it is time to get started!
Vue.JS supports components as is the case with all JavaScript frameworks built in recent times. Componentization allows the development of self-contained components with the markups, JS, and CSS for use on various pages. As such, it is possible to reuse components for varying contexts and, therefore, avoid code duplication and improve maintenance ease. Overall, Vue is very easy to use and learn when compared to other platforms.
In this article, we will be exploring Vue.JS by writing a simple Hello World program. This tutorial should work on any machine, but for this article, I will be using an Alibaba Cloud Elastic Compute Service (ECS) instance. By deploying on the cloud, I don't have to worry about running out of resources whenever my application gets too large. Let's get started!
Vue supports all ECMAScript 5 browsers. It does not support IE8 and browser versions below it because of that feature. The current release is v 2.5.16, which can be accessed on GitHub.
Ensure that you install the Vue Devtools in your browser so that you can inspect your applications for bugs in the developer interface. Download the components and include a direct script tag. Also, avoid using minified versions since they do not include warnings for common mistakes. The three available installation methods are:
Use a specified version number that could be updated manually
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>The NPM package can be found at cdn.jsdelivr.net/npm/vue. You can also access it on unpkg and cdnjs as well. Just make sure that you are using the production version to publish, which means replacing vue.js with vue.min.js.
When building large-scale Vue applications, the NPM method is preferred since you can pair it with a module such as Webpack and Browserify. It is also easy for single file component authoring. Run the command below:
# latest stable
$ npm install vueThe official CLI by Vue is designed specifically for single page applications. It is greatly optimized for modern front-end workflows and is very easy to build and setup. You will need previous Node.JS knowledge prior to getting started with CLI. The table below is an explanation of various Vue builds.
| UMD | CommonJS | ES Module | |
| Full | vue.js | vue.common.js | vue.esm.js |
| Runtime-only | vue.runtime.js | vue.runtime.common.js | vue.runtime.esm.js |
| Full (production) | vue.min.js | - | - |
| Runtime-only (production) | vue.runtime.min.js | - | - |
(Source: vue.org)
Let's now write our first simple program in Vue. The initial step involves making the Vue.JS available. In this tutorial, we use the CDN method to install Vue.JS. We shall use Vue.JS within JSFiddle and in CDN the URL to the Vue.JS file is all we need. The next step is to add that URL within the script tag as shown in the below:
<script src="https://unpkg.com/vue@2.1.4/dist/vue.js"></script>Vue.JS is based on what is referred to as a "Vue instance." A "Vue instance" describes the function that is responsible for HTML code control in a program. The instance or template is rendered in a browser as the application runs. All "Vue instances" are initiated by the Vue constructor functions of the Vue code. The first task in our assignment is creating our first "Vue instance." While the code we write does not individually carry out an important role, it serves a vital role as an element or simply "el." The reason it does not carry out any function is that it does not in itself instruct the constructor with any JavaScript object options.
new Vue ({
el: ''
});Included in the property should be the CSS selector matching the HTML element that will be controlled by the Vue instance. In our simple model, our Vue instance will control an element with the ID "app." The simple model that we create requires that we add the element's ID in our Vue instance prefixed and with a hashtag sign. See the sample code below:
new Vue ({
el: '#app'
});The next step after that is to write a template for the Vue instance. As has been seen previously, it will control an element, "#app". We shall then proceed to create a div element using the ID. It is possible to use any other identifier of your choice, even classes. If you opt to use a class, you would need to use a selector and period in the place of the hash symbol.
<div id="app"></div>We are going to write our "Hello World" in a dynamic "string interpolation" model rather than use a direct HTML write. For us to be able to do that, we need to introduce a new property called data in our Vue instance, that simple line of code we wrote previously. In the new property, we can now add the data types that will be accessible by our Vue instance as well as within the Vue template. Our simple model is to store messages in the instance. We shall add a message key containing the value "Hello World!" See the code below:
new Vue ({
el: '#app',
data: {
message: 'Hello World!'
}
});We have done well so far but that still leaves us with more questions than answers. Notably, our template can access data from the property and henceforth, we use the "string interpolation" method for its output. String interpolation is a simple double curly bracket syntax. So, it is a rather familiar concept with a fancy name. To be able to output the message, we need to add a header that includes string interpolation as can be seen below:
<div id="app">
<h1>{{ }}</h1>
</div>You can notice that the curly bracket syntax has opened and closed the string interpolation in the case above. It is a requirement that the name of the data property to output is indicated. In our case, we intend to output the data property message and so we include it as in the below:
<div id="app">
<h1>{{ message }}</h1>
</div>We have avoided writing data.message within the curly brackets as would be conventionally expected. The intentional omission was done as so since Vuse.JS employs a proxy function to avail the data without the requirement for including the prefix, as opposed to other JavaScript frameworks. What is important to take away from the execution is that it is possible to access data keys without the data as in the example above.
Furthermore, storing instances that have been recently created in a variable is not necessary especially if it will be required in a script later. Well, we shall now run the code and see what kind of output we can expect.
When we run the code, the right Hand of the screen output the message as we have anticipated that it would. To expound on the processes at work, the Vue instance controls the div that was previously specified in the property element of the CSS selector. The property element has access to all specified data of the el property within the Vue instance.
JavaScript
new Vue ({
el: '#app',
data: {
message: 'Hello World!'
}
});It is important to note that Vue.JS anticipates data changes, and while that cannot be seen in the example above, it is a very powerful technique that is constantly scouting for data property changes. Due to that, all changes are reflected automatically on the page and the DOM as well.
HTML
<script src="https://unpkg.com/vue@2.1.4/dist/vue.js"></script>
<div id="app">
<h1>{{ message }}</h1>
</div>Congratulations, we have successfully created our first Vue.JS application!
This is a simple example that does not execute a lot of functions. But it does an amazing job summarising the Vue.JS framework. There are numerous activities that go on behind the scene and those would need a comprehensive review of Vue. However, if you already practice Node.JS, this tutorial should get you thinking in the right directions.
Don't have an Alibaba Cloud account yet? Sign up for an account and try over 40 products for free worth up to $1200.
Resources: Vue.org
Alibaba Clouder - December 2, 2019
Alibaba Cloud Serverless - May 9, 2020
Alibaba Clouder - January 20, 2021
Alibaba Clouder - April 16, 2018
Alibaba F(x) Team - February 25, 2021
Alibaba Clouder - May 21, 2018
Web Hosting Solution
Explore Web Hosting solutions that can power your personal website or empower your online business.
Learn More
Web Hosting
Explore how our Web Hosting solutions help small and medium sized companies power their websites and online businesses.
Learn More
Web App Service
Web App Service allows you to deploy, scale, adjust, and monitor applications in an easy, efficient, secure, and flexible manner.
Learn More
ICP Support Solution
Learn how to obtain an ICP Filing or ICP Commercial License to host your website in Mainland China.
Learn MoreMore Posts by Alex
