Vue 3 JSX：从零开始的全面指南

2024-01-18 09:41:22

Vue 3 JSX 入门：全面指南

简介

Vue 3 JSX 是一种语法扩展，它将 JavaScript 和 XML（JSX）结合在一起，用于构建 Vue.js 组件。它提供了类似于 HTML 的简洁语法，使组件定义更加高效和易于维护。

JSX 语法

JSX 语法的基本结构为：

<组件名 属性列表>子组件</组件名>

例如：

<div id="app">
  <h1>Hello World!</h1>
</div>

详细用例

1. 基本组件

import { defineComponent } from 'vue'

const MyComponent = defineComponent({
  template: '<p>Hello World!</p>'
})

export default MyComponent

2. 属性

import { defineComponent } from 'vue'

const MyComponent = defineComponent({
  props: {
    name: String,
    age: Number
  },
  template: `<p>Hello, my name is {{ name }} and I am {{ age }} years old.</p>`
})

export default MyComponent

3. 事件

import { defineComponent } from 'vue'

const MyComponent = defineComponent({
  methods: {
    onClick() {
      console.log('Button clicked!')
    }
  },
  template: `<button @click="onClick">Click me!</button>`
})

export default MyComponent

4. 数据绑定

import { defineComponent } from 'vue'

const MyComponent = defineComponent({
  data() {
    return {
      count: 0
    }
  },
  template: `<button @click="count++">{{ count }}</button>`
})

export default MyComponent

5. 生命周期钩子

import { defineComponent } from 'vue'

const MyComponent = defineComponent({
  mounted() {
    console.log('Component mounted!')
  },
  updated() {
    console.log('Component updated!')
  },
  beforeDestroy() {
    console.log('Component destroyed!')
  },
  template: '<p>Hello World!</p>'
})

export default MyComponent

6. 组合 API

import { defineComponent, ref } from 'vue'

const MyComponent = defineComponent({
  setup() {
    const count = ref(0)
    const increment = () => {
      count.value++
    }
    return {
      count,
      increment
    }
  },
  template: `<button @click="increment">{{ count }}</button>`
})

export default MyComponent

7. 状态管理

import { defineComponent } from 'vue'

const MyComponent = defineComponent({
  data() {
    return {
      count: 0
    }
  },
  template: `<button @click="count++">{{ count }}</button>`
})

export default MyComponent

8. 方法

import { defineComponent } from 'vue'

const MyComponent = defineComponent({
  methods: {
    onClick() {
      console.log('Button clicked!')
    }
  },
  template: `<button @click="onClick">Click me!</button>`
})

export default MyComponent

9. 属性

import { defineComponent } from 'vue'

const MyComponent = defineComponent({
  props: {
    name: String,
    age: Number
  },
  template: `<p>Hello, my name is {{ name }} and I am {{ age }} years old.</p>`
})

export default MyComponent

10. 插槽

import { defineComponent } from 'vue'

const MyComponent = defineComponent({
  template: `<div><slot /></div>`
})

export default MyComponent

11. 路由

import { createRouter, createWebHistory } from 'vue-router'
import Home from './Home.vue'
import About from './About.vue'

const router = createRouter({
  history: createWebHistory(),
  routes: [
    {
      path: '/',
      component: Home
    },
    {
      path: '/about',
      component: About
    }
  ]
})

export default router

12. 表单

import { defineComponent } from 'vue'

const MyComponent = defineComponent({
  data() {
    return {
      name: '',
      age: 0
    }
  },
  template: `
    <form @submit.prevent="submit">
      <input v-model="name" placeholder="Name">
      <input v-model="age" placeholder="Age">
      <button type="submit">Submit</button>
    </form>
  `,
  methods: {
    submit() {
      console.log(this.name, this.age)
    }
  }
})

export default MyComponent

13. 动画

import { defineComponent } from 'vue'

const MyComponent = defineComponent({
  template: `<div :class="['fade', 'in']">Hello World!</div>`
})

export default MyComponent

14. 过渡

import { defineComponent } from 'vue'

const MyComponent = defineComponent({
  template: `<transition name="fade"><div>Hello World!</div></transition>`
})

export default MyComponent