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项目一些常见问题,组件,样式,**样式污染问题**同样的样式不...
-
01-Vue项目实战-网易云音乐-准备工作
01-Vue项目实战-网易云音乐-准备工作,网易,项目,前言在接下来...
-
01- 第一天 spring boot2.3.1 +vue3.0 后台管理
01- 第一天 spring boot2.3.1 +vue3.0 后台管理系统的研发,自...
-
Vue项目中 App.vue文件
Vue项目中 App.vue文件,文件,内容, 在App.vue文件中,定义...
-
1-Vue构造函数的生成
1-Vue构造函数的生成,函数,属性,版本:@2.6.10环境:web ;思维图:ww...
-
在vue中怎么剪辑视频 在vue中剪辑视频的方法介
在vue中怎么剪辑视频 在vue中剪辑视频的方法介绍【详解】,剪...
-
生成随机验证码,数字加减 (vue单页面)
生成随机验证码,数字加减 (vue单页面),验证码,宽度,首先需要进入h...
-
vue的跨域是什么意思
vue的跨域是什么意思,跨域,浏览器,代理,请求,服务器,同源策略,在vue...
-
如何使用vue和Element-plus实现实时更新和实时
如何使用vue和Element-plus实现实时更新和实时显示,实时,显示,...
-
Vue中如何实现表单验证
Vue中如何实现表单验证,验证,表单验证,表单,用户名,元素,指令,随着w...
-
用vue框架有什么好处
用vue框架有什么好处,组件,项目,数据,优化,操作,框架,用vue的好处:1...
-
Vue中的路由懒加载
Vue中的路由懒加载,组件,路由,应用程序,懒加载,导入,函数,随着Web应...
-
vue路由模式有哪些
vue路由模式有哪些,模式,浏览器,路由,请求,刷新,服务器,vue路由模式...
-
如何封装组件vue
如何封装组件vue,组件,函数,封装,复用,组件开发,维护,Vue 是一种流...
-
vue如何实现页面跳转
vue如何实现页面跳转,页面跳转,新窗口,方法,标签,属性,函数,vue实现...