Vue template To JSX

鳳晴鈴玉發表於2018-11-08
VueJS

  • 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的教程

相關文章