學Vue，就要學會vue JSX（三）

来源:https://www.cnblogs.com/coderhf/archive/2020/07/07/13261483.html
-Advertisement-
Play Games

是時候使用JSX代替createElement了 接著上面的講，當我們看到上面用createElement去實現組件，太麻煩了，別說工作效率提高了，就是那些嵌套可以嵌套正確就很贊了，所以我們需要用JSX去簡化整個邏輯。當年我做項目的時候就遇到過這樣的情況，嵌套太多，自己都快搞不明白了，在崩潰的邊緣。 ...


是時候使用JSX代替createElement了

接著上面的講，當我們看到上面用createElement去實現組件，太麻煩了，別說工作效率提高了，就是那些嵌套可以嵌套正確就很贊了，所以我們需要用JSX去簡化整個邏輯。當年我做項目的時候就遇到過這樣的情況，嵌套太多，自己都快搞不明白了，在崩潰的邊緣。

 methods: {
   $_handleInputUser(value) {
     this.formInline.user = value
   },
   $_handleChangeRegion(value) {
     this.formInline.region = value
   },
   $_handleSubmit() {}
 },
   /**
   *將 h 作為 createElement 的別名是 Vue 生態系統中的一個通用慣例，實際上也是 JSX 所要求的。從 Vue 的 Babel 插件的 3.4.0   *版本開始，我們會在以 ES2015 語法聲明的含有 JSX 的任何方法和 getter 中 (不是函數或箭頭函數中) 自動註入 
   *const h = this.$createElement，這樣你就可以去掉 (h) 參數了。對於更早版本的插件，如果 h 在當前作用域中不可用，應用會拋錯。
  */
 render(h) {
     return (
       <ElForm inline model={this.formInline} class="demo-form-inline">
         <ElFormItem label="審批人">
           <ElInput
             value={this.formInline.user}
             onInput={this.$_handleInputUser}
             placeholder="審批人"
           ></ElInput>
         </ElFormItem>
         <ElFormItem label="活動區域">
           <ElSelect
             value={this.formInline.region}
             onChange={this.$_handleChangeRegion}
             placeholder="活動區域"
           >
             <ElOption label="區域一" value="shanghai"></ElOption>
             <ElOption label="區域二" value="beijing"></ElOption>
           </ElSelect>
         </ElFormItem>
         <ElFormItem>
           <ElButton type="primarty" onClick={this.$_handleSubmit}>
             查詢
           </ElButton>
         </ElFormItem>
       </ElForm>
     )
   }

 

看了上面的代碼，大家其實會發現用JSX與template的語法都屬於xml的寫法，而且也比較像，但實質上還是有許多區別的，下麵我將為大家一一分析

沒有v-model怎麼辦，還有其他指令可以用嗎？

當你選擇使用JSX的時候，你就要做好和指令說拜拜的時候了，在JSX中， 你唯一可以使用的指令是v-show,除此之外，其他指令都是不可以使用的，有沒有感到很慌，這就對了。不過呢，換一個角度思考,指令只是Vue在模板代碼裡面提供的語法糖，現在你已經可以寫Js了，那些語法糖用Js都可以代替了。

v-model

v-model是Vue提供的一個語法糖，它本質上是由 value屬性（預設） + input事件(預設)組成的。所以，在JSX中，我們便可以回歸本質，通過傳遞value屬性並監聽input事件來實現數據的雙向綁定

 export default {
   data() {
     return {
       name: ''
     }
   },
   methods: {
     // 監聽 onInput 事件進行賦值操作
     $_handleInput(e) {
       this.name = e.target.value
     }
   },
   render() {
     // 傳遞 value 屬性 並監聽 onInput事件
     return <input value={this.name} onInput={this.$_handleInput}></input>
   }
 }

 

經我測試,在新版腳手架vue-cli4中，已經預設集成了對v-model的支持，大家可以直接使用`，如果你的項目比較老，也可以安裝插件babel-plugin-jsx-v-model`來進行支持

同樣的，在JSX中，對於.sync也需要用屬性+事件來實現，如下代碼所示：

 export default {
   methods: {
     $_handleChangeVisible(value) {
       this.visible = value
     }
   },
   render() {
     return (
       <ElDialog
         title="測試.sync"
         visible={this.visible}
         on={{ 'update:visible': this.$_handleChangeVisible }}
       ></ElDialog>
     )
   }
 }

 

v-if 與 v-for

在模板代碼裡面我們通過v-for去遍歷元素，通過v-if去判斷是否渲染元素，在jsx中，對於v-for，你可以使用for迴圈,array.map來代替，對於v-if，可以使用if語句，三元表達式等來代替

迴圈遍歷列表

 const list = ['java', 'c++', 'javascript', 'c#', 'php']
 return (
   <ul>
   {list.map(item => {
    return <li>{item}</li>
   })}
   </ul>
 )

 

使用條件判斷

 const isGirl = false
 return isGirl ? <span>小妹，哥哥教你寫Vue</span> : <span>鳥你幹啥</span>

 

v-bind

在模板代碼中，我們一般通過 v-bind:prop="value"或:prop="value"來給組件綁定屬性，在JSX裡面寫法也類似

 render() {
   return <input value={this.name}></input>
 }

 

v-html 與 v-text

在說v-html與v-text之前，我們需要先瞭解一下Vue中的屬性，Vue中的屬性一共分為三種，第一種是大家寫bug時候最常用的props，即組件自定義的屬性；第二種是attrs，是指在父作用域裡面傳入的，但並未在子組件內定義的屬性。第三種比較特殊，是domProps,經小編不完全測試，在Vue中,domProps主要包含三個，分別是innerHTML,textContent/innerText和value。

  • v-html: 在模板代碼中，我們用v-html指令來更新元素的innerHTML內容，而在JSX裡面，如果要操縱組件的innerHTML,就需要用到domProps

     export default {
   data() {
     return {
       content: '<div>這是Heo寫的一篇新的文章</div>'
     }
   },
   render() {
     // v-html 指令在JSX的寫法是 domPropsInnerHTML
     return <div domPropsInnerHTML={this.content}></div>
   }
 }

     

  • v-text: 看了上面的v-html，你是不是立即就想到了v-text在JSX的寫法domPropsInnerText,是的，你沒有想錯

     export default {
   data() {
     return {
       content: '這是Heo寫的一篇新的文章的內容'
     }
   },
   render() {
     return <div domPropsInnerText={this.content}></div>
   }
 }

     

    但實際上我們不需要使用domPropsInnerText,而是將文本作為元素的子節點去使用即可

     <div>{this.content}</div>

實際上，對於domProps，只有innerHTML才需要使用domPropsInnerHTML的寫法，其他使用正常寫法即可

我還要監聽事件呢

監聽事件與原生事件

當我們開發一個組件之後，一般會通過this.$emit('change')的方式對外暴露事件，然後通過v-on:change的方式去監聽事件，很遺憾，在JSX中你無法使用v-on指令，但你將解鎖一個新的姿勢

  render() {
     return <CustomSelect onChange={this.$_handleChange}></CustomSelect>
   }

 


 ​
 JSX`中，通過`on` + 事件名稱的大駝峰寫法來監聽，比如事件`icon-click`,在`JSX`中寫為`onIconClick

有時候我們希望可以監聽一個組件根元素上面的原生事件，這時候會用到.native修飾符，有點絕望啊，修飾符也是不能用了，但好在也有替代方案，如下代碼

  render() {
     // 監聽下拉框根元素的click事件
     return <CustomSelect nativeOnClick={this.$_handleClick}></CustomSelect>
   }

 

監聽原生事件的規則與普通事件是一樣的，只需要將前面的on替換為nativeOn

除了上面的監聽事件的方式之外，我們還可以使用對象的方式去監聽事件

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

 

事件修飾符

和指令一樣，除了個別的之外，大部分的事件修飾符都無法在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>
     )
   }

 

對了，還有插槽

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

預設插槽

  • 使用預設插槽

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

  render() {
     return (
       <ElDialog title="彈框標題" visible={this.visible}>
         {/*這裡就是預設插槽*/}
         <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>
     )
   }
 }

     

具名插槽

  • 使用具名插槽

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

  render() {
     return (
       <ElDialog title="彈框標題" visible={this.visible}>
         <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>
     )
   }

 

作用域插槽

  • 使用作用域插槽

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

     data() {
     return {
       data: [
         {
           name: 'Heo'
         }
       ]
     }
   },
   render() {
     return (
       {/**scopedSlots即作用域插槽，default為預設插槽，如果是具名插槽，將default該為對應插槽名稱即可*/}
       <ElTable data={this.data}>
         <ElTableColumn
           label="姓名"
           scopedSlots={{
             default: ({ row }) => {
               return <div style="color:red;">{row.name}</div>
             }
           }}
         ></ElTableColumn>
       </ElTable>
     )
   }

     

  • 自定義作用域插槽

    使用作用域插槽不同，定義作用域插槽也與模板代碼裡面有所不同。加入我們自定義了一個列表項組件，用戶希望可以自定義列表項標題，這時候就需要將列表的數據通過作用域插槽傳出來。

     render() {
     const { data } = this
     // 獲取標題作用域插槽
     const titleSlot = this.$scopedSlots.title
     return (
       <div class="item">
         {/** 如果有標題插槽，則使用標題插槽，否則使用預設標題 */}
         {titleSlot ? titleSlot(data) : <span>{data.title}</span>}
       </div>
     )
   }

     

ok。vue JSX 的重點就已經講完了。下麵一篇文章來講一下註意的地方和總結。大家覺得對你有幫助的話可以給我點個贊哦，推薦給更多的人看。


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 大疆Android Sample Code中遇到的問題及解決方案
    最近在做Dji安卓開發的項目，因為之前沒有接觸太多安卓開發，所以剛上手就碰到的不少問題。Sample Code跑動都花了不少時間。 1、Android Studio安裝及依賴庫下載 本來以為google的網站都會被牆，開始還用梯子去連，結果發現可以直接瀏覽，所以可以與壓力去官網下載最新的版本，我當前 ...
  • IOS 微信1.8.7對接以及Universal Links詳細說明（微信未驗證應用解決辦法）
    最近微信對老版本sdk開始限制部分功能，分享、第三方登錄、支付等功能都會出現未驗證應用，所以不得不更新最新版本sdk，下麵就主要介紹對接最新版本的坑，主要是Universal Links這方面（主要是不瞭解）。 1:Universal Links 要對接最新的微信sdk，你必須要瞭解一下Univer ...
  • JavaScript圖形實例：隨機SierPinski三角形
    在“JavaScript圖形實例：SierPinski三角形”中，我們介紹了SierPinski三角形的基本繪製方法，在“JavaScript圖形實例：迭代函數系統生成圖形”一文中，介紹了採用IFS方法生成SierPinski三角形的方法。下麵再介紹兩種SierPinski三角形的構造方法，以擴展知 ...
  • 使用CodeMirror插件遇到的問題
    CodeMirror的正常使用： //首先通過<script>標簽引入相應的js，這個就不必說了 var myCodeMirror = CodeMirror.fromTextArea(myTextArea,{ key: "value" });//就這麼簡單 問題一、CodeMirror在Bootst ...
  • 如何從Bilibili下載視頻（3種方法）1080P高清視頻下載
    您聽說過bilibili嗎？如果您居住在中國或對宅男文化感興趣，那麼您可能會感興趣。對於那些不瞭解Bilibili的人來說，這是一個視頻共用網站。大部分視頻都位於中國，其主題是動畫，漫畫和游戲。 Bilibili是目前YouTube上最好的替代產品之一，如果您喜歡卡通漫畫，可以依靠它。您會在那找到超 ...
  • 前端開發，我有一些經驗想和你分享
    寫在前面 最近身邊有不少朋友想轉行去做前端開發，然後跑過來問我，向我瞭解前端崗位，以及給他們一些建議等等；他們有的還沒畢業，對於即將到來的社會毒打充滿著迷茫和不安，有的已經工作兩三年，突然覺得自己不合適當下這個份工作，想謀求一份別的職業。 選擇一份職業不在於這份職業可以給你帶來什麼，而是你可以因此成 ...
  • Canvas 基礎二
    一、繪製矩形 1、rect (x, y, width, height) : 繪製矩形的路徑 用軌跡畫的，不是獨立路徑( 沒有beginPath() ) 需要stroke()描邊才會顯示 2、strokeRect (x, y, width, height) : 描邊矩形 自動描邊，有獨立路徑 3、fi ...
  • 學Vue，就要學會vue JSX（大結局）
    只能在render函數裡面使用JSX嗎 當然不是，你可以定義method，然後在method裡面返回JSX,然後在render函數裡面調用這個方法，不僅如此，JSX還可以直接賦值給變數，比如下麵這段代碼 methods: { $_renderFooter() { return ( <div> <El ...
一周排行
    -Advertisement-
    Play Games
  • GoF之工廠模式
    GoF之工廠模式 @目錄GoF之工廠模式每博一文案1. 簡單說明“23種設計模式”1.2 介紹工廠模式的三種形態1.3 簡單工廠模式（靜態工廠模式）1.3.1 簡單工廠模式的優缺點:1.4 工廠方法模式1.4.1 工廠方法模式的優缺點:1.5 抽象工廠模式1.6 抽象工廠模式的優缺點：2. 總結:3 ...
  • dotnet C# 簡單的追加文件夾到 ZipArchive 壓縮文件的方法
    新改進提供的Taurus Rpc 功能，可以簡化微服務間的調用，同時可以不用再手動輸出模塊名稱，或調用路徑，包括負載均衡，這一切，由框架實現並提供了。新的Taurus Rpc 功能，將使得服務間的調用，更加輕鬆、簡約、高效。 ...
  • Elasticsearch 系列（六）- ES數據同步和ES集群
    本章將和大家分享ES的數據同步方案和ES集群相關知識。廢話不多說，下麵我們直接進入主題。 一、ES數據同步 1、數據同步問題 Elasticsearch中的酒店數據來自於mysql資料庫，因此mysql數據發生改變時，Elasticsearch也必須跟著改變，這個就是Elasticsearch與my ...
  • 自動化測試數據生成：Asp.Net Core單元測試利器AutoFixture詳解
    引言 在我們之前的文章中介紹過使用Bogus生成模擬測試數據，今天來講解一下功能更加強大自動生成測試數據的工具的庫"AutoFixture"。 什麼是AutoFixture? AutoFixture 是一個針對 .NET 的開源庫，旨在最大程度地減少單元測試中的“安排（Arrange）”階段，以提高 ...
  • .NET Emit 入門教程：第七部分：實戰項目1：將 DbDataReader 轉實體
    經過前面幾個部分學習，相信學過的同學已經能夠掌握 .NET Emit 這種中間語言，並能使得它來編寫一些應用，以提高程式的性能。隨著 IL 指令篇的結束，本系列也已經接近尾聲，在這接近結束的最後，會提供幾個可供直接使用的示例，以供大伙分析或使用在項目中。 ...
  • Windows下綁定線程到指定的CPU核心
    當從不同來源導入Excel數據時，可能存在重覆的記錄。為了確保數據的準確性，通常需要刪除這些重覆的行。手動查找並刪除可能會非常耗費時間，而通過編程腳本則可以實現在短時間內處理大量數據。本文將提供一個使用C# 快速查找並刪除Excel重覆項的免費解決方案。 以下是實現步驟： 1. 首先安裝免費.NET ...
  • mORMot 1.18 第07章 簡單的讀寫操作
    C++ 異常處理 C++ 異常處理機制允許程式在運行時處理錯誤或意外情況。它提供了捕獲和處理錯誤的一種結構化方式，使程式更加健壯和可靠。 異常處理的基本概念： 異常: 程式在運行時發生的錯誤或意外情況。 拋出異常: 使用 throw 關鍵字將異常傳遞給調用堆棧。 捕獲異常: 使用 try-catch ...
  • mORMot 1.18 第06章 概念
    優秀且經驗豐富的Java開發人員的特征之一是對API的廣泛瞭解，包括JDK和第三方庫。 我花了很多時間來學習API，尤其是在閱讀了Effective Java 3rd Edition之後 ，Joshua Bloch建議在Java 3rd Edition中使用現有的API進行開發，而不是為常見的東西編 ...
  • php 開發規範
    框架 · 使用laravel框架，原因：tp的框架路由和orm沒有laravel好用 · 使用強制路由，方便介面多時，分多版本，分文件夾等操作 介面 · 介面開發註意欄位類型，欄位是int，查詢成功失敗都要返回int（對接java等強類型語言方便） · 查詢介面用GET、其他用POST 代碼 · 所 ...
  • 2024 年 4 月 28 日 周日 晴 熱（1253 字）
    正文 下午找企業的人去鎮上做貸後。 車上聽同事跟那個司機對罵，火星子都快出來了。司機跟那同事更熟一些，連我在內一共就三個人，同事那一手指桑罵槐給我都聽愣了。司機也是老社會人了，馬上聽出來了，為那個無辜的企業經辦人辯護，實際上是為自己辯護。 “這個事情你不能怪企業。”“但他們總不能讓銀行的人全權負責， ...
所有分類