Text'\">
\n \n \n\nVisit the following resources to learn more:", "links": [ { "title": "v-html documentation", "url": "https://vuejs.org/api/built-in-directives.html#v-html", "type": "article" } ] }, "_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:", "links": [ { "title": "Vue Conditional Rendering Docs", "url": "https://vuejs.org/guide/essentials/conditional.html#v-show", "type": "article" } ] }, "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:", "links": [ { "title": "v-if Documentation", "url": "https://vuejs.org/api/built-in-directives.html#v-if", "type": "article" } ] }, "0CtAZQcFJexMiJfZ-mofv": { "title": "v-else", "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", "url": "https://vuejs.org/api/built-in-directives.html#v-else", "type": "article" } ] }, "a9caVhderJaVo0v14w8WB": { "title": "v-else-if", "description": "This directive is used to add additional conditions to a v-if and v-else block.\n\nVisit the following resources to learn more:", "links": [ { "title": "v-else-if Documentation", "url": "https://vuejs.org/api/built-in-directives.html#v-else-if", "type": "article" } ] }, "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:", "links": [ { "title": "v-for documentation", "url": "https://vuejs.org/guide/essentials/list#v-for", "type": "article" } ] }, "hVuRmhXVP65IPtuHTORjJ": { "title": "v-on", "description": "", "links": [] }, "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:", "links": [ { "title": "v-once documentation", "url": "https://vuejs.org/api/built-in-directives.html#v-once", "type": "article" } ] }, "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:", "links": [ { "title": "v-pre Documentation", "url": "https://vuejs.org/api/built-in-directives.html#v-pre", "type": "article" } ] }, "RrSekP8Ub01coegMwLP6a": { "title": "v-cloak", "description": "", "links": [] }, "RRPhAxIqvAcjZIcLe_N8-": { "title": "Optimizing Renders", "description": "", "links": [] }, "dxwKfBxd5KYVkfEPMdHp-": { "title": "Debugging", "description": "", "links": [] }, "WiGG9_4G5y-AVA9byw6_g": { "title": "Lifecycle Hooks", "description": "Each Vue component instance goes through a series of initialization steps when it's created - for example, it needs to set up data observation, compile the template, mount the instance to the DOM, and update the DOM when data changes. Along the way, it also runs functions called lifecycle hooks, giving users the opportunity to add their own code at specific stages.\n\nVisit the following resources to learn more:", "links": [ { "title": "Life Cycle Hooks", "url": "https://vuejs.org/guide/essentials/lifecycle.html", "type": "article" }, { "title": "The Lifecycles of Vue.js", "url": "https://dev.to/amolikvivian/the-lifecycles-of-vue-js-lhh", "type": "article" }, { "title": "Explore top posts about React Hooks", "url": "https://app.daily.dev/tags/react-hooks?ref=roadmapsh", "type": "article" } ] }, "PQu4TyJOfCEaafW5th0e4": { "title": "Forms Handling", "description": "You can use the `v-model` directive to create two-way data bindings on form input elements. It automatically picks the correct way to update the element based on the input type.\n\nVisit the following resources to learn more:", "links": [ { "title": "Form Input Bindings", "url": "https://vuejs.org/guide/essentials/forms.html", "type": "article" }, { "title": "A complete guide to forms in Vue.js", "url": "https://blog.logrocket.com/an-imperative-guide-to-forms-in-vue-js-2/", "type": "article" }, { "title": "Vue JS 3 Tutorial - Form Handling", "url": "https://www.youtube.com/watch?v=T-AE-GtSlN4", "type": "video" } ] }, "NfB3HlZ3uwYK5xszvV50b": { "title": "Input Bindings", "description": "", "links": [] }, "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.", "links": [ { "title": "Form Input Bindings", "url": "https://vuejs.org/guide/essentials/forms.html", "type": "article" } ] }, "dSfrFLr8wKkLAOMJwtCTr": { "title": "Modifiers", "description": "", "links": [] }, "4p6Gh2fMPA8hls_mWa5HR": { "title": "Event Handling", "description": "When you build a dynamic website with Vue you'll most likely want it to be able to respond to events. For example, if a user clicks a button, submits a form, or even just moves their mouse, you may want your Vue site to respond somehow.\n\nVisit the following resources to learn more:", "links": [ { "title": "Event Handling in Vue.js", "url": "https://vuejs.org/guide/essentials/event-handling.html", "type": "article" } ] }, "b7iXwtUnELg_ShbCyTrNA": { "title": "Binding Events", "description": "", "links": [] }, "gVahaZNPktQuqdukFEbQH": { "title": "Inline / Method Handlers", "description": "", "links": [] }, "Aaf7eA-5sbAD5Cs1MbdTQ": { "title": "Event Modifiers", "description": "", "links": [] }, "BXw36wqhmi3gExXwFCIBd": { "title": "Key Modifiers", "description": "", "links": [] }, "x0wl2Qz2LTP4Q2tThKAt3": { "title": "Mouse Button Modifiers", "description": "", "links": [] }, "Bx1Atxcf15AEaA1BiSIc6": { "title": "Computed Properties", "description": "In-template expressions are very convenient, but they are meant for simple operations. Putting too much logic in your templates can make them bloated and hard to maintain. Computed properties allow us to simplify the complex logic that includes reactive data.\n\nVisit the following resources to learn more:", "links": [ { "title": "Computed Properties", "url": "https://vuejs.org/guide/essentials/computed.html#computed-properties", "type": "article" } ] }, "Re7tv1U0LxYqE5ShFxQSf": { "title": "Async Components", "description": "In large applications, we may need to divide the app into smaller chunks and only load a component from the server when it's needed. To make that possible, Vue has a `defineAsyncComponent` function.\n\nVisit the following resources to learn more:", "links": [ { "title": "Async Components", "url": "https://vuejs.org/guide/components/async.html", "type": "article" } ] }, "SGsd08ZTu4H76s8cfbCKe": { "title": "Teleport Components", "description": "Sometimes we may run into the following scenario: a part of a component's template belongs to it logically, but from a visual standpoint, it should be displayed somewhere else in the DOM, outside of the Vue application. This is where the `