Vue中從template到jsx語法教程示例
從 template 到 jsx
大多數(shù) Vue 開發(fā)者都習慣使用 template 模板語法，因為 template 模板語法 具有如下優(yōu)點：
熟悉的類 HTML 結構
- 模板語法可以像 HTML 一樣進行布局和設計，上手快、學習成本比低
更簡潔的寫法
- 例如，可以在模板中使用各種 修飾符 來達到簡化編寫代碼的過程
結構與邏輯分離
- 元素結構和邏輯并沒有雜糅在一起，因此結構上更簡潔明了
提供更好的性能
- Vue3 中對模板語法在 編譯階段 進行的各種優(yōu)化，使得其性能更好
但即便如此，在某些場景下還是不得不在 Vue 中使用 jsx 語法 實現(xiàn)需求， 例如開發(fā) 內部組件庫 選擇的編寫形式就是 jsx 語法 等。
而對于習慣使用 template 模板語法 的開發(fā)者并不是輕易的就能轉換到相應 jsx 語法，因此本文就列舉一些 template 模板語法 中對應的 jsx 語法 應該怎么寫。
插值表達式（文本插值）
template 語法
最基本的數(shù)據(jù)綁定形式就是 文本插值，它使用的是 Mustache 語法 (即 {{}} )，雙大括號 中的內容最終 會將數(shù)據(jù)解釋為純文本。
<span>Message: {{ msg }}</span>jsx 語法
而 JSX 中使用 文本插值 就從 雙大括號 {{ }} 變成 單大括號 {}
<span>Message: { msg }</span>原始 HTML
template 語法
雙大括號 會將數(shù)據(jù)解釋為純文本，而不是 HTML，因此若想在模板中 插入 HTML，我們需要使用 v-html 指令：
// html 字符內容
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> 元素，因此無法通過其來編寫或導入樣式，或者通過 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ù) 給目標事件，也可以配合使用 事件修飾符，支持內聯(lián)事件等等。
綁定處理函數(shù)
<!-- 方法處理函數(shù) --> <button v-on:click="doThis"></button> <!-- 縮寫 --> <button @click="doThis"></button>
使用修飾符
<!-- 鏈式調用修飾符 --> <button @click.stop.prevent="doThis"></button>
傳遞參數(shù)
<!-- 傳參 --> <button @click="doThis($event, params)"></button>
內聯(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 中屬于調用，因此相當于把函數(shù)返回值作為事件綁定到目標元素上，大多數(shù)情況下會拋出異常（即返回值不一定為函數(shù)）：
使用 bind 實現(xiàn)傳參
const bindEvent = doThis.bind(tarrget)
<!-- 傳參 -->
<button onClick={bindEvent}></button>使用 箭頭函數(shù) 實現(xiàn)傳參
<!-- 傳參 -->
<button onClick={ (parms) => bindEvent(parms)}></button>內聯(lián)事件
在 jsx 語法 并不支持內聯(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> 元素來定義 插槽出口，用于標示父元素提供的 插槽內容 的渲染位置:
默認插槽
<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> 元素，因此只能通過如下方式來渲染插槽內容：
從 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語法指北的詳細內容，更多關于Vue template jsx語法的資料請關注腳本之家其它相關文章！
相關文章
Vue實現(xiàn)docx/xlsx/pdf等類型文件預覽功能
這篇文章主要為大家詳細介紹了如何溧陽Vue實現(xiàn)docx/xlsx/pdf等類型文件預覽功能，文中的示例代碼講解詳細，感興趣的小伙伴可以跟隨小編一起學習一下2023-02-02
函數(shù)式組件就是函數(shù)是組件,組件是函數(shù),它的特征是沒有內部狀態(tài)、沒有生命周期鉤子函數(shù)、沒有this（不需要實例化的組件）,這篇文章主要給大家介紹了關于Vue.js函數(shù)式組件的相關資料,需要的朋友可以參考下2021-10-10
這篇文章主要介紹vue.js Router嵌套路由,平時訪問首頁,里面有新聞類的/home/news,還有信息類的/home/message這時候就需要使用到嵌套路由,下面我們就來具體學習嵌套路由的原理,需要的朋友可以參考一下2021-10-10
這篇文章主要給大家介紹了關于vue動態(tài)合并單元格并添加小計合計功能的相關資料，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2020-11-11
最近在vue3項目中通過three.js實現(xiàn)了實際的三維效果demo,下面這篇文章主要給大家介紹了關于在vue中使用three.js的相關資料,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下2023-03-03
這篇文章主要介紹了關于vue3中setup函數(shù)的使用，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04
這篇文章主要介紹了關于json-bigint處理大數(shù)字問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-05-05
Vue3使用vue-office插件實現(xiàn)word預覽功能
vue-office是一個支持多種文件(docx、.xlsx、pdf)預覽的vue組件庫,支持vue2和vue3,這篇文章主要介紹了Vue3使用vue-office插件實現(xiàn)word預覽功能,需要的朋友可以參考下2024-04-04
在Vue2開發(fā)階段,為了讓局域網(wǎng)內的小伙伴訪問本地項目,需要修改項目的配置文件`demo/config/index.js`,將調試host從默認的`127.0.0.1`改為`0.0.0.0`,這樣其他設備通過你的IP地址就可以訪問到本地項目了2025-10-10
這篇文章主要介紹了vue3項目中封裝axios的示例代碼,本文通過示例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2022-12-12