Vue3中的JSX語法：更靈活的模板寫法-Vue.js-PHP中文網

Vue3中的JSX語法：更靈活的模板寫法

WBOY

發布： 2023-06-18 14:21:11

原創

1438 人瀏覽過

Vue3中的JSX語法：更靈活的模板寫法

Vue是當下最受歡迎的前端框架之一，它不僅具備響應式的資料綁定，還具備了元件化的能力。在Vue3中，官方引入了JSX語法，這種語法以其直觀且靈活的特性，對於Vue3的用戶來說，將會帶來全新的模板寫法。

那麼，什麼是JSX語法呢？其實JSX是一種JS的簡寫，類似模板語言，在程式碼中直接書寫HTML結構，不只支援DOM元素，也支援元件。 JSX是一個不斷流行的創新，它不斷地改進了前端工程化的經驗，Vue3中也將JSX引入了其模板寫法中。

Vue3中的JSX語法，被稱為“Vue3 jsx”，和React中的JSX語法非常類似，但是為了更好地配合Vue的特性，Vue3中的JSX語法又有了一些不同的特點。我們可以透過建立一個單一檔案元件來展示Vue3中JSX語法的使用。

<template>
  <div class="box">
    <h1>{{ title }}</h1>
    <p>这是一个用Vue3 JSX编写的组件。</p>
    <button onClick={ handleClick }>点击我！</button>
  </div>
</template>

<script>
import { defineComponent } from 'vue'

export default defineComponent({
  data() {
    return {
      title: 'Vue3 JSX',
    }
  },
  methods: {
    handleClick() {
      alert('Clicked!')
    }
  }
})
</script>

<style scoped>
.box {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}
</style>

登入後複製

我們可以看到，在Vue3中使用JSX語法，我們可以在元件中透過import { defineComponent } from 'vue'導入defineComponent方法，這是Vue3中新加入的方法，指定元件實例。同時，我們定義了元件實例的data、methods等屬性，在元件模板中，我們可以使用雙括號{{}}來綁定數據，也可以透過函數名稱來綁定方法。

同樣，Vue3中也支援元件的嵌套，我們可以結合Vue3的元件化思想，像下面一樣引入新的元件：

<template>
  <div class="box">
    <h1>{{ title }}</h1>
    <p>这是一个用Vue3 JSX编写的组件。</p>
    <button onClick={ handleClick }>点击我！</button>
    <child-component></child-component>
  </div>
</template>

<script>
import { defineComponent } from 'vue'
import ChildComponent from './child-component'

export default defineComponent({
  data() {
    return {
      title: 'Vue3 JSX',
    }
  },
  methods: {
    handleClick() {
      alert('Clicked!')
    }
  },
  components: {
    ChildComponent
  }
})
</script>

<style scoped>
.box {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}
</style>

登入後複製

可以看到，在使用JSX語法時，建立子元件只需在元件模板中新增一個標籤，然後在元件的components配置中引入即可。

總結一下，在Vue3中使用JSX語法，我們可以達到以下優勢：