日本综合一区二区|亚洲中文天堂综合|日韩欧美自拍一区|男女精品天堂一区|欧美自拍第6页亚洲成人精品一区|亚洲黄色天堂一区二区成人|超碰91偷拍第一页|日韩av夜夜嗨中文字幕|久久蜜综合视频官网|精美人妻一区二区三区

RELATEED CONSULTING
相關咨詢
選擇下列產(chǎn)品馬上在線溝通
服務時間：8:30-17:00
你可能遇到了下面的問題
關閉右側工具欄

新聞中心

這里有您想知道的互聯(lián)網(wǎng)營銷解決方案
用Jsx寫Vue組件

 

前言

我們平常寫vue的組件時，一般都是用的是模版，這種方式看起來比較簡潔，而且vue作者也推薦使用這個方式，但是這種方式也有一些它的弊端，例如模版調(diào)試麻煩，或者在一些場景下模版描述可能沒那么簡單和方便。

下面我們要講的是如何在vue里面寫jsx，知道react的人應該都知道jsx，jsx的一個特性就是非常靈活，雖然有的人覺得jsx很丑陋，把邏輯都寫到模版的感覺，但蘿卜青菜各有所愛，適合自己適合團隊的就是***的。

在使用jsx之前我們需要安裝一個babel插件(babel-plugin-transform-vue-jsx )

安裝方式：

 
 
 
 
    
  
  
  
  
  1. npm install\ 
    2. 
  
  
  
  
  2.  
    3. 
  
  
  
  
  3.   babel-plugin-syntax-jsx\ 
    4. 
  
  
  
  
  4.  
    5. 
  
  
  
  
  5.   babel-plugin-transform-vue-jsx\ 
    6. 
  
  
  
  
  6.  
    7. 
  
  
  
  
  7.   babel-helper-vue-jsx-merge-props\ 
    8. 
  
  
  
  
  8.  
    9. 
  
  
  
  
  9.   babel-preset-es2015\ 
    10. 
  
  
  
  
  10.  
    11. 
  
  
  
  
  11.   --save-dev  
    12.

然后再.babelrc里面添加：

 
 
 
 
    
  
  
  
  
  1. { 
    2. 
  
  
  
  
  2.  
    3. 
  
  
  
  
  3. "presets": ["es2015"], 
    4. 
  
  
  
  
  4.  
    5. 
  
  
  
  
  5. "plugins": ["transform-vue-jsx"] 
    6. 
  
  
  
  
  6.  
    7. 
  
  
  
  
  7. }  
    8.

接著我們就可以愉快地在vue里面編寫jsx了。

Test.vue

 
 
 
 
    
  
  
  
  
  1.   
    2.

可以看到我們把jsx寫在了render方法里面，render方法是vue2.0才支持的，用來提供對虛擬DOM的支持，也就是說只有vue2.0才支持jsx語法轉換。

這里要注意的一點是vue里面編寫jsx和在react里面的jsx語法還是有一點不一樣的。

一下是一段覆蓋大部分語法的vue jsx代碼：

 
 
 
 
    
  
  
  
  
  1. render (h) { 
    2. 
  
  
  
  
  2.  
    3. 
  
  
  
  
  3.   return ( 
    4. 
  
  
  
  
  4.  
    5. 
  
  
  
  
  5.     
  
  
  
  
  6.  
    7. 
  
  
  
  
  7.       // normal attributes or component props. 
    8. 
  
  
  
  
  8.  
    9. 
  
  
  
  
  9.       id="foo" 
    10. 
  
  
  
  
  10.  
    11. 
  
  
  
  
  11.       // DOM properties are prefixed with `domProps` 
    12. 
  
  
  
  
  12.  
    13. 
  
  
  
  
  13.       domPropsInnerHTML="bar" 
    14. 
  
  
  
  
  14.  
    15. 
  
  
  
  
  15.       // event listeners are prefixed with `on` or `nativeOn` 
    16. 
  
  
  
  
  16.  
    17. 
  
  
  
  
  17.       onClick={this.clickHandler} 
    18. 
  
  
  
  
  18.  
    19. 
  
  
  
  
  19.       nativeOnClick={this.nativeClickHandler} 
    20. 
  
  
  
  
  20.  
    21. 
  
  
  
  
  21.       // other special top-level properties 
    22. 
  
  
  
  
  22.  
    23. 
  
  
  
  
  23.       class={{ foo: true, bar: false }} 
    24. 
  
  
  
  
  24.  
    25. 
  
  
  
  
  25.       style={{ color: 'red', fontSize: '14px' }} 
    26. 
  
  
  
  
  26.  
    27. 
  
  
  
  
  27.       key="key" 
    28. 
  
  
  
  
  28.  
    29. 
  
  
  
  
  29.       ref="ref" 
    30. 
  
  
  
  
  30.  
    31. 
  
  
  
  
  31.       // assign the `ref` is used on elements/components with v-for 
    32. 
  
  
  
  
  32.  
    33. 
  
  
  
  
  33.       refInFor 
    34. 
  
  
  
  
  34.  
    35. 
  
  
  
  
  35.       slot="slot"> 
    36. 
  
  
  
  
  36.  
    37. 
  
  
  
  
  37.     
 
  •  
  •   ) 
  •  
  • }  

    • 可以看到DOM屬性要加domProps前綴，但這里lass和style卻不需要，因為這兩個是特殊的模塊，而且react的class用的是className，vue卻用的class。事件監(jiān)聽是以“on”或者“nativeOn”為開始。

    實際上vue2.0的模版***都會被編譯為render方法，所以模版聲明的組件和jsx聲明的組件***都是一樣的。

    上面的jsx***會被編譯成下面這樣：

     
 
 
 
      
  
  
  
  
    1. render (h) { 
      2. 
  
  
  
  
    2.  
      3. 
  
  
  
  
    3.   return h('div', { 
      4. 
  
  
  
  
    4.  
      5. 
  
  
  
  
    5.     // Component props 
      6. 
  
  
  
  
    6.  
      7. 
  
  
  
  
    7.     props: { 
      8. 
  
  
  
  
    8.  
      9. 
  
  
  
  
    9.       msg: 'hi' 
      10. 
  
  
  
  
    10.  
      11. 
  
  
  
  
    11.     }, 
      12. 
  
  
  
  
    12.  
      13. 
  
  
  
  
    13.     // normal HTML attributes 
      14. 
  
  
  
  
    14.  
      15. 
  
  
  
  
    15.     attrs: { 
      16. 
  
  
  
  
    16.  
      17. 
  
  
  
  
    17.       id: 'foo' 
      18. 
  
  
  
  
    18.  
      19. 
  
  
  
  
    19.     }, 
      20. 
  
  
  
  
    20.  
      21. 
  
  
  
  
    21.     // DOM props 
      22. 
  
  
  
  
    22.  
      23. 
  
  
  
  
    23.     domProps: { 
      24. 
  
  
  
  
    24.  
      25. 
  
  
  
  
    25.       innerHTML: 'bar' 
      26. 
  
  
  
  
    26.  
      27. 
  
  
  
  
    27.     }, 
      28. 
  
  
  
  
    28.  
      29. 
  
  
  
  
    29.     // Event handlers are nested under "on", though 
      30. 
  
  
  
  
    30.  
      31. 
  
  
  
  
    31.     // modifiers such as in v-on:keyup.enter are not 
      32. 
  
  
  
  
    32.  
      33. 
  
  
  
  
    33.     // supported. You'll have to manually check the 
      34. 
  
  
  
  
    34.  
      35. 
  
  
  
  
    35.     // keyCode in the handler instead. 
      36. 
  
  
  
  
    36.  
      37. 
  
  
  
  
    37.     on: { 
      38. 
  
  
  
  
    38.  
      39. 
  
  
  
  
    39.       click: this.clickHandler 
      40. 
  
  
  
  
    40.  
      41. 
  
  
  
  
    41.     }, 
      42. 
  
  
  
  
    42.  
      43. 
  
  
  
  
    43.     // For components only. Allows you to listen to 
      44. 
  
  
  
  
    44.  
      45. 
  
  
  
  
    45.     // native events, rather than events emitted from 
      46. 
  
  
  
  
    46.  
      47. 
  
  
  
  
    47.     // the component using vm.$emit. 
      48. 
  
  
  
  
    48.  
      49. 
  
  
  
  
    49.     nativeOn: { 
      50. 
  
  
  
  
    50.  
      51. 
  
  
  
  
    51.       click: this.nativeClickHandler 
      52. 
  
  
  
  
    52.  
      53. 
  
  
  
  
    53.     }, 
      54. 
  
  
  
  
    54.  
      55. 
  
  
  
  
    55.     // class is a special module, same API as `v-bind:class` 
      56. 
  
  
  
  
    56.  
      57. 
  
  
  
  
    57.     class: { 
      58. 
  
  
  
  
    58.  
      59. 
  
  
  
  
    59.       foo: true, 
      60. 
  
  
  
  
    60.  
      61. 
  
  
  
  
    61.       bar: false 
      62. 
  
  
  
  
    62.  
      63. 
  
  
  
  
    63.     }, 
      64. 
  
  
  
  
    64.  
      65. 
  
  
  
  
    65.     // style is also same as `v-bind:style` 
      66. 
  
  
  
  
    66.  
      67. 
  
  
  
  
    67.     style: { 
      68. 
  
  
  
  
    68.  
      69. 
  
  
  
  
    69.       color: 'red', 
      70. 
  
  
  
  
    70.  
      71. 
  
  
  
  
    71.       fontSize: '14px' 
      72. 
  
  
  
  
    72.  
      73. 
  
  
  
  
    73.     }, 
      74. 
  
  
  
  
    74.  
      75. 
  
  
  
  
    75.     // other special top-level properties 
      76. 
  
  
  
  
    76.  
      77. 
  
  
  
  
    77.     key: 'key', 
      78. 
  
  
  
  
    78.  
      79. 
  
  
  
  
    79.     ref: 'ref', 
      80. 
  
  
  
  
    80.  
      81. 
  
  
  
  
    81.     // assign the `ref` is used on elements/components with v-for 
      82. 
  
  
  
  
    82.  
      83. 
  
  
  
  
    83.     refInFor: true, 
      84. 
  
  
  
  
    84.  
      85. 
  
  
  
  
    85.     slot: 'slot' 
      86. 
  
  
  
  
    86.  
      87. 
  
  
  
  
    87.   }) 
      88. 
  
  
  
  
    88.  
      89. 
  
  
  
  
    89. }  
      90.

    這也意味著兩種形式的組件是可以相互引用的。

    有時候我們難免會在模版里引入jsx編寫的vue組件或者在jsx編寫的vue組件里引入模版組件，這里還是有些需要注意的事項：

    1.在模版里面引入jsx的組件，可以通過components引用，另外props的編寫從駝峰式改為連接符：

     
 
 
 
      
  
  
  
  
    1.  
      2. 
  
  
  
  
    2.  
      3. 
  
  
  
  
    3.   
      4.

    2.在jsx里面引入vue模版組件，這里沒有什么要注意的，除了連接符式的屬性要轉換成駝峰式，還有一個需要注意的是指令，如果用了jsx，那么內(nèi)置的指令都不會生效(除了v-show)，好在內(nèi)置指令大部分都可以用jsx描述。那么自定義指令要怎么用呢?

    自定義指令可以使用“v-name={value}”語法，如果要支持指令參數(shù)和modifier可以用“v-name={{ value, modifier: true }}”語法：

     
 
 
 
      
  
  
  
  
    1.  
      2. 
  
  
  
  
    2.  
      3. 
  
  
  
  
    3.   
      4.

    我們還可以用原生vnode的數(shù)據(jù)格式使用自定義指令：

     
 
 
 
      
  
  
  
  
    1. const directives = [ 
      2. 
  
  
  
  
    2.  
      3. 
  
  
  
  
    3. { name: 'my-dir', value: 123, modifiers: { abc: true } } 
      4. 
  
  
  
  
    4.  
      5. 
  
  
  
  
    5. ] 
      6. 
  
  
  
  
    6.  
      7. 
  
  
  
  
    7. return   
      8.

    擴展

    如果有人覺得在vue組件里面要寫data，props，computed和methods不夠優(yōu)雅，可以參考下這個插件vue-class-component，它能讓你使用ES6的class和ES7的裝飾器編寫vue組件。

    相關鏈接：

    babel-plugin-transform-vue-jsx(https://github.com/vuejs/babel-plugin-transform-vue-jsxhttps://github.com/vuejs/babel-plugin-transform-vue-jsx)


    網(wǎng)站名稱：用Jsx寫Vue組件
    當前路徑：http://www.dlmjj.cn/article/djegsph.html