vue組件jsx語法的具體使用
如果使用render函數(shù)來寫比較復(fù)雜的vue組件，對于可讀性和可維護性都很不友好，而使用jsx就會讓我們回到更接近于模板的語法。babel轉(zhuǎn)譯器會將jsx轉(zhuǎn)譯為render函數(shù)渲染。
配置
需要用到babel插件
安裝
npm install\ babel-plugin-syntax-jsx\ babel-plugin-transform-vue-jsx\ babel-helper-vue-jsx-merge-props\ babel-preset-env\ --save-dev
.babelrc配置
在plugins中添加transform-vue-jsx
{
"presets": ["env"],
"plugins": ["transform-vue-jsx"]
}
基礎(chǔ)示例
轉(zhuǎn)義前
<div id="foo">{this.text}</div>
轉(zhuǎn)譯后
h('div', {
attrs: {
id: 'foo'
}
}, [this.text])
Note：h函數(shù)為vue實例的$createElement方法，必須存在于jsx的作用域中，在渲染函數(shù)中必須以第一個參數(shù)傳入，如：
render (h) { // <-- h 函數(shù)必須在作用域內(nèi)
return <div id="foo">bar</div>
}
自動注入h函數(shù)
從3.4.0開始，在用ES2015語法聲明的方法和getter訪問器中(使用function關(guān)鍵字或箭頭函數(shù)除外)，babel會自動注入h（const h = this.$createElement）函數(shù)，所以可以省略(h)參數(shù)。
Vue.component('jsx-example', {
render () { // h 會自動注入
return <div id="foo">bar</div>
},
myMethod: function () { // h 不會注入
return <div id="foo">bar</div>
},
someOtherMethod: () => { // h 不會注入
return <div id="foo">bar</div>
}
})
@Component
class App extends Vue {
get computed () { // h 會自動注入
return <div id="foo">bar</div>
}
}
Vue JSX 和 React JSX對比
首先， Vue2.0 的vnode 格式與react不同，createElement函數(shù)的第二個參數(shù)是一個數(shù)據(jù)對象，接受一個嵌套的對象，每一個嵌套對象都會有對應(yīng)的模塊處理。
Vue2.0 render語法
render (h) {
return h('div', {
// 組件props
props: {
msg: 'hi'
},
// 原生HTML屬性
attrs: {
id: 'foo'
},
// DOM props
domProps: {
innerHTML: 'bar'
},
// 事件是嵌套在`on`下面的，所以將不支持修飾符，如：`v-on:keyup.enter`，只能在代碼中手動判斷keyCode
on: {
click: this.clickHandler
},
// For components only. Allows you to listen to
// native events, rather than events emitted from
// the component using vm.$emit.
nativeOn: {
click: this.nativeClickHandler
},
// class is a special module, same API as `v-bind:class`
class: {
foo: true,
bar: false
},
// style is also same as `v-bind:style`
style: {
color: 'red',
fontSize: '14px'
},
// other special top-level properties
key: 'key',
ref: 'ref',
// assign the `ref` is used on elements/components with v-for
refInFor: true,
slot: 'slot'
})
}
對應(yīng)的Vue2.0 JSX語法
render (h) {
return (
<div
// normal attributes or component props.
id="foo"
// DOM properties are prefixed with `domProps`
domPropsInnerHTML="bar"
// event listeners are prefixed with `on` or `nativeOn`
onClick={this.clickHandler}
nativeOnClick={this.nativeClickHandler}
// other special top-level properties
class={{ foo: true, bar: false }}
style={{ color: 'red', fontSize: '14px' }}
key="key"
ref="ref"
// assign the `ref` is used on elements/components with v-for
refInFor
slot="slot">
</div>
)
}
JSX展開運算符
支持JSX展開，插件會智能的合并數(shù)據(jù)屬性，如：
const data = {
class: ['b', 'c']
}
const vnode = <div class="a" {...data}/>
合并后的數(shù)據(jù)為：
{ class: ['a', 'b', 'c'] }
Vue 指令
JSX對大多數(shù)的Vue內(nèi)建指令都不支持，唯一的例外是v-show，該指令可以使用v-show={value}的語法。大多數(shù)指令都可以用編程方式實現(xiàn)，比如v-if就是一個三元表達(dá)式，v-for就是一個array.map()等。
如果是自定義指令，可以使用v-name={value}語法，但是改語法不支持指令的參數(shù)arguments和修飾器modifier。有以下兩個解決方法：
將所有內(nèi)容以一個對象傳入，如：v-name={{ value, modifier: true }}
使用原生的vnode指令數(shù)據(jù)格式，如：
const directives = [
{ name: 'my-dir', value: 123, modifiers: { abc: true } }
]
return <div {...{ directives }}/>
原文地址(https://github.com/vuejs/babel-plugin-transform-vue-jsx#usage)
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
本文主要介紹了Vue中使用回車鍵觸發(fā)事件的方法實現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-07-07
在Vue中，computed屬性是一種計算屬性，它的值是根據(jù)其他數(shù)據(jù)的值動態(tài)計算出來的，下面小編主要來和大家聊聊Vue 3的組合式API中如何使用computed屬性，感興趣的小伙伴快跟隨小編一起了解一下吧2023-06-06
這篇文章主要介紹了vue自定義加載指令的相關(guān)知識，主要包括創(chuàng)建加載組件，創(chuàng)建指令的方法，結(jié)合實例代碼給大家介紹的非常詳細(xì),需要的朋友可以參考下2022-06-06
每天學(xué)點Vue源碼之vm.$mount掛載函數(shù)
這篇文章主要介紹了vm.$mount掛載函數(shù)，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-03-03
這篇文章主要給大家介紹了關(guān)于離線搭建vue環(huán)境運行項目的相關(guān)資料,文中通過實例代碼以及圖文介紹的非常詳細(xì),對大家學(xué)習(xí)或者使用vue具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下2023-06-06
vue項目實現(xiàn)背景顏色以及下劃線從左到右漸變動畫效果
這篇文章主要介紹了vue項目實現(xiàn)背景顏色以及下劃線從左到右漸變動畫效果,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-08-08
今天小編就為大家分享一篇解決VUE雙向綁定失效的問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-10-10
vue修改proxyTable解決跨域請求,報404的問題及解決
這篇文章主要介紹了vue修改proxyTable解決跨域請求,報404的問題及解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-07-07
在Vue-cli里應(yīng)用Vuex的state和mutations方法
今天小編就為大家分享一篇在Vue-cli里應(yīng)用Vuex的state和mutations方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09
本篇文章主要介紹了vue基于Element構(gòu)建自定義樹的示例代碼，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-09-09