Vue中從template到jsx語法教程示例
從 template 到 jsx
大多數(shù) Vue 開發(fā)者都習慣使用 template 模板語法，因為 template 模板語法 具有如下優(yōu)點：
熟悉的類 HTML 結構
- 模板語法可以像 HTML 一樣進行布局和設計，上手快、學習成本比低
更簡潔的寫法
- 例如，可以在模板中使用各種 修飾符 來達到簡化編寫代碼的過程
結構與邏輯分離
- 元素結構和邏輯并沒有雜糅在一起，因此結構上更簡潔明了
提供更好的性能
- Vue3 中對模板語法在 編譯階段 進行的各種優(yōu)化，使得其性能更好
但即便如此，在某些場景下還是不得不在 Vue 中使用 jsx 語法 實現(xiàn)需求， 例如開發(fā) 內(nèi)部組件庫 選擇的編寫形式就是 jsx 語法 等。
而對于習慣使用 template 模板語法 的開發(fā)者并不是輕易的就能轉(zhuǎn)換到相應 jsx 語法，因此本文就列舉一些 template 模板語法 中對應的 jsx 語法 應該怎么寫。
插值表達式（文本插值）
template 語法
最基本的數(shù)據(jù)綁定形式就是 文本插值，它使用的是 Mustache 語法 (即 {{}} )，雙大括號 中的內(nèi)容最終 會將數(shù)據(jù)解釋為純文本。
<span>Message: {{ msg }}</span>jsx 語法
而 JSX 中使用 文本插值 就從 雙大括號 {{ }} 變成 單大括號 {}
<span>Message: { msg }</span>原始 HTML
template 語法
雙大括號 會將數(shù)據(jù)解釋為純文本，而不是 HTML，因此若想在模板中 插入 HTML，我們需要使用 v-html 指令：
// html 字符內(nèi)容
rawHtml = '<span>hello!</span>'
// 最終變成純文本
<p>Using text interpolation: {{ rawHtml }}</p>
// 最終渲染為 html 結構
<div>Using v-html directive: <p v-html="rawHtml"></p></div>jsx 語法
而在 jsx 語法 中就更直接了，我們直接通過 變量 的形式來寫 html 結構 配合上 文本插值 {} 即可：
// 最終變成純文本
cosnt rawHtml = '<span>hello!</span>'
<p>Using text interpolation: { rawHtml }</p>
// 最終渲染為 html 結構
cosnt rawHtml = <span>hello!</span>
<div>Using v-html directive: { rawHtml }</div>條件渲染
template 語法
在模板語法中和 條件渲染 相關的可以直接使用指令 v-if / v-show 來實現(xiàn)：
<p v-show="isShow">hello world！</p> <p v-show="!isShow">hello bros！</p> <p v-if="isShow">hello world！</p> <p v-else>hello bros！</p>
jsx 語法
而在 jsx 語法 中我們就不能使用 指令形式 了，取而代之的是 JavaScript 中的 if-else、&&、||、三元表達式 等形式：
if-else
const content = (isShow) => {
if(isShow){
return <h1>hello world！</h1>
}else{
return <div>hello bros！</div>
}
}&&
{ isShow && <div>hello world！</div> }
{ !isShow && <div>hello bros！</div> }||
const content1 = <h1>hello world！</h1>
const content2 = <h1>hello world！</h1>
<div>{ content1 || content2 } </div>三元表達式
const content1 = <h1>hello world！</h1>
const content2 = <h1>hello world！</h1>
<div>{ isShow ? content1 : content2 } </div>列表渲染
tempalte 語法
在 template 模板 中可以通過 v-for 指令 來快速實現(xiàn)列表渲染：
<ul>
<li v-for="item in list" :key="item.key">{{ item.text }}</li>
</ul>jsx 語法
在 jsx 語法 中通常是使用 Array.prototype.map() 方法來實現(xiàn)列表渲染，原因就在于這個遍歷數(shù)組的方法返回值也是數(shù)組：
<ul>
{
list.map((item) => (
<li key={item.key}>{ item.text }</li>
))
}
</ul>style 外部樣式
template 語法
在 .vue 文件 中可以通過 <style> 標簽來 編寫樣式 或 導入外部樣式，還可以直接通過設置 scope 實現(xiàn)局部樣式:
<script setup lang="ts">
import { ref } from "vue";
import ChcekBox from "./components/CheckBox";
const checkResult = ref(false);
</script>
<template>
<ChcekBox v-model="checkResult">選項</ChcekBox>
</template>
<style scope>
@import './index.less';
</style>jsx 語法
而在一個 .jsx / .tsx 文件中由于不存在 <style> 元素，因此無法通過其來編寫或?qū)霕邮剑蛘咄ㄟ^ scope 實現(xiàn)局部樣式，可通過如下方式導入：
直接 import 導入
import { defineComponent, ref } from 'vue'
import './index.less'
export default defineComponent({})通過 CSS Module 導入
import { defineComponent, ref } from 'vue'
import styleModule from './index.module.less'
export default defineComponent({
setup() {
return () => (
<label class={styleModule.abs}>hello world!</label>
)
})事件綁定
tempalte 語法
在模板語法中綁定事件可以使用 v-on（簡寫 @） 來實現(xiàn)，并且可以在模板中 直接傳遞參數(shù) 給目標事件，也可以配合使用 事件修飾符，支持內(nèi)聯(lián)事件等等。
綁定處理函數(shù)
<!-- 方法處理函數(shù) --> <button v-on:click="doThis"></button> <!-- 縮寫 --> <button @click="doThis"></button>
使用修飾符
<!-- 鏈式調(diào)用修飾符 --> <button @click.stop.prevent="doThis"></button>
傳遞參數(shù)
<!-- 傳參 --> <button @click="doThis($event, params)"></button>
內(nèi)聯(lián)事件
<!-- 傳參 --> <button @click="count++"></button>
jsx 語法
上述寫法在 jsx 語法 中的對應寫法具體如下：
綁定處理函數(shù)
需要使用 on + [eventName] 的形式來綁定事件，可使用 或 不使用 駝峰形式，但當使用 typescript 時建議使駝峰形式，否則會有提示：
<!-- 駝峰 -->
<button onClick={doThis}></button>
<!-- 非駝峰 -->
<button onclick={doThis}></button>使用修飾符
在 jsx 語法 中不能直接使用 .stop 形式的事件修飾符，需要通過 withModifiers 函數(shù)來實現(xiàn)，其支持 事件和按鍵修飾符：
<!-- withModifiers -->
<button onClick={withModifiers(doThis, ['prevent'])}></button>傳遞參數(shù)
在 jsx 語法 中不能像在模板中使用 handleAction($event, params) 的方式來實現(xiàn)傳參，因為這種寫法在 jsx 中屬于調(diào)用，因此相當于把函數(shù)返回值作為事件綁定到目標元素上，大多數(shù)情況下會拋出異常（即返回值不一定為函數(shù)）：
使用 bind 實現(xiàn)傳參
const bindEvent = doThis.bind(tarrget)
<!-- 傳參 -->
<button onClick={bindEvent}></button>使用 箭頭函數(shù) 實現(xiàn)傳參
<!-- 傳參 -->
<button onClick={ (parms) => bindEvent(parms)}></button>內(nèi)聯(lián)事件
在 jsx 語法 并不支持內(nèi)聯(lián)事件的寫法，因此可以使用箭頭函數(shù)來包裹：
<!-- 方式一 -->
<button onClick={ () => count++ }></button>
<!-- 方式一 -->
const addCount = () => count++
<button onClick={ addCount }></button>雙向綁定 v-model
template 語法
v-model 可以在組件上使用以實現(xiàn) 雙向綁定：
- 在 原生表單元素 上使用
v-model會被編譯為value 屬性和input 事件 - 在 組件 上使用
v-model會被編譯為modelValue 屬性和update:modelValue 事件 - 支持自定義
v-model綁定的屬性名和事件名
// 常見表單 <input v-model="searchText" /> // 自定義組件 <CustomInput v-model="searchText" /> // 自定義 v-model 名 <MyComponent v-model:title="bookTitle" />
jsx 語法
正常綁定
<CustomInput v-model={searchText} />自定義名稱
jsx 語法 中不存在類似 v-model:title 的命名形式，因此我們給 v-model 一個數(shù)組，如 [title, 'titleAlias']：
- 數(shù)組的第一個參數(shù)就是要綁定的 值
數(shù)組的第二個參數(shù)就是要綁定的 自定義名稱
<Custom v-model={[title, 'titleAlias']} />slot 插槽
template 語法
在模板語法中可以 <slot> 元素來定義 插槽出口，用于標示父元素提供的 插槽內(nèi)容 的渲染位置:
默認插槽
<button class="fancy-btn"> <slot></slot> <!-- 插槽出口 --> </button>
具名插槽
<button class="fancy-btn"> <slot name="content"></slot> <!-- 插槽出口 --> </button>
動態(tài)插槽
<div>
<!-- 動態(tài)插槽 -->
<template v-slot:[dynamicSlotName]> ... </template>
<!-- 縮寫為 -->
<template #[dynamicSlotName]> ... </template> </base-layout>
</div>作用域插槽
<!-- MyComponent 模板 -->
<div>
<slot :text="greetingMessage" :count="1"></slot>
</div>
<!-- 父組件模板 -->
<MyComponent v-slot="slotProps">
{{ slotProps.text }} {{ slotProps.count }}
</MyComponent>jsx 語法
由于 jsx 語法 中不存在 <slot> 元素，因此只能通過如下方式來渲染插槽內(nèi)容：
從 SetupContext 中獲取
defineComponent({
setup(props, { slots }) {
return <div>
{ slots.default && slots.default() }
{ slots.nameSlot && slots.nameSlot() }
</div>
}
})使用 useSlot() 方法
import { defineComponent, renderSlots } from 'vue'
defineComponent({
setup(props, context) {
const slots = useSlots();
return <div>
{ renderSlot(slots, 'default') }
</div>
}
})使用 renderSlot() 方法
import { defineComponent, renderSlot } from 'vue'
defineComponent({
setup(props, { slots }) {
return <div>
{ renderSlot(slots, 'default') }
</div>
}
})使用 Scoped Slots 作用域插槽
<!-- MyComponent 模板 -->
defineComponent({
setup(props, { slots }) {
const slotParams = { name: 'hello' };
return <div>
{ slots.default && slots.default(slotParams) }
</div>
}
})
<!-- 父組件模板 -->
defineComponent({
setup(props, { slots }) {
return <div>
<MyComponent v-slot="slotProps">
{{ slotProps.name }}
</MyComponent>
</div>
}
})以上就是Vue中從template到jsx語法指北的詳細內(nèi)容，更多關于Vue template jsx語法的資料請關注腳本之家其它相關文章！
相關文章
Vue3為我們開發(fā)提供了兩種組件邏輯實現(xiàn)方式：選項式API和組合式API,本文將嘗試為大家分析什么是選項式API和組合式API,以及兩種API的優(yōu)缺點,希望對大家有所幫助2023-12-12
vue使用axios實現(xiàn)excel文件下載的功能
這篇文章主要介紹了vue中使用axios實現(xiàn)excel文件下載的功能，本文通過實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下2020-07-07
在vue項目中添加高德地圖,對開發(fā)地圖的開發(fā)人員有一定幫助,下面這篇文章主要給大家介紹了關于vue項目中使用高德地圖的超詳細步驟,文中通過圖文以及實例代碼介紹的非常詳細,需要的朋友可以參考下2023-03-03
Vue.js 的移動端組件庫mint-ui實現(xiàn)無限滾動加載更多的方法
下面小編就為大家分享一篇Vue.js 的移動端組件庫mint-ui實現(xiàn)無限滾動加載更多的方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2017-12-12
v-model是Vue中的一個重要語法糖,主要用于實現(xiàn)數(shù)據(jù)的雙向綁定,它通過結合value屬性和input事件,簡化了代碼并提高了開發(fā)效率,文中通過代碼介紹的非常詳解,需要的朋友可以參考下2024-09-09
vue用@表示src文件夾，引入時找文件路徑更方便,下面這篇文章主要給大家介紹了關于vue配置根目錄(用@代表src目錄)的相關資料,文中通過示例代碼介紹的非常詳細,需要的朋友可以參考下2022-07-07
解決vue中el-date-picker?type=daterange日期不回顯的問題
這篇文章主要介紹了解決vue中el-date-picker?type=daterange日期不回顯的問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-10-10
這篇文章主要為大家介紹了vue篇之事件總線EventBus使用示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-09-09
這篇文章主要介紹了vue導出excel文件流中文亂碼問題及解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-06-06
這篇文章主要為大家詳細介紹了VUEJS實戰(zhàn)之修復錯誤并且美化時間，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-06-06