在 Vue 中如何使用 JSX,就這麼簡單!【建議收藏】

語言: CN / TW / HK

學習這篇文章希望您已經具備以下知識:

  1. vue.js的基本使用
  2. 對前端三件套(html、css、js)已經可以熟練使用了

文末有配套demo代碼:點我直達

JSX是什麼

JSX 是一種 Javascript 的語法擴展,JSX = Javascript + XML,即在 Javascript 裏面寫 XML,因為 JSX 的這個特性,所以他即具備了 Javascript 的靈活性,同時又兼具 html 的語義化和直觀性。(個人建議靈活度強的部分組件可以用JSX來代替,整個項目JSX屬實沒必要

XML學習地址(學與不學可隨意,瞭解就ok):https://www.w3school.com.cn/xml/index.asp 用template的弊端:https://www.mk2048.com/blog/blog_h1c2c22ihihaa.html

為什麼要在 Vue 中使用 JSX

有時候,我們使用渲染函數(render function)來抽象組件,渲染函數不是很清楚的參見官方文檔, 而渲染函數有時候寫起來是非常痛苦的,所以只需要有個瞭解。

渲染函數:https://cn.vuejs.org/v2/guide/render-function.html#%E5%9F%BA%E7%A1%80

createElement(
 'anchored-heading', {
 props: {
  level: 1
 }
 }, [
 createElement('span', 'Hello'),
 ' world!'
 ]
)

其對應的模板是下面:

<anchored-heading :level="1">
 <span>Hello</span> world!
</anchored-heading>

你看這寫起來多費勁,這個時候就派上 JSX 上場了。在 Vue 中使用 JSX,需要使用 Babel 插件,它可以讓我們回到更接近於模板的語法上,接下來就讓我們一起開始在 Vue 中寫 JSX 吧。

創建項目並配置Babel

vue create vue-jsx
# 選擇vue2的

安裝依賴:

npm install @vue/babel-preset-jsx @vue/babel-helper-vue-jsx-merge-props
# or
yarn add @vue/babel-preset-jsx @vue/babel-helper-vue-jsx-merge-props

配置 .babelrc(babel.config.js) :

module.exports = {
 presets: [
 '@vue/cli-plugin-babel/preset',
 ['@vue/babel-preset-jsx',
  {
  'injectH': false
  }]
 ]
}

配置後我們啟動項目:

yarn serve

demo結構圖: demo結構圖

配置了babel.config.js後,我們把App.vue引入的HelloWorld.vue改為HelloWorld.js,並且刪除HelloWorld.js中關於template和style,以及script標籤。

export default {
  name: 'HelloWorld',
  props: {
    msg: String
  }
}

JSX基礎用法

這裏展示在 Vue 中書寫一些基礎內容。

純文本、動態內容、標籤使用、自定義組件、樣式和class

import myComponent from './myComponent'
import './HelloWorld.css'

// 創建一個組件button
const ButtonCounter = {
  name: "button-counter",
  props: ["count"],
  methods: {
    onClick() {
      this.$emit("change", this.count + 1);
    }
  },
  render() {
    return (
      <button onClick={this.onClick}>數量 {this.count}+</button>
    );
  }
};


export default {
  name: 'HelloWorld',
  components: {
    myComponent 
  },
  data () {
    return {
      text:'hello 紙沒了飛機',
      inputText:'我吃了',
      count: 0
    }
  },
  props: {
    msg: String
  },
  watch: {},
  methods: {
    onChange(val) {
      this.count = val;
      alert(this.count)
    }
  },
  render() {
  // const {text,inputText,count} = this //通過解構,下方return片段中就不需要this
    return (
    <div>
     <h3>內容</h3>
     {/* 純文本 */}
     <p>hello, I am Gopal</p>
     {/* 動態內容 */}
     <p>{ this.text }</p>
     <p>hello { this.msg }</p>
     {/* 輸入框 */}
     <input/>
     {/* 自定義組件 */}
     <myComponent/>
     <ButtonCounter
        style={{ marginTop: "10px" }}
        count={this.count}
        type="button"
        onChange={this.onChange}
      />
    </div>
    );
   }
}

題外話:創建組件那裏大家可以多學學const 創建的ButtonCounter組件的那種方式。在React中也是經常會這麼創建的。 在這裏插入圖片描述 這麼看的話和在template裏寫沒有多大區別,標籤該是啥還是啥沒有變化。那麼這麼一想的話,style呢,class呢?接下來就是style和class樣式的寫法(包括動態樣式)

我們先給h3綁定一個class為colorRed:

<h3 class="colorRed">內容</h3>

審查元素髮現直接寫class綁定是可以的: 在這裏插入圖片描述 那麼class的樣式怎麼寫呢?畢竟js文件裏寫<style></style>貌似是不行的! 1、全局樣式 App.vue

<style>
.colorRed{
  color: red;
}
</style>

2、引入一個css文件或者配合style-loader引入一個less、sass、stylus文件 注意:都需要安裝配置對應的loader,既然都是JSX了,那我們用stylus來講解下,相信less、sass大家都會了。stylus是一個省略了{},靠縮緊來識別的css編譯器。(不想用stylus可跳過,樣式這塊可隨意)

yarn add global stylus
yarn add --dev stylus stylus-loader

各種style安裝見:https://www.cnblogs.com/jimc/p/10265198.html

安裝完成後新建HelloWorld.styl,然後引入。

stylus的使用:https://www.jianshu.com/p/5fb15984f22d stylus官網:https://stylus.zcopy.site/ 控制枱stylus報錯見:https://blog.csdn.net/csdn_zhoushengnan/article/details/109448369 vscode編輯期報錯:安裝編輯器stylus語法插件,並重啟 在這裏插入圖片描述 效果: 在這裏插入圖片描述

行內樣式style:

<p style="color:blue">hello, I am Gopal</p>

經測試演示 動態綁定class和style 在這裏插入圖片描述

<p style={this.isGreen?'color:green':''}>{ this.text }</p>
<p class={this.isYellow?'colorYellow':''}>hello { this.msg }</p>
<p style={this.isRed?colorRed:''}>紅色的文字</p>

在這裏插入圖片描述 屬性綁定和普通HTML一樣的 畢竟class和style可都是html的屬性,這點相信大家都知道的。

<input placeholder="我是placeholder"  />
<input placeholder={placeholderText}  />
{/* 解構N個屬性,要啥放啥 */}
<div {...attrObj}  />

在這裏插入圖片描述 效果: 在這裏插入圖片描述

常用指令

template常用指令:v-html | v-text、v-if、v-for、v-modal等。template的指令在JSX是無法使用的,故需要一些寫法,請看下面。 我新建個instructions.js用來示範指令這塊。在App.vue中引入。 v-html | v-text 在 JSX 裏面,如果要設置 dom 元素的 innerHTML,就用到 domProps。

render() {
    const { htmlCode } = this
    return (
        <div>
            <div domPropsInnerHTML={htmlCode}></div>
        </div>
    );
   }

雖然v-text有domPropsInnerText,但沒有用的必要。 v-if 分簡單的和複雜的。 簡單:

render() {
    let bool = false
    return (
        <div>
            { bool ? <button>按鈕1</button> : <button>按鈕2</button>}
        </div>
    );
   }

複雜:

render() {
  let num = 3
  if(num === 1){ return( <button>按鈕1</button> ) }
  if(num === 2){ return( <button>按鈕2</button> ) }
  if(num === 3){ return( <button>按鈕3</button> ) }
}

v-for 就使用 map 方法來實現,在react中也是如此。

render(h) {
  var list = [1,2,3]
  return( 
    <div>
      { list.map(item => <button>按鈕{item}</button>) }
    </div>
  )
}

v-modal

注意:新版 vue-cli4 中,已經默認集成了 JSX 語法對 v-model 的支持,可以直接使用 <input v-model={this.value}> 如果你的項目比較老,也可以安裝插件 babel-plugin-jsx-v-model 來進行支持

我可是cli4,我來驗證下: 在這裏插入圖片描述 驗證結果:(通過) 在這裏插入圖片描述 當然以上兩種方式你都不想搞,你也可以手動支持,這就涉及到監聽事件了,請向下看。

監聽事件及事件修飾符

監聽事件想到用 onChange, onClick等。 需要注意的是,傳參數不能使用 onClick={this.removePhone(params)},這樣子會每次 render 的時候都會自動執行一次方法 應該使用 bind,或者箭頭函數來傳參

methods: {
    handleClick(val){
        alert(val)
    }
  },
<button type="button" onClick={this.handleClick.bind(this, 11)}>點擊bind</button>
<button type="button" onClick={() => this.handleClick(11)}>點擊箭頭函數</button>

上面提到的用過監聽事件來實現v-modal

<input type="text" value={this.text} onInput={this.input}/>
methods: {
    input(e){
        this.text = e.target.value
    }
  },

除此之外,還可以使用對象的方式去監聽事件:

render() {
  return (
    <input
      value={this.content}
      on={{
        focus: this.$_handleFocus,
        input: this.$_handleInput
      }}
      nativeOn={{
        click: this.$_handleClick
      }}
    ></input>
  )
}

其他事件的使用同理都是加on。 事件修飾符 和指令一樣,除了個別的之外,大部分的事件修飾符都無法在JSX中使用,這時候你肯定已經習慣了,肯定有替代方案的。

.stop : 阻止事件冒泡,在JSX中使用event.stopPropagation()來代替 .prevent:阻止默認行為,在JSX中使用event.preventDefault() 來代替 .self:只當事件是從偵聽器綁定的元素本身觸發時才觸發回調,使用下面的條件判斷進行代替

if (event.target !== event.currentTarget){
  return
}

.enter與keyCode: 在特定鍵觸發時才觸發回調

if(event.keyCode === 13) {
  // 執行邏輯
}

除了上面這些修飾符之外,尤大大為了照顧我們這羣CV仔,還是做了一點優化的,對於.once,.capture,.passive,.capture.once,尤大大提供了前綴語法幫助我們簡化代碼

 render() {
    return (
      <div
        on={{
          // 相當於 :click.capture
          '!click': this.$_handleClick,
          // 相當於 :input.once
          '~input': this.$_handleInput,
          // 相當於 :mousedown.passive
          '&mousedown': this.$_handleMouseDown,
          // 相當於 :mouseup.capture.once
          '~!mouseup': this.$_handleMouseUp
        }}
      ></div>
    )
  }

如果有參數傳遞給方法,不能直接(參數),會在頁面中立即觸發,需要我在下面這種寫法:

clickOnce(val) {
  alert(val);
},
<button
    type="button"
    on={{
       '~click': ()=>this.clickOnce('只能點一次'),
    }}
   >
    事件修飾符點擊一次
</button>

使用範圍(結合第三方ui組件)

不僅僅在 render 函數裏面使用 JSX,而且還可以在 methods 裏面返回 JSX,然後在 render 函數裏面調用這個方法。並且也可以直接使用例如elementui等ui組件。 JSX 還可以直接賦值給變量、例如使用elementui的el-dialog。(您在測試該案例時記得安裝elemnt)

methods: {
    $_renderFooter() {
      return (
        <div>
          <el-button>確定</el-button>
          <el-button onClick={ () =>this.closeDialog() }>取消</el-button>
        </div>
      );
    },
    openDialog(){
        this.visible = true
    },
    closeDialog(){
        this.visible = false  
    }
  },
render() {
    const buttons = this.$_renderFooter();
    return (
      <div>
        <Button onClick={ () =>this.openDialog() }>打開Dialog</Button>
        <el-dialog visible={this.visible}>
          <div>彈窗內容</div>
          <template slot="footer">{buttons}</template>
        </el-dialog>
      </div>
    );
  }

在這裏插入圖片描述

插槽

插槽就是子組件中提供給父組件使用的一個佔位符,插槽分為默認插槽,具名插槽和作用域插槽,下面我依次為您帶來每種在JSX中的用法與如何去定義插槽。

默認插槽

使用默認插槽 使用element-ui的Dialog時,彈框內容就使用了默認插槽,在JSX中使用默認插槽的用法與普通插槽的用法基本是一致的,如下代碼所示:

render() {
    return (
      <ElDialog title="彈框標題" visible={true}>
        {/*這裏就是默認插槽*/}
        <div>這裏是彈框內容</div>
      </ElDialog>
    )
  }

自定義默認插槽 在Vue的實例this上面有一個屬性$slots,這個上面就掛載了一個這個組件內部的所有插槽,使用this.$slots.default就可以將默認插槽加入到組件內部。

export default {
  props: {
    visible: {
      type: Boolean,
      default: false
    }
  },
  render() {
    return (
      <div class="custom-dialog" vShow={this.visible}>
        {/**通過this.$slots.default定義默認插槽*/}
        {this.$slots.default}
      </div>
    )
  }
}

使用:

<myComponent visible={true} slot>我是自定義默認插槽</myComponent>

另vShow相當於 v-show,不代表別的也可以這樣!

具名插槽

使用具名插槽 有時候我們一個組件需要多個插槽,這時候就需要為每一個插槽起一個名字,比如element-ui的彈框可以定義底部按鈕區的內容,就是用了名字為footer的插槽。

render() {
    return (
      <ElDialog title="彈框標題" visible={true}>
        <div>這裏是彈框內容</div>
        {/** 具名插槽 */}
        <template slot="footer">
          <ElButton>確定</ElButton>
          <ElButton>取消</ElButton>
        </template>
      </ElDialog>
    )
  }

自定義具名插槽 在上節自定義默認插槽時提到了$slots,對於默認插槽使用this.$slots.default,而對於具名插槽,可以使用this.$slots.footer進行自定義。

render() {
    return (
      <div class="custom-dialog" vShow={this.visible}>
        {this.$slots.default}
        {/**自定義具名插槽*/}
        <div class="custom-dialog__foolter">{this.$slots.footer}</div>
      </div>
    )
  }

使用:

<myComponent visible={true}>
      <template slot="footer">
            <ElButton>確定</ElButton>
            <ElButton>取消</ElButton>
      </template>
</myComponent>

作用域插槽

使用作用域插槽 有時讓插槽內容能夠訪問子組件中才有的數據是很有用的,這時候就需要用到作用域插槽,在JSX中,因為沒有v-slot指令,所以作用域插槽的使用方式就與模板代碼裏面的方式有所不同了。比如在element-ui中,我們使用el-table的時候可以自定義表格單元格的內容,這時候就需要用到作用域插槽。

<myComponent1
      visible={this.visible}
      {...{
         scopedSlots: {
           test: ({ user }) => {
           // 這個user就是子組件傳遞來的數據,同理可這樣拿到el-table的row,不過test得是default,不過案例還是我這樣
              <div style="color:blue;">快來啊,{user.name},看看這個作用域插槽</div>
          },
         },
     }}
></myComponent1>

自定義作用域插槽 子組件中通過 {this.$scopedSlots.test({ user: {name:'紙飛機'}})} 指定插槽的名稱是 test,並將 user 傳遞給父組件。父組件在書寫子組件標籤的時候,通過 scopedSlots 值指定插入的位置是 test,並在回調函數獲取到子組件傳入的 user 值

注意:作用域插槽是寫在子組件標籤中的,類似屬性。而不是像具名插槽放在標籤內部

新建個作用域插槽.js

// 一個為jsx的子組件(玩玩插槽)

export default {
    name: "myComponent",
    data() {
      return {
      };
    },
    props: {
      visible: {
        type: Boolean,
        default: false,
      },
      listData: {
        type: Array,
        default: function() {
          return [];
        },
      },
    },
    render() {
      return (
        <div vShow={this.visible}>
          {/**自定義作用域插槽*/}
          <div class="item">
           {this.$scopedSlots.test({
                user: {name:'紙飛機'}
            })}
          </div>
        </div>
      );
    },
  };
  

效果: 在這裏插入圖片描述

函數式組件

函數式組件是一個無狀態、無實例的組件,詳見官網説明,新建一個 FunctionalComponent.js 文件,內容如下:

// export default ({ props }) => <p>hello {props.message}</p>;

// 或者推薦下方寫法

export default {
  functional: true,
  name: "item",
  render(h, context) {
      console.log(context.props)
    return <div style="color:red;font-size:18px;font-weight:bold">{context.props.message}</div>;
  },
};

HelloWorld.js中使用:

<funComponent message="展示下函數式組件"></funComponent>

效果: 在這裏插入圖片描述

代碼地址

<b id="test1"> https://codechina.csdn.net/qq_32442973/vue2-jsx-demo.git</b>

後記

無論你是要用vue2的jsx還是vue3的jsx都沒有本質區別,畢竟vue3是向下兼容vue2的;倘若你真的要學vue3的JSX,我建議你學完vue2的再去學;另我不推薦在vue中所有的組件和頁面都用JSX,兩者需要權衡利弊;同時也不必擔心JSX和template的相互嵌套,兩者是可以互相嵌套的。

參考: https://www.cnblogs.com/ainyi/p/13324222.html https://www.jb51.net/article/205764.htm https://cn.vuejs.org/v2/guide/render-function.html#%E4%BA%8B%E4%BB%B6-amp-%E6%8C%89%E9%94%AE%E4%BF%AE%E9%A5%B0%E7%AC%A6 https://www.cnblogs.com/htoooth/p/6973238.html https://www.jianshu.com/p/84b708c80598 https://cloud.tencent.com/developer/article/1704608