最近2018中文字幕在日韩欧美国产成人片_国产日韩精品一区二区在线_在线观看成年美女黄网色视频_国产精品一区三区五区_国产精彩刺激乱对白_看黄色黄大色黄片免费_人人超碰自拍cao_国产高清av在线_亚洲精品电影av_日韩美女尤物视频网站

 
 
 
 

  
  
  
  
npm install\ 
  
  
  
  
 
  
  
  
  
  babel-plugin-syntax-jsx\ 
  
  
  
  
 
  
  
  
  
  babel-plugin-transform-vue-jsx\ 
  
  
  
  
 
  
  
  
  
  babel-helper-vue-jsx-merge-props\ 
  
  
  
  
 
  
  
  
  
  babel-preset-es2015\ 
  
  
  
  
 
  
  
  
  
  --save-dev  
 
 
 
 

 
 
 
 

  
  
  
  
{ 
  
  
  
  
 
  
  
  
  
"presets": ["es2015"], 
  
  
  
  
 
  
  
  
  
"plugins": ["transform-vue-jsx"] 
  
  
  
  
 
  
  
  
  
}  
 
 
 
 

 
 
 
 

  
  
  
  
render (h) { 
  
  
  
  
 
  
  
  
  
  return ( 
  
  
  
  
 
  
  
  
  
    
  
  
  
  
 
  
  
  
  
      // 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"> 
  
  
  
  
 
  
  
  
  
    

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

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

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

 
 
 
 

  
  
  
  
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的編寫從駝峰式改為連接符：

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

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

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

 
 
 
 

  
  
  
  
const directives = [ 
  
  
  
  
 
  
  
  
  
{ name: 'my-dir', value: 123, modifiers: { abc: true } } 
  
  
  
  
 
  
  
  
  
] 
  
  
  
  
 
  
  
  
  
return   
 
 
 
 

擴(kuò)展

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

相關(guān)鏈接：

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