Vue template To JSX

• Vue 模板語法
  模板語法貼近 HTML，也是 Vue 官方推薦的寫法，用起來很方便，可是也有不足的地方，由於是 html，linting、類型檢查、編輯器的自動完成，這些基本都沒有

• 渲染函數
  這個我沒有實際用過，不是很清楚利和弊，若是是用函數返回一個簡單 VNode 的話，用這個也能夠的

• JSX
  你可使用完整的編程語言 JavaScript 功能來構建你的視圖頁面。好比你可使用臨時變量、JS 自帶的流程控制、以及直接引用當前 JS 做用域中的值等等。 開發工具對 JSX 的支持相比於現有可用的其餘 Vue 模板仍是比較先進的 (好比，linting、類型檢查、編輯器的自動完成)。而且從使用上來講，JSX 應該是比渲染函數要好一些的，若是是從 Vue 模板遷移過來，也很方便。

Vue 模板轉 JSX

Vue-cli 默認生成的項目裏面默認就帶有babel-plugin-transform-vue-jsx，因此直接寫 jsx 就是了不用擔憂編譯問題，可是仍是建議多裝一個babel-plugin-jsx-v-model，這個的做用是在 jsx 中使用 v-model，若是沒有這個，你要本身手動實現雙向綁定。
單文件組件，若是本來是模板想轉 JSX 的話，比較簡單，把模板複製，而後在 Vue 實例中，寫一個 render(){}，把代碼複製進去就行了，而後你就會看到編輯器一片紅。而後就把 vue 模板的語法改爲 jsx 語法。變化的基本不大，變化比較大的，應該就是 v-for 和 v-if 了

• v-bind

  // v-bind tmpl
    <input :disabled="true" />
    // v-bind jsx
    <input disabled={true} />
  複製代碼

• v-if

  // v-if tmpl
    <span v-if="item == 1">1</span>
    <span v-else>2</span>
    // v-if jsx
    // 若是複雜一點的話，仍是單獨寫一個函數吧
    {item == 1 ? <span>1</span> : <span>2</span>}
  複製代碼

• v-for

  // v-for tmpl
    <ul>
        <li v-for="item in arr" :key={item}>{{item}}</li>
    </ul>
    // v-for jsx
    // 仍是那句話，若是比較複雜的仍是單獨寫一個函數
    <ul>
        {arr.map(item => <li key={item}>{item}</li>)}
    </ul>
  複製代碼

• v-show 和 v-model

  // v-show jsx支持v-show，因此這個不用改變
    // v-model，jsx默認不支持，能夠引入babel-plugin-jsx-v-model
  複製代碼

• 綁定事件

  // 綁定事件 tmpl
    <button @click="testClick">Test Button</button>
    // 綁定事件 jsx
    // on-click和onCLick均可以
    <button on-click={testClick}>Test Button</button>
    <button onClick={testClick}>Test Button</button>
  複製代碼

• 綁定原生事件

  // 綁定原生事件 native
    <my-component @click.native="testClick" />
    <my-component nativeOnClick={testClick} />
    // 目前只能用駝峯式，至少我用native-on-click編譯不過
  複製代碼

• 關於 jsx v-for 的$refs

  // 關於jsx v-for只能得到一個引用對象
    <ul>
        {arr.map(item => <my-componen key={item} ref="my" />)}
    </ul>
    /* 上面這種寫法，this.$refs.my獲取的只是一個對象，通常是數組最後一項的組件對象，可是實際上，咱們要的是ref的數組 */
    /* 若是要獲取裏面，全部的ref，也就是要獲取一個數組的話，必須加上refInFor，看下面，一樣的，不能寫成ref-in-for */
    <ul>
        {arr.map(item => <my-componen key={item} ref="my" refInFor />)}
    </ul>
    // 固然，若是你有想法，每次循環項的ref都不一樣的話，也不是不行，看你本身的需求了，模板也能夠這麼玩
  複製代碼

看到這個相比你也知道 vue 的 JSX 其實和 react 的 JSX 很像，不過它們仍是有點區別

• react 屬性只能用駝峯式，在 vue 你可使用駝峯式，同時還能使用 kebab-case，事件也是同理，可是某些特定的暫時只能用駝峯式（例如 refInFor 等等）

• react 的 class 要寫成 className，在 vue 直接用 class，寫 className 會出錯

• react 的 style 只支持引入對象，vue 除了能引入對象，還能用 html 的寫法，簡單粗暴

最後丟兩個個連接就跑 babel-plugin-transform-vue-jsx
Render Functions & JSX

這是Vue官方給的一些JSX的教程