IMG-LOGO

Writing Your First Vue.js Page

andy - 04 Dec, 2020 926 Views 0 Comment

In this tutorial, we are going to write our first Vue.js page. Let's create an HTML file named first-vuejs-page.html. 

You can create the file using your preferred code editor such as Visual Studio Code or even Notepad++.

Once the file has been created. Open the file and copy the following HTML code.


<!doctype html>
<html>
	<head>
		<title>bytutorial.com - My First Vue.Js Page</title>
	</head>
	<body>
		<div id="app">
			<h3>Hi {{myName}}, welcome to creating your first Vue.js Page.</h3>
		</div>
	</body>
	<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
	<script>
		var app = new Vue({
			el: '#app',
			data: {
				myName: 'Jack'
			}
		});
	</script>
</html>

The "el" keyword represents the element that the Vue.js framework needs to look for in the HTML body content. In the above example, we have a div tag id named "app". If we changed the id value to app-container for example. Then in the el keyword, we need to set the value to app-container as well. This app container content needs to be placed first then followed by the Vue.js framework script. This to make sure the app container can be found by the framework as it needs to render first.

In the above code, you also notice there are double curly symbols that represent a data variable value that will be replaced with the Vue.js variable called myName that we declared in the code. 

This is how the final result looks like when you open the HTML file page.

You can see the name Jack is automatically placed inside the double curly symbols.

Demo

To see the live demo. Please click the following URL link.

See My first Vue.js page in action.

Download

To download the demo file. Please click the following URL link.

Download file.

Comments

There are no comments available.

Write Comment
0 characters entered. Maximum characters allowed are 1000 characters.

Related Blogs

Related Tutorials

How to set radio button checked in Vue.js?

If you have a group of radio buttons and want to bind and set a radio button to be checked. You can perform a condition against the checked property value of the radio button.

How to use methods in Vue.js?

In this tutorial we are going to learn on how to use methods in Vue js So what actually a method is in Vue js A method can be considered as an action It has a function procedure that is ...

VueJS Button Click Event

We are going to create a really simple VueJS application to showcase a button click event handling in VueJS.

What is a Vue.js?

Vue js is another popular javascript library for building interactive web interfaces The library is designed to focus on the view layer only It is very lightweight and pretty easy to use compare to another library competitors such as Angular ...