vue3.0实践之写tsx语法实例

00：下载
yarn add @vitejs/plugin-vue-jsx -D
01：引入
vite.config.ts
1
2
3
4
5
6
7
8
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()]
})
02：tsconfig.json 配置文件

1
2
3
“jsx”: “preserve”,
“jsxFactory”: “h”,
“jsxFragmentFactory”: “Fragment”,
经过上述的配置就可以使用 ts了

测试tsx 新建一个App.tsx页面
再App.vue文件之中引入使用

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

tsx使用v-model指令 (App.tsx组件)
1
2
3
4
5
6
7
8
9
10
11
12
13
import { ref } from “vue”
let test = ref(“”)
const renderDom = () => {
// 注意点：在tsx之中不会自动读写 X.value
return (

我是{test.value }

)
}
export default renderDom
效果

使用v-show、与三目运算符
tsx是支持v-show指令
tsx不支持v-if、v-else指令，这时候需要使用到三目运算符了
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
import { ref } from “vue”

let flag = ref(true)
const renderDom = () => {
// 注意点：在tsx之中不会自动读写 X.value
return (

我是true

我是flase

{
flag ?

我是true

我是flase

}

)
}

export default renderDom
效果

tsx之数组的遍历(map)
tsx是不支持 v-for指令的
使用map的方式去遍历数组，然后map函数之中返回一个 div等标签渲染dom节点
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
import { reactive, ref } from “vue”

let arr = reactive<Number[]>([1,2,3])
const renderDom = () => {
return (

{
arr.map((item,idx)=>{
return(

{ item }

)
})
}

)
}
export default renderDom
效果

自定义属性 data-index
给当前标签自定义属性用于数据的传递

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
import { reactive, ref } from “vue”

let arr = reactive<Number[]>([1,2,3])
const renderDom = () => {
return (

{
arr.map((item,idx)=>{
return(

{ item }

)
})
}

)
}

export default renderDom
效果

tsx绑定事件
使用onClick定义事件

不传递参数的时候，直接定义这个click事件即可
若是传递参数的时候，需要使用bind来改变this的指向，并且不自觉调用函数，而是返回一个新的函数，可以传递参数，等待点击的时候触发事件
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
import { reactive, ref } from “vue”

let arr = reactive<Number[]>([1,2,3])
const renderDom = () => {
return (

{
arr.map((item,idx)=>{
return(
//

{ item }

// 没有传参
//

{ item }

// 直接调用

{ item }

)
})
}

)
}
const TestClick = (item)=>{
console.log(“111”,item);

}

export default renderDom

tsx之 props父组件向子组件传递参数

App.vue 父
再vue之中，使用 v-bind的形式传递数据

1
2
3
4
5
6
7
8
9

App.tsx 子
1
2
3
4
5
6
7
8
9
10
11
12
13
14
import { reactive, ref } from “vue”

type Props = {
title : string
}
const renderDom = (props:Props) => {
return (

我是title - { props.title }

)
}
export default renderDom
效果

tsx之子组件向父组件传递数据
点击11 传递当前11数据

子组件 App.tsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
import { reactive, ref } from “vue”

type Props = {
title : string
}
let arr = reactive<number[]>([11,22,33])
// props是接受父组件传递来的值，ctx：为上下文对象
const renderDom = (props:Props,ctx:any) => {
return (

我是title - { props.title }

{
arr.map((item,idx)=>{
return (
<div onClick={ itemClick.bind(this,ctx,item) }>{ item }

)
})
}

)
}
// 点击事件
const itemClick = (ctx:any,item:any)=>{
ctx.emit(“on-click”,item) // 使用ctx之中的emit发射事件，给父组件传递数据
}

export default renderDom
App.vue 父
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

总结

文章转自：vue3.0实践之写tsx语法实例-金楚广告联盟

作者：金楚广告联盟，转载请注明原文链接：https://www.73508.com/

vue3.0实践之写tsx语法实例相关推荐

Vue3.0实践：使用Vue3.0做JSX(TSX)风格的组件开发
前言我日常工作都是使用React来做开发,但是我对React一直不是很满意,特别是在推出React Hooks以后. 不可否认React Hooks极大地方便了开发者,但是它又有非常多反直觉的地方, ...
pb调用键盘钩子的例子_搞不动Vue3.0的源码，先做个API调用师也行（新人踩坑初试）...
作为一个刚刚入行工作不久的前端菜鸟,Vue2.x都没整熟练.但看着身边人都在学习Vue3,我也不敢怠慢,毕竟Vue3正式版已经发布两个月了,我还是耐着性子好好的阅读了一下Vue3.0的文档.没有其他大 ...
Vue3.0快速入门
一.安装 1. cdn <script src="https://unpkg.com/vue@next"></script> 2. npm $npm ins ...
Vue3.0 组合式 API 分析与实践
本文带大家深入理解组合式 API 的设计详情,同时加入我们的实践经验总结. 01 背景 Vue3.x 版本的出现带来了许多令人眼前一亮的新特性,其中组合式 API(Composition API),一 ...
Vue3+ElementPlus网页端聊天|vue3.0仿微信/QQ界面实例
vue3-webchat 基于vue3.0.5开发的仿微信|QQ界面桌面端聊天实例. 运用vue3.x全家桶技术+element-plus+v3layer+v3scroll搭建的仿微信/QQ界面网页聊 ...
【jsx开发Vue】在Vite+Vue3.0中使用jsx语法开发。
所有内容首发微信公众号[WEB前端李志杰],未经允许禁止转载! 可能大家要问我为什么要使用jsx语法开发Vue? 首先要说明的是:个人认为jsx语法和模板语法并不存在优劣之分,在实际项目中应该优先选择 ...
vue3.0响应式源码实践,vue3.0初体验
vue3.0响应式源码实践,vue3.0初体验镇楼图--杀生丸.jpg vue-next(vue3.0预体验) 1. 使用: 2.vue-next的目录结构 3. reactive内部实现作者上篇 ...
vue3.0+vant3仿快手/抖音短视频|Vue3+Vite2聊天/直播实例
vue3.0-douyin 基于vue3.x开发仿抖音app界面小视频+直播聊天实例. 基于Vue3框架技术搭建一款仿抖音APP界面小视频+直播实战案例.运用到了vite2+vue3.0.5+vuex ...
vue3.0语法糖及ref、reactive、toRef、toRefs的区别
vue3.0语法糖前几天一个月薪35k的兄弟,给我推了一个人工智能学习网站,看了一段时间挺有意思的.包括语音识别.机器翻译等从基础到实战都有,很详细,分享给大家. 1.什么是setup语法糖起初 ...

vue3.0实践之写tsx语法实例

vue3.0实践之写tsx语法实例相关推荐

最新文章

热门文章