前言
我們平常寫vue的元件時，一般都是用的是模版，這種方式看起來比較簡潔，而且vue作者也推薦使用這個方式，但是這種方式也有一些它的弊端，例如模版除錯麻煩，或者在一些場景下模版描述可能沒那麼簡單和方便。
下面我們要講的是如何在vue裡面寫jsx，知道react的人應該都知道jsx，jsx的一個特性就是非常靈活，雖然有的人覺得jsx很醜陋，把邏輯都寫到模版的感覺，但蘿蔔青菜各有所愛，適合自己適合團隊的就是最好的。
在使用jsx之前我們需要安裝一個babel外掛（babel-plugin-transform-vue-jsx ）
安裝方式：
|
1 2 3 4 5 6 |
npm install\ babel-plugin-syntax-jsx\ babel-plugin-transform-vue-jsx\ babel-helper-vue-jsx-merge-props\ babel-preset-es2015\ --save-dev |
然後再.babelrc裡面新增：
|
1 2 3 4 |
{ "presets": ["es2015"], "plugins": ["transform-vue-jsx"] } |
接著我們就可以愉快地在vue裡面編寫jsx了。
Test.vue
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
<script> export default { props: ['onClick', 'isShow'], data() { return { test: 123 }; }, render() { return ( <div class="test" onClick={ this.onClick }> { this.test } { this.isShow + '' } </div> ); } } </script> |
可以看到我們把jsx寫在了render方法裡面，render方法是vue2.0才支援的，用來提供對虛擬DOM的支援，也就是說只有vue2.0才支援jsx語法轉換。
這裡要注意的一點是vue裡面編寫jsx和在react裡面的jsx語法還是有一點不一樣的。
一下是一段覆蓋大部分語法的vue jsx程式碼：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
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> ) } |
可以看到DOM屬性要加domProps字首，但這裡lass和style卻不需要，因為這兩個是特殊的模組，而且react的class用的是className，vue卻用的class。事件監聽是以“on”或者“nativeOn”為開始。
實際上vue2.0的模版最後都會被編譯為render方法，所以模版宣告的元件和jsx宣告的元件最後都是一樣的。
上面的jsx最後會被編譯成下面這樣：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 |
render (h) { return h('div', { // Component props props: { msg: 'hi' }, // normal HTML attributes attrs: { id: 'foo' }, // DOM props domProps: { innerHTML: 'bar' }, // Event handlers are nested under "on", though // modifiers such as in v-on:keyup.enter are not // supported. You'll have to manually check the // keyCode in the handler instead. 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' }) } |
這也意味著兩種形式的元件是可以相互引用的。
有時候我們難免會在模版裡引入jsx編寫的vue元件或者在jsx編寫的vue元件裡引入模版元件，這裡還是有些需要注意的事項：
1.在模版裡面引入jsx的元件，可以通過components引用，另外props的編寫從駝峰式改為連線符：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 |
<template> <div class="wrapper"> <Test :on-click="clickHandler" :is-show="show"></Test> </div> </template> <script> import Test from './Test.vue'; export default { name: 'hello', components: { Test }, data() { return { msg: 'Welcome to Your Vue.js App', show: true }; }, methods: { clickHandler(){ this.show = !this.show; } } }; </script> |
2.在jsx裡面引入vue模版元件，這裡沒有什麼要注意的，除了連線符式的屬性要轉換成駝峰式，還有一個需要注意的是指令，如果用了jsx，那麼內建的指令都不會生效（除了v-show），好在內建指令大部分都可以用jsx描述。那麼自定義指令要怎麼用呢？
自定義指令可以使用“v-name={value}”語法，如果要支援指令引數和modifier可以用“v-name={{ value, modifier: true }}”語法：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 |
<script> import Vue from 'vue'; Vue.directive('my-bold', { inserted: function (el) { el.style.fontWeight = 900; } }) export default { props: ['onClick', 'isShow'], data() { return { test: 123 }; }, methods: { afterLeave() { console.log('afterLeave') } }, render() { const directives = [ { name: 'my-bold', value: 666, modifiers: { abc: true } } ]; return ( <transition onAfterLeave={this.afterLeave} name="fade"> <div class="test" onClick={this.onClick} v-show={ this.isShow } v-my-bold> {this.test} {this.isShow + ''} </div> </transition> ); } } </script> <style> .fade-enter-active, .fade-leave-active { transition: opacity .5s } .fade-enter, .fade-leave-to { opacity: 0 } </style> |
我們還可以用原生vnode的資料格式使用自定義指令：
|
1 2 3 4 5 |
const directives = [ { name: 'my-dir', value: 123, modifiers: { abc: true } } ] return <div {...{ directives }}/> |
擴充套件
如果有人覺得在vue元件裡面要寫data，props，computed和methods不夠優雅，可以參考下這個外掛vue-class-component，它能讓你使用ES6的class和ES7的裝飾器編寫vue元件。