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)
Nach dem Login kopieren
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'
}
})
]
)Nach dem Login kopieren
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('点击事件')
}
},
})
}Nach dem Login kopieren
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('span', props.text)
},
// 如果组件是其它组件的子组件，需为插槽指定名称
slot: 'name-of-slot',
// 其它特殊顶层属性
key: 'myKey',
ref: 'myRef',
// 如果你在渲染函数中给多个元素都应用了相同的 ref 名，
// 那么 `$refs.myRef` 会变成一个数组。
refInFor: true
}Nach dem Login kopieren
2.1 Rendern eines einfachen Elements
render: function (createElement) {
var myParagraphVNode = createElement('p', 'hi')
return createElement('div', [
// 错误 - 重复的 VNode
myParagraphVNode, myParagraphVNode
])
}Nach dem Login kopieren
render: function (createElement) {
return createElement('div',
Array.apply(null, { length: 20 }).map(function () {
return createElement('p', 'hi')
})
)
}Nach dem Login kopieren
2.2 Untergeordnete Tags hinzufügen
// app.vue （根组件）
<template>
<div id="app">
<myRender></myRender>
</div>
</template>
<script>
import myRender from './components/myRender'
export default {
components:{
myRender
}
}
</script>Nach dem Login kopieren
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('div',{
class: {
child: true,
more: false
},
attrs: {
id: 'foo',
name: 'child'
},
style: {
width:'100%',
height:'200px',
},
domProps: {
innerHTML: '我是render渲染的子组件'
}
})
}
}
</script>
<style scoped>
.child {
background: pink
font-size 24px
letter-spacing 2px
}
.more {
background: red
}
</style>Nach dem Login kopieren
render-Funktionsimplementierung:
<script>
export default {
render:(h) => {
return h('div',
{
class: 'wrapper',
attrs: {
id: 'wrapper',
},
style: {
width:'100%',
height:'250px'
},
},[
h('h2','标题'),
h('div',{
class: 'content',
attrs: {
id: 'content',
},
style:{
width:'800px',
height:'100px'
},
domProps:{
innerHTML:'我是内容'
}
})
]
)
}
}
</script>
<style scoped>
.wrapper
background: pink
letter-spacing 2px
.content
margin 0 auto
background: red
color #ffffff
font-size 24px
</style>Nach dem Login kopieren
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>Nach dem Login kopieren
2.5 Scope-Slots
this.$scopedSlots-Nutzung
1 rrree 2. Sub -component
<script>
export default {
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.')
}
},
data(){
return{
items:[1,2,3]
}
}
}
</script>Nach dem Login kopieren
[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!
