在Vue3.0中使用JSX的简单入门_vue3 jsx-程序员宅基地

技术标签: Web  vue  js  vue3  javascript  jsx  

JSX

直入正题,vue3 对 jsx 和 ts 的支持更加完善,看一下 vue3 的 jsx 官方文档部分:

非常的简陋了,但是他给我们指引了 vue3 中 jsx 的 babel 转换插件 jsx-next

感兴趣的可以看一下他的 README,下面开始安装使用一下~

安装 jsx-next

实际上 vue-cli 建立的 vue3 项目中已经内置了 jsx 的这个编译插件,如果你不需要自定义配置,是不需要安装就可以即开即用 jsx 的,可谓是非常贴心了。

安装过程如下:

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

安装后在 package.json 看到目前是 rc 状态,还没有正式发布,我们只是简单体验一下。

之后在 babel.config.js 内配置该插件:

module.exports = {
    
  // 这是原来的预设,cli 搭建项目就有的
  presets: [
    '@vue/cli-plugin-babel/preset'
  ],
  // 需要配置的插件
  plugins: ['@vue/babel-plugin-jsx']
}

之后就可以使用 jsx 了!

使用

建立一个 views/Demo.jsx

import {
     defineComponent, ref } from 'vue'

const Demo = defineComponent({
    
  name: 'demo',
  setup (props) {
    
    const input = ref(null)

    const click = (e) => {
    
      console.log(e)
      console.log(input.value)
    }
    return {
    
      click,
      input
    }
  },
  render () {
    
    return (
      <>
        <div>test</div>
        <button onClick={
    this.click}>点击</button>
        <input v-model={
    this.input} placeholder="啊这"/>
      </>
    )
  }

})

export default Demo

demo 的大致框架如上所示,不需要在意上面的 demo 写了什么,只需要在意整体的结构如下:

定义组件

defineComponent() 定义组件,这是为了使得 ts 和 ide 能进行类型推断,从而获得代码提示功能,在配置路由的时候可选用 () => import() 进行懒加载:

{
    
  path: '/demo',
  name: 'demo',
  component: () => import(/* webpackChunkName: "demo" */ '../views/Demo.jsx')
}

注:如果你没有代码提示,那一定是没有使用 defineComponent() ,有了这个东西,你才能获得代码提示。

异步组件

我们手写一个异步组件的使用例子:

import Demo from '../views/Demo'
  // ......
  // 路由
  {
    
    path: '/async',
    name: 'async',
    component: defineAsyncComponent({
    
      // 工厂函数
      loader: Async,
      // 加载异步组件时要使用的组件
      loadingComponent: Demo
    })
  }

这里的 loadingComponent 就是组件 loading 时要显示的内容,而 loader 就是要加载的异步组件。

建立一个 views/Async.jsx

import {
     defineComponent } from 'vue'

const Async = () => new Promise((resolve, reject) => {
    
  setTimeout(() => {
    
    resolve(defineComponent({
    
      render () {
    
        return <div>async component</div>
      }
    }))
  }, 3000)
})

export default Async

这段代码只是把 webpack 给我们的 () => import() 变成手写 Promise 了,在 resolve() 内你可以返回你需要加载的组件,当然我们还要用 defineComponent() 以获得代码提示功能保证 eslint 不报错。

注:

  1. loader 的目标组件必须是返回一个 Promise 的函数,使用 () => import() 可以达到相同的效果(他会使用一个 Promise 帮你包裹组件),这里我们为了主动延时才手写了 Promise
  2. loadingComponent 需要是一个同步组件。

有关更多异步组件 defineAsyncComponent 的选项可以查看官方文档的中文社区翻译版:defineAsyncComponent

setup

定义完组件就是 setup 了,为什么不用 vue2 的 template 呢?那就不是 jsx 了。

有关这部分该如何使用,请看 官方文档 即可。

props, name …

defineComponent 组件块内,完全和 vue3 新语法等同,还可以使用 props 对上层传入进行限制、指定,以及使用 name 等关键词:

const Demo = defineComponent({
    
  name: 'demo',
  props: {
    
    key1: {
    
      type: String,
      required: true
    }
  }
}
render

render 才是 jsx 的核心部分,所有的 jsx 要在此处顶层返回。

和 react 的函数式相比,在 render 内的 jsx ,你还需要使用 this 取得 setup 阶段返回的值。

总结

如果实际体验一下,会发现和 react 的函数式组件还是有天壤之别,Vue 本来就不是为 jsx 而生的,template 它不香吗。

附:

官方 Vue3 文档:Vue3 Guide

民间中文版 Vue3 文档:Vue3 文档

JSX 插件已经内置到 vue-cli 创建的项目中的 issue :这个已经内置到cli 里面去了?

更多 Vue JSX 的用法请看官方 babel 插件的 README :Vue 3 Babel JSX 插件

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/qq_21567385/article/details/108965319

智能推荐

Flink实战3-数据实时写入HBase的Sink方式_flink sink hbase-程序员宅基地

文章浏览阅读5.4k次,点赞3次,收藏26次。背景接入Kafka实时数据经过数据处理写入HBase,后续会应用于类似变量系统以及实时日志中,对于变量系统这类中间需要做实时缓存宽表可能使用HBase连接极其频繁,所以是使用客户端还是Sink的方式就看实际情况而定,具体数据处理后的落库Sink还是比较方便的;摘要关键字Flink,Sink,HBase,数据处理,数据流转设计使用的是Max Well数据源,将业务数据接入Kafka,Flink-Source接入Kafka,中间经过数据流转将数据存储到HBase作实时表;实现说明_flink sink hbase

动态改变title标题_dash 标题-程序员宅基地

文章浏览阅读276次。文章目录动态改变title标题实现效果该上代码了动态改变title标题1、主要用到Vue的自定义指令directive。参考地址: link.实现效果该上代码了一、在main.js引入 // 动态改变title标题 Vue.directive('title', { inserted: function(el, binding) { document.title = binding.value; }, });二、将v-title放在每个文件的根节_dash 标题

使用组件化开发思路替换 SAP Spartacus 的 Logo_替换sap的思路-程序员宅基地

文章浏览阅读299次。简单来说,组件是应用程序的任何部分,可以在逻辑上分组并被视为单一元素,理想情况下可以作为应用程序其余部分的构建块重用。这个组件中可能有其他组件,也可能在其他组件中使用,但每个单独的“组件”都是一个独立的东西。例如,您可能有一个在每个页面上都有 logo 的网站。因此,您可以创建一个“标题组件”,然后您可以为每个页面重用该标题组件,而不是从头开始编写代码。这个标题组件可能包含一个“搜索栏组件”和一个“导航栏”组件,它们是它们自己的独立元素,它们在标题中使用,但也可以在站点的其他地方重用。看个具体的例子:我_替换sap的思路

python界面登录-验证码(三)_pythonui自动化登录验证码-程序员宅基地

文章浏览阅读1.5k次。真的要好好学一下写作了,等好好的有条理的整理自己做过的工作才能方便的进行下一步的使用,能整理好自己的学习的东西才能提高效率,更加明确的进行下一步的工作提高自己的工作效率!!!下一步就是在以下前提下进行网页的登录和课程的查询了:import osimport timefrom bs4 import BeautifulSoup from selenium import webdriv..._pythonui自动化登录验证码

opencv3.1(python3.5)安装_python3.5 opencv-python==3.1.0.0-程序员宅基地

文章浏览阅读7.6k次。1. python管网下载 安装python3.5 (32bit或者64bit)2. 下载 opencv3.1 ( 32bit 或者64bit )opencv_python-3.1.0-cp35-cp35m-win32.whlopencv_python-3.1.0-cp35-cp35m-win_amd64.whl下载链接为:这个链接有多个python的库 numpy_python3.5 opencv-python==3.1.0.0

spring 与hibernate多数据源配置-程序员宅基地

文章浏览阅读89次。Spring2.0.1以后的版本已经支持配置多数据源,并且可以在运行的时候动态加载不同的数据源。通过继承AbstractRoutingDataSource就可以实现多数据源的动态转换。目前做的项目就是需要访问12个数据源,每个数据源的表结构都是相同的,所以要求数据源的变动对于编码人员来说是透明,也就是说同样SQL语句在不同的环境下操作的数据库是不一样的。具体的配置如下:一、首先需要写一个静..._hibernate设置多数据源 parentdatasource

随便推点

自定义CollectionViewCell之-----瀑布流效果_cellcollectionview瀑布流-程序员宅基地

文章浏览阅读1.1k次。本文详细的书写了如何达到瀑布流效果(附图片)_cellcollectionview瀑布流

分布式事务之基础理论(CAP/BASE理论)篇_分布式事务基础理论cap-程序员宅基地

文章浏览阅读346次。一、概述通过前面的学习,我们了解到了分布式事务的基础概念。与本地事务不同的是,分布式系统之所以叫分布式,是因为提供服务的各个节点分布在不同机器上,相互之间通过网络交互。不能因为有一点网络问题就导致整个系统无法提供服务,网络因素成为了分布式事务的考量标准之一。因此,分布式事务需要更进一步的理论支持,接下来,我们先来学习一下分布式事务的CAP理论。在讲解分布式事务控制解决方案之前需要先学习一些基础理论,通过理论知识指导我们确定分布式事务控制的目标,从而帮助我们理解每个解决方案。二、CAP理论CAP是_分布式事务基础理论cap

小程序实现点击按钮回到顶部_微信小程序 topreturnbtn-程序员宅基地

文章浏览阅读526次。按钮样式wxml<view class="topbtn" bindtap="gotopAction" wx:if="{{up_show}}"> <image src="./../../image/topimg.png"></image></view>wxss.topbtn{ position: fixed; width: 120rpx; height: 120rpx; border-radius: 50%; bottom:._微信小程序 topreturnbtn

docker-compose运行ElasticSearch、Kibana、Cerebro_docker-compose elasticsarch kib-程序员宅基地

文章浏览阅读1.1k次。docker-compose.yamlversion: '2.2'services: cerebro: image: lmenezes/cerebro:0.8.4 container_name: cerebro ports: - "9000:9000" command: - -Dhosts.0.host=http://elasticsearch:9200 networks: - es7net kibana: _docker-compose elasticsarch kib

一篇文章快速搞定——deepin搭建java开发环境_deepin jdk-程序员宅基地

文章浏览阅读4.8k次,点赞5次,收藏16次。linux发行版---深度deepin操作系统搭建java开发环境,deepin从入门到放弃系列_deepin jdk

PASCAL VOC 数据集转化为yolo数据集格式_pascalvoc转换成yolov c#-程序员宅基地

文章浏览阅读6.3k次,点赞16次,收藏39次。常常我们拿到的数据集格式是PASCAL VOC的,当我们要用yolo系列的检测算法时,就要将VOC的数据格式转化为yolo所需要的格式。小编就给大家展示转化的过程。_pascalvoc转换成yolov c#

推荐文章

热门文章

相关标签