Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/eugenia1984/vue-school

Here you will find all my practices with VUE.js from https://vueschool.io/ and Fernando Herrera
https://github.com/eugenia1984/vue-school

css3 html5 javascript vue vue-router vue3 vuejs

Last synced: 16 days ago
JSON representation

Here you will find all my practices with VUE.js from https://vueschool.io/ and Fernando Herrera

Awesome Lists containing this project

README

        

# VUE SCHOOL

Here you will find my Vue.js practices with [vueschool.io](https://vueschool.io/courses/) and some videos of **Fernando Herrera**.

---

## What you can find?

1. The **01 - Vue.js Fundamentals with the Composition API course** covers:

```
- Introduction to two-way data binding
- Template syntax and expressions
- Vue directives, loops and conditional rendering
- Vue Devtools
- Handling user Inputs
- Handling Events
- Vue.js Methods and Computed Properties
- Attribute Bindings and dynamic classes
```

Creating a to-do app to see all this concepts.

2. **02 - Vue Fundamentals API composition**:

- `v-bind`(`:`)

- directives: `v-if`, `v-else-if`, `v-else`, `v-show`, `v-for`.

- events

3. **03 - Vue Pokemon**: using axios, TypeScript and Composition API to manage data in a Pokemon game. You have 4 options and need to guess the Pokemon name.

![image](https://github.com/user-attachments/assets/94cab2fb-fee5-40fa-91a2-6442ac126ea3)

![image](https://github.com/user-attachments/assets/d125da55-455b-4a56-b513-153ce98b88e9)

4. **04 - Vue.js course for Beginners with CDN** here you will find some Vue.js practice of FreeCodeCamp YouTube videos, learning: `v directives` (`v-model`, `v-show`, `v-if`, `v-else-if`, `v-else`, `v-for`), `v-cloak`, **events** (`@keyup.enter`), **components**, **lifecycle methods**.

5. **05 - Food App** from the same course [Vue.js Course for Beginners ](https://www.youtube.com/watch?v=FXpIoQ_rT_c&t=6s), part 2, creating a food app

7. **07 - Quiz app**: a little quiz app tp practice Vue.js, where I saw:

```
- components
- transition
- props
- methods
- emit
- lifecycle hook: mounted
```

![image](https://github.com/user-attachments/assets/da67d00d-584a-484c-be1e-3e67fb5b6e82)

![image](https://github.com/user-attachments/assets/b575e65d-cfb4-4720-ac6e-3e719a8ed387)

![image](https://github.com/user-attachments/assets/2b79ec77-85cd-4009-9256-b412abb308ea)

---

## TECHNOLOGIES:

- HTML5

- CSS3

- Bootstrap

- AnimateCSS

- JavaScript

- axios

- Pinia

- VUE.js

- Vue toaster

- Git

---

## Commands:

- Start a new project with Vite:

```bash
npm init vue@latest
```

- Go to your new project folder:
```bash
cd
```

- Install dependencies and run it locally at [http://localhost:5173/](http://localhost:5173/):

```bash
npm install
npm run dev
```

---