# Vue 3 with TypeScript Tutorial 筆記

### #1 Introduction
[#1 Tutorial 教程](https://www.youtube.com/watch?v=JfI5PISLr9w&list=PL4cUxeGkcC9gCtAuEdXTjNVE5bbMFo5OD&index=1)
[#1 Practice 練習](https://codesandbox.io/s/relaxed-tree-r8bbuz)
＊ 引入defineComponent的方式

import { defineComponent } from "vue";

export default defineComponent({
  name: "App",
  components: {},
 }); 

---

### #2 Vue Components using TypeScript

[#2 Tutorial 教程](https://www.youtube.com/watch?v=UDAVj_vlAr8&list=PL4cUxeGkcC9gCtAuEdXTjNVE5bbMFo5OD&index=2)
[#2 Practice 練習](https://codesandbox.io/s/interesting-blackburn-qkxmq7?file=/src/App.vue)

＊按鈕 button @click="changeName('zelda')"
去呼叫 methods 方式下 的 changeName 函式
[#2 重構](https://codesandbox.io/s/reverent-blackwell-mn7ocs)

---

### #3 Composition API & TypeScript
[#3 Tutorial 教程](https://www.youtube.com/watch?v=H-hXNym2CK8&list=PL4cUxeGkcC9gCtAuEdXTjNVE5bbMFo5OD&index=3)
[#3 Practice 練習](https://codesandbox.io/s/morning-wind-m3zkwo?file=/src/App.vue)

定義資料型別介面

interface Job {
  title: string;
  location: string;
  salary: number;
  id: string;
}
export default Job;

資料陣列的傳遞

import Job from "./types/Job";

 setup() {
    const jobs = ref<Job[]>([
        // Data Arrays
    ]);
    return { jobs };
    },

[#3 重構](https://codesandbox.io/s/mystifying-varahamihira-mx7w1z)

---

### #4 Types & Props
[#4 Tutorial 教程](https://www.youtube.com/watch?v=GdWrYfDfqRE&list=PL4cUxeGkcC9gCtAuEdXTjNVE5bbMFo5OD&index=4)
[#4 Practice 練習](https://codesandbox.io/s/elegant-pateu-w2yqjx?file=/src/App.vue)

JobsList組件 及使用v-for 迴圈傳值

//src/components/JobsList.vue
<template>
  <div class="job-list">
    <ul>
      <li v-for="job in jobs" :key="job.id">
        <h2>{{ job.title }} in {{ job.location }}</h2>
        
...

vue引入組件

//App.vue
<template>
    <JobList :jobs="jobs" />
</template>

import JobList from "./components/JobsList.vue";
...
components: { JobList },

[#4 重構](https://codesandbox.io/s/vigilant-forest-41xrnq)

---

### #5 Functions
[#5 Tutorial 教程](https://www.youtube.com/watch?v=usSBsgWNUZk&list=PL4cUxeGkcC9gCtAuEdXTjNVE5bbMFo5OD&index=5)
[#5 Practice 練習](https://codesandbox.io/s/elastic-lake-nqkblr)

按鈕點擊資料排序

//App.vue
<div class="order">
    <button @click="handleClick('title')">order by title</button>
    ...
</div>

<JobList :jobs="jobs" :order="order" />

import OrderTerm from "./types/OrderTerm";

...
const order = ref<OrderTerm>("title");

const handleClick = (term: OrderTerm) => {
    order.value = term;
};

return { jobs, handleClick, order };

[](https://)

---

### #6 Computed Values
[#6 Tutorial 教程](https://www.youtube.com/watch?v=TwN36HU-NQM&list=PL4cUxeGkcC9gCtAuEdXTjNVE5bbMFo5OD&index=6)
[#6 Practice 練習](https://codesandbox.io/s/fervent-babycat-o5vevx)

/src/components/JobsList.vue

<script lang="ts">
import { computed, defineComponent, PropType } from "vue";
import Job from "../types/Job";
import OrderTerm from "../types/OrderTerm";

export default defineComponent({
  props: {
    jobs: {
      required: true,
      type: Array as PropType<Job[]>,
    },
    order: {
      required: true,
      type: String as PropType<OrderTerm>,
    },
  },
  setup(props) {
    const OrderedJobs = computed(() => {
      return [...props.jobs].sort((a: Job, b: Job) => {
        return a[props.order] > b[props.order] ? 1 : -1;
      });
    });
    return { OrderedJobs };
  },
});

[](https://)

---

### #7 Forms & Inputs
[#7 Tutorial 教程](https://www.youtube.com/watch?v=6n4myAZwdxg&list=PL4cUxeGkcC9gCtAuEdXTjNVE5bbMFo5OD&index=7)
[#7 Practice 練習](https://codesandbox.io/s/snowy-haze-zenbic)

---
END