Mari kita bincangkan tentang penggunaan elegan jsx/tsx dalam vue3

Bagaimana untuk menggunakan jsx/tsx secara elegan dalam

vue? Artikel berikut akan memperkenalkan kepada anda penggunaan elegan jsx/tsx dalam vue3. Saya harap ia akan membantu anda!

Saya percaya bahawa react rakan sudah biasa dengan jsx/tsx Kini anda juga boleh menggunakan sintaks vue3 dalam jsx/tsx. [Cadangan berkaitan: tutorial video vuejs]

Pasang pemalam (@vitejs/plugin-vue-jsx)

viteSecara rasmi dengan syarat Pemalam rasmi menyokong penggunaan vue3 dalam jsx/tsx, cuma pasang terus.

yarn add @vitejs/plugin-vue-jsx -D

Selepas pemasangan, masukkan kod dalam vite.config.ts

import vueJsx from "@vitejs/plugin-vue-jsx";

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

Selepas konfigurasi, anda boleh menggunakannya dalam projekjsx/tsx

1. Interpolasi

Interpolasi jsx/tsx adalah sama dengan interpolasi dalam sintaks templat vue, menyokong ungkapan Javascript yang sah, seperti: a b, a || 5...

Cuma dalam jsx/tsx, pendakap berganda {{}} telah ditukar kepada pendakap tunggal {}

// vue3模板语法
<span>{{ a + b }}</span>

// jsx/tsx
<span>{ a + b }</span>

2. Pengikat kelas dan gaya

Terdapat dua cara untuk mengikat nama kelas, menggunakan rentetan templat atau menggunakan tatasusunan.

• Gunakan rentetan templat untuk memisahkan dua nama kelas dengan ruang

// 模板字符串
<div>header</div>
//数组
<div>header</div>

Pengikatan gaya memerlukan penggunaan pendakap berganda

const color = 'red'
const element = <sapn>style</sapn>

3. Paparan bersyarat

• Hanya arahan v-show dikekalkan dalam jsx/tsx, tiada arahan v-if
• Gunakan if/else dan tiga Semua ungkapan objek boleh dilaksanakan

   setup() {
       const isShow = false
       const element = () => {
           if (isShow) {
               return <span>我是if</span>
           } else {
               return <span>我是else</span>
           }
       }
       return () => (
           <div>
               <span>我是v-show</span>
               {
                   element()
               }
               {
                   isShow ? <p>我是三目1</p> : <p>我是三目2</p>
               }
           <div>
       )
   }<h2 data-id="heading-4"><strong> 4. Paparan senarai </strong></h2>
<p>Begitu juga, tiada arahan <code>v-for</code> dalam jsx/tsx, dan senarai perlu diberikan. Kita hanya perlu menggunakan kaedah tatasusunan Js <code>map</code> </p>
<pre class="brush:php;toolbar:false">setup() {
   const listData = [
       {name: 'Tom', age: 18},
       {name: 'Jim', age: 20},
       {name: 'Lucy', age: 16}
   ]
   return () => (
       <div>
           <div>
               <span>姓名</span>
               <span>年龄</span>
           </div>
           {
               prop.listData.map(item => {
                   return <div>
                       <span>{item.name}</span>
                       <span>{item.age}</span>
                   </div>
               })
           }
       </div>
   )
}

5. digunakan untuk mengikat peristiwa Ia juga merupakan tanda kurung tunggal , tetapi mengikat acara tidak diawali dengan

, tetapi ditukar kepada

Contohnya: acara klik ialah

• {}@on Jika anda perlu menggunakan pengubah suai peristiwa, anda perlu menggunakan kaedah onClick Kaedah

  menerima dua parameter Parameter pertama ialah peristiwa terikat, dan parameter kedua ialah peristiwa yang perlu digunakan.

• withModifierswithModifiers修饰符

  6 v-model

setup() {
    const clickBox = val => {
        console.log(val)
    }
    return () => (
        <div> clickBox('box1')}>
            <span>我是box1</span>
            <div> clickBox('box2')}>
                <span>我是box2</span>
                <div> clickBox('box3'), ['stop'])}>我是box3</div>
            </div>
        </div>
    )
}

jsx/tsx menyokong sintaks v-model

<.>7. slot

// 正常写法
<input> // vue
<input> // jsx

// 指定绑定值写法
<input> // vue
<input> // jsx

// 修饰符写法
<input> // vue
<input> // jsx

Tentukan slot

Tiada tag

dalam jsx/tsx, anda perlu gunakan

untuk menentukan slot Atau gunakan fungsi

Fungsi persediaan menerima dua parameter secara lalai 1. props 2. konteks ctx yang mengandungi slot, attrs, emit, dll.

slot{}renderSlotGunakan slot

Anda boleh menggunakan slot

import { renderSlot } from "vue"
export default defineComponent({
    // 从ctx中解构出来 slots
    setup(props, { slots }) {
        return () => (
            <div>
                { renderSlot(slots, 'default') }
                { slots.title?.() }
            </div>
        )
    }
})

8. Gunakan tsx untuk melaksanakan komponen rekursif - fungsi utama menu

v-slots ialah Menu yang dijana

import Vslot from './slotTem'
export default defineComponent({
    setup() {
        return () => (
            <div>
                <vslot> {
                        return <p>我是title插槽</p>
                    },
                    default: () => {
                        return <p>我是default插槽</p>
                    }
                }} />
            </vslot>
</div>
        )
    }
})

dijana secara automatik mengikut maklumat penghalaan Kesannya adalah seperti berikut adalah seperti berikut. Jika anda perlu mengawal kebenaran, tambahkannya sendiri dalam

maklumat penghalaan, dan kemudian kawal sendiri dalam

(Video pembelajaran. perkongsian:

pembangunan bahagian hadapan web

,

Video pengaturcaraan asas)