Text'\">
\n \n \n\nVisit the following resources to learn more:", + "description": "The `v-html` 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 malicious JavaScript code. For this reason you should never use this directive in combination with user input, unless the input is first properly sanitized.\n\nExample\n-------\n\n \nText'\">
\n \n \n\nVisit the following resources to learn more:", "links": [ { - "title": "v-html documentation", + "title": "v-html Documentation", "url": "https://vuejs.org/api/built-in-directives.html#v-html", "type": "article" } @@ -264,10 +281,10 @@ }, "_TlbGTKFCMO0wdLbC6xHX": { "title": "v-show", - "description": "`v-show` is similar to `v-if` in that it allows you to conditionally render components. However, it does not remove the component from the DOM and merely toggles its `display` CSS property to be `hidden`. It also does not work with `v-else-if` oe `v-else`.\n\nPrefer `v-show` over `v-if` if the component's visibility needs to change often, and `v-if` if not.\n\nVisit the following resources to learn more:", + "description": "`v-show` is similar to `v-if` in that it allows you to conditionally render components. However, it does not remove the component from the DOM and merely toggles its `display` CSS property to be `hidden`. It also does not work with `v-else-if` oe `v-else`. Prefer `v-show` over `v-if` if the component's visibility needs to change often, and `v-if` if not.\n\nVisit the following resources to learn more:", "links": [ { - "title": "Vue Conditional Rendering Docs", + "title": "Vue Conditional Rendering", "url": "https://vuejs.org/guide/essentials/conditional.html#v-show", "type": "article" } @@ -275,7 +292,7 @@ }, "xHj3W9Ig3MVuVlGyXchaP": { "title": "v-if", - "description": "Conditionally render an element or a template fragment based on the truthy-ness of the expression value.\n\nWhen a `v-if` element is toggled, the element and its contained directives / components are destroyed and re-constructed. If the initial condition is falsy, then the inner content won't be rendered at all.\n\nVisit the following resources to learn more:", + "description": "Conditionally render an element or a template fragment based on the truthy-ness of the expression value. When a `v-if` element is toggled, the element and its contained directives / components are destroyed and re-constructed. If the initial condition is falsy, then the inner content won't be rendered at all.\n\nExample\n-------\n\nVue is awesome!
\n \n\nVisit the following resources to learn more:", "links": [ { "title": "v-if Documentation", @@ -289,7 +306,7 @@ "description": "The `v-else` conditionally renders an element or a template fragment as a function in case the `v-if` does not fulfil the condition.\n\nVisit the following resources for more information:", "links": [ { - "title": "v-else documentation", + "title": "v-else Documentation", "url": "https://vuejs.org/api/built-in-directives.html#v-else", "type": "article" } @@ -308,10 +325,10 @@ }, "3ftwRjQ9e1-qDT9BV53zr": { "title": "v-for", - "description": "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.\n\nExample:\n\n \n \n \n{{ food.name }}
\n \n \n\nVisit the following resources to learn more:", + "description": "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 performance. This directive follows the `item in items` syntax.\n\nExample\n-------\n\n \n \n \n{{ food.name }}
\n \n \n\nVisit the following resources to learn more:", "links": [ { - "title": "v-for documentation", + "title": "v-for Documentation", "url": "https://vuejs.org/guide/essentials/list#v-for", "type": "article" } @@ -319,15 +336,21 @@ }, "hVuRmhXVP65IPtuHTORjJ": { "title": "v-on", - "description": "", - "links": [] + "description": "The v-on directive is placed on an element to attach an event listener. To attach an event listener with v-on we need to provide the event type, and any modifier, and a method or expression that should run when that event occurs.\n\nVisit the following resources to learn more:", + "links": [ + { + "title": "v-on Directive", + "url": "https://www.w3schools.com/vue/ref_v-on.php", + "type": "article" + } + ] }, "cuM9q9vYy8JpZPGeBffd1": { "title": "v-bind", - "description": "The `v-bind` directive dynamically binds an HTML attribute to data.\n\nThe shorthand for this directive is `:`\n\nExample:\n\n \n \n \n{{ input }}
\n \n \n\nIn this example the **p** element will not change its text even if the input variable is changed through the **input** element.\n\nVisit the following resources to learn more:", + "description": "The `v-once` directive makes an HTML element render only once, skipping every future update.\n\nExample\n-------\n\n \n \n \n \n{{ input }}
\n \n \n\nIn this example the **p** element will not change its text even if the input variable is changed through the **input** element.\n\nVisit the following resources to learn more:", "links": [ { - "title": "v-once documentation", + "title": "v-once Documentation", "url": "https://vuejs.org/api/built-in-directives.html#v-once", "type": "article" } @@ -368,7 +391,7 @@ }, "mlsrhioiEkqnRIL6O3hNa": { "title": "v-pre", - "description": "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.\n\nExample:\n\n \n \n \n{{ text }}
\n \n \n\nThe **p** element will display: `{{ text }}` and not `Some Text` because the compilation is skipped.\n\nVisit the following resources to learn more:", + "description": "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.\n\nExample\n-------\n\n \n \n \n{{ text }}
\n \n \n\nThe **p** element will display: `{{ text }}` and not `Some Text` because the compilation is skipped.\n\nVisit the following resources to learn more:", "links": [ { "title": "v-pre Documentation", @@ -379,10 +402,10 @@ }, "RrSekP8Ub01coegMwLP6a": { "title": "v-cloak", - "description": "The v-cloak directive is used to prevent the uncompiled Vue template from being visible while the Vue instance is still loading. It temporarily hides the content until Vue has finished compiling the template\n\nThe v-cloak directive remains until the component instance is mounted.\n\n\n {{ message }}\n
\n \n\nCombined with CSS, you can hide elements with v-cloak until they are ready.\n\n [v-cloak] {\n display: none;\n }\n \n\nThe `` will not be visible until the compilation is done.\n\nVisit the following resources to learn more:",
+ "description": "The v-cloak directive is used to prevent the uncompiled Vue template from being visible while the Vue instance is still loading. It temporarily hides the content until Vue has finished compiling the template. The v-cloak directive remains until the component instance is mounted.\n\n
\n {{ message }}\n
\n \n\nCombined with CSS, you can hide elements with v-cloak until they are ready.\n\n [v-cloak] {\n display: none;\n }\n \n\nThe `` will not be visible until the compilation is done.\n\nVisit the following resources to learn more:",
"links": [
{
- "title": "v-cloak documentation",
+ "title": "v-cloak Documentation",
"url": "https://vuejs.org/api/built-in-directives.html#v-cloak",
"type": "article"
}
@@ -393,7 +416,7 @@
"description": "Optimizing rendering is crucial for ensuring a smooth and efficient user experience across all your frontend projects. Sluggish webpages can lead to frustration for users, and potentially cause them to entirely abandon your web application. This issue comes up most often in single-page applications (SPAs), where the entirety of your application is loaded within a single webpage, and updates to it are handled dynamically without needing a full reload of the webpage.\n\nLearn more from the following resources:",
"links": [
{
- "title": "Optimizing rendering in Vue",
+ "title": "Optimizing Rendering in Vue",
"url": "https://blog.logrocket.com/optimizing-rendering-vue/",
"type": "article"
}
@@ -401,8 +424,14 @@
},
"dxwKfBxd5KYVkfEPMdHp-": {
"title": "Debugging",
- "description": "",
- "links": []
+ "description": "Debugging in Vue.js involves identifying and fixing issues in your Vue applications. It’s an essential part of the development process, and there are several tools and techniques you can use to effectively debug your Vue code.\n\nVisit the following resources to learn more:",
+ "links": [
+ {
+ "title": "Debugging Documentation",
+ "url": "https://vuejs.org/v2/cookbook/debugging-in-vscode.html",
+ "type": "article"
+ }
+ ]
},
"WiGG9_4G5y-AVA9byw6_g": {
"title": "Lifecycle Hooks",
@@ -448,12 +477,18 @@
},
"NfB3HlZ3uwYK5xszvV50b": {
"title": "Input Bindings",
- "description": "",
- "links": []
+ "description": "Input bindings are a way to bind user input to a component's data. This allows the component to react to user input and update its state accordingly. Input bindings are typically used with form elements such as text inputs, checkboxes, and select dropdowns.\n\nVisit the following resources to learn more:",
+ "links": [
+ {
+ "title": "Input Bindings",
+ "url": "https://vuejs.org/guide/essentials/forms",
+ "type": "article"
+ }
+ ]
},
"gMFndBcrTC6FtGryqN6dX": {
"title": "v-model",
- "description": "The v-model directive in Vue.js is used for creating two-way data bindings on form input elements, such as , , and . This means that the data can be updated in the component when the user inputs something, and the UI will update if the data in the component changes.",
+ "description": "The v-model directive in Vue.js is used for creating two-way data bindings on form input elements, such as ``, `