Vue is a very powerful framework but one of its strengths is that it is very lightweight and easy to pick up. As a matter of fact, in the first recipe you will build a simple but functioning program in minutes, with no setup required
Creating a Vue Instance
Every Vue application starts by creating a new Vue instance with the Vue function:
var vm = new Vue ({
// options
})
Below the code display "Hello World" with Vue.js. The objective here is how Vue manipulates your webpage and how data binding works.
In the JavaScript section, write:
new Vue ({e1: '#app'})
In the HTMLquadrant, we create the:
<div id="app">
{{ message }}
</div>
new Vue ({e1: '#app'}) will instantiate a new Vue instance. It accepts an options object as a parameter. This object is central in Vue, and defines and controls data and behavior. It contains all the information needed to create Vue instances and components. In our case, we only specified the el option which accepts a selector or an element as an argument. The #app parameter is a selector that will return the element in the page with app as the identifier. For example, in a page like this:
<!DOCTYPE html>
<html lang="en">
<head>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body
<div id="app"><h1>{{ message }}</h1></div>
<script>
new Vue ({
e1: '#app',
data: {
message: 'Hello World'
}
})
</script>
</body>
</html>
