Lesson 1: Introduction to Vue3 and TypeScript Flashcards

1
Q
const message: string = "Hello Vue3!";
console.log(message);
A

โค้ดนี้ประกาศตัวแปร message ที่มีประเภทข้อมูลเป็น string และแสดงข้อความ “Hello Vue3!” บนคอนโซล

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
2
Q
const num: number = 10;
const result: string = num.toFixed(2);
A

โค้ดนี้จะเกิดข้อผิดพลาดเนื่องจาก result ถูกกำหนดให้เป็น string แต่ num.toFixed(2) คืนค่าประเภท string ซึ่งไม่ตรงกับการกำหนด

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
3
Q

Vue CLI คืออะไร?

A

Vue CLI เป็นเครื่องมือที่ใช้ในการสร้างและตั้งค่าโปรเจค Vue อย่างรวดเร็ว รวมถึงรองรับ TypeScript และการตั้งค่าที่ซับซ้อนต่างๆ

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
4
Q

อะไรคือ Composition API ใน Vue3?

A

Composition API เป็นวิธีการใหม่ในการจัดการกับโค้ดที่ใช้ร่วมกันใน Vue3 ช่วยให้โค้ดมีความยืดหยุ่นและเรียบง่ายขึ้นเมื่อเทียบกับ Options API

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
5
Q

import { ref } from ‘vue’;

export default {
setup() {
const count = ref<number>(0);
return { count };
}
};</number>

A

โค้ดนี้ใช้ Composition API โดยสร้างตัวแปร count ด้วย ref ที่มีประเภทเป็น number และคืนค่า count เพื่อใช้ในเทมเพลต

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
6
Q

let isDone: boolean = false;

A

โค้ดนี้ประกาศตัวแปร isDone ที่มีประเภทข้อมูลเป็น boolean และกำหนดค่าเริ่มต้นเป็น false

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
7
Q

const user: { name: string, age: number } = { name: ‘John’, age: 30 };

A

โค้ดนี้ประกาศตัวแปร user ซึ่งเป็นออบเจกต์ที่มีชื่อ (name) เป็น string และอายุ (age) เป็น number

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
8
Q

อะไรคือ Ref ใน Vue3?

A

Ref ใน Vue3 ใช้เพื่อสร้างตัวแปรที่มีการติดตามการเปลี่ยนแปลงค่า ทำให้การเปลี่ยนแปลงค่านั้นมีผลกับ DOM โดยตรง

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
9
Q

const greet = (name: string): string => {
return Hello, ${name}!;
};

A

ฟังก์ชัน greet รับพารามิเตอร์ name ที่เป็น string และคืนค่าข้อความทักทายพร้อมกับชื่อที่ได้รับ

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
10
Q

อะไรคือ setup ใน Vue3?

A

setup เป็นฟังก์ชันพิเศษที่ใช้ใน Composition API สำหรับการกำหนดค่าต่างๆ ของคอมโพเนนต์ก่อนการเรนเดอร์

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
11
Q

import { ref } from ‘vue’;

export default {
setup() {
const message = ref<string>('Hello Vue3!');
return { message };
}
};</string>

A

โค้ดนี้ใช้ Composition API เพื่อสร้างตัวแปร message ที่ใช้ ref และมีประเภทเป็น string โดยมีค่าเริ่มต้นเป็น ‘Hello Vue3!’

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
12
Q

type User = {
name: string;
age: number;
};

A

โค้ดนี้สร้าง type ชื่อ User ซึ่งเป็นออบเจกต์ที่มี name เป็น string และ age เป็น number

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
13
Q

การใช้ ref กับ number ใน Vue3 TypeScript ทำอย่างไร?

A

คุณสามารถใช้ ref<number> เพื่อสร้างตัวแปรที่มีการติดตามค่าแบบ number ใน Composition API</number>

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
14
Q

Vue3 รองรับการใช้ TypeScript ได้อย่างไร?

A

Vue3 รองรับ TypeScript โดยมีการบูรณาการ API ที่ใช้ TypeScript ได้อย่างสมบูรณ์ เช่น การใช้ ref, computed, และ watch กับ TypeScript

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
15
Q

อะไรคือ ref ใน Vue3 และทำงานอย่างไร?

A

ref เป็นวิธีการประกาศตัวแปรใน Composition API เพื่อให้ Vue สามารถติดตามการเปลี่ยนแปลงของตัวแปรนั้น และทำการอัปเดต DOM เมื่อค่ามีการเปลี่ยนแปลง

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
16
Q

let age: number | null = null;
age = 25;

A

ตัวแปร age ถูกกำหนดให้มีประเภทเป็น number หรือ null ซึ่งค่าเริ่มต้นคือ null และสามารถเปลี่ยนเป็น 25 ซึ่งเป็น number ได้