深入剖析JSX

一、深入剖析JSX
- 1.插值
- 2.指令
- - 1..v-text
  - 2..v-html
  - 3.v-show
  - 4.v-if
  - 5.v-for
  - 6.v-on
  - 7.v-bind
  - 8.v-model
  - 9.v-slot
  - 10.v-pre
  - 11.v-cloak
  - 12.v-once
- 2.Ref
- 3.自定義指令
- 4.過濾器
- 5.插槽

一、深入剖析JSX

Vue中使用JSX語法，可以讓我們回到更接近模板的語法上，

render () {
  return (
    <h1>這是一個標題</h1>
  )
}

1.插值

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

2.指令

在JSX中，一些指令并不存在，所以我們可以換一種方式來處理，

1…v-text

<div domPropsTextContent="<p>i am a p</p>"></div>

2…v-html

<div domPropsInnerHTML="<p>i am a p</p>"></div>

3.v-show

jsx支持v-show指令：

<div v-show={this.show}></div>

4.v-if

<!-- v-if -->
{true && <div>div</div>}
{true ? <div>div</div> : <span>span</span>}

5.v-for

{ [1, 2, 3].map(item => (<div key={item}>{ item }</div>))}

6.v-on

<button onClick={this.handleClick}>點擊事件</button>
<button on-click={this.handleClick}>點擊事件</button>
<!-- 對應@click.native -->
<cmp-button nativeOnClick={this.handleClick}>原生點擊事件</cmp-button>
<!-- 傳遞引數 -->
<button onClick={e => this.handleClick(this.id)}>觸發點擊事件時，傳遞引數</button>

7.v-bind

<input value={this.value} />

在JSX中可以直接使用class="xx"來指定樣式類，行內樣式可以直接寫成style=“xxx”

<div class="a b" style="font-size: 12px;">Content</div>
<div class={{a: true, b: false}}>Content</div>
<div style={{color: 'red', fontSize: '14px'}}>Content</div>

8.v-model

有相應的插件支持 v-model，所以可以直接使用：

<input type="text" v-model={this.value} />

9.v-slot

<my-cmp>
  默認插槽
  <div slot="a">具名插槽 a</div>
</my-cmp>

10.v-pre

11.v-cloak

12.v-once

以上三個指令，不常用，無替代方案

2.Ref

<div ref="xxx">xxx</div>

當遍歷元素或組件時，如：

[1, 2, 3].map(item => <div ref="xx" key={ item }>{ item }</div>)

會發現從 this.$refs.xxx 中獲取的并不是期望的陣列值，此時就需要將refInFor屬性設定為true了：

[1, 2, 3].map(item => <div ref="xx" refInFor={true} key={item}>{ item }</div>)

3.自定義指令

render () {
  // 1
  return (
    <input v-splice={{value: this.value, modifiers: {number: true }}}/>
  )

  // 2
  const directives = [
    { 
      name: 'splice', 
      value: this.value,  
      modifiers: {number: true }
    }
  ];

  return (
    <div {...{ directives} }></div>
  )
}

4.過濾器

<!-- 正常使用過濾器 -->
<div>{{ msg | capitalize }}</div>

<!-- 在jsx中使用過濾器 -->
<div>{ this.$options.filters('capitalize')(this.msg)}</div>

5.插槽

模板寫法：

<!-- 組件內 -->
<div class="demo">
  <slot name="header"></slot>
  <slot></slot>
</div>

<!-- 使用時 -->
<my-cmp>
  default
  <template v-slot:header>header</template>
</my-cmp>

JSX寫法：

<!-- 組件內 -->
<div class="demo">
  { this.$slots.header }
  { this.$slots.default }
</div>

<!-- 使用時 -->
<my-cmp>
  default
  <template slot="header">header</template>
</my-cmp>

作用域插槽：
模板寫法：

<!-- 組件內 -->
<div class="demo">
  <slot :text="'HelloWorld'"></slot>
</div>

<!-- 使用時 -->
<my-cmp v-slot="slotProps">
  {{ slotProps.text }}
</my-cmp>