{"id":21155428,"url":"https://github.com/nuhptr/vue-academind","last_synced_at":"2026-04-30T00:34:14.504Z","repository":{"id":273493630,"uuid":"650434308","full_name":"nuhptr/vue-academind","owner":"nuhptr","description":"📝✅  Vue 3 from Udemy Academind","archived":false,"fork":false,"pushed_at":"2025-01-22T01:00:56.000Z","size":14490,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-01-30T18:47:36.142Z","etag":null,"topics":["javascript","vuejs","vuejs3","vuex"],"latest_commit_sha":null,"homepage":"","language":"Vue","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"gpl-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/nuhptr.png","metadata":{"files":{"readme":"readme.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2023-06-07T04:14:52.000Z","updated_at":"2025-01-22T02:20:53.000Z","dependencies_parsed_at":"2025-01-21T08:44:45.689Z","dependency_job_id":null,"html_url":"https://github.com/nuhptr/vue-academind","commit_stats":null,"previous_names":["nuhptr/vue-academind","nuhptr/vuejs-udemy"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nuhptr%2Fvue-academind","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nuhptr%2Fvue-academind/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nuhptr%2Fvue-academind/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nuhptr%2Fvue-academind/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/nuhptr","download_url":"https://codeload.github.com/nuhptr/vue-academind/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":245544256,"owners_count":20632786,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["javascript","vuejs","vuejs3","vuex"],"created_at":"2024-11-20T11:18:56.884Z","updated_at":"2026-04-30T00:34:09.476Z","avatar_url":"https://github.com/nuhptr.png","language":"Vue","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Vue From Udemy\n\nVue from basics to advanced concepts by creating 4 awesome interactive web apps, also in script setup and composition API.\n\n![Vue Image](https://github.com/nuhptr/vuejs-udemy/assets/50306963/f52d3f99-669b-4bf1-89a4-2ae4e1b39e87)\n\n## Content\n\nA. Getting Started\n\n-   [x] Vanila javascript\n-   [x] Rebuilding the app with Vue\n\nB. Basics \u0026 Core Concepts\n\n-   [x] [Link](#different-between-watch-computed-and-method) Basics Data Binding\n-   [x] Basics Dynamic Styling\n-   [x] [Link](#event) Basics Event Handling\n\nC. Conditional Rendering \u0026 Lists\n\n-   [x] v-if, v-else, v-else-if\n-   [x] v-show\n-   [x] v-for\n-   [x] lists \u0026 keys\n\nD. Course Project - The Monster Slayer\n\n-   [x] Project Setup\n-   [x] Using Conditionals \u0026 Rendering Lists\n-   [x] Working with CSS Classes\n-   [x] Adding Methods to our App\n-   [x] Adding a \"Attack Monster\" Functionality\n-   [x] Adding a \"Special Attack\" Functionality\n-   [x] Adding a \"Heal Player\" Functionality\n-   [x] Finishing the \"Attack Player\" Functionality\n-   [x] Adding a \"New Game\" Functionality\n-   [x] Adding a \"Log\" Functionality\n\nE. Vue behind the scenes\n\n-   [x] Vue reactivity\n-   [x] vue lifecycle\n-   [x] working with refs\n-   [x] understanding templates\n\nF. Introduction to Components\n\n-   [x] Introducing components\n-   [x] The why?\n-   [x] Multiple vue apps vs multiple components\n\nG. First Vue App\n\n-   [x] [Link](#first-vue-app) Creating a new project\n-   [x] Creating a new component `FriendsContact.vue`\n\nH. Component communication\n\n-   [x] Props\n-   [x] Custom events\n-   [x] Provide \u0026 inject\n\nI. Advanced component usage\n\n-   [x] [Link](#dynamic-component) Dynamic components \u0026 keep-alive\n-   [x] [Link](#teleport) Teleport\n\nJ. Form\n\n-   [x] [Link](#forms) v-model in depth\n-   [x] passing v-model to custom components\n\nK. HTTP Requests\n\n-   [x] [Link](https://firebase.google.com/?hl=id) Firebase as a backend\n-   [x] [Link](https://axios-http.com/docs/intro) Axios for HTTP requests\n\nJ. Single Page Application\n\n-   [x] [Link](https://router.vuejs.org/installation.html) - `bun add vue-router@4` to add router in vue\n\n## Shorthands\n\n-   [x] `v-bind: =\u003e :anyAttribute`\n-   [x] `v-on: =\u003e @anyEvent`\n\n## Notes\n\n### Event\n\nAn event is an action or occurrence recognized by software that may be handled by the software.\n\nA. Event Handler\n\n1. Using `v-on` directive to listen to DOM events and run some JavaScript when they’re triggered.\n2. Using `v-on:submit.prevent` to prevent the default behavior of the event.\n3. Using `v-on:click.once` to trigger the event only once.\n4. Using `v-on:click.stop` to stop the propagation of the event.\n5. Using `v-on:keyup.enter` to trigger the event only when the `enter` key is pressed.\n\nB. Call Function\n\n1. Using `v-on:click=\"functionName\"` to call a function when the event is triggered.\n2. Using `v-on:click=\"functionName($event)\"` to pass the event object to the function.\n3. Using `v-on:click=\"functionName($event, 'value')\"` to pass the event object and a value to the function.\n\nC. Form\n\n1. v-model is a directive that sets up two-way binding between the form input and the component state.\n2. Using `v-model=\"value\"` to bind the input value to the component state.\n3. Using `v-model.number=\"value\"` to convert the input value to a number.\n4. Using `v-model.trim=\"value\"` to trim the input value.\n5. Using `v-model.lazy=\"value\"` to update the value after the change event.\n\nD. Computed Property\n\n1. Computed properties are cached based on their reactive dependencies.\n2. Using `computed` to create a computed property.\n3. Using `computed: { fullName() { return this.firstName + ' ' + this.lastName } }` to create a computed property.\n\n### Different between Watch, Computed, and Method\n\nA. Methods\n\n1. Use with event or data binding\n    - `Gunakan dengan pengikatan peristiwa atau data`\n2. Data binding: method is executed for every 're-render' cycle of component\n    - `Metode dieksekusi untuk setiap siklus 're-render' komponen`\n3. Use for events / data that really needs to be re-evaluated all the time.\n    - `Gunakan untuk peristiwa / data yang benar-benar perlu dievaluasi ulang sepanjang waktu.`\n\nB. Computed\n\n1. Use with data binding\n    - `Gunakan dengan pengikatan data`\n2. Data binding: computed property is only re-evaluated when one of its dependencies has changed\n    - `Pengikatan data: properti yang dihitung hanya dievaluasi ulang ketika salah satu dependensinya telah berubah`\n3. use for data that depends on other data\n    - `Gunakan untuk data yang bergantung pada data lain`\n\nC. Watch\n\n1. Not used directly in template\n    - `Tidak digunakan secara langsung dalam template`\n2. Allows you to run any code in reaction to some changed data\n    - `Memungkinkan Anda menjalankan kode apa pun sebagai reaksi terhadap beberapa data yang berubah`\n3. Use for any non-data update you want to make\n    - `Gunakan untuk pembaruan non-data apa pun yang ingin Anda buat`\n\nD. Things to Know\n\n-   [x] data is variable that holds the data from html\n-   [x] computed is variable that holds the data from html and can be used to manipulate the data\n-   [x] methods is variable that holds the function that can be used to manipulate the data\n\n`but the different between computed and methods is computed is cached and methods is not cached`\n`tetapi perbedaan antara computed dan methods adalah computed di-cache dan methods tidak di-cache`\n\n### First Vue App\n\n-   [x] Create `pnpm install vue@latest [project-name]`\n-   [ ] then you can choose project setting do you want\n-   [x] pnpm install\n-   [x] pnpm dev\n\n### Dynamic Component\n\n-   [x] Dynamic component is a component that can be changed dynamically\n-   [x] Dynamic component can be used to change the component based on the data\n-   [x] Dynamic component can be used to change the component based on the route\n\ne.g:\n\n```javascript\n\u003cmain\u003e\n      \u003ccomponent :is=\"activePage\" /\u003e\n\u003c/main\u003e\n```\n\n### Keep Alive\n\n-   [x] Keep alive is a component that can be used to cache the component\n-   [x] Keep alive can be used to cache the component based on the data\n\n### Teleport\n\n-   [x] Teleport is a component that can be used to move the component to another place\n\n### Forms\n\n-   [x] `v-model.lazy` means that the input's value will be updated after the `change` event is triggered instead of `input` event.\n-   [x] `v-model.number` means that the input's value will be converted to a number type.\n-   [x] `v-model.trim` means that the input's value will be trimmed automatically.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnuhptr%2Fvue-academind","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fnuhptr%2Fvue-academind","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnuhptr%2Fvue-academind/lists"}