Vue.js - Introduction | OpenWritings.net

Vue.js is a JavaScript framework for building website. It is primary focus on the view layer. It extends your HTML syntax using its own directives. As a result, your HTML code becomes a template where it is parsed into a virtual DOM. From there, you can process and manipulate the virtual DOM before updating it to the browser.

Below is an example using Vue.js to display Hello World!.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
 
    <title>Vue.js - Hello World</title>
</head>
<body>
    <div id="app">
        {{ message }}
    </div>
</body>
 
<script>
var myObject = new Vue({
    el: '#app',
    data: {
        message: 'Hello World!'
    }
})
</script>
</html>

A new Vue object called myObject is created.
The property el: binds the new Vue object to the HTML element with id="app".
Vue object myObject is bound to the <div> HTML element. When myObject changed, the HTML element will change too. If you have access to the console of your browser, you can run myObject.message="bla". The div message will change to bla.

Output

Hello World!

Vue.js

About the author

Xuan Ngo is the founder of OpenWritings.net. He currently lives in Montreal, Canada. He loves to write about programming and open source subjects.