渲染函數(shù) & JSX詳情

更新時(shí)間：2021年09月22日 15:30:17 投稿：zhanglei

本篇文章來講解渲染函數(shù) & JSX，Vue 推薦在絕大多數(shù)情況下使用模板來創(chuàng)建你的 HTML。然而在一些場景中，你真的需要 JavaScript 的完全編程的能力。這時(shí)我們可以用渲染函數(shù)，它比模板更接近編譯器,需要的朋友可以參考一下

一、基礎(chǔ)

Vue 推薦在絕大多數(shù)情況下使用模板來創(chuàng)建你的 HTML。然而在一些場景中，你真的需要 JavaScript 的完全編程的能力。這時(shí)我們可以用渲染函數(shù)，它比模板更接近編譯器

讓我們深入一個(gè)簡單的例子，這個(gè)例子里 render 函數(shù)很實(shí)用。假設(shè)我們要生成一些帶錨點(diǎn)的標(biāo)題：

<h1>
  <a name="hello-world" href="#hello-world" rel="external nofollow" >
    Hello world!
  </a>
</h1>

對(duì)于上面的 HTML，我們決定這樣定義組件接口：

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

當(dāng)開始寫一個(gè)只能通過 level prop 動(dòng)態(tài)生成標(biāo)題 (heading) 的組件時(shí)，你可能很快想到這樣實(shí)現(xiàn)：

<script type="text/x-template" id="anchored-heading-template">
  <h1 v-if="level === 1">
    <slot></slot>
  </h1>
  <h2 v-else-if="level === 2">
    <slot></slot>
  </h2>
  <h3 v-else-if="level === 3">
    <slot></slot>
  </h3>
  <h4 v-else-if="level === 4">
    <slot></slot>
  </h4>
  <h5 v-else-if="level === 5">
    <slot></slot>
  </h5>
  <h6 v-else-if="level === 6">
    <slot></slot>
  </h6>
</script>

Vue.component('anchored-heading', {
  template: '#anchored-heading-template',
  props: {
    level: {
      type: Number,
      required: true
    }
  }
})

這里用模板并不是最好的選擇：不但代碼冗長，而且在每一個(gè)級(jí)別的標(biāo)題中重復(fù)書寫了 <slot></slot>，在要插入錨點(diǎn)元素時(shí)還要再次重復(fù)。

雖然模板在大多數(shù)組件中都非常好用，但是顯然在這里它就不合適了。那么，我們來嘗試使用 render 函數(shù)重寫上面的例子：

Vue.component('anchored-heading', {
  render: function (createElement) {
    return createElement(
      'h' + this.level,   // 標(biāo)簽名稱
      this.$slots.default // 子節(jié)點(diǎn)數(shù)組
    )
  },
  props: {
    level: {
      type: Number,
      required: true
    }
  }
})

看起來簡單多了！這樣代碼精簡很多，但是需要非常熟悉 Vue 的實(shí)例 property。在這個(gè)例子中，你需要知道，向組件中傳遞不帶 v-slot 指令的子節(jié)點(diǎn)時(shí)，比如 anchored-heading 中的 Hello world!，這些子節(jié)點(diǎn)被存儲(chǔ)在組件實(shí)例中的 $slots.default 中。如果你還不了解，在深入渲染函數(shù)之前推薦閱讀實(shí)例 property API。

二、節(jié)點(diǎn)、樹以及虛擬 DOM

在深入渲染函數(shù)之前，了解一些瀏覽器的工作原理是很重要的。以下面這段 HTML 為例：

<div>
  <h1>My title</h1>
  Some text content
  <!-- TODO: Add tagline -->
</div>

當(dāng)瀏覽器讀到這些代碼時(shí)，它會(huì)建立一個(gè)“DOM 節(jié)點(diǎn)”樹來保持追蹤所有內(nèi)容，如同你會(huì)畫一張家譜樹來追蹤家庭成員的發(fā)展一樣。

上述 HTML 對(duì)應(yīng)的 DOM 節(jié)點(diǎn)樹如下圖所示：

每個(gè)元素都是一個(gè)節(jié)點(diǎn)。每段文字也是一個(gè)節(jié)點(diǎn)。甚至注釋也都是節(jié)點(diǎn)。一個(gè)節(jié)點(diǎn)就是頁面的一個(gè)部分。就像家譜樹一樣，每個(gè)節(jié)點(diǎn)都可以有孩子節(jié)點(diǎn) (也就是說每個(gè)部分可以包含其它的一些部分)。

高效地更新所有這些節(jié)點(diǎn)會(huì)是比較困難的，不過所幸你不必手動(dòng)完成這個(gè)工作。你只需要告訴 Vue 你希望頁面上的 HTML 是什么，這可以是在一個(gè)模板里：

<h1>{{ blogTitle }}</h1>

或者一個(gè)渲染函數(shù)里：

render: function (createElement) {
  return createElement('h1', this.blogTitle)
}

在這兩種情況下，Vue 都會(huì)自動(dòng)保持頁面的更新，即便 blogTitle 發(fā)生了改變。

1、虛擬 DOM

Vue 通過建立一個(gè)虛擬 DOM 來追蹤自己要如何改變真實(shí) DOM。請(qǐng)仔細(xì)看這行代碼：

return createElement('h1', this.blogTitle)

createElement 到底會(huì)返回什么呢？其實(shí)不是一個(gè)實(shí)際的 DOM 元素。它更準(zhǔn)確的名字可能是 createNodeDescription，因?yàn)樗男畔?huì)告訴 Vue 頁面上需要渲染什么樣的節(jié)點(diǎn)，包括及其子節(jié)點(diǎn)的描述信息。我們把這樣的節(jié)點(diǎn)描述為“虛擬節(jié)點(diǎn) (virtual node)”，也常簡寫它為“VNode”?！疤摂M DOM”是我們對(duì)由 Vue 組件樹建立起來的整個(gè) VNode 樹的稱呼。

三、createElement 參數(shù)

接下來你需要熟悉的是如何在 createElement 函數(shù)中使用模板中的那些功能。這里是 createElement 接受的參數(shù)：

// @returns {VNode}
createElement(
  // {String | Object | Function}
  // 一個(gè) HTML 標(biāo)簽名、組件選項(xiàng)對(duì)象，或者
  // resolve 了上述任何一種的一個(gè) async 函數(shù)。必填項(xiàng)。
  'div',

  // {Object}
  // 一個(gè)與模板中 attribute 對(duì)應(yīng)的數(shù)據(jù)對(duì)象?？蛇x。
  {
    // (詳情見下一節(jié))
  },

  // {String | Array}
  // 子級(jí)虛擬節(jié)點(diǎn) (VNodes)，由 `createElement()` 構(gòu)建而成，
  // 也可以使用字符串來生成“文本虛擬節(jié)點(diǎn)”?？蛇x。
  [
    '先寫一些文字',
    createElement('h1', '一則頭條'),
    createElement(MyComponent, {
      props: {
        someProp: 'foobar'
      }
    })
  ]
)

1、深入數(shù)據(jù)對(duì)象

有一點(diǎn)要注意：正如 v-bind:class 和 v-bind:style 在模板語法中會(huì)被特別對(duì)待一樣，它們?cè)?VNode 數(shù)據(jù)對(duì)象中也有對(duì)應(yīng)的頂層字段。該對(duì)象也允許你綁定普通的 HTML attribute，也允許綁定如 innerHTML 這樣的 DOM property (這會(huì)覆蓋 v-html 指令)。

{
  // 與 `v-bind:class` 的 API 相同，
  // 接受一個(gè)字符串、對(duì)象或字符串和對(duì)象組成的數(shù)組
  'class': {
    foo: true,
    bar: false
  },
  // 與 `v-bind:style` 的 API 相同，
  // 接受一個(gè)字符串、對(duì)象，或?qū)ο蠼M成的數(shù)組
  style: {
    color: 'red',
    fontSize: '14px'
  },
  // 普通的 HTML attribute
  attrs: {
    id: 'foo'
  },
  // 組件 prop
  props: {
    myProp: 'bar'
  },
  // DOM property
  domProps: {
    innerHTML: 'baz'
  },
  // 事件監(jiān)聽器在 `on` 內(nèi)，
  // 但不再支持如 `v-on:keyup.enter` 這樣的修飾器。
  // 需要在處理函數(shù)中手動(dòng)檢查 keyCode。
  on: {
    click: this.clickHandler
  },
  // 僅用于組件，用于監(jiān)聽原生事件，而不是組件內(nèi)部使用
  // `vm.$emit` 觸發(fā)的事件。
  nativeOn: {
    click: this.nativeClickHandler
  },
  // 自定義指令。注意，你無法對(duì) `binding` 中的 `oldValue`
  // 賦值，因?yàn)?Vue 已經(jīng)自動(dòng)為你進(jìn)行了同步。
  directives: [
    {
      name: 'my-custom-directive',
      value: '2',
      expression: '1 + 1',
      arg: 'foo',
      modifiers: {
        bar: true
      }
    }
  ],
  // 作用域插槽的格式為
  // { name: props => VNode | Array<VNode> }
  scopedSlots: {
    default: props => createElement('span', props.text)
  },
  // 如果組件是其它組件的子組件，需為插槽指定名稱
  slot: 'name-of-slot',
  // 其它特殊頂層 property
  key: 'myKey',
  ref: 'myRef',
  // 如果你在渲染函數(shù)中給多個(gè)元素都應(yīng)用了相同的 ref 名，
  // 那么 `$refs.myRef` 會(huì)變成一個(gè)數(shù)組。
  refInFor: true
}

2、完整示例

有了這些知識(shí)，我們現(xiàn)在可以完成我們最開始想實(shí)現(xiàn)的組件：

var getChildrenTextContent = function (children) {
  return children.map(function (node) {
    return node.children
      ? getChildrenTextContent(node.children)
      : node.text
  }).join('')
}

Vue.component('anchored-heading', {
  render: function (createElement) {
    // 創(chuàng)建 kebab-case 風(fēng)格的 ID
    var headingId = getChildrenTextContent(this.$slots.default)
      .toLowerCase()
      .replace(/\W+/g, '-')
      .replace(/(^-|-$)/g, '')

    return createElement(
      'h' + this.level,
      [
        createElement('a', {
          attrs: {
            name: headingId,
            href: '#' + headingId
          }
        }, this.$slots.default)
      ]
    )
  },
  props: {
    level: {
      type: Number,
      required: true
    }
  }
})

3、約束

VNode 必須唯一

組件樹中的所有 VNode 必須是唯一的。這意味著，下面的渲染函數(shù)是不合法的：

render: function (createElement) {
  var myParagraphVNode = createElement('p', 'hi')
  return createElement('div', [
    // 錯(cuò)誤 - 重復(fù)的 VNode
    myParagraphVNode, myParagraphVNode
  ])
}

如果你真的需要重復(fù)很多次的元素/組件，你可以使用工廠函數(shù)來實(shí)現(xiàn)。例如，下面這渲染函數(shù)用完全合法的方式渲染了 20 個(gè)相同的段落：

render: function (createElement) {
  return createElement('div',
    Array.apply(null, { length: 20 }).map(function () {
      return createElement('p', 'hi')
    })
  )
}

四、使用 JavaScript 代替模板功能

1、v-if 和 v-for

只要在原生的 JavaScript 中可以輕松完成的操作，Vue 的渲染函數(shù)就不會(huì)提供專有的替代方法。比如，在模板中使用的 v-if 和 v-for：

<ul v-if="items.length">
  <li v-for="item in items">{{ item.name }}</li>
</ul>
<p v-else>No items found.</p>

這些都可以在渲染函數(shù)中用 JavaScript 的 if/else 和 map 來重寫：

props: ['items'],
render: function (createElement) {
  if (this.items.length) {
    return createElement('ul', this.items.map(function (item) {
      return createElement('li', item.name)
    }))
  } else {
    return createElement('p', 'No items found.')
  }
}

2、v-model

渲染函數(shù)中沒有與 v-model 的直接對(duì)應(yīng)——你必須自己實(shí)現(xiàn)相應(yīng)的邏輯：

props: ['value'],
render: function (createElement) {
  var self = this
  return createElement('input', {
    domProps: {
      value: self.value
    },
    on: {
      input: function (event) {
        self.$emit('input', event.target.value)
      }
    }
  })
}

這就是深入底層的代價(jià)，但與 v-model 相比，這可以讓你更好地控制交互細(xì)節(jié)。

3、事件 & 按鍵修飾符

對(duì)于 .passive、.capture 和 .once 這些事件修飾符，Vue 提供了相應(yīng)的前綴可以用于 on：

修飾符	前綴
.passive	&
.capture	!
.once	~
.capture.once 或 .once.capture	~!

例如：

on: {
  '!click': this.doThisInCapturingMode,
  '~keyup': this.doThisOnce,
  '~!mouseover': this.doThisOnceInCapturingMode
}

對(duì)于所有其它的修飾符，私有前綴都不是必須的，因?yàn)槟憧梢栽谑录幚砗瘮?shù)中使用事件方法：

修飾符	處理函數(shù)中的等價(jià)操作
.stop	event.stopPropagation()
.prevent	event.preventDefault()
.self	if (event.target !== event.currentTarget) return
按鍵： .enter, .13	if (event.keyCode !== 13) return (對(duì)于別的按鍵修飾符來說，可將 13 改為另一個(gè)按鍵碼)
修飾鍵： .ctrl, .alt, .shift, .meta	if (!event.ctrlKey) return (將 ctrlKey 分別修改為 altKey、shiftKey 或者 metaKey)

這里是一個(gè)使用所有修飾符的例子：

on: {
  keyup: function (event) {
    // 如果觸發(fā)事件的元素不是事件綁定的元素
    // 則返回
    if (event.target !== event.currentTarget) return
    // 如果按下去的不是 enter 鍵或者
    // 沒有同時(shí)按下 shift 鍵
    // 則返回
    if (!event.shiftKey || event.keyCode !== 13) return
    // 阻止 事件冒泡
    event.stopPropagation()
    // 阻止該元素默認(rèn)的 keyup 事件
    event.preventDefault()
    // ...
  }
}

4、插槽

你可以通過 this.$slots 訪問靜態(tài)插槽的內(nèi)容，每個(gè)插槽都是一個(gè) VNode 數(shù)組：

render: function (createElement) {
  // `<div><slot></slot></div>`
  return createElement('div', this.$slots.default)
}

也可以通過 this.$scopedSlots 訪問作用域插槽，每個(gè)作用域插槽都是一個(gè)返回若干 VNode 的函數(shù)：

props: ['message'],
render: function (createElement) {
  // `<div><slot :text="message"></slot></div>`
  return createElement('div', [
    this.$scopedSlots.default({
      text: this.message
    })
  ])
}

如果要用渲染函數(shù)向子組件中傳遞作用域插槽，可以利用 VNode 數(shù)據(jù)對(duì)象中的 scopedSlots 字段：

render: function (createElement) {
  // `<div><child v-slot="props"><span>{{ props.text }}</span></child></div>`
  return createElement('div', [
    createElement('child', {
      // 在數(shù)據(jù)對(duì)象中傳遞 `scopedSlots`
      // 格式為 { name: props => VNode | Array<VNode> }
      scopedSlots: {
        default: function (props) {
          return createElement('span', props.text)
        }
      }
    })
  ])
}

五、JSX

如果你寫了很多 render 函數(shù)，可能會(huì)覺得下面這樣的代碼寫起來很痛苦：

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

特別是對(duì)應(yīng)的模板如此簡單的情況下：

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

這就是為什么會(huì)有一個(gè) Babel 插件，用于在 Vue 中使用 JSX 語法，它可以讓我們回到更接近于模板的語法上。

import AnchoredHeading from './AnchoredHeading.vue'

new Vue({
  el: '#demo',
  render: function (h) {
    return (
      <AnchoredHeading level={1}>
        <span>Hello</span> world!
      </AnchoredHeading>
    )
  }
})

將 h 作為 createElement 的別名是 Vue 生態(tài)系統(tǒng)中的一個(gè)通用慣例，實(shí)際上也是 JSX 所要求的。從 Vue 的 Babel 插件的 3.4.0 版本開始，我們會(huì)在以 ES2015 語法聲明的含有 JSX 的任何方法和 getter 中 (不是函數(shù)或箭頭函數(shù)中) 自動(dòng)注入 const h = this.$createElement，這樣你就可以去掉 (h) 參數(shù)了。對(duì)于更早版本的插件，如果 h 在當(dāng)前作用域中不可用，應(yīng)用會(huì)拋錯(cuò)。

六、函數(shù)式組件

之前創(chuàng)建的錨點(diǎn)標(biāo)題組件是比較簡單，沒有管理任何狀態(tài)，也沒有監(jiān)聽任何傳遞給它的狀態(tài)，也沒有生命周期方法。實(shí)際上，它只是一個(gè)接受一些 prop 的函數(shù)。在這樣的場景下，我們可以將組件標(biāo)記為 functional，這意味它無狀態(tài) (沒有響應(yīng)式數(shù)據(jù))，也沒有實(shí)例 (沒有 this 上下文)。一個(gè)函數(shù)式組件就像這樣：

Vue.component('my-component', {
  functional: true,
  // Props 是可選的
  props: {
    // ...
  },
  // 為了彌補(bǔ)缺少的實(shí)例
  // 提供第二個(gè)參數(shù)作為上下文
  render: function (createElement, context) {
    // ...
  }
})

注意：在 2.3.0 之前的版本中，如果一個(gè)函數(shù)式組件想要接收 prop，則 props 選項(xiàng)是必須的。在 2.3.0 或以上的版本中，你可以省略 props 選項(xiàng)，所有組件上的 attribute 都會(huì)被自動(dòng)隱式解析為 prop。

當(dāng)使用函數(shù)式組件時(shí)，該引用將會(huì)是 HTMLElement，因?yàn)樗麄兪菬o狀態(tài)的也是無實(shí)例的。

在 2.5.0 及以上版本中，如果你使用了單文件組件，那么基于模板的函數(shù)式組件可以這樣聲明：

<template functional>
</template>

組件需要的一切都是通過 context 參數(shù)傳遞，它是一個(gè)包括如下字段的對(duì)象：

props：提供所有 prop 的對(duì)象
children：VNode 子節(jié)點(diǎn)的數(shù)組
slots：一個(gè)函數(shù)，返回了包含所有插槽的對(duì)象
scopedSlots：(2.6.0+) 一個(gè)暴露傳入的作用域插槽的對(duì)象。也以函數(shù)形式暴露普通插槽。
data：傳遞給組件的整個(gè)數(shù)據(jù)對(duì)象，作為 createElement 的第二個(gè)參數(shù)傳入組件
parent：對(duì)父組件的引用
listeners：(2.3.0+) 一個(gè)包含了所有父組件為當(dāng)前組件注冊(cè)的事件監(jiān)聽器的對(duì)象。這是 data.on 的一個(gè)別名。
injections：(2.3.0+) 如果使用了 inject 選項(xiàng)，則該對(duì)象包含了應(yīng)當(dāng)被注入的 property。

在添加 functional: true 之后，需要更新我們的錨點(diǎn)標(biāo)題組件的渲染函數(shù)，為其增加 context 參數(shù)，并將 this.$slots.default 更新為 context.children，然后將 this.level 更新為 context.props.level。

因?yàn)楹瘮?shù)式組件只是函數(shù)，所以渲染開銷也低很多。

在作為包裝組件時(shí)它們也同樣非常有用。比如，當(dāng)你需要做這些時(shí)：

程序化地在多個(gè)組件中選擇一個(gè)來代為渲染；
在將 children、props、data 傳遞給子組件之前操作它們。

下面是一個(gè) smart-list 組件的例子，它能根據(jù)傳入 prop 的值來代為渲染更具體的組件：

var EmptyList = { /* ... */ }
var TableList = { /* ... */ }
var OrderedList = { /* ... */ }
var UnorderedList = { /* ... */ }

Vue.component('smart-list', {
  functional: true,
  props: {
    items: {
      type: Array,
      required: true
    },
    isOrdered: Boolean
  },
  render: function (createElement, context) {
    function appropriateListComponent () {
      var items = context.props.items

      if (items.length === 0)           return EmptyList
      if (typeof items[0] === 'object') return TableList
      if (context.props.isOrdered)      return OrderedList

      return UnorderedList
    }

    return createElement(
      appropriateListComponent(),
      context.data,
      context.children
    )
  }
})

1、向子元素或子組件傳遞 attribute 和事件

在普通組件中，沒有被定義為 prop 的 attribute 會(huì)自動(dòng)添加到組件的根元素上，將已有的同名 attribute 進(jìn)行替換或與其進(jìn)行智能合并。

然而函數(shù)式組件要求你顯式定義該行為：

Vue.component('my-functional-button', {
  functional: true,
  render: function (createElement, context) {
    // 完全透傳任何 attribute、事件監(jiān)聽器、子節(jié)點(diǎn)等。
    return createElement('button', context.data, context.children)
  }
})

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

如果你使用基于模板的函數(shù)式組件，那么你還需要手動(dòng)添加 attribute 和監(jiān)聽器。因?yàn)槲覀兛梢栽L問到其獨(dú)立的上下文內(nèi)容，所以我們可以使用 data.attrs 傳遞任何 HTML attribute，也可以使用 listeners (即 data.on 的別名) 傳遞任何事件監(jiān)聽器。

<template functional>
  <button
    class="btn btn-primary"
    v-bind="data.attrs"
    v-on="listeners"
  >
    <slot/>
  </button>
</template>

2、slots() 和 children 對(duì)比

你可能想知道為什么同時(shí)需要 slots() 和 children。slots().default 不是和 children 類似的嗎？在一些場景中，是這樣——但如果是如下的帶有子節(jié)點(diǎn)的函數(shù)式組件呢？

<my-functional-component>
  <p v-slot:foo>
    first
  </p>
  <p>second</p>
</my-functional-component>

對(duì)于這個(gè)組件，children 會(huì)給你兩個(gè)段落標(biāo)簽，而 slots().default 只會(huì)傳遞第二個(gè)匿名段落標(biāo)簽，slots().foo 會(huì)傳遞第一個(gè)具名段落標(biāo)簽。同時(shí)擁有 children 和 slots()，因此你可以選擇讓組件感知某個(gè)插槽機(jī)制，還是簡單地通過傳遞 children，移交給其它組件去處理。

七、模板編譯

你可能會(huì)有興趣知道，Vue 的模板實(shí)際上被編譯成了渲染函數(shù)。這是一個(gè)實(shí)現(xiàn)細(xì)節(jié)，通常不需要關(guān)心。但如果你想看看模板的功能具體是怎樣被編譯的，可能會(huì)發(fā)現(xiàn)會(huì)非常有意思。下面是一個(gè)使用 Vue.compile 來實(shí)時(shí)編譯模板字符串的簡單示例：

<div>
        <header>
          <h1>I'm a template!</h1>
        </header>
        <p v-if="message">{{ message }}</p>
        <p v-else>No message.</p>
      </div>

render:

function anonymous(
) {
  with(this){return _c('div',[_m(0),(message)?_c('p',[_v(_s(message))]):_c('p',[_v("No message.")])])}
}

staticRenderFns:

_m(0): function anonymous(
) {
  with(this){return _c('header',[_c('h1',[_v("I'm a template!")])])}
}

到此這篇關(guān)于渲染函數(shù) & JSX詳情的文章就介紹到這了,更多相關(guān)渲染函數(shù) & JSX內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章:

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

渲染函數(shù) & JSX詳情

目錄

一、基礎(chǔ)

二、節(jié)點(diǎn)、樹以及虛擬 DOM

1、虛擬 DOM

三、createElement 參數(shù)

1、深入數(shù)據(jù)對(duì)象

2、完整示例

3、約束

四、使用 JavaScript 代替模板功能

1、v-if 和 v-for

2、v-model

3、事件 & 按鍵修飾符

4、插槽

五、JSX

六、函數(shù)式組件

1、向子元素或子組件傳遞 attribute 和事件

2、slots() 和 children 對(duì)比

七、模板編譯

相關(guān)文章

最新評(píng)論

大家感興趣的內(nèi)容

最近更新的內(nèi)容

常用在線小工具

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

渲染函數(shù) & JSX詳情

目錄

一、基礎(chǔ)

二、節(jié)點(diǎn)、樹以及虛擬 DOM

1、虛擬 DOM

三、createElement 參數(shù)

1、深入數(shù)據(jù)對(duì)象

2、完整示例

3、約束

四、使用 JavaScript 代替模板功能

1、v-if 和 v-for

2、v-model

3、事件 & 按鍵修飾符

4、插槽

五、JSX

六、函數(shù)式組件

1、向子元素或子組件傳遞 attribute 和事件

2、slots() 和 children 對(duì)比

七、模板編譯

相關(guān)文章

最新評(píng)論

大家感興趣的內(nèi)容

最近更新的內(nèi)容

常用在線小工具

一、基礎(chǔ)

二、節(jié)點(diǎn)、樹以及虛擬 DOM

1、深入數(shù)據(jù)對(duì)象

3、約束

四、使用 JavaScript 代替模板功能

1、v-if 和 v-for

六、函數(shù)式組件

2、slots() 和 children 對(duì)比

七、模板編譯