TSX常见简单入门用法之Vue3+Vite

TSX常见简单入门用法之Vue3+Vite

目录

1.安装tsx

1.安装tsx插件

2.vite.config.ts里的配置

3.tsconfig.json里的配置

2.使用TSX

1.app.vue里的代码

2.app.tsx的代码

注意:

总结

1.安装tsx 1.安装tsx插件 npm install @vitejs/plugin-vue-jsx -D 2.vite.config.ts里的配置 import { defineConfig } from 'vite' import vue from '@vitejs/plugin-vue' import vueJsx from '@vitejs/plugin-vue-jsx' // https://vitejs.dev/config/ export default defineConfig({ plugins: [vue(),vueJsx()], }) 3.tsconfig.json里的配置 { "compilerOptions": { "target": "esnext", "useDefineForClassFields": true, "module": "esnext", "moduleResolution": "node", "strict": true, "jsx": "preserve", "jsxFactory": "h", "jsxFragmentFactory": "Fragment", "sourceMap": true, "resolveJsonModule": true, "isolatedModules": true, "esModuleInterop": true, "lib": ["esnext", "dom"], "skipLibCheck": true, }, "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"], "references": [{ "path": "./tsconfig.node.json" }] }

这三条为配置项 

"jsx": "preserve", "jsxFactory": "h", "jsxFragmentFactory": "Fragment", 2.使用TSX 1.app.vue里的代码 <template> <renderDom title="我是标题" @on-click="getNum"></renderDom> </template> <script setup lang="ts"> import renderDom from "./App"; import { provide, ref } from "vue"; const data = ref(false); provide("flag", data); const getNum = (num: number) => { console.log("我接受到了", num); }; </script> <style> </style> 2.app.tsx的代码 import { ref } from "vue"; let v = ref<string>(""); let flag = ref(false); let arr = ref([0, 1, 2, 3, 4, 5]); // tsx不会自动结构所以该用.value还是要使用 type Props = { title: string; }; const renderDom = (props: Props, ctx: any) => { return ( <div> <button onClick={clickEmit.bind(this,ctx)}>点击emit</button> <h1>{props.title}</h1> <div> <input v-model={v.value} type="text" /> <div> <h1>{v.value}</h1> </div> </div> <div> <div v-show={flag.value}>正确的</div> <div v-show={!flag.value}>错误的</div> </div> {/* <div> <div v-if={flag.value}>正确的</div> <div v-if={!flag.value}>错误的</div> </div> */} {/* 不支持v-if 可用三元表达式去代替 */} <div>{flag.value ? <div>正确的</div> : <div>错误的</div>}</div> {/* 不支持v-for 但可以用map循环去代替 */} {/*不支持v-bind,可以直接绑定数值 */} <div> {arr.value.map((item, i: any) => { return ( <div data-inext={i} onClick={clickIndex.bind(this, i)}> {item} </div> ); })} </div> </div> ); }; const clickIndex = (i: any) => { alert(i); }; const clickEmit=(ctx:any)=>{ ctx.emit('on-click',123) } export default renderDom; 注意:

1.tsx里面写的标签内容是不会自动解构的,所以ref里面的.value还是要加上值才会出来2.tsx里面支持v-show,v-model,但不支持v-bind,v-for,v-if,所以再写这些的时候要更改写法

v-if使用三元表达式

<div>{flag.value ? <div>正确的</div> : <div>错误的</div>}</div>

 v-for通过map函数遍历数组来实现

<div> {arr.value.map((item, i: any) => { return ( <div data-inext={i} onClick={clickIndex.bind(this, i)}> {item} </div> ); })} </div>

v-bind可以直接绑值

<div data-inext={i} onClick={clickIndex.bind(this, i)}>

props和emit使用

1.props

<renderDom title="我是标题" @on-click="getNum"></renderDom>

(app.vue里传值title)

type Props = { title: string; }; const renderDom = (props: Props, ctx: any)

(renderDom里面接收后可以使用,和以前一样)

2.emit

const renderDom = (props: Props, ctx: any)

(拿到上下文)

<button onClick={clickEmit.bind(this,ctx)}>点击emit</button>

(绑定方法)

const clickEmit=(ctx:any)=>{ ctx.emit('on-click',123) }

 (通过emit传值)

(以上为app.tsx文件里面)

<renderDom title="我是标题" @on-click="getNum"></renderDom>

(绑定自定义事件) 

const getNum = (num: number) => { console.log("我收到了", num); };

(拿到值去使用)

(以上为父组件收到并使用)

总结

到此这篇关于TSX常见简单入门用法之Vue3+Vite的文章就介绍到这了,更多相关TSX常见用法内容请搜索易知道(ezd.cc)以前的文章或继续浏览下面的相关文章希望大家以后多多支持易知道(ezd.cc)!

推荐阅读

    vue项目一些常见问题

    vue项目一些常见问题,组件,样式,**样式污染问题**同样的样式不需要在每个组件都复制组件内单独的样式加外层class包裹。加scope。否则只是

    01-Vue项目实战-网易云音乐-准备工作

    01-Vue项目实战-网易云音乐-准备工作,网易,项目,前言在接下来的一段时间,我会仿照网易云音乐,利用Vue开发一个移动端的网易云音乐项目。在做

    01- 第一天 spring boot2.3.1 +vue3.0 后台管理系统的研发

    01- 第一天 spring boot2.3.1 +vue3.0 后台管理系统的研发,自己的,后台,后台框架一直想开发一套完全属于自己的后台,但是18年的时候,曾经答

    Vue项目中 App.vue文件

    Vue项目中 App.vue文件,文件,内容, 在App.vue文件中,定义了一个id为app的div,在这个div板块中放置Helloworld组件,文件内容如下图所示:在

    1-Vue构造函数的生成

    1-Vue构造函数的生成,函数,属性,版本:@2.6.10环境:web ;思维图:www.processon.com/view/link/5…我们使用的Vue是一个经过层层加强的构造函数

    vue的跨域是什么意思

    vue的跨域是什么意思,跨域,浏览器,代理,请求,服务器,同源策略,在vue中,跨域是指浏览器不能执行其他网站的脚本;它是浏览器同源策略造成的,是浏览器

    Vue中如何实现表单验证

    Vue中如何实现表单验证,验证,表单验证,表单,用户名,元素,指令,随着web应用的不断发展,表单验证逐渐成为web开发过程中不可或缺的一部分。在Vue中

    用vue框架有什么好处

    用vue框架有什么好处,组件,项目,数据,优化,操作,框架,用vue的好处:1、Vue是组件化开发,减少代码的书写,使代码易于理解;2、可以对数据进行双向绑定;3

    Vue中的路由懒加载

    Vue中的路由懒加载,组件,路由,应用程序,懒加载,导入,函数,随着Web应用程序的复杂性不断增加,前端框架和库的使用也越来越广泛。Vue是一种流行的J

    vue路由模式有哪些

    vue路由模式有哪些,模式,浏览器,路由,请求,刷新,服务器,vue路由模式有:1、hash模式,使用URL的hash值来作为路由,支持所有浏览器;其url路径会出现“#

    如何封装组件vue

    如何封装组件vue,组件,函数,封装,复用,组件开发,维护,Vue 是一种流行的 JavaScript 框架,它可以帮助开发者快速构建交互式的 Web 应用。Vue 的一

    vue如何实现页面跳转

    vue如何实现页面跳转,页面跳转,新窗口,方法,标签,属性,函数,vue实现页面跳转的方法:1、通过<vue-link>标签实现新窗口打开;2、通过在单击事件或者