第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

1. 簡介

本小節(jié)我們將介紹 Vue 渲染函數(shù)。包括什么是渲染函數(shù)、虛擬 DOM、如何編寫渲染函數(shù)。渲染函數(shù)是一個(gè)難點(diǎn)，通常在一些簡單的項(xiàng)目中不會(huì)使用，在處理一些復(fù)雜的業(yè)務(wù)場景時(shí)，使用渲染函數(shù)往往可以達(dá)到事半功倍的效果。

通過本小節(jié)的學(xué)習(xí)我們可以掌握渲染函數(shù)的基本用法，如果同學(xué)們學(xué)完本小節(jié)之后對此還不是特別熟悉也沒有關(guān)系，我們可以先將基礎(chǔ)知識(shí)融會(huì)貫通，然后再對該知識(shí)點(diǎn)多加練習(xí)，相信同學(xué)們一定可以熟練掌握。

2. 基礎(chǔ)

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

讓我們用一個(gè)簡單的例子來學(xué)習(xí)，這個(gè)例子里 render 函數(shù)很實(shí)用。假設(shè)我們要生成一些帶錨點(diǎn)的標(biāo)題，標(biāo)題的尺寸和錨點(diǎn)的地址需要通過屬性傳遞，最終生成如下格式的 DOM 結(jié)構(gòu)：

<h1>
  <a href="#hello-world">
    Hello world!
  </a>
</h1>

同學(xué)們肯定覺得這不是很簡單嗎，于是寫下了如下示例：

代碼解釋：
JS 代碼第 2-33 行，我們定義了組件的模板，通過 v-if 根據(jù)傳入的 level 來控制顯示的標(biāo)簽元素。
JS 代碼第 34-46 行，我們定義了組件 anchored-heading，接收 level 和 href 兩個(gè)屬性參數(shù)。
HTML 代碼第 2-4 行，使用了組件 anchored-heading。

上述代碼雖然實(shí)現(xiàn)了功能，但是代碼冗長，而且在每一個(gè)級(jí)別的標(biāo)題中重復(fù)書寫了 <a :href="href"><slot></slot></a>。那么如何才能消除這些冗余的代碼呢？我們來嘗試使用 render 函數(shù)重寫上面的例子：

通過 render 函數(shù)編寫的組件看起來簡單多了！同學(xué)們可能暫時(shí)還不太理解這段代碼的含義，createElement 是什么？ 這些參數(shù)又表示什么含義？我們先帶著這些疑問繼續(xù)往下學(xué)習(xí)。

3. 虛擬 DOM

Vue 通過建立一個(gè)虛擬 DOM 來追蹤自己要如何改變真實(shí) DOM。請仔細(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”。“虛擬 DOM” 是我們對由 Vue 組件樹建立起來的整個(gè) VNode 樹的稱呼。

4. createElement 參數(shù)

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

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

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

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

也就是說，我們通過 createElement 函數(shù)來遞歸創(chuàng)建我們的節(jié)點(diǎn)標(biāo)簽。

5. 深入數(shù)據(jù)對象

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

{
  // 與 `v-bind:class` 的 API 相同，
  // 接受一個(gè)字符串、對象或字符串和對象組成的數(shù)組
  'class': {
    foo: true,
    bar: false
  },
  // 與 `v-bind:style` 的 API 相同，
  // 接受一個(gè)字符串、對象，或?qū)ο蠼M成的數(shù)組
  style: {
    color: 'red',
    fontSize: '14px'
  },
  // 普通的 HTML attribute
  attrs: {
    id: 'foo'
  },
  // 組件 prop
  props: {
    myProp: 'bar'
  },
  // DOM 屬性
  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
  },
  // 自定義指令。注意，你無法對 `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',
  // 其它特殊頂層屬性
  key: 'myKey',
  ref: 'myRef',
  // 如果你在渲染函數(shù)中給多個(gè)元素都應(yīng)用了相同的 ref 名，
  // 那么 `$refs.myRef` 會(huì)變成一個(gè)數(shù)組。
  refInFor: true
}

現(xiàn)在我們再來回顧上述的例子是不是很簡單？

• 首先，我們通過 createElement 函數(shù)創(chuàng)建 h 標(biāo)簽；
• 它的子集是 createElement 函數(shù)創(chuàng)建的 a 標(biāo)簽；
• a 標(biāo)簽的子集是通過 this.$slots.default 獲取的默認(rèn)插槽。

6. 小結(jié)

本節(jié)，我們帶大家學(xué)習(xí)了 Vue 渲染函數(shù)的使用方法。主要知識(shí)點(diǎn)有以下幾點(diǎn)：

• 使用渲染函數(shù) render 代替 template 模板。
• 虛擬 DOM 的定義，createElement 函數(shù)的使用。