Getting Started

Vuejs

We are starting with a basic HTML and cdn links to set up a basic workflow

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Getting Started Vuejs</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
    <div id="root">
        {{hello}}
    </div>

   <script>
     var app = new Vue({
         el:"#root",
         data:{
            hello:"Getting started with vue"
         }
     })

   </script>
</body>
</html>

How the above code works?

  1. We included a cdn link of vuejs in the head tag
  2. created a div element with id root.
  3. script tag with Vue constructor.

el: It means which element Vue needs to target on the dom.

data: an Internal state that vue manages.

At final we added {{hello}} inside the root element because vue used double curly braces for data binding.

That’s it we successfully created the first vuejs app.