vue3.0之写tsx语法
2024-05-25 21:24:04
目录
- vue3.0之写tsx
- 测试tsx 新建一个App.tsx页面
- tsx使用v-model指令 (App.tsx组件)
- 使用v-show、与三目运算符
- tsx之数组的遍历(map)
- 自定义属性 data-index
- tsx绑定事件
- tsx之 props父组件向子组件传递参数
- App.vue 父
- App.tsx 子
- tsx之子组件 向父组件 传递数据
- 子组件 App.tsx
- App.vue 父
vue3.0之写tsx
- 00：下载
yarn add @vitejs/plugin-vue-jsx -D
- 01：引入
- 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()]
})
- 02：tsconfig.json 配置文件
"jsx": "preserve","jsxFactory": "h","jsxFragmentFactory": "Fragment",
- 经过上述的配置就可以使用 ts了
测试tsx 新建一个App.tsx页面
- 再App.vue文件之中引入使用
<template><!-- <Layout></Layout> --><renderDom />
</template><script setup lang="ts">
// import Layout from './layout/Layout.vue'
import renderDom from './App.tsx'
</script>
<style lang="scss">
html,
body,
#app {height: 100%;width: 100%;overflow: hidden;
}
</style>tsx使用v-model指令 (App.tsx组件)
import { ref } from "vue"
let test = ref<string>("")
const renderDom = () => {// 注意点：在tsx之中 不会自动读写 X.valuereturn (<div><input type="text" v-model={test.value} /><div>我是{test.value }</div></div>)
}
export default renderDom
- 效果
使用v-show、与三目运算符
- tsx是支持v-show指令
- tsx不支持v-if、v-else指令，这时候需要使用到三目运算符了
import { ref } from "vue"let flag = ref<Boolean>(true)
const renderDom = () => {// 注意点：在tsx之中 不会自动读写 X.valuereturn (<div><div v-show={flag}>我是true</div><div v-show={!flag}>我是flase</div><div>{flag ? <div>我是true</div> : <div>我是flase</div>}</div></div>)
}export default renderDom
- 效果
tsx之数组的遍历(map)
- tsx是不支持 v-for指令的
- 使用map的方式去遍历数组，然后map函数之中返回一个 div等标签渲染dom节点
import { reactive, ref } from "vue"let arr = reactive<Number[]>([1,2,3])
const renderDom = () => {return (<div><div>{arr.map((item,idx)=>{return(<div key={idx}>{ item }</div>) })}</div></div>)
}
export default renderDom
- 效果
自定义属性 data-index
- 给当前标签自定义属性用于数据的传递
import { reactive, ref } from "vue"let arr = reactive<Number[]>([1,2,3])
const renderDom = () => {return (<div><div>{arr.map((item,idx)=>{return(<div key={idx} data-index={idx}>{ item }</div>) })}</div></div>)
}export default renderDom
- 效果
tsx绑定事件
- 使用onClick定义事件
- 不传递参数的时候，直接定义这个click事件即可
- 若是传递参数的时候，需要使用bind来改变this的指向，并且不自觉调用函数，而是返回一个新的函数，可以传递参数，等待点击的时候触发事件
import { reactive, ref } from "vue"let arr = reactive<Number[]>([1,2,3])
const renderDom = () => {return (<div><div>{arr.map((item,idx)=>{return(// <div key={idx} data-index={idx} onClick={TestClick}>{ item }</div> // 没有传参// <div key={idx} data-index={idx} onClick={TestClick()}>{ item }</div> // 直接调用<div key={idx} data-index={idx} onClick={TestClick.bind(this,item)}>{ item }</div>) })}</div></div>)
}
const TestClick = (item)=>{console.log("111",item);}export default renderDom
tsx之 props父组件向子组件传递参数
App.vue 父
- 再vue之中，使用 v-bind的形式传递数据
<template><renderDom :title="title" />
</template><script setup lang="ts">
import { ref } from 'vue'
import renderDom from './App.tsx'
let title = ref<String>('我是测试的t')
</script>
App.tsx 子
import { reactive, ref } from "vue"type Props = {title : string
}
const renderDom = (props:Props) => {return (<div><div>我是title - { props.title }</div></div>)
}
export default renderDom
- 效果
tsx之子组件 向父组件 传递数据
- 点击11 传递当前11数据
子组件 App.tsx
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 (<div><div>我是title - { props.title }</div><div>{arr.map((item,idx)=>{return (<div onClick={ itemClick.bind(this,ctx,item) }>{ item }</div>)})}</div></div>)
}
// 点击事件
const itemClick = (ctx:any,item:any)=>{ctx.emit("on-click",item) // 使用ctx之中的emit发射事件，给父组件传递数据
}export default renderDom
App.vue 父
<template><!-- <Layout></Layout> --><renderDom :title="title" @on-click="getData" />
</template><script setup lang="ts">
// import Layout from './layout/Layout.vue'
import { ref } from 'vue'
import renderDom from './App.tsx'
let title = ref<String>('我是测试的t')
// 接受子组件 自定义事件 传递来的数据
const getData = (parmas) => {console.log('getData', parmas)
}
</script>
vue3.0之写tsx语法相关推荐
- 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 ...
- 用Vue3.0+typescript写vuex的模块化拆分
用Vue3.0+typescript写vuex的模块化拆分 最近自己学习了下vue3.0+ts,在vuex这一块遇到些问题记录一下 以下代码中的写法请参考官方vuex文档: https://next. ...
- Vue3.0实践：使用Vue3.0做JSX(TSX)风格的组件开发
前言 我日常工作都是使用React来做开发,但是我对React一直不是很满意,特别是在推出React Hooks以后. 不可否认React Hooks极大地方便了开发者,但是它又有非常多反直觉的地方, ...
- 【jsx开发Vue】在Vite+Vue3.0中使用jsx语法开发。
所有内容首发微信公众号[WEB前端李志杰],未经允许禁止转载! 可能大家要问我为什么要使用jsx语法开发Vue? 首先要说明的是:个人认为jsx语法和模板语法并不存在优劣之分,在实际项目中应该优先选择 ...
- vue3.0封装一个图标选择组件
基于vite2.0+vue3.0项目写了一个图标选择器,项目引入对应的css字体文件就行,支持模糊搜索 项目的文件目录 1.IconPicker.vue <template><d ...
- vue3.0语法糖及ref、reactive、toRef、toRefs的区别
vue3.0语法糖 前几天一个月薪35k的兄弟,给我推了一个人工智能学习网站,看了一段时间挺有意思的.包括语音识别.机器翻译等从基础到实战都有,很详细,分享给大家. 1.什么是setup语法糖 起初 ...
- cli3解决 ie11语法错误 vue_【VUE3.0】它来了，2020年09月18日，Vue.js 3.0 正式发布，但是........
您曾见过凌晨的苹果发布会,那前端界的发布会你见过吗? 在Vue3正式发布前,Vue的作者尤雨溪发表主题演讲. 注意! 注意! 注意! 发布会中表示不建议大家立刻升级到Vue3.0版本,之前项目中某些依 ...
- 【vite+vue3.0】基于vite写一个将md文件渲染为js文件的插件
基于vite写一个将md文件渲染为js文件的插件 前言 尤大是这么描述 Vite 的: 「一个基于浏览器原生 ES imports 的开发服务器. 利用浏览器去解析 imports,在服务器端按需编译 ...
- jsx怎么往js里传参数_实践Vue 3.0做JSX(TSX)风格的组件开发
作者:莫夭 转发链接:https://zhuanlan.zhihu.com/p/102668383 前言 我日常工作都是使用React来做开发,但是我对React一直不是很满意,特别是在推出React ...
- vue tree组件_使用Vue 3.0做JSX(TSX)风格的组件开发
前言 我日常工作都是使用React来做开发,但是我对React一直不是很满意,特别是在推出React Hooks以后. 不可否认React Hooks极大地方便了开发者,但是它又有非常多反直觉的地方, ...
最新文章
- 能打造新型CPU的有机分子元件登Nature，用if语句攒出决策树，一个顶数千晶体管...
- Android Studio 单刷《第一行代码》系列 07 —— Broadcast 广播
- Xamarin.Android 使用 Encoding.GetEncoding(GB2312) 报错解决方案
- 23、HTML图像按钮
- c++学习笔记之模板
- 实战Centos系统部署Codis集群服务
- 【转】浏览器缓存机制
- Python——装饰器的学习笔记(legacy)
- leetcode python3 简单题69. Sqrt(x)
- Make things beautiful again !
- Android Bitmap缓存池使用详解
- oracle建表语句 货币,Oracle建表语句是什么
- 小米手机解锁 usb3.0状态下
- 重磅！2020北京智源大会完整日程公布，4天19场高端AI论坛邀你参加
- 2032：【例4.18】分解质因数
- Python写个小游戏：速算24点（上）
- SAP选择屏幕开发（一）
- Fabrice Bellard其人
- 计算机学院自然语言处理专业,上海交通大学计算机科学与工程系(CSE)
- 借条可以成为质押财产吗？