From 8dd03f027256bc2e89f32562844f7c752f640093 Mon Sep 17 00:00:00 2001
From: sickpoitew <109254578+Poitew@users.noreply.github.com>
Date: Mon, 16 Sep 2024 15:08:19 +0200
Subject: [PATCH] Added content to some Vue topics. (#7127)

* Added v-bind description

* Added v-for description

* Added v-text description

* Added v-html description

* Added v-once description

* Added v-pre description

* Added v-else-if description
---
 .../content/v-bind@cuM9q9vYy8JpZPGeBffd1.md   | 22 +++++++++++++++-
 .../v-else-if@a9caVhderJaVo0v14w8WB.md        |  7 ++++-
 .../content/v-for@3ftwRjQ9e1-qDT9BV53zr.md    | 26 ++++++++++++++++++-
 .../content/v-html@bZxtIBeIfeUcR32LZWrPW.md   | 15 ++++++++++-
 .../content/v-once@5k9CrbzhNy9iiS6ez2UE6.md   | 22 +++++++++++++++-
 .../content/v-pre@mlsrhioiEkqnRIL6O3hNa.md    | 21 ++++++++++++++-
 .../content/v-text@NCIzs3jbQTv1xXhAaGfZN.md   | 16 +++++++++++-
 7 files changed, 122 insertions(+), 7 deletions(-)

diff --git a/src/data/roadmaps/vue/content/v-bind@cuM9q9vYy8JpZPGeBffd1.md b/src/data/roadmaps/vue/content/v-bind@cuM9q9vYy8JpZPGeBffd1.md
index ef258b0ed..0bbc2fe26 100644
--- a/src/data/roadmaps/vue/content/v-bind@cuM9q9vYy8JpZPGeBffd1.md
+++ b/src/data/roadmaps/vue/content/v-bind@cuM9q9vYy8JpZPGeBffd1.md
@@ -1 +1,21 @@
-# v-bind
\ No newline at end of file
+# v-bind
+
+The `v-bind` directive dynamically binds an HTML attribute to data.
+
+The shorthand for this directive is `:`
+
+Example:
+```vue
+<script setup>
+  import { ref } from 'vue';
+  const image_url = ref("path/to/image.png")
+</script>
+
+<template>
+  <img :src="image_url" />
+</template>
+```
+
+Visit the following resources for more information:
+
+- [@official@v-bind documentation](https://vuejs.org/api/built-in-directives.html#v-bind)
diff --git a/src/data/roadmaps/vue/content/v-else-if@a9caVhderJaVo0v14w8WB.md b/src/data/roadmaps/vue/content/v-else-if@a9caVhderJaVo0v14w8WB.md
index ada0725f1..df0155b29 100644
--- a/src/data/roadmaps/vue/content/v-else-if@a9caVhderJaVo0v14w8WB.md
+++ b/src/data/roadmaps/vue/content/v-else-if@a9caVhderJaVo0v14w8WB.md
@@ -1 +1,6 @@
-# v-else-if
\ No newline at end of file
+# v-else-if
+
+This directive is used to add additional conditions to a v-if and v-else block.
+
+Visit the following resources to learn more:
+- [@official@v-else-if Documentation](https://vuejs.org/api/built-in-directives.html#v-else-if)
diff --git a/src/data/roadmaps/vue/content/v-for@3ftwRjQ9e1-qDT9BV53zr.md b/src/data/roadmaps/vue/content/v-for@3ftwRjQ9e1-qDT9BV53zr.md
index 8028a2c52..7fc85deea 100644
--- a/src/data/roadmaps/vue/content/v-for@3ftwRjQ9e1-qDT9BV53zr.md
+++ b/src/data/roadmaps/vue/content/v-for@3ftwRjQ9e1-qDT9BV53zr.md
@@ -1 +1,25 @@
-# v-for
\ No newline at end of file
+# v-for
+
+The `v-for` directive is used to render an HTML element, a block of elements, or even a component based on an array, an object, or a set number of times.
+When using this directive it is important to assign a unique key to each item to avoid issues and improve perfomance.
+This directive follows the `item in items` syntax.
+
+Example:
+```vue
+<script setup>
+  import { ref } from 'vue';
+  const foods = ref([
+    {id: 1, name: "apple"},
+    {id: 2, name: "pear"},
+    {id: 3, name: "pizza"}
+  ]);
+</script>
+
+<template>
+  <p v-for="food in foods" :key="food.id">{{ food.name }}</p>
+</template>
+```
+
+Visit the following resources to learn more:
+
+- [@official@v-for documentation](https://vuejs.org/guide/essentials/list#v-for)
diff --git a/src/data/roadmaps/vue/content/v-html@bZxtIBeIfeUcR32LZWrPW.md b/src/data/roadmaps/vue/content/v-html@bZxtIBeIfeUcR32LZWrPW.md
index fa347fda9..87a9a351b 100644
--- a/src/data/roadmaps/vue/content/v-html@bZxtIBeIfeUcR32LZWrPW.md
+++ b/src/data/roadmaps/vue/content/v-html@bZxtIBeIfeUcR32LZWrPW.md
@@ -1 +1,14 @@
-# v-html
\ No newline at end of file
+# v-html
+
+The `v-thml` directive is similar to the `v-text` directive, but the difference is that `v-html` renders its content as HTML. This means that if you pass an HTML element it will be rendered as an element and not plain text. Since the content is render as HTMl, it can pose a security risk if the content contains malicius JavaScript code. For this reason you should never use this directive in combination with user input, unless the input is first properly sanitized.
+
+Example:
+```vue
+<template>
+  <p v-html="'<h1>Text</h1>'"></p>
+</template>
+```
+
+Visit the following resources to learn more:
+
+- [@official@v-html documentation](https://vuejs.org/api/built-in-directives.html#v-html)
diff --git a/src/data/roadmaps/vue/content/v-once@5k9CrbzhNy9iiS6ez2UE6.md b/src/data/roadmaps/vue/content/v-once@5k9CrbzhNy9iiS6ez2UE6.md
index 32cf19dd5..03706cd40 100644
--- a/src/data/roadmaps/vue/content/v-once@5k9CrbzhNy9iiS6ez2UE6.md
+++ b/src/data/roadmaps/vue/content/v-once@5k9CrbzhNy9iiS6ez2UE6.md
@@ -1 +1,21 @@
-# v-once
\ No newline at end of file
+# v-once
+
+The `v-once` directive makes an HTML element render only once, skipping every future update.
+
+Example:
+```vue
+<script setup>
+  import { ref } from 'vue';
+  const input = ref("Some Text");
+</script>
+
+<template>
+  <input v-model="input">
+  <p v-once>{{ input }}</p>
+</template>
+```
+In this example the **p** element will not change its text even if the input variable is changed through the **input** element.
+
+Visit the following resources to learn more:
+
+- [@official@v-once documentation](https://vuejs.org/api/built-in-directives.html#v-once)
diff --git a/src/data/roadmaps/vue/content/v-pre@mlsrhioiEkqnRIL6O3hNa.md b/src/data/roadmaps/vue/content/v-pre@mlsrhioiEkqnRIL6O3hNa.md
index 6c58998f0..aa157f58a 100644
--- a/src/data/roadmaps/vue/content/v-pre@mlsrhioiEkqnRIL6O3hNa.md
+++ b/src/data/roadmaps/vue/content/v-pre@mlsrhioiEkqnRIL6O3hNa.md
@@ -1 +1,20 @@
-# v-pre
\ No newline at end of file
+# v-pre
+
+The `v-pre` directive makes an element render its content as-is, skipping its compilation. The most common use case is when displaying raw mustache syntax.
+
+Example:
+```vue
+<script setup>
+  import { ref } from 'vue';
+  const text = ref("Some Text")
+</script>
+
+<template>
+  <p v-pre >{{ text }}</p>
+</template>
+```
+The **p** element will display: `{{ text }}` and not `Some Text` because the compilation is skipped.
+
+Visit the following resources to learn more:
+
+- [@official@v-pre Documentation](https://vuejs.org/api/built-in-directives.html#v-pre)
diff --git a/src/data/roadmaps/vue/content/v-text@NCIzs3jbQTv1xXhAaGfZN.md b/src/data/roadmaps/vue/content/v-text@NCIzs3jbQTv1xXhAaGfZN.md
index 2665e99c3..0533bc86c 100644
--- a/src/data/roadmaps/vue/content/v-text@NCIzs3jbQTv1xXhAaGfZN.md
+++ b/src/data/roadmaps/vue/content/v-text@NCIzs3jbQTv1xXhAaGfZN.md
@@ -1 +1,15 @@
-# v-text
\ No newline at end of file
+# v-text
+
+The `v-text` directive is used to set the textContent property of an element. It's important to note that when using this directive it will overwrite the HTML content inside the element.
+The expected input is a string, so it's important to wrap any text in single quotes.
+
+Example:
+```vue
+<template>
+  <p v-text="'I am some text'"></p>
+</template>
+```
+
+Visit the following resources to learn more:
+
+- [@official@v-text documentation](https://vuejs.org/api/built-in-directives.html#v-text)