怎么在vue中使用jsx語句

這期內(nèi)容當(dāng)中小編將會給大家?guī)碛嘘P(guān)怎么在vue中使用jsx語句，文章內(nèi)容豐富且以專業(yè)的角度為大家分析和敘述，閱讀完這篇文章希望大家可以有所收獲。

創(chuàng)新互聯(lián)主打移動網(wǎng)站、成都做網(wǎng)站、成都網(wǎng)站設(shè)計、成都外貿(mào)網(wǎng)站建設(shè)、網(wǎng)站改版、網(wǎng)絡(luò)推廣、網(wǎng)站維護(hù)、國際域名空間、等互聯(lián)網(wǎng)信息服務(wù)，為各行業(yè)提供服務(wù)。在技術(shù)實力的保障下，我們?yōu)榭蛻舫兄Z穩(wěn)定，放心的服務(wù)，根據(jù)網(wǎng)站的內(nèi)容與功能再決定采用什么樣的設(shè)計。最后，要實現(xiàn)符合網(wǎng)站需求的內(nèi)容、功能與設(shè)計，我們還會規(guī)劃穩(wěn)定安全的技術(shù)方案做保障。

什么是JSX?

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

我為什么要在vue中用JSX?

想折騰一下唄,開玩笑.最開始是因為近期在學(xué)習(xí)react,在里面體驗了一把jsx語法,發(fā)現(xiàn)也并沒有別人說的很難受的感覺啊,于是就想嘗試在vue中也試下,廢話不多說,先來用代碼來看下兩者的區(qū)別吧.

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

使用template

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

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

item組件中就是接收父組件傳過來的id值來顯示不同的h標(biāo)簽,v-if可以說用到了"極致",而且寫了很多個冗余的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>

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

// list.vue
<template>
 <div>
  <h-title :id="id">Hello World</h-title>
  <button @click="next">下一個</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>

運行后頁面就渲染出了h2 or h3 or h4標(biāo)簽，同時slot也只有一個，點擊切換props的值，也會顯示不同的h標(biāo)簽。第二種寫法雖然不是很直接，但是省去了很多冗余代碼，頁面一下清爽了很多。

沒了v-if,v-for,v-model怎么辦？

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

v-if

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

寫三元表達(dá)式只能寫簡單的，那么復(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中｛｝中間是沒辦法寫if/for語句的只能寫表達(dá)式，所以就用map來當(dāng)循環(huán)，用三元表達(dá)式來當(dāng)判斷了

v-model

最近在幫公司面試招人發(fā)現(xiàn)v-model很多人都不知道語法糖是什么？然后有些人說我可以用原生js實現(xiàn)，但是他們竟然不知道在vue中怎么實現(xiàn)，好吧，兩個點：傳值和監(jiān)聽事件改變值。

  <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>

怎么用自定義組件？

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

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

事件，class,style,ref等等怎么綁定？

來看下面的寫法

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>
 )
}

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

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

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

因為函數(shù)式組件只是一個函數(shù)，所以渲染開銷也低很多。然而，對持久化實例的缺乏也意味著函數(shù)式組件不會出現(xiàn)在 Vue devtools 的組件樹里。

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

<template functional>

</template>

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

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

組件需要的一切都是通過上下文傳遞，包括：

  • props : 提供所有 prop 的對象

  • children: VNode 子節(jié)點的數(shù)組

  • slots: 返回所有插槽的對象的函數(shù)

  • data：傳遞給組件的數(shù)據(jù)對象，并將這個組件作為第二個參數(shù)傳入 createElement

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

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

//父組件
 ...省略無關(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的根元素上，但是其實沒有。我們需要增加點東西

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

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

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

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

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

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

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

這個其實跟最開始我例舉的例子很像。我在項目中用它來干掉了滿屏的v-if/v-else

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

  1. 用一個num變量表示當(dāng)前正在展示的題目索引

  2. 每次點擊下一題按鈕時num++

  3. 用v-if來判斷 num===1，num===2這樣來決定展示哪個。

這一寫，模板里面好多啊，由于我們的題目每道題的模板可能都不一樣，所以沒辦法循環(huán)，只能手寫全部。之前考慮過用動態(tà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>

上述就是小編為大家分享的怎么在vue中使用jsx語句了，如果剛好有類似的疑惑，不妨參照上述分析進(jìn)行理解。如果想知道更多相關(guān)知識，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。

網(wǎng)站欄目：怎么在vue中使用jsx語句
URL標(biāo)題：http://muchs.cn/article0/jpdioo.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供企業(yè)建站、自適應(yīng)網(wǎng)站、建站公司、網(wǎng)站收錄、做網(wǎng)站、定制開發(fā)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)

手機(jī)網(wǎng)站建設(shè)