有没有免费的网站空间,企业做网站需要提交的资料表格,做泥水上哪个网站找事做,网站上的视频直播是怎么做的呢在 Vue 项目中配置 TSX 写法
在 Vue 项目中使用 TSX 可以为我们带来更灵活、高效的开发体验#xff0c;特别是在处理复杂组件逻辑和动态渲染时。以下是详细的配置步骤#xff1a;
一、安装相关依赖
首先#xff0c;我们需要在命令行中输入以下命令来安装 vitejs/plugin-v…
在 Vue 项目中配置 TSX 写法
在 Vue 项目中使用 TSX 可以为我们带来更灵活、高效的开发体验特别是在处理复杂组件逻辑和动态渲染时。以下是详细的配置步骤
一、安装相关依赖
首先我们需要在命令行中输入以下命令来安装 vitejs/plugin-vue-jsx 插件
pnpm i vitejs/plugin-vue-jsx -D
这里使用 pnpm 进行安装如果使用的是 npm 或者 yarn将命令中的 pnpm 替换为相应的包管理器命令即可。这个插件是用于在 Vite 项目中支持 Vue 的 JSX 语法。
二、Vite 配置
在 vite.config.js 文件中进行如下配置
import vue from vitejs/plugin-vue
import vueJsx from vitejs/plugin-vue-jsxexport default defineConfig({plugins: [vue(), vueJsx()]
})三、Vite 配置
在 tsconfig.json 文件中需要添加以下配置 compilerOptions: {jsx: preserve,jsxFactory: h,jsxFragmentFactory: Fragment,}四、示例
//注意文件格式应该是tsx或jsx这里由于csdn无法识别所以代码格式写成js
import { defineComponent,ref } from vueconst MyComponent defineComponent({setup() {const aref(helloworld!) return () (divh1{a.value}/h1/div)}
})export default MyComponent简单介绍Tsx
流程
vue编译时将tsx文件解析为typescript文件然后编译为js文件最后运行时解析js文件将js文件解析为render function通过h函数构建虚拟DOM
语法
1. v-model
// 注意tsx不会自动从ref中解析value
const message refstring(Hello, World!);
input typetext v-model{message.value}///也可以
input typetext value{inputText.value}/2. v-show
div v-show{message.value} this is {message.value}/div3. v-if和v-else
使用三目运算符实现
div{message.value?你输入了message.value:没有哦}
/div4. 数组遍历v-for
使用map实现
div{arr.value.map((item,index){return div key{index}{item}/div})}
/div5. 绑定事件
如果不需要传参数直接绑定
const countrefnumber(0)
const handleClick(){count.value
}divbutton onClick{handleClick}{count.value}/button
/div如果需要传参
button onClick{() handleClick(count.value)}{count.value}/button如果需要添加事件修饰符使用驼峰写法将他们拼接在事件名后面
6. tsx中引入scss样式
新建样式文件 xx.module.scss其中写样式 module意味着这个文件被当作模块来处理生成的css类名会被局部化自动加上唯一哈希值防止类名冲突文件中引入样式文件
import styles from ../styles/parent.module.scss//对应的元素上添加类名
div class{styles.red}红色/div也可以直接简单的引入
import ../styles/parent.scss
div classblue蓝色/div7. 父子组件传参
// 父组件传参
InputSelect options{options.value} v-model{formData.value.data}/InputSelect//子组件接收参数
props:{modelValue:{type:Object,default:()({})},options:{type:Array}},setup(props){//...}
