{ "0EevuyZiyty3X3Jzpjl4y": { "title": "Components", "description": "Components allow us to split the UI into independent and reusable pieces, and think about each piece in isolation.\n\nVisit the following resources to learn more:", "links": [ { "title": "Components Basics", "url": "https://vuejs.org/guide/essentials/component-basics.html", "type": "article" }, { "title": "Components in Depth", "url": "https://vuejs.org/guide/components/registration.html", "type": "article" } ] }, "y9ToYDix-koRbR6FLydFw": { "title": "create-vue", "description": "[create-vue](https://github.com/vuejs/create-vue) is a CLI tool that helps you create a new Vue project with a single command. It is a simple and easy-to-use tool that saves you time and effort when setting up a new Vue project.\n\nLearn more using the following resources:", "links": [ { "title": "Creating a Vue Project", "url": "https://cli.vuejs.org/guide/creating-a-project.html", "type": "article" }, { "title": "Explore top posts about Vue.js", "url": "https://app.daily.dev/tags/vuejs?ref=roadmapsh", "type": "article" } ] }, "VNBRlJkdH6NOOzGXUrbZK": { "title": "Single File Components", "description": "Vue Single-File Components (a.k.a. `*.vue` files, abbreviated as SFC) is a special file format that allows us to encapsulate the template, logic, and styling of a Vue component in a single file.\n\nVisit the following resources to learn more:", "links": [ { "title": "Single File Components", "url": "https://vuejs.org/guide/scaling-up/sfc.html", "type": "article" } ] }, "2HhKifjuDcP3eKpanRMEQ": { "title": "Component Registration", "description": "A Vue component needs to be \"registered\" so that Vue knows where to locate its implementation when it is encountered in a template. There are two ways to register components: global and local.\n\nVisit the following resources to learn more:", "links": [ { "title": "Component Registration", "url": "https://vuejs.org/guide/components/registration.html", "type": "article" } ] }, "raEfI4GLMW2fOucka07VE": { "title": "Props", "description": "If we are building a blog, we will likely need a component representing a blog post. We want all the blog posts to share the same visual layout, but with different content. Such a component won't be useful unless you can pass data to it, such as the title and content of the specific post we want to display. That's where props come in.\n\nProps are custom attributes you can register on a component.\n\nVisit the following resources to learn more:", "links": [ { "title": "Props Basics", "url": "https://vuejs.org/guide/essentials/component-basics.html#passing-props", "type": "article" }, { "title": "Props in Depth", "url": "https://vuejs.org/guide/components/props.html", "type": "article" } ] }, "X0J3ogH3W8EQe68tLfcGL": { "title": "Events", "description": "As we develop our applications we may need to communicate with the parent component in order to notify of some actions e.g. when a user clicks on a button. In order to do this we need to use events.\n\nVisit the following resources to learn more:", "links": [ { "title": "Listening to Events", "url": "https://vuejs.org/guide/essentials/component-basics.html#listening-to-events", "type": "article" }, { "title": "Events in Detail", "url": "https://vuejs.org/guide/components/events.html", "type": "article" } ] }, "swpyZFUO4UO3mW8Bvf1Te": { "title": "v-model", "description": "v-model is a directive that allows you to create two-way data bindings on form input, textarea, and select 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": "Vue.js Guide", "url": "https://vuejs.org/guide/components/v-model.html#component-v-model", "type": "article" } ] }, "4S5fVFsFDMbq05ld7n0sF": { "title": "Attribute Inheritance", "description": "Attribute inheritance aka \"fallthrough attributes\" is a feature of Vue.js that allows you to inherit attributes from a parent component.\n\nVisit the following resources to learn more:", "links": [ { "title": "Fallthrough Attributes", "url": "https://vuejs.org/guide/components/attrs.html", "type": "article" } ] }, "VlcYnTHW5d4J_zLYupvu5": { "title": "Templates", "description": "Vue uses an HTML-based template syntax that allows you to declaratively bind the rendered DOM to the underlying component instance's data. All Vue templates are syntactically valid HTML that can be parsed by spec-compliant browsers and HTML parsers.\n\nVisit the following resources to learn more:", "links": [ { "title": "Template Syntax", "url": "https://vuejs.org/guide/essentials/template-syntax.html", "type": "article" } ] }, "CGdw3PqLRb9OqFU5SqmE1": { "title": "Directives", "description": "Directives are special attributes with the `v-` prefix. Vue provides a number of [built-in directives](https://vuejs.org/api/built-in-directives.html).\n\nVisit the following resources to learn more:", "links": [ { "title": "Directives Documentation", "url": "https://vuejs.org/guide/essentials/template-syntax.html#directives", "type": "article" } ] }, "OpJ2NMKCGXQezpzURE45R": { "title": "API Styles", "description": "Up until Vue 2, there was one way to create components in Vue. With Vue 3, a new methodology was introduced called the Composition API. Now, if we want to make a component in Vue, we have two ways to do it. You might be wondering what the difference is, exactly, so let’s take a look at how the newer Composition API differs from the Vue 2 methodology, which is now known as the Options API\n\nVisit the following resources to learn more:", "links": [ { "title": "The Difference Between the Composition API and Options API in Vue", "url": "https://fjolt.com/article/vue-composition-api-vs-options-api", "type": "article" } ] }, "PPUU3Rb73aCpT4zcyvlJE": { "title": "Options API", "description": "We use Options API in a Vue application to write and define different components. With this API, we can use options such as data, methods, and mounted.\n\nTo state it simply, Options API is an old way to structure a Vue.JS application. Due to some limitations in this API, Composition API was introduced in Vue 3.\n\nVisit the following resources to learn more:", "links": [ { "title": "TypeScript with Options API", "url": "https://vuejs.org/guide/typescript/options-api.html", "type": "article" }, { "title": "Options API Documentation", "url": "https://vuejs.org/api/#options-api", "type": "article" } ] }, "a0qwdQTunxEjQ9A5wpF-q": { "title": "Composition API", "description": "With the release of Vue 3, developers now have access to the Composition API, a new way to write Vue components. This API allows features to be grouped together logically, rather than having to organize your single-file components by function. Using the Composition API can lead to more readable code, and gives the developer more flexibility when developing their applications.\n\nVisit the following resources to learn more:", "links": [ { "title": "TypeScript with Composition API", "url": "https://vuejs.org/guide/typescript/composition-api.html", "type": "article" }, { "title": "Composition API FAQ", "url": "https://vuejs.org/guide/extras/composition-api-faq.html", "type": "article" }, { "title": "Composition API", "url": "https://vuejs.org/api/#composition-api", "type": "article" }, { "title": "Vue 3 Composition API", "url": "https://www.thisdot.co/blog/vue-3-composition-api-ref-and-reactive", "type": "article" }, { "title": "Explore top posts about Vue.js", "url": "https://app.daily.dev/tags/vuejs?ref=roadmapsh", "type": "article" } ] }, "qRm08uDZW-D8QDc-9sPX8": { "title": "App Configurations", "description": "Every application instance exposes a `config` object that contains the configuration settings for that application. You can modify its properties before mounting your application.\n\nVisit the following resources to learn more:", "links": [ { "title": "Official Documentation", "url": "https://vuejs.org/api/application.html#app-config", "type": "article" }, { "title": "official API Documentation", "url": "https://vuejs.org/api/application.html", "type": "article" } ] }, "ftqDoGpwqqWQnu4NQSsMk": { "title": "Rendering Lists", "description": "We can use the `v-for` directive to render a list of items based on an array. The `v-for` directive requires a special syntax in the form of `item in items`, where `items` is the source data array and `item` is an alias for the array element being iterated on.\n\nVisit the following resources to learn more:", "links": [ { "title": "Rendering Lists in Vue.js", "url": "https://vuejs.org/guide/essentials/list.html", "type": "article" } ] }, "1oIt_5OK-t2WaCgaYt9A8": { "title": "Error / Warn Handler", "description": "", "links": [] }, "gihxGgt177BK_EYsAfpx9": { "title": "Global Properties", "description": "", "links": [] }, "f7N4pAp_jBlT8_8owAcbG": { "title": "Performance", "description": "", "links": [] }, "tU4Umtnfu01t9gLlnlK6b": { "title": "Conditional Rendering", "description": "The directive `v-if` is used to conditionally render a block. The block will only be rendered if the directive's expression returns a truthy value.\n\nVisit the following resources to learn more:", "links": [ { "title": "Conditional Rendering", "url": "https://vuejs.org/guide/essentials/conditional.html", "type": "article" } ] }, "NCIzs3jbQTv1xXhAaGfZN": { "title": "v-text", "description": "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.\n\nExample:\n\n \n \n\nVisit the following resources to learn more:", "links": [ { "title": "v-text documentation", "url": "https://vuejs.org/api/built-in-directives.html#v-text", "type": "article" } ] }, "bZxtIBeIfeUcR32LZWrPW": { "title": "v-html", "description": "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.\n\nExample:\n\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 \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 \n\nVisit the following resources for more information:", "links": [ { "title": "v-bind documentation", "url": "https://vuejs.org/api/built-in-directives.html#v-bind", "type": "article" } ] }, "cxu2Wbt306SxM4JKQQqnL": { "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 ``, `