From e9713ceb775cd012f3150cbc5831c9bc5f806cc7 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jo=C3=A3o=20Daniel?= <jotaf.daniel@gmail.com>
Date: Fri, 12 Oct 2018 01:19:52 -0300
Subject: [PATCH] feat: add article for Vue.js Components
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: João Daniel <jotaf.daniel@gmail.com>
---
 .../guide/english/vue/components/index.md     | 68 +++++++++++++++++++
 1 file changed, 68 insertions(+)
 create mode 100644 client/src/pages/guide/english/vue/components/index.md

diff --git a/client/src/pages/guide/english/vue/components/index.md b/client/src/pages/guide/english/vue/components/index.md
new file mode 100644
index 0000000000..4122375940
--- /dev/null
+++ b/client/src/pages/guide/english/vue/components/index.md
@@ -0,0 +1,68 @@
+---
+title: Components
+---
+
+## Components
+
+A classic problem that web developers face when working is HTML duplication, not
+in a simple example such as a list, but sometimes all you want is a "import" to
+be able to use the same code in several different places. Well, Vue.js gives you
+this feature with Components.
+
+Suppose you're developing a landing page for your company's product and you need
+to display the 4 main features of it following the same structure of a card-like
+object, with a icon, a title and a short description.
+
+```javascript
+Vue.component('feature-card', {
+  props: ["iconSrc", "iconAltText", "featureTitle", "featureDescription"],
+  template: `
+    <div class="card">
+      <div class="icon-wrapper">
+        <img
+          class="icon"
+          :src="iconSrc"
+          :alt="iconAltText">
+      </div>
+      <h4 class="title">
+        {{ featureTitle }}
+      </h4>
+      <p class="description">
+        {{ featureDescription }}
+      </p>
+    </div>
+  `
+});
+```
+
+> Note that here we binded the image `src` attribute with another syntax `:src`.
+This changes nothing, it is simply a syntax sugar to `v-bind:src` -- whenever
+you want to bind some attribute to a variable, you can prepend a `:` to the
+attribute name instead of using the full form `v-bind`.
+
+With this code, we did a lot of new things:
+* we created a new component called `feature-card`
+* we defined `feature-card` default **structure** with the `template` attribute
+* we opened a list of properties that that component accept with the `props`
+  list
+
+When we defined the name of the components, whenever we desire to reuse it, we
+can just reference it by using as a tag. In our example, we can use the tag
+`<feature-card>`:
+
+```html
+<div id="app">
+  <feature-card
+    iconSrc="https://freedesignfile.com/upload/2017/08/rocket-icon-vector.png"
+    iconAltText="rocket"
+    featureTitle="Processing speed"
+    featureDescription="Our solution has astonishing benchmarks grades">
+  </feature-card>
+</div>
+```
+
+In this case, we called the `<feature-card>` as it was an existing tag, as well
+as we setted `iconSrc` or `featureTitle` as they were valid attributes. And the
+purpose of Vue.js components is this: increment your toolbox with your own
+tools.
+