What is Vue?
Vue.js is a lightweight, front-end framework for building user interfaces and single-page applications. It is an open-source JavaScript framework that is commonly referred to as Vue.
Why was Vue created?
Vue was created by Evan You. He wanted to create a framework with the features he best liked about Angular but lightweight. Vue was then released in 2014.
Since Vue's release, it's popularity has grown. At the most basic level, it focuses on declarative rendering and component composition.
Vue rendering
Vue uses an HTML-based syntax that allows binding the DOM with Vue's instance data. Vue recommends using templates; however, to take advantage of JavaScript, a render function may be needed.
Hello World!
To illustrate how simple Vue is, let's create a Hello World! app.
First, install Vue by typing the following command in the terminal:
$ npm install vue
Then, create an html file and type the following:
<!DOCTYPE html>
<html>
<head>
<title>My first Vue app</title>
<script src="https://unpkg.com/vue"></script>
</head>
<body>
<div id="app">
{{ message }}
</div>
<script>
var app = new Vue({
el: '#app',
data: {
message: 'Hello world!'
}
})
</script>
</body>
</html>
Notice that within the <script> tag, a new instance of Vue is created with the words new Vue. This new instance has an element id and data associated with it.
The el: #app declaration tells Vue to render the app inside the DOM element with the id of app. In the code above, this corresponds to the <div> tag.
The data object holds the data for the app. In the code above, note that message is being referenced inside the <div> tags as {{ message }}. If the value of message changes, Vue will update the page. This is known as declarative rendering.
Vue components
Vue components extend basic HTML elements to encapsulate reusable code. A component is essentially a Vue instance with predefined options. They can have their own state, markup, and style.
To incorporate a render function in the Hello World example, remove the script from the html file and the {{ message }}.
<!DOCTYPE html>
<html>
<head>
<title>My first Vue app</title>
<script src="https://unpkg.com/vue"></script>
</head>
<body>
<div id="app">
</div>
</body>
</html>
In a JavaScript file, type the following:
new Vue({
el: '#app',
render(createElement) {
return createElement('h1', 'Hello World!');
}
});
The code included in the JavaScript file above is a Vue component. But there are other ways to create Vue components.
The next is created using the keyword component as shown below:
Vue.component('component-name', {
/* Add component options here */
});
To implement named components include <div> tags encapsulating the component calls:
<!DOCTYPE html>
<html>
<head>
<title>My first Vue app</title>
<script src="https://unpkg.com/vue"></script>
</head>
<body>
<div id = "component_hello1">
<hellocomponent></hellocomponent>
</div>
<div id = "component_hello2">
<hellocomponent></hellocomponent>
</div>
</body>
</html>
The JavaScript file should contain similar code to the following:
Vue.component('hellocomponent',{
template : '<div><h1>Hello World!</h1></div>'
});
Using new Vue or Vue.component is the standard way of implementing Vue components when the application is not a single page application. In single page application, it is more common to use Single File Components.
Conclusion
Vue is very easy to learn compared to other frameworks. It is also very flexible. Giving the rise in popularity, it is worth taking time to learn Vue. Vue may surpass React and Angular in the near future.
Oldest comments (0)