Intro to Vue
What is?
Vue.js is an Model View viewmodel javascript framework that has different optional tools for building user interfaces and single page applications. Vue.js allow you to extend basic HTML with html attributes called directives which adds extra functionality to the html. This directives are provided by Vue.js by default or can be defined by user.
Vue.js Directives
In Vue.js a directive is a type of token/indentifier that tells vue.js code to do something to the DOM/Documet Object Model.
Directive simple syntax :
1
|
<html-element prefix-directive="expression"></html-element>
|
Usage example
1
|
<h1 id='heading1' v-text='heading_1'></h1>
|
This can also be written using double braces as placeholders for output data like :
1
2
3
|
<h1 id='heading1'>
{{ heading_1 }}
</h1>
|
In the first example looking at [ v-text=‘heading_1’ ], the prefix ‘v’ is default similar to
AngularJS ‘ng’ its purpose is to tell Vue.js library that the
HTML attribute is Vue.js attribute. The ‘text’ part of the
‘v-text’ is the directive and its meant to tell Vue.js that it should change textContent of the HTML element, with what ‘heading_1’ expression presents/contains.
The same goes for the second example except for example 2 ‘heading_1’ is directly defined whithin HTML heading attribute textContent area. Some of the directives are
v-if, v-el, v-pre, v-on, v-ref, v-transition, etc.
Comparison
Simple examples to show usage of Vue.js and normal html alternative.
1) Add text to heading 1 :
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
|
<!-- Vue.js -->
<html>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<body>
<h1 id='heading1'>{{ heading_1 }}</h1>
<script>
new Vue({
el: '#heading1',
data: {heading_1: 'Vue.js'}
})
</script>
</body>
</html>
|
Vue() creates an instance of a Vue.js object. ‘el’ object key expects its value to be an ‘id’ of an html element and the ‘data’ key, value should be data that will be applied to the specified vue.js expression whithin the html code.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
|
<!-- html and javascript -->
<html>
<body>
<h1 id='heading1'></h1>
<script>
document.getElementById('heading1').innerHTML= 'Vue.js';
</script>
</body>
</html>
|
2) Write input box reply to the dom :
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
|
<!-- Vue.js -->
<html>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<body>
<h2>Vue.js</h2>
<div id="my_name">
<p>What is your name? : {{ reply }}</p>
<input v-model="reply">
</div>
<script>
new Vue({
el: '#my_name',
data: {reply: ''}
})
</script>
</body>
</html>
|
The
‘v-model’ directive binds the value of HTML elements to application data, and updates the dom when any changes occur.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
|
<!-- html and javascript -->
<html>
<body>
<h2>Vue.js</h2>
<p>What is your name? :
<span id="my_name"></span>
</p>
<input type='text' id='reply_box' onkeyup='show_reply()'>
<script>
function show_reply(){
document.getElementById('my_name').innerHTML=document.getElementById('reply_box').value;
}
</script>
</body>
</html>
|
3) Show items list :
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
|
<!-- Vue.js -->
<html>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<body>
<h2>Vue.js</h2>
<div id="app">
<ul>
<li v-for="ingredients in coffee_reciepe">
{{ ingredients }}
</li>
</ul>
</div>
<script>
new Vue({
el: '#app',
data: {
coffee_reciepe: ['water','sugar','milk']
}
})
</script>
</body>
</html>
|
The ‘v-for’ directive loops through array of items.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
|
<!-- html and javascript -->
<html>
<body>
<h2>Vue.js</h2>
<ul id="app"></ul>
<script>
var coffee_reciepe = ['water','sugar','milk'];
var ingredient_item_list = '';
coffee_reciepe.forEach(function(ingredient){
ingredient_item_list = ingredient_item_list + '<li>' + ingredient + '</li>';
});
document.getElementById('app').innerHTML = ingredient_item_list;
</script>
</body>
</html>
|
Resorce links
Vue.js Guide.
Vue.js api.
Components basics .
Template syntax .
Vue.js cli.
Vue.js examples .