Vue3使用JSX的方法實例(筆記自用)
更新時間：2023年02月23日 09:38:37 作者：weixin_39763711
以前我們經(jīng)常在react中使用jsx，現(xiàn)在我們在vue中也是用jsx,下面這篇文章主要給大家介紹了關于Vue3使用JSX的相關資料,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下
1. Vue3 中 JSX 的基本應用
- 使用 .jsx 格式文件和 defineComponent
- defineComponent 可傳入 setup 函數(shù) 或 組件的配置
- 插值使用單括號 {}
1.1 在 .vue 文件中使用 jsx
// 父
<template>
<div class="home">
<JSXDemo1 />
</div>
</template>
<script>
import JSXDemo1 from '@/components/JSXDemo1.vue'
export default {
name: 'HomeView',
components: {
JSXDemo1
}
}
</script>
// JSXDemo1.vue
<script>
import { ref } from 'vue'
export default {
setup () {
const countRef = ref(200)
const render = () => {
return <p>DEMO1--{countRef.value}</p> // jsx就是js語法，所以要加 .value
}
return render
}
}
</script>1.2 .jsx文件格式
// 父組件
import { defineComponent, ref } from 'vue'
import JSXChild from './JSXChild.jsx'
export default defineComponent(() => { // 傳入 setup 函數(shù)
const countRef = ref(300)
const render = () => {
return <>
<p>DEMO2--{countRef.value}</p>
<JSXChild a={countRef.value + 100}></JSXChild>
</>
}
return render
})
// 子組件 JSXChild.jsx
import { defineComponent } from 'vue'
export default defineComponent({ // 傳入組件配置
props: ['a'],
setup (props) {
const render = () => {
return <>
<p>child {props.a}</p>
</>
}
return render
}
})2. JSX 和 template 的區(qū)別
- 語法上有很大區(qū)別：
- JSX 本質就是 js 代碼，可以使用 js 的任何能力
- template 只能嵌入簡單的 js 表達式，其他需要指令，如 v-if
- JSX 已經(jīng)成為 ES 規(guī)范，template 還是 Vue 自家規(guī)范
- 本質是相同的：
- 都會被編譯為 js 代碼（render 函數(shù)）
2.1 插值
- template 使用雙括號 {{ }}
- jsx 使用單括號 { }
// template
<template>
<p>{{ name }} -- {{ age }}</p>
</template>
// jsx
const render = () => {
return <>
<p>child {props.a}</p>
</>
}2.2 自定義組件
- template 組件名使用時可改變大小寫或是駝峰，jsx 不可更改
- 引入動態(tài)參數(shù)，template使用冒號+參數(shù)名（:msg='msg'）,jsx 不需要冒號
// template
<template>
<div class="home">
<watch-effect :msg="msgRef"/>
</div>
</template>
<script>
import { ref } from 'vue'
import WatchEffect from '@/components/WatchEffect.vue'
export default {
name: 'HomeView',
components: {
WatchEffect,
},
setup () {
const msgRef = ref('123')
return {
msgRef
}
}
}
</script>
// jsx 組件名稱不可變，要和引入名字保持一致
import { defineComponent, ref } from 'vue'
import JSXChild from './JSXChild.jsx'
export default defineComponent(() => {
const countRef = ref(300)
const render = () => {
return <>
<p>DEMO2--{countRef.value}</p>
<JSXChild a={countRef.value + 100}></JSXChild>
</>
}
return render
})2.3 屬性和事件
template 區(qū)分屬性和事件的寫法，jsx 不區(qū)分
// jsx 屬性和事件的寫法一樣
import { defineComponent, ref } from 'vue'
import JSXChild from './JSXChild.jsx'
export default defineComponent(() => {
const countRef = ref(300)
function onChange () {
console.log('onChange')
}
const render = () => {
return <>
<p>DEMO2--{countRef.value}</p>
<JSXChild a={countRef.value + 100} change={onChange}></JSXChild>
</>
}
return render
})2.4 條件和循環(huán)
條件 template 使用 v-if 指令，jsx 在表達式中使用 && （類似 if( a && b)）
// template v-if
<template>
<p v-if="flagRef">template demo</p>
<button @click="changeFlagRef">click</button>
</template>
<script>
import { ref } from 'vue'
export default {
setup () {
const flagRef = ref(true)
function changeFlagRef () {
flagRef.value = !flagRef.value
}
return {
flagRef,
changeFlagRef
}
}
}
</script>
// jsx &&符號判斷
import { defineComponent, ref } from 'vue'
import JSXChild from './JSXChild.jsx'
export default defineComponent(() => {
const flagRef = ref(true)
function changeFlagRef () {
flagRef.value = !flagRef.value
}
const render = () => {
return <>
<p onClick={changeFlagRef}>DEMO2--{flagRef.value.toString()}</p>
{flagRef.value && <JSXChild a={flagRef.value}></JSXChild>}
</>
}
return render
})循環(huán) template 使用 v-for 指令，jsx 使用數(shù)組的 .map 函數(shù)
// template v-for
<template>
<ul>
<li v-for="item in state.list" :key="item">{{ item }}</li>
</ul>
</template>
<script>
import { reactive } from 'vue'
export default {
setup () {
const state = reactive({
list: ['a', 'b', 'c']
})
return {
state
}
}
}
</script>
// jsx 數(shù)組 .map 函數(shù)
import { defineComponent, reactive } from 'vue'
export default defineComponent(() => {
const state = reactive({
list: ['a1', 'b1', 'c1']
})
const render = () => {
return <>
<ul>
{state.list.map(item => <li>{item}</li>)}
</ul>
</>
}
return render
})3. JSX 和 slot （體會 JSX 的優(yōu)越性）
- slot 是 Vue 發(fā)明的概念，為了完善 template 的能力
- slot 一直是 Vue 初學者的“噩夢”，特別是：作用域 slot
- 但使用 JSX 將很容易理解，因為 JSX 本質就是 js
總結
到此這篇關于Vue3使用JSX的文章就介紹到這了,更多相關Vue3使用JSX內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
vue項目前端加前綴(包括頁面及靜態(tài)資源)的操作方法
這篇文章主要介紹了vue項目前端加前綴(包括頁面及靜態(tài)資源)的操作方法,本文給大家介紹的非常詳細,對大家的學習或工作具有一定的參考借鑒價值,需要的朋友參考下吧2023-12-12
這篇文章主要介紹了Vue混入使用和選項合并，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2021-10-10
這篇文章主要介紹了使用VUE實現(xiàn)一鍵復制內容功能,功能就是當我們點擊復制按鈕時，會提示“復制成功”，這樣復制的內容就可以在其他地方使用了，感興趣的朋友可以學習一下2023-04-04
vue?ElementUI級聯(lián)選擇器回顯問題解決
這篇文章主要介紹了vue?ElementUI級聯(lián)選擇器回顯問題解決，文章圍繞主題展開詳細的內容介紹，具有一定的參考價值，需要的小伙伴可以參考一下2022-09-09
vue3+luckysheet實現(xiàn)在線編輯Excel的項目實踐
本文介紹了使用Luckysheet實現(xiàn)在線Excel表格功能,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧2025-07-07
Vue項目從webpack3.x升級webpack4不完全指南
前段時間，泡面將自己的一個Vue-cli構建的前端框架從webpack3.x升級到了4.x版本，現(xiàn)在才拉出來記錄一下，已備忘之用，也和大家分享一下,需要的朋友可以參考下2019-04-04
這篇文章主要介紹了vue項目中的類使用方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-03-03
這篇文章主要給大家介紹了關于利用vue+turn.js實現(xiàn)翻書效果的相關資料,turn.js是使用了jquery書寫的,文中通過代碼介紹的非常詳細,需要的朋友可以參考下2024-01-01
這篇文章主要介紹了Vue3為什么這么快,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2020-09-09
vue for循環(huán)出來的數(shù)據(jù)實現(xiàn)用逗號隔開
HTML（HyperText Markup Language）是用于創(chuàng)建網(wǎng)頁的標準標記語言,正確的HTML編碼和結構對于網(wǎng)頁的正確顯示至關重要,當HTML代碼正確無誤時,網(wǎng)頁的效果圖將與設計師的預期相符,反之則可能出現(xiàn)布局錯亂、樣式失效等問題2024-10-10