Welchen Befehl verwendet die Vue-Rendering-Funktion?

Die Vue-Rendering-Funktion verwendet den Befehl „render“. In Vue wird die HTML-Vorlagensyntax zum Erstellen von Seiten verwendet, und die Renderfunktion kann zum Erstellen von DOM in der JS-Sprache verwendet werden. Da es sich bei Vue um ein virtuelles DOM handelt, muss es beim Abrufen der Vorlage in eine VNode-Funktion übersetzt werden. Durch die Verwendung der Funktion render() zum Erstellen des DOM entfällt bei Vue der Übersetzungsprozess.

Die Betriebsumgebung dieses Tutorials: Windows7-System, Vue3-Version, DELL G3-Computer.

In den meisten Fällen empfiehlt Vue die Verwendung der Vorlagensyntax zum Erstellen von Anwendungen. In einigen Anwendungsfällen müssen wir jedoch unbedingt die vollständigen Programmierfunktionen von JavaScript nutzen. Hier kommt die Renderfunktion --render zum Einsatz.

1. Einführung in die Renderfunktion

Einfach ausgedrückt: In Vue verwenden wir die HTML-Vorlagensyntax, um Seiten zu erstellen. Mit der Renderfunktion können wir die JS-Sprache verwenden, um das DOM zu erstellen. Da es sich bei Vue um ein virtuelles DOM handelt, muss es beim Abrufen der Vorlage in eine VNode-Funktion übersetzt werden. Durch die Verwendung der Renderfunktion zum Erstellen des DOM entfällt bei Vue der Übersetzungsprozess.

Wenn Sie die Render-Funktion zum Beschreiben eines virtuellen DOM verwenden, stellt Vue eine Funktion bereit, bei der es sich um das zum Erstellen eines virtuellen DOM erforderliche Werkzeug handelt. Auf der offiziellen Website heißt es createElement. Es gibt auch eine vereinbarte Abkürzung namens h.

1.1 Virtuelles DOM

Vue verfolgt, wie Sie das reale DOM ändern möchten, indem Sie ein virtuelles DOM erstellen. Bitte schauen Sie sich diese Codezeile genau an:

return createElement('h1', this.blogTitle)

Was genau wird createElement zurückgeben? Eigentlich kein tatsächliches DOM-Element. Der genauere Name lautet möglicherweise „createNodeDescription“, da die darin enthaltenen Informationen Vue mitteilen, welche Art von Knoten auf der Seite gerendert werden muss, einschließlich der Beschreibungsinformationen seiner untergeordneten Knoten. Wir beschreiben einen solchen Knoten als „virtuellen Knoten“ und kürzen ihn oft als „VNode“ ab. „Virtuelles DOM“ nennen wir den gesamten VNode-Baum, der aus dem Vue-Komponentenbaum erstellt wurde. 1.2 Von createElement akzeptierte Parameter wie v-bind :class und v -bind: So wie Stile in der Vorlagensyntax speziell behandelt werden, verfügen sie auch über entsprechende Felder der obersten Ebene in VNode-Datenobjekten. Mit diesem Objekt können Sie auch normale HTML-Attribute sowie DOM-Attribute wie innerHTML binden (dadurch wird die V-HTML-Direktive überschrieben)

// @returns {VNode}
createElement(
  // {String | Object | Function}
  // 一个 HTML 标签名、组件选项对象，或者
  // resolve 了上述任何一种的一个 async 函数。必填项。
  'div',

  // {Object}
  // 一个与模板中属性对应的数据对象。可选。
  {
    // (详情见1.3)
  },

  // {String | Array}
  // 子级虚拟节点 (VNodes)，由 `createElement()` 构建而成，
  // 也可以使用字符串来生成“文本虚拟节点”。可选。
  [
    '先写一些文字',
    createElement('h1', '一则头条'),
    createElement(MyComponent, {
      props: {
        someProp: 'foobar'
      }
    })
  ]
)

1.5 EinschränkungenAlle VNodes im Komponentenbaum müssen eindeutig sein.

Das bedeutet, dass die folgende Rendering-Funktion illegal ist:

render:(h) => {
  return h('div',{
  　 // 给div绑定class属性
    class: {
      child: true,
      more: false
    },
　　// 给div绑定样式
　　style:{
  　　width:'200px',
      height:'200px',
　　},　
　　// 给div绑定点击事件　　
    on: {
      click: () => {
        console.log('点击事件')
      }
    },
  })
}

Wenn Sie ein Element/eine Komponente wirklich viele Male wiederholen müssen, können Sie eine Factory-Funktion verwenden, um dies zu erreichen.

Zum Beispiel rendert die folgende Renderfunktion 20 identische Absätze auf völlig legale Weise:

{
  // 与 `v-bind:class` 的 API 相同，
  // 接受一个字符串、对象或字符串和对象组成的数组
  'class': {
    foo: true,
    bar: false
  },
  // 与 `v-bind:style` 的 API 相同，
  // 接受一个字符串、对象，或对象组成的数组
  style: {
    color: 'red',
    fontSize: '14px'
  },
  // 普通的 HTML attribute
  attrs: {
    id: 'foo'
  },
  // 组件 prop
  props: {
    myProp: 'bar'
  },
  // DOM 属性
  domProps: {
    innerHTML: 'baz'
  },
  // 事件监听器在 `on` 属性内，
  // 但不再支持如 `v-on:keyup.enter` 这样的修饰器。
  // 需要在处理函数中手动检查 keyCode。
  on: {
    click: this.clickHandler
  },
  // 仅用于组件，用于监听原生事件，而不是组件内部使用
  // `vm.$emit` 触发的事件。
  nativeOn: {
    click: this.nativeClickHandler
  },
  // 自定义指令。注意，你无法对 `binding` 中的 `oldValue`
  // 赋值，因为 Vue 已经自动为你进行了同步。
  directives: [
    {
      name: 'my-custom-directive',
      value: '2',
      expression: '1 + 1',
      arg: 'foo',
      modifiers: {
        bar: true
      }
    }
  ],
  // 作用域插槽的格式为
  // { name: props => VNode | Array<VNode> }
  scopedSlots: {
    default: props => createElement(&#39;span&#39;, props.text)
  },
  // 如果组件是其它组件的子组件，需为插槽指定名称
  slot: &#39;name-of-slot&#39;,
  // 其它特殊顶层属性
  key: &#39;myKey&#39;,
  ref: &#39;myRef&#39;,
  // 如果你在渲染函数中给多个元素都应用了相同的 ref 名，
  // 那么 `$refs.myRef` 会变成一个数组。
  refInFor: true
}

2. Anwendung der Renderfunktion

2.1 Rendern eines einfachen Elements

render: function (createElement) {
  var myParagraphVNode = createElement('p', 'hi')
  return createElement('div', [
    // 错误 - 重复的 VNode
    myParagraphVNode, myParagraphVNode
  ])
}

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

2.2 Untergeordnete Tags hinzufügen

// app.vue （根组件）

<template>
  <div id="app">
    <myRender></myRender>
  </div>
</template>

<script>
import myRender from &#39;./components/myRender&#39;
export default {
  components:{
    myRender
  }
}
</script>

2.3 Verwenden Sie JavaScript anstelle von Vorlagenfunktionen

Solange Vorgänge problemlos in nativem JavaScript ausgeführt werden können, bieten die Rendering-Funktionen von Vue keine proprietäre Ersetzungsmethode.

1. In v-if- und v-for-Vorlagensyntax:

// myRender.vue

<script>
export default {
  render:(h) => {
    return h(&#39;div&#39;,{
      class: {
        child: true,
        more: false
      },
      attrs: {
        id: &#39;foo&#39;,
        name: &#39;child&#39;
      },
  　　style: {
  　　　 width:&#39;100%&#39;,
        height:&#39;200px&#39;,
  　　},
      domProps: {
        innerHTML: &#39;我是render渲染的子组件&#39;
      }
    })
  }
}
</script>

<style scoped>
.child {
  background: pink
  font-size 24px
  letter-spacing 2px
}
.more {
  background: red
}
</style>

render-Funktionsimplementierung:

<script>
export default {
  render:(h) => {
    return h(&#39;div&#39;,
      {
        class: &#39;wrapper&#39;,
        attrs: {
          id: &#39;wrapper&#39;,
        },
    　　style: {
    　　　 width:&#39;100%&#39;,
          height:&#39;250px&#39;
    　　},
      },[
        h(&#39;h2&#39;,&#39;标题&#39;),
        h(&#39;div&#39;,{
          class: &#39;content&#39;,
          attrs: {
            id: &#39;content&#39;,
          },
          style:{
            width:&#39;800px&#39;,
            height:&#39;100px&#39;
          },
          domProps:{
            innerHTML:&#39;我是内容&#39;
          }
        })
      ]
    )
  }
}
</script>

<style scoped>
.wrapper 
  background: pink
  letter-spacing 2px
  .content 
    margin 0 auto 
    background: red
    color #ffffff
    font-size 24px

</style>

2.4 Statischer Slot

this .$ Nutzung Anzahl der Slots1. Übergeordnete Komponente

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

<script>
export default {
  data(){
    return{
      items:[1,2,3]
    }
  }
}
</script>

2.5 Scope-Slots

this.$scopedSlots-Nutzung

1 rrree 2. Sub -component

<script>
export default {
  render: function (createElement) {
    if (this.items.length) {
      return createElement(&#39;ul&#39;, this.items.map(function (item) {
        return createElement(&#39;li&#39;, item.name)
      }))
    } else {
      return createElement(&#39;p&#39;, &#39;No items found.&#39;)
    }
  },
  data(){
    return{
      items:[1,2,3]
    }
  }
}
</script>

[Verwandte Empfehlungen:

vuejs Video-Tutorial

,

Web-Front-End-Entwicklung

]

Das obige ist der detaillierte Inhalt vonWelchen Befehl verwendet die Vue-Rendering-Funktion?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!