vue3使用tsx开发,vue3.0 tsx
很久不写博客了，最近在使用分时（同分时)和多伦多股票交易所开发某视频剪辑软件类项目，网上资料比较少，顺便记录一下方便同样开发的人互相学习共同进步，下面这篇文章主要给大家介绍了关于vue3.0实践之写多伦多股票交易所语法的相关资料，需要的朋友可以参考下
目录
测试多伦多股票交易所新建一个App.tsx页面多伦多股票交易所使用v型车指令(App.tsx组件)使用v秀，与三目运算符多伦多股票交易所之数组的遍历（地图)自定义属性数据索引多伦多股票交易所绑定事件多伦多股票交易所之小道具父组件向子组件传递参数App.vue父App.tsx子多伦多股票交易所之子组件向父组件传递数据子组件App.tsxApp.vue父总结00:下载yarn add @ vite js/plugin-vue-jsx-D01:引入vite。配置。t从“维特”导入{ defineConfig }
从@vitejs/plugin-vue 导入某视频剪辑软件
从" @vitejs/plugin-vue-jsx "导入vueJsx
//https://vitejs.dev/config/
导出默认定义配置({
插件：[vue()、vueJsx()]
})
02:tsconfig.json配置文件
jsx :保留，
jsxFactory: h ，
jsxFragmentFactory ":"片段，
经过上述的配置就可以使用分时（同分时)了
测试tsx 新建一个App.tsx页面
再App.vue文件之中引入使用
模板
！-布局/布局-
renderDom /
/模板
脚本安装语言=ts
//从""导入布局 0/layout/layout . vue
从""导入renderDom ./App.tsx
/脚本
样式lang=scss
html，
身体，
#app {
身高：100%;
宽度：100%;
溢出：隐藏；
}
/风格
tsx使用v-model指令 (App.tsx组件)
从“vue”导入{ ref }
let test=refstring( )
const renderDom=()={
//注意点：在多伦多股票交易所之中不会自动读写十。值
返回（
差异
输入类型=text v-model={test.value} /
差异我是{测试值}/分区
/div
)
}
导出默认renderDom
效果
使用v-show、与三目运算符
多伦多股票交易所是支持虚拟展示指令多伦多股票交易所不支持如果、否则指令，这时候需要使用到三目运算符了
从“vue”导入{ ref }
let flag=refBoolean(真)
const renderDom=()={
//注意点：在多伦多股票交易所之中不会自动读写十。值
返回（
差异
div v-show={flag}我是true/div
div-show={！flag}我是框/格
差异
{
旗帜？差异我是true/div : div我是框/格
}
/div
/div
)
}
导出默认renderDom
效果
tsx之数组的遍历(map)
多伦多股票交易所是不支持迭代指令的使用地图的方式去遍历数组，然后地图函数之中返回一个差异等标签渲染数字正射影像图节点从“vue”导入{反应，参考}
设arr=reactiveNumber[]([1，2，3])
const renderDom=()={
返回（
差异
差异
{
arr.map((item，idx)={
返回（
div key={idx}{ item }/div
)
})
}
/div
/div
)
}
导出默认renderDom
效果
自定义属性 data-index
给当前标签自定义属性用于数据的传递
从“vue”导入{反应，参考}
设arr=reactiveNumber[]([1，2，3])
const renderDom=()={
返回（
差异
差异
{
arr.map((item，idx)={
返回（
div key={ idx } data-index={ idx } { item }/div
)
})
}
/div
/div
)
}
导出默认renderDom
效果
tsx绑定事件
使用单击事件定义事件
不传递参数的时候，直接定义这个点击事件即可若是传递参数的时候，需要使用约束来改变这的指向，并且不自觉调用函数，而是返回一个新的函数，可以传递参数，等待点击的时候触发事件从“vue”导入{反应，参考}
设arr=reactiveNumber[]([1，2，3])
const renderDom=()={
返回（
差异
差异
{
arr.map((item，idx)={
返回（
//div key={ idx } data-index={ idx } onClick={ test click } { item }/div//没有传参
//div key={ idx } data-index={ idx } onClick={ test click()} { item }/div//直接调用
div key={ idx } data-index={ idx } onClick={ test click。bind(this，item)}{ item }/div
)
})
}
/div
/div
)
}
const TestClick=(item)={
console.log(111 ，item)；
}
导出默认renderDom
tsx之 props父组件向子组件传递参数
App.vue 父
再某视频剪辑软件之中，使用v型装订的形式传递数据
模板
renderDom :title=title /
/模板
脚本安装语言=ts
从“vue”导入{ ref }
从""导入renderDom ./App.tsx
let title=refString(我是测试的t’)
/脚本
App.tsx 子
从“vue”导入{反应，参考}
类型道具={
标题：字符串
}
const renderDom=(props:Props)={
返回（
差异
差异我是标题- { props.title }/div
/div
)
}
导出默认renderDom
效果
tsx之子组件 向父组件 传递数据
点击11 传递当前11数据
子组件 App.tsx
从“vue”导入{反应，参考}
类型道具={
标题：字符串
}
设arr=reactivenumber[]([11，22，33])
//道具是接受父组件传递来的值，ctx:为上下文对象
const renderDom=(props:Props，ctx:any)={
返回（
差异
差异我是标题- { props.title }/div
差异
{
arr.map((item，idx)={
返回（
div onClick={ item click。bind(this，ctx，item) }{ item }/div
)
})
}
/div
/div
)
}
//点击事件
const itemClick=(ctx:any，item:any)={
ctx.emit(on-click ，item) //使用中强之中的发射发射事件，给父组件传递数据
}
导出默认renderDom
App.vue 父
模板
！-布局/布局-
render DOM:title= title @ on-click= get data /
/模板
脚本安装语言=ts
//从""导入布局 0/layout/layout . vue
从“vue”导入{ ref }
从""导入renderDom ./App.tsx
let title=refString(我是测试的t’)
//接受子组件自定义事件传递来的数据
const getData=(parmas)={
console.log(getData ，parmas)
}
/脚本
总结
到此这篇关于vue3.0实践之写多伦多股票交易所语法的文章就介绍到这了，更多相关vue3.0写多伦多股票交易所语法内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。