Create simple web application in vue.js

Vue.js

is light weight library for building interactive interfaces. Its easy to integrate it with other libraries and frameworks. Vuejs is used to develop single page application. It enables application to shift UI and changing URL without reloading page. Vuejs is mostly simalar to angular and vuejs is also simple than angular. Its also easy for beginners to learn.

Directory Structure
Below is directory structure the tutorial.

js/
---vue.js
css/
---style.css
index.html

index.php

Include vue.js script in html file.

<script src="vue.js"></script>

Create new instance of with constructor function.

1

2

3

4

5

6

newVue({

el:"#my-app",

data:{

message:"Howdy"

}

});

Full source

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

<body>

<div id="my-app">

<h2>

{{message}}

</h2>

<inputv-model="message">

<br/>

<div>

<div class="title">JSON</div>

{{$data|json}}

</div>

</div>

<script src="vue.js"></script>

<script>

newVue({

el:"#my-app",

data:{

message:"Howdy"

}

});

</script>

</body>

{{message}} prints value of message. v-model directive is used for two way data binding of form element.Kindly replace your id with my-app. Directive v-model added to input control for input and h2 tag to show output. {{ $data|json }} will output the data in json format.

Categories

Sgeek is how to blog maintained by Gopal Joshi. Gopal is Software Engineer and Blogger by passion and love to building web applications. Sgeek will share How To Technology Stuff, Tutorials of various technologies such as PHP, Symfony, Python, NodeJS, Frameworks and more.