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
|
new Vue({
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>
<input v-model="message">
<br/>
<div>
<div class="title">JSON</div>
{{ $data|json }}
</div>
</div>
<script src="vue.js"></script>
<script>
new Vue({
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.