vue에서 jsx/tsx를 우아하게 사용하는 방법은 무엇입니까? 다음 기사에서는 vue3에서 jsx/tsx를 우아하게 사용하는 방법을 소개할 것입니다. 도움이 되기를 바랍니다.
react 파트너는 jsx/tsx에 익숙하다고 생각합니다. 이제 vue3에서도 jsx를 사용할 수 있습니다. tsx 구문 풀. [관련 권장사항: vuejs 비디오 튜토리얼react 的伙伴对于 jsx/tsx 都不陌生吧，现在在 vue3 中也可以使用 jsx/tsx 语法拉。【相关推荐：vuejs视频教程】
安装插件（@vitejs/plugin-vue-jsx）
vite官方提供了官方的插件来支持在vue3中使用jsx/tsx，直接安装就行。
yarn add @vitejs/plugin-vue-jsx -D
로그인 후 복사
安装完之后在vite.config.ts中插入一下代码
import vueJsx from "@vitejs/plugin-vue-jsx";
export default defineConfig({
plugins: [
vueJsx(),
]
})로그인 후 복사
配置完就可以在项目中使用jsx/tsx啦
1、插值
jsx/tsx 的插值与 vue 模板语法中的插值一样，支持有效的 Javascript表达式，比如：a + b, a || 5...
只不过在 jsx/tsx中 由双大括号{{}} 变为了单大括号{}
// vue3模板语法
<span>{{ a + b }}</span>
// jsx/tsx
<span>{ a + b }</span>로그인 후 복사
2、class与style 绑定
class类名绑定有两种方式，使用模板字符串或者使用数组。
// 模板字符串
<div>header</div>
//数组
<div>header</div>
로그인 후 복사
style绑定需要使用 双大括号
const color = 'red'
const element = <sapn>style</sapn>
로그인 후 복사
3、条件渲染
- jsx/tsx中只保留了
v-show指令，没有 v-if指令
- 使用
if/else和三目表达式都可以实现
setup() {
const isShow = false
const element = () => {
if (isShow) {
return <span>我是if</span>
} else {
return <span>我是else</span>
}
}
return () => (
<div>
<span>我是v-show</span>
{
element()
}
{
isShow ? <p>我是三目1</p> : <p>我是三目2</p>
}
<div>
)
}<h2 data-id="heading-4"><strong>4、列表渲染</strong></h2>
<p>同样，jsx/tsx 中也没有 <code>v-for</code>指令，需要渲染列表我们只需要使用Js 的数组方法 <code>map</code> 就可以了</p>
<pre class="brush:php;toolbar:false">setup() {
const listData = [
{name: 'Tom', age: 18},
{name: 'Jim', age: 20},
{name: 'Lucy', age: 16}
]
return () => (
<div>
<div>
<span>姓名</span>
<span>年龄</span>
</div>
{
prop.listData.map(item => {
return <div>
<span>{item.name}</span>
<span>{item.age}</span>
</div>
})
}
</div>
)
}로그인 후 복사
5、事件处理
setup() {
const clickBox = val => {
console.log(val)
}
return () => (
<div> clickBox('box1')}>
<span>我是box1</span>
<div> clickBox('box2')}>
<span>我是box2</span>
<div> clickBox('box3'), ['stop'])}>我是box3</div>
</div>
</div>
)
}로그인 후 복사
6、v-model
jsx/tsx是支持v-model语法的
// 正常写法
<input> // vue
<input> // jsx
// 指定绑定值写法
<input> // vue
<input> // jsx
// 修饰符写法
<input> // vue
<input> // jsx
로그인 후 복사
7、slot插槽
定义插槽
jsx/tsx中是没有 slot 标签的，定义插槽需要使用{}或者使用renderSlot函数
setup 函数默认接收两个参数 1. props 2. ctx 上下文 其中包含 slots、attrs、emit 等
import { renderSlot } from "vue"
export default defineComponent({
// 从ctx中解构出来 slots
setup(props, { slots }) {
return () => (
<div>
{ renderSlot(slots, 'default') }
{ slots.title?.() }
</div>
)
}
})로그인 후 복사
使用插槽
可以通过 v-slots 来使用插槽
import Vslot from './slotTem'
export default defineComponent({
setup() {
return () => (
<div>
<vslot> {
return <p>我是title插槽</p>
},
default: () => {
return <p>我是default插槽</p>
}
}} />
</vslot>
</div>
)
}
})로그인 후 복사
8、使用 tsx 实现递归组件-菜单
主要功能就是根据路由信息自动取生成菜单
效果如下
代码如下，如果需要控制权限啥的，自己在路由信息的meta中添加对应的参数，然后在menuItem]
플러그인 설치(@vitejs/plugin-vue-jsx)vite는 vue3에서 <code>jsx/ 사용을 지원하는 공식 플러그인을 공식적으로 제공합니다. tsx, 그냥 직접 설치하세요. // index.tsx
import { routes } from '@/router/index'
import MenuItem from './menuItem'
import './index.scss'
export default defineComponent({
setup() {
const isShowRoutes = computed(() => {
return routes
})
const currentPath = computed(() => {
return useRoute().path
})
return () => (
<el-scrollbar>
<el-menu>
{
isShowRoutes.value.map((route) => {
return <menuitem></menuitem>
})
}
</el-menu>
</el-scrollbar>
)
}
})로그인 후 복사
vite.config.ts에 코드를 삽입하세요
// menuItem.tsx
import { defineComponent, PropType } from 'vue'
import { RouteRecordRaw } from 'vue-router'
import './index.scss'
const MenuItem = defineComponent({
name: 'MenuItem',
props: {
item: {
type: Object as PropType<routerecordraw>,
required: true
}
},
setup(props: { item: any }) {
const router = useRouter()
const jumpRoute = (path: string) => {
router.push(path)
}
return () => {
let { item } = props
if (item.children) {
const slots = {
title: () => {
return <div>
<span>{item.meta.title}</span>
</div>
}
}
return <el-sub-menu>
{item.children.map((child: RouteRecordRaw) => {
return <menuitem></menuitem>
})}
</el-sub-menu>
} else {
return <el-menu-item> jumpRoute(item.path)}>{item.meta.title}</el-menu-item>
}
}
}
})
export default MenuItem</routerecordraw>로그인 후 복사
🎜구성 후 프로젝트에서
jsx/tsx를 사용할 수 있습니다🎜
1. 보간
🎜 jsx/tsx의 보간은 vue 템플릿 구문의 보간과 동일하며 다음과 같은 유효한 Javascript 표현식을 지원합니다. >a + b,
a || 5...🎜🎜단지 jsx에서 이중 중괄호
{{}}가 단일 중괄호로 변경되었습니다. /tsx
{}🎜rrreee
2. 클래스 및 스타일 바인딩
🎜클래스 이름에는 두 가지 유형이 있습니다. 바인딩 방법, 템플릿 문자열을 사용하거나 배열을 사용합니다. 🎜
- 템플릿 문자열을 사용하여 두 클래스 이름을 공백으로 구분합니다.
rrreee🎜스타일 바인딩에는 이중 중괄호를 사용해야 합니다🎜rrreee
3. 조건부 렌더링
- jsx/tsx에는
v-show 지시문만 유지되지만 v-는 없습니다. if 지침
- 이는
if/else 및 삼항 표현식을 사용하여 달성할 수 있습니다.
rrreee
4. 목록 렌더링
🎜 마찬가지로 jsx/tsx에는
v-for 명령이 없습니다. 목록을 렌더링하려면 Js
map의 배열 메소드이면 충분합니다🎜rrreee
이벤트 처리
- 🎜 바인딩 이벤트 사용 단일 중괄호
{}도 있지만 이벤트 바인딩에는 @ 접두사가 붙지 않고 on으로 변경됩니다. 예를 들면 다음과 같습니다. click 이벤트는 onClick🎜
- 🎜이벤트 수정자를 사용해야 하는 경우
withModifiers 메서드를 사용해야 합니다. code>withModifiers 메소드 두 개의 매개변수, 첫 번째 매개변수는 바인딩된 이벤트이고 두 번째 매개변수는 사용할 이벤트입니다. Modifier🎜
rrreee
6. v-model
🎜jsx/tsx는 v-model 구문을 지원합니다🎜rrreee
7. 슬롯 슬롯
🎜
슬롯 정의🎜🎜 jsx/tsx에는
slot 태그가 없습니다.
{ }를 사용하거나
renderSlot 함수를 사용하세요. 🎜🎜setup 함수는 기본적으로 두 개의 매개변수를 받습니다. 1. props 2. 슬롯, 속성, 내보내기 등을 포함하는 ctx 컨텍스트 🎜rrreee 🎜
슬롯 사용🎜🎜
v-slots을 통해 슬롯을 사용할 수 있습니다🎜rrreee
8 tsx를 사용하여 구현하세요. recursive component-menu
🎜주요 기능은 라우팅 정보를 기반으로 메뉴를 자동으로 생성하는 것입니다🎜🎜효과는 다음과 같습니다🎜🎜
🎜🎜 코드는 다음과 같습니다. 권한을 제어해야 하는 경우 해당 매개변수를 라우팅 정보의
메타,
menuItem🎜rrreeerrreee🎜에서 자체 제어 (학습 영상 공유: 🎜웹 프론트엔드 개발🎜, 🎜기본 프로그래밍 영상🎜) 🎜
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
