如何在 Vue 中使用 JSX
JSX 是什么
JSX 是一種 Javascript 的語法擴(kuò)展，JSX = Javascript + XML，即在 Javascript 里面寫 XML，因?yàn)?JSX 的這個(gè)特性，所以他即具備了 Javascript 的靈活性，同時(shí)又兼具 html 的語義化和直觀性
為什么要在 Vue 中使用 JSX
有時(shí)候，我們使用渲染函數(shù)（render function）來抽象組件，渲染函數(shù)不是很清楚的參見官方文檔, 而渲染函數(shù)有時(shí)候?qū)懫饋硎欠浅Ｍ纯嗟?/p>
createElement(
'anchored-heading', {
props: {
level: 1
}
}, [
createElement('span', 'Hello'),
' world!'
]
)
其對應(yīng)的模板是下面：
<anchored-heading :level="1"> <span>Hello</span> world! </anchored-heading>
這顯然是吃力不討好的，這個(gè)時(shí)候就派上 JSX 上場了。在 Vue 中使用 JSX，需要使用 Babel 插件，它可以讓我們回到更接近于模板的語法上，接下來就讓我們一起開始在 Vue 中寫 JSX 吧
開始
快讀創(chuàng)建一個(gè) Vue 項(xiàng)目，直接使用 vue-cli 創(chuàng)建一個(gè)項(xiàng)目：
# 直接回車即可 vue create vue-jsx
安裝依賴：
npm install @vue/babel-preset-jsx @vue/babel-helper-vue-jsx-merge-props
配置 .babelrc ：
module.exports = {
presets: [
'@vue/cli-plugin-babel/preset',
['@vue/babel-preset-jsx',
{
'injectH': false
}]
]
}
基礎(chǔ)內(nèi)容
這里展示在 Vue 中書寫一些基礎(chǔ)內(nèi)容，包括純文本、動(dòng)態(tài)內(nèi)容、標(biāo)簽使用、自定義組件的使用，這些跟我們平時(shí)使用單文件組件類似，如下所示：
render() {
return (
<div>
<h3>內(nèi)容</h3>
{/* 純文本 */}
<p>hello, I am Gopal</p>
{/* 動(dòng)態(tài)內(nèi)容 */}
<p>hello { this.msg }</p>
{/* 輸入框 */}
<input />
{/* 自定義組件 */}
<myComponent></myComponent>
</div>
);
}
Attributes/Props
Attributes 的綁定跟普通的 HTML 結(jié)構(gòu)一樣
render() {
return <div><input placeholder="111" /></div>
}
注意，如果動(dòng)態(tài)屬性，之前是 v-bind:placeholder="this.placeholderText" 變成了placeholder={this.placeholderText}
render() {
return <input
type="email"
placeholder={this.placeholderText}
/>
}
我們也可以展開一個(gè)對象
render (createElement) {
return (
<button {...this.largeProps}></button>
)
}
像 input 標(biāo)簽，就可以如下批量綁定屬性
const inputAttrs = {
type: 'email',
placeholder: 'Enter your email'
};
render() {
return <input {...{ attrs: inputAttrs }} />
}
插槽
我們來看下怎么實(shí)現(xiàn)具名插槽和作用域插槽
具名插槽：父組件的寫法和單文件組件模板的類似，通過 slot="header" 這樣方式指定要插入的位置。子組件通過 this.$slots.header 方式指定插槽的名稱，其中 header 就是插槽的名稱
父組件：
render() {
{/* 具名插槽 */}
<myComponent>
<header slot="header">header</header>
<header slot="content">content</header>
<footer slot="footer">footer</footer>
</myComponent>
}
子組件：
render() {
return (
<div>
{/* 純文本 */}
<p>我是自定義組件</p>
{this.$slots.header}
{this.$slots.content}
{this.$slots.footer}
</div>
);
}
作用域插槽：子組件中通過 {this.$scopedSlots.test({ user: this.user })} 指定插槽的名稱是 test，并將 user 傳遞給父組件。父組件在書寫子組件標(biāo)簽的時(shí)候，通過 scopedSlots 值指定插入的位置是 test，并在回調(diào)函數(shù)獲取到子組件傳入的 user 值
父組件：
render() {
{/* 具名插槽 作用域插槽 */}
<myComponent {
...{
scopedSlots: {
test: ({user}) => (
<div>{user.name}</div>
)
}
}
}>
</myComponent>
子組件：
render() {
return (
<div>
{this.$scopedSlots.test({
user: this.user
})}
</div>
);
}
指令
常見的指令如下所示：
render() {
{/* 指令 */}
{/* v-model */}
<div><input vModel={this.newTodoText} /></div>
{/* v-model 以及修飾符 */}
<div><input vModel_trim={this.tirmData} /></div>
{/* v-on 監(jiān)聽事件 */}
<div><input vOn:input={this.inputText} /></div>
{/* v-on 監(jiān)聽事件以及修飾符 */}
<div><input vOn:click_stop_prevent={this.inputText} /></div>
{/* v-html */}
<p domPropsInnerHTML={html} />
}
函數(shù)式組件
函數(shù)式組件是一個(gè)無狀態(tài)、無實(shí)例的組件，詳見官網(wǎng)說明，新建一個(gè) FunctionalComponent.js 文件，內(nèi)容如下：
export default ({ props }) => <p>hello {props.message}</p>
父組件中調(diào)用如下:
import funComponent from './FunctionalComponent'
...
render() {
return {/* 函數(shù)式組件 */}
<funComponent message="Gopal"></funComponent>
}
以上就是如何在 Vue 中使用 JSX的詳細(xì)內(nèi)容，更多關(guān)于Vue 中使用 JSX的資料請關(guān)注腳本之家其它相關(guān)文章！
相關(guān)文章
vue項(xiàng)目實(shí)戰(zhàn)之優(yōu)雅使用axios
axios是一個(gè)基于promise的HTTP庫,可以用在瀏覽器和?node.js?中,下面這篇文章主要給大家介紹了關(guān)于vue項(xiàng)目實(shí)戰(zhàn)之優(yōu)雅使用axios的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-02-02
這篇文章主要介紹了vue去除#問題處理經(jīng)過，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2019-01-01
關(guān)于配置babel-plugin-import報(bào)錯(cuò)的坑及解決
這篇文章主要介紹了關(guān)于配置babel-plugin-import報(bào)錯(cuò)的坑及解決方案，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-12-12
Vue transition實(shí)現(xiàn)點(diǎn)贊動(dòng)畫效果的示例
點(diǎn)贊動(dòng)畫是網(wǎng)頁評論中常見的功能，本文將介紹如何用vue實(shí)現(xiàn)這一效果。點(diǎn)贊時(shí)愛心縮小變大，變大時(shí)略微大一點(diǎn)再變正常，取消點(diǎn)贊時(shí)愛心無動(dòng)畫，同時(shí)數(shù)字滾動(dòng)，+1 時(shí)向上滾動(dòng)，-1 時(shí)向下滾動(dòng)2021-05-05
vue2移動(dòng)端+swiper實(shí)現(xiàn)異形的slide方式
這篇文章主要介紹了vue2移動(dòng)端+swiper實(shí)現(xiàn)異形的slide方式,具有很好的參考價(jià)值,希望對大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-03-03
這篇文章主要介紹了Vue前端柱狀圖實(shí)例(疊狀條形圖)，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-03-03
VUE中的export default和export使用方法解析
export default和export都能導(dǎo)出一個(gè)模塊里面的常量，函數(shù)，文件，模塊等，在其它文件或模塊中通過import來導(dǎo)入常量，函數(shù)，文件或模塊。但是，在一個(gè)文件或模塊中export,import可以有多個(gè)，export default卻只能有一個(gè)。2022-12-12
element-ui中實(shí)現(xiàn)tree子節(jié)點(diǎn)部分選中時(shí)父節(jié)點(diǎn)也選中
這篇文章主要介紹了element-ui中實(shí)現(xiàn)tree子節(jié)點(diǎn)部分選中時(shí)父節(jié)點(diǎn)也選中的方式，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-08-08
這篇文章主要介紹了用vue3寫了一個(gè)Json-Preview的相關(guān)知識(shí),引入后直接<json-preview?v-model="jsonData"></json-preview>就可以使用了，本文通過示例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2022-06-06
Vue或者React項(xiàng)目配置@路徑別名及智能提示方案
這篇文章主要介紹了Vue或者React項(xiàng)目配置@路徑別名及智能提示方案,具有很好的參考價(jià)值,希望對大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-10-10