摘要:JSX 是一種 Javascript 的語法擴充套件,JSX = Javascript + XML,即在 Javascript 裡面寫 XML,因為 JSX 的這個特性,所以他即具備了 Javascript 的靈活性,同時又兼具 html 的語義化和直觀性。
本文分享自華為雲社群《在 Vue 中如何使用 JSX,就這麼簡單!【建議收藏】》,作者:紙飛機 。
JSX是什麼
JSX 是一種 Javascript 的語法擴充套件,JSX = Javascript + XML,即在 Javascript 裡面寫 XML,因為 JSX 的這個特性,所以他即具備了 Javascript 的靈活性,同時又兼具 html 的語義化和直觀性。(個人建議靈活度強的部分元件可以用JSX來代替,整個專案JSX屬實沒必要)
XML學習地址(學與不學可隨意,瞭解就ok):https://www.w3school.com.cn/x...
用template的弊端:https://www.mk2048.com/blog/b...
為什麼要在 Vue 中使用 JSX
有時候,我們使用渲染函式(render function)來抽象元件,渲染函式不是很清楚的參見官方文件, 而渲染函式有時候寫起來是非常痛苦的,所以只需要有個瞭解。
渲染函式:https://cn.vuejs.org/v2/guide...
createElement(
'anchored-heading', {
props: {
level: 1
}
}, [
createElement('span', 'Hello'),
' world!'
]
)
其對應的模板是下面:
<anchored-heading :level="1">
<span>Hello</span> world!
</anchored-heading>
你看這寫起來多費勁,這個時候就派上 JSX 上場了。在 Vue 中使用 JSX,需要使用 Babel 外掛,它可以讓我們回到更接近於模板的語法上,接下來就讓我們一起開始在 Vue 中寫 JSX 吧。
建立專案並配置Babel
`vue create vue-jsx
選擇vue2的`
安裝依賴:
npm install @vue/babel-preset-jsx @vue/babel-helper-vue-jsx-merge-props
# or
yarn add @vue/babel-preset-jsx @vue/babel-helper-vue-jsx-merge-props
配置 .babelrc(babel.config.js) :
module.exports = {
presets: [
'@vue/cli-plugin-babel/preset',
['@vue/babel-preset-jsx',
{
'injectH': false
}]
]
}
配置後我們啟動專案:
yarn serve
demo結構圖:
配置了babel.config.js後,我們把App.vue引入的HelloWorld.vue改為HelloWorld.js,並且刪除HelloWorld.js中關於template和style,以及script標籤。
export default {
name: 'HelloWorld',
props: {
msg: String
}
}
JSX基礎用法
這裡展示在 Vue 中書寫一些基礎內容。
純文字、動態內容、標籤使用、自定義元件、樣式和class
import myComponent from './myComponent'
import './HelloWorld.css'
// 建立一個元件button
const ButtonCounter = {
name: "button-counter",
props: ["count"],
methods: {
onClick() {
this.$emit("change", this.count + 1);
}
},
render() {
return (
<button onClick={this.onClick}>數量 {this.count}+</button>
);
}
};
export default {
name: 'HelloWorld',
components: {
myComponent
},
data () {
return {
text:'hello 紙沒了飛機',
inputText:'我吃了',
count: 0
}
},
props: {
msg: String
},
watch: {},
methods: {
onChange(val) {
this.count = val;
alert(this.count)
}
},
render() {
// const {text,inputText,count} = this //通過解構,下方return片段中就不需要this
return (
<div>
<h3>內容</h3>
{/* 純文字 */}
<p>hello, I am Gopal</p>
{/* 動態內容 */}
<p>{ this.text }</p>
<p>hello { this.msg }</p>
{/* 輸入框 */}
<input/>
{/* 自定義元件 */}
<myComponent/>
<ButtonCounter
style={{ marginTop: "10px" }}
count={this.count}
type="button"
onChange={this.onChange}
/>
</div>
);
}
}
題外話:建立元件那裡大家可以多學學const 建立的ButtonCounter元件的那種方式。在React中也是經常會這麼建立的。
這麼看的話和在template裡寫沒有多大區別,標籤該是啥還是啥沒有變化。那麼這麼一想的話,style呢,class呢?接下來就是style和class樣式的寫法(包括動態樣式)
我們先給h3繫結一個class為colorRed:
<h3 class="colorRed">內容</h3>
審查元素發現直接寫class繫結是可以的:
那麼class的樣式怎麼寫呢?畢竟js檔案裡寫<style></style>貌似是不行的!
1、全域性樣式
App.vue
<style>
.colorRed{
color: red;
}
</style>
2、引入一個css檔案或者配合style-loader引入一個less、sass、stylus檔案
注意:都需要安裝配置對應的loader,既然都是JSX了,那我們用stylus來講解下,相信less、sass大家都會了。stylus是一個省略了{},靠縮緊來識別的css編譯器。(不想用stylus可跳過,樣式這塊可隨意)
yarn add global stylus
yarn add --dev stylus stylus-loader
各種style安裝見:https://www.cnblogs.com/jimc/...
安裝完成後新建HelloWorld.styl,然後引入。
stylus的使用:https://www.jianshu.com/p/5fb...
stylus官網:https://stylus.zcopy.site/
控制檯stylus報錯見:https://blog.csdn.net/csdn_zh...
vscode編輯期報錯:安裝編輯器stylus語法外掛,並重啟
效果:
行內樣式style:
<p style="color:blue">hello, I am Gopal</p>
動態繫結class和style
<p style={this.isGreen?'color:green':''}>{ this.text }</p>
<p class={this.isYellow?'colorYellow':''}>hello { this.msg }</p>
<p style={this.isRed?colorRed:''}>紅色的文字</p>
屬性繫結和普通HTML一樣的
畢竟class和style可都是html的屬性,這點相信大家都知道的。
<input placeholder="我是placeholder" />
<input placeholder={placeholderText} />
{/* 解構N個屬性,要啥放啥 */}
<div {...attrObj} />
效果:
常用指令
template常用指令:v-html | v-text、v-if、v-for、v-modal等。template的指令在JSX是無法使用的,故需要一些寫法,請看下面。
我新建個instructions.js用來示範指令這塊。在App.vue中引入。
v-html | v-text
在 JSX 裡面,如果要設定 dom 元素的 innerHTML,就用到 domProps。
render() {
const { htmlCode } = this
return (
<div>
<div domPropsInnerHTML={htmlCode}></div>
</div>
);
}
雖然v-text有domPropsInnerText,但沒有用的必要。
v-if
分簡單的和複雜的。
簡單:
render() {
let bool = false
return (
<div>
{ bool ? <button>按鈕1</button> : <button>按鈕2</button>}
</div>
);
}
複雜:
render() {
let num = 3
if(num === 1){ return( <button>按鈕1</button> ) }
if(num === 2){ return( <button>按鈕2</button> ) }
if(num === 3){ return( <button>按鈕3</button> ) }
}
v-for
就使用 map 方法來實現,在react中也是如此。
render(h) {
var list = [1,2,3]
return(
<div>
{ list.map(item => <button>按鈕{item}</button>) }
</div>
)
}
v-modal
注意:新版 vue-cli4 中,已經預設整合了 JSX 語法對 v-model 的支援,可以直接使用
<input v-model={this.value}>
如果你的專案比較老,也可以安裝外掛 babel-plugin-jsx-v-model 來進行支援
我可是cli4,我來驗證下:
驗證結果:(通過)
當然以上兩種方式你都不想搞,你也可以手動支援,這就涉及到監聽事件了,請向下看。
監聽事件及事件修飾符
監聽事件想到用 onChange, onClick等。
需要注意的是,傳引數不能使用 onClick={this.removePhone(params)},這樣子會每次 render 的時候都會自動執行一次方法
應該使用 bind,或者箭頭函式來傳參
methods: {
handleClick(val){
alert(val)
}
},
<button type="button" onClick={this.handleClick.bind(this, 11)}>點選bind</button>
<button type="button" onClick={() => this.handleClick(11)}>點選箭頭函式</button>
上面提到的用過監聽事件來實現v-modal
<input type="text" value={this.text} onInput={this.input}/>
methods: {
input(e){
this.text = e.target.value
}
},
除此之外,還可以使用物件的方式去監聽事件:
render() {
return (
<input
value={this.content}
on={{
focus: this.$_handleFocus,
input: this.$_handleInput
}}
nativeOn={{
click: this.$_handleClick
}}
></input>
)
}
其他事件的使用同理都是加on。
事件修飾符
和指令一樣,除了個別的之外,大部分的事件修飾符都無法在JSX中使用,這時候你肯定已經習慣了,肯定有替代方案的。
.stop : 阻止事件冒泡,在JSX中使用event.stopPropagation()來代替
.prevent:阻止預設行為,在JSX中使用event.preventDefault() 來代替
.self:只當事件是從偵聽器繫結的元素本身觸發時才觸發回撥,使用下面的條件判斷進行代替
if (event.target !== event.currentTarget){
return
}
.enter與keyCode: 在特定鍵觸發時才觸發回撥
`if(event.keyCode === 13) {
// 執行邏輯
}`
除了上面這些修飾符之外,尤大大為了照顧我們這群CV仔,還是做了一點優化的,對於.once,.capture,.passive,.capture.once,尤大大提供了字首語法幫助我們簡化程式碼
render() {
return (
<div
on={{
// 相當於 :click.capture
'!click': this.$_handleClick,
// 相當於 :input.once
'~input': this.$_handleInput,
// 相當於 :mousedown.passive
'&mousedown': this.$_handleMouseDown,
// 相當於 :mouseup.capture.once
'~!mouseup': this.$_handleMouseUp
}}
></div>
)
}
如果有引數傳遞給方法,不能直接(引數),會在頁面中立即觸發,需要我在下面這種寫法:
clickOnce(val) {
alert(val);
},
<button
type="button"
on={{
'~click': ()=>this.clickOnce('只能點一次'),
}}
>
事件修飾符點選一次
</button>
使用範圍(結合第三方ui元件)
不僅僅在 render 函式裡面使用 JSX,而且還可以在 methods 裡面返回 JSX,然後在 render 函式裡面呼叫這個方法。並且也可以直接使用例如elementui等ui元件。
JSX 還可以直接賦值給變數、例如使用elementui的el-dialog。(您在測試該案例時記得安裝elemnt)
methods: {
$_renderFooter() {
return (
<div>
<el-button>確定</el-button>
<el-button onClick={ () =>this.closeDialog() }>取消</el-button>
</div>
);
},
openDialog(){
this.visible = true
},
closeDialog(){
this.visible = false
}
},
render() {
const buttons = this.$_renderFooter();
return (
<div>
<Button onClick={ () =>this.openDialog() }>開啟Dialog</Button>
<el-dialog visible={this.visible}>
<div>彈窗內容</div>
<template slot="footer">{buttons}</template>
</el-dialog>
</div>
);
}
插槽
插槽就是子元件中提供給父元件使用的一個佔位符,插槽分為預設插槽,具名插槽和作用域插槽,下面我依次為您帶來每種在JSX中的用法與如何去定義插槽。
預設插槽
使用預設插槽
使用element-ui的Dialog時,彈框內容就使用了預設插槽,在JSX中使用預設插槽的用法與普通插槽的用法基本是一致的,如下程式碼所示:
render() {
return (
<ElDialog title="彈框標題" visible={true}>
{/*這裡就是預設插槽*/}
<div>這裡是彈框內容</div>
</ElDialog>
)
}
自定義預設插槽
在Vue的例項this上面有一個屬性slots,這個上面就掛載了一個這個元件內部的所有插槽,使用this.slots,這個上面就掛載了一個這個元件內部的所有插槽,使用this.slots.default就可以將預設插槽加入到元件內部。
export default {
props: {
visible: {
type: Boolean,
default: false
}
},
render() {
return (
<div class="custom-dialog" vShow={this.visible}>
{/**通過this.$slots.default定義預設插槽*/}
{this.$slots.default}
</div>
)
}
}
使用:
<myComponent visible={true} slot>我是自定義預設插槽</myComponent>
另vShow相當於 v-show,不代表別的也可以這樣!
具名插槽
使用具名插槽
有時候我們一個元件需要多個插槽,這時候就需要為每一個插槽起一個名字,比如element-ui的彈框可以定義底部按鈕區的內容,就是用了名字為footer的插槽。
render() {
return (
<ElDialog title="彈框標題" visible={true}>
<div>這裡是彈框內容</div>
{/** 具名插槽 */}
<template slot="footer">
<ElButton>確定</ElButton>
<ElButton>取消</ElButton>
</template>
</ElDialog>
)
}
自定義具名插槽
在上節自定義預設插槽時提到了slots,對於預設插槽使用this.slots,對於預設插槽使用this.slots.default,而對於具名插槽,可以使用this.$slots.footer進行自定義。
render() {
return (
<div class="custom-dialog" vShow={this.visible}>
{this.$slots.default}
{/**自定義具名插槽*/}
<div class="custom-dialog__foolter">{this.$slots.footer}</div>
</div>
)
}
使用:
<myComponent visible={true}>
<template slot="footer">
<ElButton>確定</ElButton>
<ElButton>取消</ElButton>
</template>
</myComponent>
作用域插槽
使用作用域插槽
有時讓插槽內容能夠訪問子元件中才有的資料是很有用的,這時候就需要用到作用域插槽,在JSX中,因為沒有v-slot指令,所以作用域插槽的使用方式就與模板程式碼裡面的方式有所不同了。比如在element-ui中,我們使用el-table的時候可以自定義表格單元格的內容,這時候就需要用到作用域插槽。
<myComponent1
visible={this.visible}
{...{
scopedSlots: {
test: ({ user }) => {
// 這個user就是子元件傳遞來的資料,同理可這樣拿到el-table的row,不過test得是default,不過案例還是我這樣
<div style="color:blue;">快來啊,{user.name},看看這個作用域插槽</div>
},
},
}}
></myComponent1>
自定義作用域插槽
子元件中通過 {this.$scopedSlots.test({ user: {name:‘紙飛機’}})} 指定插槽的名稱是 test,並將 user 傳遞給父元件。父元件在書寫子元件標籤的時候,通過 scopedSlots 值指定插入的位置是 test,並在回撥函式獲取到子元件傳入的 user 值
注意:作用域插槽是寫在子元件標籤中的,類似屬性。而不是像具名插槽放在標籤內部
新建個作用域插槽.js
// 一個為jsx的子元件(玩玩插槽)
export default {
name: "myComponent",
data() {
return {
};
},
props: {
visible: {
type: Boolean,
default: false,
},
listData: {
type: Array,
default: function() {
return [];
},
},
},
render() {
return (
<div vShow={this.visible}>
{/**自定義作用域插槽*/}
<div class="item">
{this.$scopedSlots.test({
user: {name:'紙飛機'}
})}
</div>
</div>
);
},
};
效果:
函式式元件
函式式元件是一個無狀態、無例項的元件,詳見官網說明,新建一個 FunctionalComponent.js 檔案,內容如下:
// export default ({ props }) => <p>hello {props.message}</p>;
// 或者推薦下方寫法
export default {
functional: true,
name: "item",
render(h, context) {
console.log(context.props)
return <div style="color:red;font-size:18px;font-weight:bold">{context.props.message}</div>;
},
};
HelloWorld.js中使用:
<funComponent message="展示下函式式元件"></funComponent>
效果:
程式碼地址
https://codechina.csdn.net/qq...
後記
無論你是要用vue2的jsx還是vue3的jsx都沒有本質區別,畢竟vue3是向下相容vue2的;倘若你真的要學vue3的JSX,我建議你學完vue2的再去學;另我不推薦在vue中所有的元件和頁面都用JSX,兩者需要權衡利弊;同時也不必擔心JSX和template的相互巢狀,兩者是可以互相巢狀的。
參考:
https://www.cnblogs.com/ainyi...
https://www.jb51.net/article/...
https://cn.vuejs.org/v2/guide...事件-amp-按鍵修飾符
https://www.cnblogs.com/htooo...
https://www.jianshu.com/p/84b...
https://cloud.tencent.com/dev...