Vue 3 Composition API Tutorial #1 - Options API vs Composition API

Показать описание

In this series you’ll learn everything you need to know to get started with Vue 3 & The Composition API. This series is taken from my full Udemy course, "Vue JS 3 Composition API (with Pinia & Vite)".

⬇ Chapters: ⬇

0:00 Introduction
9:00 What is the Composition API?
15:55 Create a Vue Project (with Vite)
18:41 Project Setup
22:31 Options API vs Composition API
24:14 Options API - Data & Methods
26:18 Convert it to Composition API
27:52 Composition API - Data (refs) & Methods
31:19 Script Setup - An Easier Way!

⬇ All videos in this series: ⬇

This is the first video of 8 where I’ll:
- introduce the course
- explain what the composition API is
- show you the core differences between the Options API & the Composition API

Рекомендации по теме

Комментарии

Please Like, Share, Subscribe & Comment - it all helps me create more content!

MakeAppswithDanny

Thank you Danny.

Amazing as always.

Can't wait for the full course

dekebaoe

Dude...you're off the charts with your awesomeness.

Imaginativeone_DF

Hi! Thank you for explaining important topics.

dreammanor_ru

thank you for the useful information related to vue.js

arslonbekroziboyev

As someone who's just learning Vue now and is working on a Quasar project that was scaffolding without the script setup syntax, it was slightly tricky to figure out how to change all my components to use the script setup "sugar" . On the official Vue docs it does claim it improves performance and is easier to read through though

liamconverse

You are the best vue teacher thanks <3

mishenthakshana

with what frequency videos will be adding to playlist?
thanks for your work

romanshvietsov

New tune! I hope your new course does well!

brandonsayring

Hi Danny, in an older video i asked this question. I did not include the code because i was testing this video. Weird things are happening. In you code at timestamp you used "counter.value++" to increment the counter. What's odd are: (1) Howcome you could change the value of a "const"? (2) I used "this.counter++ and it still worked but i thought that this "this" should not be used. The script for HomeView.vue:

<template>
<div class="home">
<button class="btn">-</button>
<span class="counter">{{ counter }}</span>
<button class="btn">+</button>
</div>
</template>

import { defineComponent } from 'vue'

<script>
import { ref, reactive } from 'vue';

export default {
setup() {
const counter = ref('20');

const updateCounter = function (type) {
if (type === '-') {
this.counter--;
} else {
this.counter++;
}
};

return {
counter,

updateCounter,
};
},
};
</script>

truthteachers

I want to be successful like you Danny! I hope, I'll learn from you a lot! Please create course how to create MVP apps and earn like Indie App Developer. Because this is my dream.

SpaceGuideHub