如何在vue中使用jsx與ES6類的寫法

雨天Rain發表於2018-12-27
VueJS

前言：本文旨在幫助對想在vue使用jsx和類class風格寫法的同學做一個小小指導

通過本文，一定會讓你在專案中愉快的執行jsx(至少不會報錯吧);

ok開始吧

1. 首先我們熟悉react元件寫法：

import React, { Component } from 'react';
export default class App extents Component {
    render(){
        return <div>Hello React</div>
    }
}
複製程式碼

用過react的同學表示到了vue水土不服，有些同學希望自己的vue更bigger，情有可原

下面直接開始如何使用jsx和類react的寫法來編寫簡單的vue元件demo吧^_^

不過，可能這個教程適合對jsx或react熟悉的同學，因為vue的同學也對jsx水土不服...

first:

1.1 安裝:

$ cnpm i babel-plugin-syntax-jsx babel-plugin-transform-vue-jsx babel-helper-vue-jsx-merge-props babel-preset-env --D
複製程式碼

1.2 在.babelrc檔案新增配置：

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

1.3 現在可以愉快地刪掉單檔案元件頭部熟悉的 teamplate 標籤了，因為我們可以在render方法中使用jsx編寫html（虛擬dom）了：

<script>
exprot default {
    data() {
        return {
            greet: 'hello Vue'
        }
    },
    
    ...balabale,
    
    // render方法的h引數是createElement的別名，雖然頁面沒使用，但是必須有，否則你懂的...
    
    render (h) {
      <div>
        Vue and Jsx
        <p>{this.greet}</p>
      </div>
    }
}
</script>
複製程式碼

好了，一個簡單的demo就是這樣了,系不繫想說一句so easy呢，沒錯，就是這樣簡單

jsx在vue中，有些場景是很不少好處的，程式碼看起來也直觀很多；但是如果熟悉了vue，或者沒用過react的話，也不必太深度地在vue中使用jsx，可能別的同事不熟悉jsx寫法呢，而且vue元件或dom屬性需要額外學習（踩坑），就會有點得不償失了

2.用ES6類的寫法改造你的vue

react類的寫法，好處有很多，也很能發揮出js原生力量，個人感覺vue入侵性太強了，但是沒關係，vue的強大也是不言而喻的，我這不是投奔vue了嗎，react的同學別打我!vue可以用類Class來寫，感覺鎧甲勇士穿上了鎧甲一樣

言歸正傳

2.1 安裝

$ cnpm i vue-property-decorator

2.2 此時單檔案可以寫成:

<template>
    <div :class="{box: true}">
        {{ message }}
        <div>
          <button @click="handleLike">老弟，不錯嘛<button>
          <button @click="handleHate">怎麼回事，小老弟<button>
        </div>
    </div>
</template>


<script>
  import uuid from 'uuid-js';
  import { Vue, Component } from 'vue-property-decorator';

  @Component({
    // 設定預設的props
    props: {
      id: {
        type: String,
        default: uuid.create()
      }
    }
  })
  export default class App extents Vue {
    // 一般原來this的屬性，一樣可以在data方法中放回
    data() {
        return {
            message: '來自一位願意透漏姓名的XXX網友說表示單身很快樂'
        }
    }
    // 比如點選事件之類的，原來在methods，computed裡面定義方法的，現在可以獨立出來:
    // 喜歡
    handleLike () {
        console.log('nice')
    }
    // 不屑一顧
    handleHate () {
        console.log('bad')
    }
    // 其他元件，route生命週期不變
    created {}
    mounted {}
    ....
  }
</script>

// 樣式
<style lang="stylus" scoped>
  .box
    color red
</style>
複製程式碼

可能大家注意到了 vue-property-decorator這個模組了，沒錯，我們使用這個模組就可以用class類的寫法來改寫原來 exprot default {...} 的方式了

可能你對vue-class-component和 vue-property-decorator 疑問，想知道區別在哪， 其實vue-class-component的vue官方維護的模組，vue-property-decorator是社群實現的並且是依賴vue-class-component模組開發的，專案中用後者就可以了

So far so good

基於ES6類的vue元件與jsx不是彼此依賴的，如果不習慣jsx只用基於ES6類的vue元件也是完全沒問題的，可能不使用jsx對習慣vue的同學來說更方便

到了這一步，也沒什麼好說的了，想實現這種寫法的同學，也是有某個想法的

以上只是一個簡單的例子，當然裡面還有很多內容，大家自行覓食吧

可以去官網搜尋相關的包的使用，這才是最重要的

相關文章