0Pricing
Vue Academy · บทเรียน

JSX ใน Vue 3 ด้วย Vite

@vitejs/plugin-vue-jsx, JSX pragma, คอมโพเนนต์แบบฟังก์ชัน และข้อแลกเปลี่ยนระหว่าง JSX กับเทมเพลต

JSX ใน Vue 3 ด้วย Vite เป็นบทเรียน Vue Academy ฟรีบน CoddyKit นี่คือบทเรียนที่ 2 จากทั้งหมด 4 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน Vue Academy และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส Vue Academy มีบทเรียนทั้งหมด 4 บทเรียน

JSX ใน Vue 3

JSX ช่วยให้คุณเขียนไวยากรณ์คล้ายมาร์กอัปภายใน JavaScript ซึ่งจะถูกคอมไพล์เป็นการเรียกใช้ h Vue 3 รองรับ JSX ผ่านปลั๊กอิน Babel เฉพาะที่เชื่อมเข้ากับ Vite

การติดตั้งปลั๊กอิน

แพ็กเกจอย่างเป็นทางการคือ @vitejs/plugin-vue-jsx ให้ติดตั้งเป็นการพึ่งพาสำหรับการพัฒนา ร่วมกับปลั๊กอิน Vue ปกติ

npm install -D @vitejs/plugin-vue-jsx

การกำหนดค่า vite.config.ts

เพิ่ม vueJsx() ลงในอาร์เรย์ plugins ใน vite.config.ts ต้องระบุไว้ในรายการเพื่อให้ Vite แปลงไฟล์ JSX

import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";
import vueJsx from "@vitejs/plugin-vue-jsx";

export default defineConfig({
  plugins: [vue(), vueJsx()]
});

นามสกุลไฟล์ .tsx

คอมโพเนนต์ที่เขียนด้วย JSX ใช้นามสกุล .tsx (หรือ .jsx) ปลั๊กอินจะประมวลผลเฉพาะไฟล์ที่ใช้นามสกุลเหล่านี้

// Greeting.tsx
export default () => <div>Hello</div>;

คอมโพเนนต์แบบฟังก์ชัน

คอมโพเนนต์ที่เรียบง่ายที่สุดคือฟังก์ชันลูกศรที่คืนค่าองค์ประกอบ JSX คลาสและข้อความจะปรากฏในลักษณะเดียวกับ HTML

const Comp = () => <div class="box">text</div>;

export default Comp;

class ไม่ใช่ className

ต่างจาก React ตรงที่ Vue JSX ใช้ class ไม่ใช่ className เช่นเดียวกันกับ for ที่ใช้กับป้ายกำกับ

const Card = () => (
  <div class="card">
    <label for="name">Name</label>
  </div>
);

ค่าแบบไดนามิก

ฝังนิพจน์ไว้ในวงเล็บปีกกา รีแอ็กทีฟรีฟจะอ่านค่าด้วย .value ภายในส่วนของการเรนเดอร์

import { ref } from "vue";

export default () => {
  const count = ref(0);
  return () => <span>Count: {count.value}</span>;
};

ตัวจัดการเหตุการณ์ที่ใช้ camelCase

ตัวรับฟังใช้คำนำหน้า on ในรูปแบบ camelCase เช่น onClick, onInput, onMouseenter โดยตัวจัดการคืฟังก์ชัน

const Button = () => (
  <button onClick={() => alert("hi")}>
    Click
  </button>
);

การเรนเดอร์แบบมีเงื่อนไข

JSX ไม่มี v-if ให้ใช้ตัวดำเนินการสามส่วนหรือนิพจน์เชิงตรรกะเพื่อสร้างองค์ประกอบตามเงื่อนไข

const View = (props) => (
  <div>
    {props.loading ? <p>Loading...</p> : <p>Done</p>}
  </div>
);

การเรนเดอร์รายการ

แทนที่ v-for ด้วย map และกำหนด key ให้แต่ละองค์ประกอบเช่นเดียวกับในเทมเพลต

const List = (props) => (
  <ul>
    {props.items.map((item) => (
      <li key={item.id}>{item.text}</li>
    ))}
  </ul>
);

การใช้ defineComponent กับพร็อพส์

สำหรับพร็อพส์ที่มีชนิดข้อมูลและวงจรชีวิต ให้ห่อหุ้มตรรกะของคุณด้วย defineComponent ฟังก์ชัน setup จะคืนค่าฟังก์ชันเรนเดอร์ที่คืนค่า JSX

import { defineComponent } from "vue";

export default defineComponent({
  props: { title: String },
  setup(props) {
    return () => <h1>{props.title}</h1>;
  }
});

ตรวจสอบความเข้าใจ

ปลั๊กอินใดที่เปิดใช้ JSX ในโปรเจกต์ Vue 3 Vite และต้องเพิ่มปลั๊กอินนั้นไว้ที่ใด

สรุปทบทวน

เปิดใช้ JSX ใน Vue 3 ได้โดยเพิ่ม vueJsx() จาก @vitejs/plugin-vue-jsx ลงในอาร์เรย์ปลั๊กอินของ Vite และเขียนคอมโพเนนต์ในไฟล์ .tsx ให้ใช้ class ไม่ใช่ className ใช้ตัวจัดการ onClick แบบ camelCase และใช้ defineComponent เมื่อต้องการพร็อพส์ที่มีชนิดข้อมูล

คำถามที่พบบ่อย

บทเรียน “JSX ใน Vue 3 ด้วย Vite” ฟรีหรือไม่

ใช่ — ข้อความเต็มของ “JSX ใน Vue 3 ด้วย Vite” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส Vue Academy ให้อัปเกรดเป็น CoddyKit PRO คอร์ส Vue Academy มีบทเรียนทั้งหมด 4 บทเรียน

คุณจะเรียนรู้อะไรในบทเรียน “JSX ใน Vue 3 ด้วย Vite”

@vitejs/plugin-vue-jsx, JSX pragma, คอมโพเนนต์แบบฟังก์ชัน และข้อแลกเปลี่ยนระหว่าง JSX กับเทมเพลต คุณปฏิบัติ Vue Academy ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน

คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน Vue Academy หรือไม่

ไม่จำเป็นต้องมีประสบการณ์มาก่อน Vue Academy บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 2 จากทั้งหมด 4 บทเรียน

บทเรียน “JSX ใน Vue 3 ด้วย Vite” ใช้เวลานานแค่ไหน

บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย

ฉันเขียนและรันโค้ดในบทเรียน Vue Academy นี้ได้ไหม

ได้ บทเรียน Vue Academy ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ

บทเรียนทั้งหมดในหลักสูตรนี้

  1. เจาะลึกฟังก์ชัน h()
  2. JSX ใน Vue 3 ด้วย Vite
  3. คอมโพเนนต์แบบไดนามิกด้วยฟังก์ชัน render
  4. รูปแบบคอมโพเนนต์ลำดับสูง (HOC)
← กลับไปที่ Vue Academy