欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

在vue中使用jsx語(yǔ)法的使用方法

 更新時(shí)間:2019年09月30日 11:55:06   作者:SuperMan一路向北  
這篇文章主要介紹了在vue中使用jsx語(yǔ)法的使用方法,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧

什么是JSX?

JSX就是Javascript和XML結(jié)合的一種格式。React發(fā)明了JSX,利用HTML語(yǔ)法來(lái)創(chuàng)建虛擬DOM。當(dāng)遇到<,JSX就當(dāng)HTML解析,遇到{就當(dāng)JavaScript解析.

我為什么要在vue中用JSX?

想折騰一下唄,開(kāi)玩笑.最開(kāi)始是因?yàn)榻谠趯W(xué)習(xí)react,在里面體驗(yàn)了一把jsx語(yǔ)法,發(fā)現(xiàn)也并沒(méi)有別人說(shuō)的很難受的感覺(jué)啊,于是就想嘗試在vue中也試下,廢話不多說(shuō),先來(lái)用代碼來(lái)看下兩者的區(qū)別吧.

ps:vue中大部分場(chǎng)景是不需要用render函數(shù)的,還是用模板更簡(jiǎn)潔直觀.

使用template

// item.vue
<template>
 <div>
  <h1 v-if="id===1">
   <slot></slot>
  </h1>
  <h2 v-if="id===2">
   <slot></slot>
  </h2>
  <h3 v-if="id===3">
   <slot></slot>
  </h3>
  <h4 v-if="id===4">
   <slot></slot>
  </h4>
 </div>
</template>

<script>
  export default {
    name: "item",
    props:{
     id:{
      type:Number,
      default:1
     }
    }
  }
</script>

item組件中就是接收父組件傳過(guò)來(lái)的id值來(lái)顯示不同的h標(biāo)簽,v-if可以說(shuō)用到了"極致",而且寫(xiě)了很多個(gè)冗余的slot

使用render函數(shù)和jsx

// item.vue
<script>
  export default {
    name: "item",
    props:{
     id:{
      type:Number,
      default:1
     }
    },
   render(){
     const hText=`
            <h${this.id}>${this.$slots.default[0].text}</h${this.id}>
           `
    return <div domPropsInnerHTML={hText}></div>
   }
  }
</script>

再加上父組件來(lái)控制props的值。父組件不做對(duì)比還用傳統(tǒng)的template格式,

// list.vue
<template>
 <div>
  <h-title :id="id">Hello World</h-title>
  <button @click="next">下一個(gè)</button>
 </div>
</template>

<script>
 import Title from './item'

 export default {
  name: "list",
  data() {
   return {
    id:1
   }
  },
  components: {
   "h-title":Title
  },
  methods:{
   next(){
    ++this.id
   }
  }
 }
</script>

運(yùn)行后頁(yè)面就渲染出了h1 or h2 or h3標(biāo)簽,同時(shí)slot也只有一個(gè),點(diǎn)擊切換props的值,也會(huì)顯示不同的h標(biāo)簽。第二種寫(xiě)法雖然不是很直接,但是省去了很多冗余代碼,頁(yè)面一下清爽了很多。

沒(méi)了v-if,v-for,v-model怎么辦?

不要著急,這些指令只是黑魔法,用js很容易實(shí)現(xiàn)。

v-if

 render(){
    return (
     <div>
      {this.show?'你帥':'你丑'}
     </div>
    )
   }

寫(xiě)三元表達(dá)式只能寫(xiě)簡(jiǎn)單的,那么復(fù)雜的還得用if/else

  render(){
    let ifText
    if(this.show){
      ifText=<p>你帥</p>
    }else{
      ifText=<p>你丑</p>
    }
    return (
     <div>
      {ifText}
     </div>
    )
   }

v-for

   data(){
    return{
     show:false,
     list:[1,2,3,4]
    }
   },
   render(){
    return (
     <div>
      {this.list.map((v)=>{
       return <p>{v}</p>
      })}
     </div>
    )
   }

在jsx中{}中間是沒(méi)辦法寫(xiě)if/for語(yǔ)句的只能寫(xiě)表達(dá)式,所以就用map來(lái)當(dāng)循環(huán),用三元表達(dá)式來(lái)當(dāng)判斷了

v-model

最近在幫公司面試招人發(fā)現(xiàn)v-model很多人都不知道語(yǔ)法糖是什么?然后有些人說(shuō)我可以用原生js實(shí)現(xiàn),但是他們竟然不知道在vue中怎么實(shí)現(xiàn),好吧,兩個(gè)點(diǎn):傳值和監(jiān)聽(tīng)事件改變值。

  <script>
  export default {
    name: "item",
   data(){
    return{
     show:false,
     list:[1,2,3,4],
     text:'',
    }
   },
   methods:{
    input(e){
     this.text=e.target.value
    }
   },
   render(){
    return (
     <div>
      <input type="text" value={this.text} onInput={this.input}/>
      <p>{this.text}</p>
     </div>
    )
   }
  }
</script>

怎么用自定義組件?

很簡(jiǎn)單,只需要導(dǎo)入進(jìn)來(lái),不用再在components屬性聲明了,直接寫(xiě)在jsx中比如

<script>
 import HelloWolrd from './HelloWorld'
  export default {
   name: "item",
   render(){
    return (
      <HelloWolrd/>
    )
   }
  }
</script>

事件,class,style,ref等等怎么綁定?

來(lái)看下面的寫(xiě)法

render (h) {
 return (
  <div
   // normal attributes or component props.
   id="foo"
   // DOM properties are prefixed with `domProps`
   domPropsInnerHTML="bar"
   // event listeners are prefixed with `on` or `nativeOn`
   onClick={this.clickHandler}
   nativeOnClick={this.nativeClickHandler}
   // other special top-level properties
   class={{ foo: true, bar: false }}
   style={{ color: 'red', fontSize: '14px' }}
   key="key"
   ref="ref"
   // assign the `ref` is used on elements/components with v-for
   refInFor
   slot="slot">
  </div>
 )
}

上面有個(gè)地方需要注意,當(dāng)給自定義組件綁定事件時(shí)用nativeOnClick,而模板格式是用
@click.native,另外當(dāng)用到給函數(shù)式組件綁定事件時(shí)就有點(diǎn)小坑了下面說(shuō)。

JSX中的函數(shù)式組件

函數(shù)式組件無(wú)狀態(tài),無(wú)this實(shí)例,下面是vue文檔中提到的一段話:

因?yàn)楹瘮?shù)式組件只是一個(gè)函數(shù),所以渲染開(kāi)銷也低很多。然而,對(duì)持久化實(shí)例的缺乏也意味著函數(shù)式組件不會(huì)出現(xiàn)在 Vue devtools 的組件樹(shù)里。

我個(gè)人理解因?yàn)闆](méi)了狀態(tài)(data),少了很多響應(yīng)式的處理,還有生命周期等過(guò)程會(huì)提高速度和減少內(nèi)存占用吧?
函數(shù)式組件也可以在模板格式中用只需要這樣

<template functional>

</template>

那jsx中的函數(shù)式組件呢?也很簡(jiǎn)單只需增加配置functional: true就可以了

那函數(shù)式組件沒(méi)有了this 實(shí)例怎么綁定事件怎么獲取props呢?

組件需要的一切都是通過(guò)上下文傳遞,包括:

  • props : 提供所有 prop 的對(duì)象
  • children: VNode 子節(jié)點(diǎn)的數(shù)組
  • slots: 返回所有插槽的對(duì)象的函數(shù)
  • data:傳遞給組件的數(shù)據(jù)對(duì)象,并將這個(gè)組件作為第二個(gè)參數(shù)傳入 createElement

上面我只列舉了部分屬性,這些是非函數(shù)式組件的東西,對(duì)于函數(shù)式組件
vue 增加了context對(duì)象,需要作為render(h,context) 第二個(gè)參數(shù)傳入,this.$slots.default更新為context.children props原本是直接掛在this上的,現(xiàn)在變?yōu)閏ontext.props掛在了context.props上。this.data變?yōu)榱薱ontext.data

需要注意的是對(duì)于函數(shù)式組件,沒(méi)有被定義為prop的特性不會(huì)自動(dòng)添加到組件的根元素上,意思就是需要我們手動(dòng)添加到組件根元素了,看個(gè)例子吧

//父組件
 ...省略無(wú)關(guān)代碼
 render(){
   return (
    <Item data={this.data} class="large"/>
   )
  }
//Item.vue組件
export default {
  functional:true,
   name: "item",
   render(h,context){
    return (
     <div class="red" >
      {context.props.data}
     </div>
    )
   }
  }

上面代碼期待的是.large類名傳入到了Item的根元素上,但是其實(shí)沒(méi)有。我們需要增加點(diǎn)東西

// Item.vue
export default {
  functional:true,
   name: "item",
   render(h,context){
    return (
     <div class="red" {...context.data}>
      {context.props.data}
     </div>
    )
   }
  }

注意到,通過(guò)展開(kāi)運(yùn)算符把所有的屬性添加到了根元素上,這個(gè)context.data就是你在父組件給子組件增加的屬性,他會(huì)跟你在子元素根元素的屬性智能合并,現(xiàn)在.large類名就傳進(jìn)來(lái)了。這個(gè)很有用,當(dāng)你在父組件給子組件綁定事件時(shí)就需要這個(gè)了。下面說(shuō)一個(gè)關(guān)于綁定事件的小坑

向 createElement 通過(guò)傳入 context.data 作為第二個(gè)參數(shù),我們就把 my-functional-button 上面所有的特性和事件監(jiān)聽(tīng)器都傳遞下去了。事實(shí)上這是非常透明的,那些事件甚至并不要求 .native 修飾符

上面是vue官網(wǎng)的一段話,然而我看了一遍就忽略了一句很重要的話,就是最后一句,他說(shuō)不需要.native修飾符了?好先看代碼

// 父組件
 methods:{
   show(){
    alert('你好')
   }
  },
  render(){
   return (
    <Item data={this.data} onNativeClick={this.show} class="large"/>
   )
  }

上面代碼乍一看沒(méi)毛病,自定義組件用onNativeClick嘛,結(jié)果就是不會(huì)彈窗。唉,最后讀了幾遍剛才vue文檔中的解釋,才發(fā)現(xiàn)原來(lái)函數(shù)式組件不需要.native修飾符,對(duì)于template格式肯定一下就反應(yīng)過(guò)來(lái)了,但是jsx的話,好吧,把上面的onNativeClick重新改為onClick就好了。

現(xiàn)有項(xiàng)目哪些功能可以用jsx代替呢?

這個(gè)其實(shí)跟最開(kāi)始我例舉的例子很像。我在項(xiàng)目中用它來(lái)干掉了滿屏的v-if/v-else

由于我的業(yè)務(wù)是pad上的,需求是一套試卷有幾十道題目,要求一屏只顯示一道題目,點(diǎn)擊下一題顯示下一個(gè)題,思路也比較簡(jiǎn)單:

  1. 用一個(gè)num變量表示當(dāng)前正在展示的題目索引
  2. 每次點(diǎn)擊下一題按鈕時(shí)num++
  3. 用v-if來(lái)判斷 num===1,num===2這樣來(lái)決定展示哪個(gè)。

這一寫(xiě),模板里面好多啊,由于我們的題目每道題的模板可能都不一樣,所以沒(méi)辦法循環(huán),只能手寫(xiě)全部。之前考慮過(guò)用動(dòng)態(tài)組件來(lái)切換,但是放棄了,因?yàn)闆](méi)有if直觀啊。

下面看怎么用jsx優(yōu)化一下

//父組件
 export default {
  name: "list",
  data() {
   return {
    data:'我是函數(shù)式組件',
    id:1,
     tests:{
     1:<div><span>第一道題</span></div>,
     2:<div><section>第二道題</section></div>,
     3:<div><p>第三道題</p></div>
    }
   }
  },
  methods:{
   next(){
    ++this.id
   }
  },
  render(){
   return (
    <div>
     <Item data={this.tests[this.id]} class="large"/>
     <button onClick={this.next}>下一題</button>
    </div>
   )
  }
 }

上面每道題目的結(jié)構(gòu)都不一致

 //子組件,只接受數(shù)據(jù)展示,用函數(shù)式組件
<script>
 export default {
 functional:true,
  name: "item",
  render(h,context){
   return (
    <div class="red" {...context.data}>
     {context.props.data}
    </div>
   )
  }
 }
</script>

上面沒(méi)有用任何if/else判斷就完成了功能,這里用jsx我覺(jué)得比較合適,不知道各位大佬有什么其他思路?

最后

總結(jié)一下吧,我們平時(shí)開(kāi)發(fā)還是多用temlate因?yàn)橹庇^簡(jiǎn)潔,各種指令用著很方便,等你覺(jué)得用template寫(xiě)出的代碼看著很冗余,或者想自己控制渲染邏輯比如循環(huán),判斷等等時(shí)可以考慮用JSX。另外推薦大家多用函數(shù)式組件提高性能。

第一次寫(xiě)文章,希望各位花時(shí)間看了的大佬覺(jué)得哪個(gè)說(shuō)的不太嚴(yán)謹(jǐn)還需多多包涵,提出意見(jiàn)我都接受。

參考資料

vue 渲染函數(shù)&jsx
babel-plugin-transform-vue-jsx

以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。

相關(guān)文章

  • vue+element-ui:使用el-dialog時(shí)彈框不出現(xiàn)的解決

    vue+element-ui:使用el-dialog時(shí)彈框不出現(xiàn)的解決

    這篇文章主要介紹了vue+element-ui:使用el-dialog時(shí)彈框不出現(xiàn)的解決方案,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
    2023-10-10
  • Vue+Vuex實(shí)現(xiàn)自動(dòng)登錄的知識(shí)點(diǎn)詳解

    Vue+Vuex實(shí)現(xiàn)自動(dòng)登錄的知識(shí)點(diǎn)詳解

    在本篇文章里小編給大家整理的是關(guān)于Vue+Vuex實(shí)現(xiàn)自動(dòng)登錄的知識(shí)點(diǎn)詳解,需要的朋友們可以學(xué)習(xí)下。
    2020-03-03
  • 使用vue2.6實(shí)現(xiàn)抖音【時(shí)間輪盤】屏保效果附源碼

    使用vue2.6實(shí)現(xiàn)抖音【時(shí)間輪盤】屏保效果附源碼

    前段時(shí)間看抖音,有人用時(shí)間輪盤作為動(dòng)態(tài)的桌面壁紙,一時(shí)間成為全網(wǎng)最火的電腦屏保,后來(lái)小米等運(yùn)用市場(chǎng)也出現(xiàn)了【時(shí)間輪盤】,有點(diǎn)像五行八卦,感覺(jué)很好玩,于是突發(fā)奇想,自己寫(xiě)一個(gè)網(wǎng)頁(yè)版小DEMO玩玩,需要的朋友可以參考下
    2019-04-04
  • Vue實(shí)現(xiàn)購(gòu)物車詳情頁(yè)面的方法

    Vue實(shí)現(xiàn)購(gòu)物車詳情頁(yè)面的方法

    這篇文章主要介紹了Vue實(shí)戰(zhàn)之購(gòu)物車詳情頁(yè)面的實(shí)現(xiàn),本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì),具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
    2019-08-08
  • vue3中ts語(yǔ)法使用element plus分頁(yè)組件警告錯(cuò)誤問(wèn)題

    vue3中ts語(yǔ)法使用element plus分頁(yè)組件警告錯(cuò)誤問(wèn)題

    這篇文章主要介紹了vue3中ts語(yǔ)法使用element plus分頁(yè)組件警告錯(cuò)誤問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
    2024-04-04
  • 詳解Vue如何支持JSX語(yǔ)法

    詳解Vue如何支持JSX語(yǔ)法

    這篇文章主要介紹了詳解Vue如何支持JSX語(yǔ)法,小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
    2017-11-11
  • vant如何修改placeholder樣式

    vant如何修改placeholder樣式

    這篇文章主要介紹了vant如何修改placeholder樣式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
    2022-05-05
  • Vue3之 Vue CLI多環(huán)境配置

    Vue3之 Vue CLI多環(huán)境配置

    這篇文章主要介紹了Vue3之 Vue CLI多環(huán)境配置,通俗點(diǎn)說(shuō)就是使用配置文件來(lái)管理多環(huán)境,實(shí)現(xiàn)環(huán)境的切換,西阿棉詳細(xì)內(nèi)容,需要的朋友可以參考一下
    2021-11-11
  • ant-design-vue中的select選擇器,對(duì)輸入值的進(jìn)行篩選操作

    ant-design-vue中的select選擇器,對(duì)輸入值的進(jìn)行篩選操作

    這篇文章主要介紹了ant-design-vue中的select選擇器,對(duì)輸入值的進(jìn)行篩選操作,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
    2020-10-10
  • vue2實(shí)現(xiàn)directive自定義指令的封裝與全局注冊(cè)流程

    vue2實(shí)現(xiàn)directive自定義指令的封裝與全局注冊(cè)流程

    自定義指令是對(duì)普通DOM元素進(jìn)行的底層操作,它是一種有效的的補(bǔ)充和擴(kuò)展,不僅可以用于定義任何的dom操作,并且是可以復(fù)用的,下面這篇文章主要給大家介紹了關(guān)于vue2實(shí)現(xiàn)directive自定義指令的封裝與全局注冊(cè)流程的相關(guān)資料,需要的朋友可以參考下
    2023-02-02

最新評(píng)論