vue3.0实践之写tsx语法实例
更新时间:2022年7月15日 10:04 点击:1720 作者:小渣亮
- 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.value return ( <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.value return ( <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语法内容请搜索猪先飞以前的文章或继续浏览下面的相关文章希望大家以后多多支持猪先飞!
原文出处:https://blog.csdn.net/weixin_43845137/article/details/123465
下一篇: vue实现轮播图片
相关文章
- 这篇文章主要介绍了Vue 3.0 中 jsx 语法使用,帮助大家更好的理解和使用vue框架,感兴趣的朋友可以了解下...2020-11-13
- 本篇文章主要讲解C语言 基本语法,这里提供简单的示例和代码来详细讲解C语言的基本语法,开始学习C语言的朋友可以看一下,希望能够给你带来帮助...2021-09-18
详解Vue3.0 + TypeScript + Vite初体验
这篇文章主要介绍了详解Vue3.0 + TypeScript + Vite初体验,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2021-02-22- C#中方括号[]可用于数组,索引、属性,更重要的是用于外部DLL类库的引用。...2020-06-25
- JavaScript语言的基本语法要求有哪些呐?下面将为大家一一解答: 一、区分大小写 JavaScript语言区分字符大小写,两个字符串相同大小写不同,被认为是不同的字符串。JavaScript语言的关键字也区分大小写,按语法要求应...2015-11-24
- 这篇文章主要介绍了JavaScript的基础语法和数据类型,保姆级的详细教程,万字长文详细的列出了JavaScript的各种语法,建议收藏系列,希望可以有所帮助...2021-09-29
- 这篇文章主要介绍了C#语法相比其它语言比较独特的地方(一),本文讲解了switch语句可以用来测试string型的对象、多维数组、foreach语句、索引器和Property等内容,需要的朋友可以参考下...2020-06-25
- 放大镜在很多购物网站都可以看的到,本文主要实现 固定放大两倍,鼠标进入到左侧图片区域的时候,遮罩层显示,离开时,遮罩层隐藏,感兴趣的可以了解一下...2021-07-25
- 这篇文章主要介绍了C#基础语法:Base关键字学习笔记,本文讲解了它的一些基础知识以及测试代码,需要的朋友可以参考下...2020-06-25
php file_exists 函数与 file_exists语法
其实于php file_exists 函数与 file_exists语法我们早就讲过了,下面我们来看看一下关于它的使用方法与实例吧 bool file_exists ( string filename ) 如果由 filen...2016-11-25- 一篇入门级别的PHP基本语法和数据类型文章,希望对各位php初学者能提供一些帮助哦。 PHP基本语法和数据类型: (1)、PHP基本语法: 1、htm 和 php 混编 ...2016-11-25
- 这篇文章主要介绍了精读《Vue3.0 Function API》,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2020-05-20
- 在本篇文章里小编给大家分享的是一篇关于Python3基础语法知识点总结内容,有兴趣的朋友们可以学习下,希望能够给你带来帮助...2021-10-08
- php switch 语法用于执行基于不同条件不同的行动。 -------------------------------------------------- ------------------------------ 开关语句的PHP 使用swit...2016-11-25
- PHP的一些基本语法(数组,字符串) 上篇写了PHP的一些基本语法,以及表单的提交和处理等,这一篇中接着上一篇写了数组的用法以及数组和字符串之间的相互处理,希望对大家有所...2016-11-25
- PHP流程控制的替代语法示例,有需要了解的朋友可进入参考。 了解过wordpress一类博客程序的模板的PHPer都会看到很多奇怪的PHP语法,比如: <?php if(empty($GET_['a']...2016-11-25
- 这篇文章主要介绍了C语言的语法风格与代码书写规范指南,文中主张了一些诸如变量和结构体的命名规范等细节方面的问题,需要的朋友可以参考下...2020-04-25
- 批处理文件是一个文本文件,这个文件的每一行都是一条DOS命令(大部分时候就好象我们在DOS提示符下执行的命令行一样),你可以使用DOS下的Edit或者Windows的记事本(notepad)等任何文本文件编辑工具创建和修改批处理文件...2020-06-30
- & 这是按位与运算符。 && 且运算符 来看个 &实例 $a = 11; $b = 7; printf("%b & %b = %b", $a, $b, $a & $b); //Output: //1011 & 111 = 11 //再看&&实例...2016-11-25
- php中数据类型有整型、小数型(浮动数)、布尔类型、字符及数组,变量,常量等下面我们一起来看看吧。 一 PHP常用数据类型 1.基本数据类型 1.1整型 1.2小数型(浮动数...2016-11-25