{ "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 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": "vuejs/create-vue", "url": "https://github.com/vuejs/create-vue", "type": "opensource" }, { "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.\n\nVisit the following resources to learn more:", "links": [ { "title": "Directives Documentation", "url": "https://vuejs.org/guide/essentials/template-syntax.html#directives", "type": "article" }, { "title": "Built-in Directives", "url": "https://vuejs.org/api/built-in-directives.html", "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. To 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": "Vue.js Documentation", "url": "https://vuejs.org/api/application.html#app-config", "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": "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" } ] }, "gihxGgt177BK_EYsAfpx9": { "title": "Global Properties", "description": "Global properties allows you to add properties or methods that can be accessed throughout your application. This is particularly useful for sharing functionality or data across components without the need to pass props explicitly.\n\nVisit the following resources to learn more:", "links": [ { "title": "Vue.js Global Properties", "url": "https://blog.logrocket.com/vue-js-globalproperties/", "type": "article" } ] }, "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 \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-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 \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`. 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", "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. 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\n

Vue is awesome!

\n \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 performance. This directive follows the `item in items` syntax.\n\nExample\n-------\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": "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. The shorthand for this directive is `:`\n\nExample\n-------\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 ``, `