Vue3使用JSX的方法实例(笔记自用)

目录

• 1. Vue3 中 JSX 的基本应用
• 1.1 在 .vue 文件中使用 jsx
• 1.2 .jsx文件格式
• 2. JSX 和 template 的区别
• 2.1 插值
• 2.2 自定义组件
• 2.3 属性和事件
• 2.4 条件和循环 
• 3. JSX 和 slot （体会 JSX 的优越性）
• 总结 

1. Vue3 中 JSX 的基本应用

• 使用 .jsx 格式文件和 definecomponent
• defineComponent 可传入 SETUP 函数 或 组件的配置
• 插值使用单括号 { }

1.1 在 .vue 文件中使用 jsx

// 父 template>
      div class="home">
        JSXDemo1 />
      /div>
    /template>
     script>
import JSXDemo1 From '@/components/JSXDemo1.vue'export default {
  name: 'HomeView',  components: {
    JSXDemo1  }
}
    /script>
     // JSXDemo1.vue script>
import {
 ref }
 from 'vue'export default {
  setup () {
        const countRef = ref(200)     const render = () =>
 {
          return p>
DEMO1--{
countRef.value}
    /p>
 // jsx就是js语法，所以要加 .value    }
    return render  }
}
    /script>
    

1.2 .jsx文件格式

// 父组件 import {
 defineComponent, ref }
     from 'vue'import JSXChild from './JSXChild.jsx' export default defineComponent(() =>
 {
     // 传入 setup 函数  const countRef = ref(300)   const render = () =>
 {
        return >
          p>
DEMO2--{
countRef.value}
    /p>
      JSXChild a={
countRef.value + 100}
    >
    /JSXChild>
        />
  }
  return render }
) // 子组件 JSXChild.jsx import {
 defineComponent }
 from 'vue' export default defineComponent({
 // 传入组件配置  PRops: ['a'],  setup (props) {
        const render = () =>
 {
          return >
            p>
child {
props.a}
    /p>
          />
    }
    return render  }
}
)

2. JSX 和 template 的区别

• 语法上有很大区别：
• JSX 本质就是 js 代码，可以使用 js 的任何能力
• template 只能嵌入简单的 js 表达式，其他需要指令，如 v-if
• JSX 已经成为 ES 规范，template 还是 Vue 自家规范
• 本质是相同的：
• 都会被编译为 js 代码（render 函数）

2.1 插值

• template 使用双括号 { { } }
• jsx 使用单括号 { }

// template template>
      p>
{
{
 name }
}
 -- {
{
 age }
}
    /p>
    /template>
     // jsx const render = () =>
 {
        return >
            p>
child {
props.a}
    /p>
        />
}
    

2.2 自定义组件

• template 组件名使用时可改变大小写或是驼峰，jsx 不可更改
• 引入动态参数，template使用冒号+参数名（:msg='msg'）,jsx 不需要冒号

// template template>
      div class="home">
        watch-effect :msg="msgRef"/>
      /div>
    /template>
     script>
import {
 ref }
 from 'vue'import WatchEffect from '@/components/WatchEffect.vue'export default {
  name: 'HomeView',  components: {
    WatchEffect,  }
,  setup () {
    const msgRef = ref('123')    return {
        msgRef    }
  }
}
    /script>
 // jsx 组件名称不可变，要和引入名字保持一致 import {
 defineComponent, ref }
     from 'vue'import JSXChild from './JSXChild.jsx' export default defineComponent(() =>
 {
      const countRef = ref(300)   const render = () =>
 {
        return >
          p>
DEMO2--{
countRef.value}
    /p>
      JSXChild a={
countRef.value + 100}
    >
    /JSXChild>
        />
  }
  return render}
    )

2.3 属性和事件

// jsx 属性和事件的写法一样 import {
 defineComponent, ref }
     from 'vue'import JSXChild from './JSXChild.jsx' export default defineComponent(() =>
 {
  const countRef = ref(300)   function onChange () {
    console.LOG('onChange')  }
      const render = () =>
 {
        return >
          p>
DEMO2--{
countRef.value}
    /p>
      JSXChild a={
countRef.value + 100}
 change={
onChange}
    >
    /JSXChild>
        />
  }
  return render}
    )

2.4 条件和循环 

// template v-if template>
      p v-if="flagRef">
    template demo/p>
      button @click="changeFlagRef">
    click/button>
    /template>
    script>
import {
 ref }
 from 'vue'export default {
  setup () {
    const flagRef = ref(true)     function changeFlagRef () {
      flagRef.value = !flagRef.value    }
     return {
      flagRef,      changeFlagRef    }
  }
}
    /script>
     // jsx &
    &
符号判断 import {
 defineComponent, ref }
     from 'vue'import JSXChild from './JSXChild.jsx' export default defineComponent(() =>
 {
  const flagRef = ref(true)   function changeFlagRef () {
    flagRef.value = !flagRef.value  }
       const render = () =>
 {
        return >
      p onClick={
changeFlagRef}
    >
DEMO2--{
flagRef.value.toString()}
    /p>
      {
    flagRef.value &
    &
 JSXChild a={
flagRef.value}
    >
    /JSXChild>
}
        />
  }
  return render}
    )

// template v-for template>
      ul>
        li v-for="ITem in state.list" :key="item">
{
{
 item }
}
    /li>
      /ul>
    /template>
    script>
import {
 reactive }
 from 'vue'export default {
  setup () {
    const state = reactive({
      list: ['a', 'b', 'c']    }
)     return {
      state    }
  }
}
    /script>
 // jsx 数组 .map 函数 import {
 defineComponent, reactive }
     from 'vue' export default defineComponent(() =>
 {
  const state = reactive({
    list: ['a1', 'b1', 'c1']  }
    )   const render = () =>
 {
        return >
          ul>
        {
    state.list.map(item =>
     li>
{
item}
    /li>
)}
          /ul>
        />
  }
  return render}
    )

3. JSX 和 slot （体会 JSX 的优越性）

• slot 是 Vue 发明的概念，为了完善 template 的能力
• slot 一直是 Vue 初学者的“噩梦”，特别是：作用域 slot
• 但使用 JSX 将很容易理解，因为 JSX 本质就是 js

总结 

到此这篇关于Vue3使用JSX的文章就介绍到这了,更多相关Vue3使用JSX内容请搜索以前的文章或继续浏览下面的相关文章希望大家以后多多支持！

• 详解在vue3中使用jsx的配置以及一些小问题
• vue3无法使用jsx的问题及解决
• vue3+vite使用jsx和tsx详情
• 为什么推荐使用JSX开发Vue3
• 如何在vue3中优雅的使用jsx/tsx详解
• Vite创建Vue3项目及Vue3使用jsx详解
• vue3 中使用 jsx 开发的详细过程
• 一文详解如何在Vue3+Vite中使用JSX

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！