-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathknowledge.html
70 lines (69 loc) · 4.76 KB
/
knowledge.html
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
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
<html>
<head>
<title>VueJS practices</title>
<script type="text/javascript" src="js/vue.js"></script>
<link rel="stylesheet" href="css/bootstrap.min.css" />
</head>
<body>
<div id="raiz" class="container-fluid">
<div class="row">
<div id="directives-list" class="col-xs-12 col-xl-6">
<h1>VueJS <span class="badge badge-secondary">Directives</span></h1>
<ul class="list-group">
<li class="list-group-item" v-for="directive in directives">
<h3>{{directive.name}} </h3>
<p>{{directive.description}}</p>
</li>
</ul>
</div>
<div id="reservedWords-list" class="col-xs-12 col-xl-6">
<h1>VueJS <span class="badge badge-secondary">Reserved words</span></h1>
<ul class="list-group">
<li class="list-group-item" v-for="resword in reservedWords">
<h3>{{resword.name}} </h3>
<p>{{resword.description}}</p>
</li>
</ul>
</div>
<div id="vuecompparts-list" class="col-xs-12 col-xl-6">
<h1>VueJS <span class="badge badge-secondary">Vue Object parts</span></h1>
<ul class="list-group">
<li class="list-group-item" v-for="part in vueComponentParts">
<h3>{{part.name}} </h3>
<p>{{part.description}}</p>
</li>
</ul>
</div>
</div>
</div>
<script>
new Vue({
el: "#raiz",
data: {
directives: [
{name: "v-for", description: "Iterates over a list. It has the format (iterator_variable in list)"},
{name: "v-once", description: "Value renders only once. If there are further changes, value is not updated for this element"},
{name: "v-on", description: "For binding a function to an event, like click or input"},
{name: "v-html", description: "Prints value of property without escaping it, for printing HTML directly in webpage. Use it at own discretion"},
{name: "v-bind", description: "Binds an html tag attribute value with a value in one of the elements of data object. If value changes, it is refreshed"},
{name: "v-model", description: "Enables 2 way data binding between input elements and Vue data element. It is the same as using v-bind and v-on:input"},
],
reservedWords: [
{name: "$event", description: "Allows you to access event object in case you want to call a function with extra parameters in v-on"},
{name: ".stop", description: "Used as a modifier for events, like mousemove.stop, to stop the propagation of event"},
{name: ".prevent", description: "Used as a modifier for events, like mousemove.prevent, to prevent the execution of event"},
{name: ".enter", description: "Used with a key event, like keypress.enter, to trigger action only when Enter key is pressed. Others can be found in https://vuejs.org/v2/guide/events.html#Key-Modifiers"},
],
vueComponentParts: [
{name: "el", description: "References the HTML element that will be managed by VueJS. For example, #idofelement"},
{name: "data", description: "Used to store all the data for the VueJS component, this data can change"},
{name: "methods", description: "Can contain methods that alter data for VueJS component, but can perform other actions. " +
" If these are used for displaying data, they are executed regardless data has changed."},
{name: "computed", description: "These are triggered when the pieces of data inside of it change, that way it is not executed on each render"},
{name: "watch", description: "The key is an specific tag for a property of data, and it watches that property, so if it changes, method is executed"}
],
},
});
</script>
</body>
</html>