Maison > Article > interface Web > Quelle commande la fonction de rendu vue utilise-t-elle ?
Quelle commande la fonction de rendu vue utilise-t-elle ?
- 青灯夜游original
- 2022-12-20 20:24:281922parcourir
La fonction de rendu vue utilise la commande "render". Dans Vue, la syntaxe HTML du modèle est utilisée pour créer des pages et la fonction de rendu peut être utilisée pour créer du DOM en langage js. Parce que vue est un DOM virtuel, il doit être traduit en fonction VNode lors de l'obtention du modèle. En utilisant la fonction render() pour construire le DOM, vue élimine le besoin de traduction.
L'environnement d'exploitation de ce tutoriel : système windows7, version vue3, ordinateur DELL G3.
Dans la plupart des cas, Vue recommande d'utiliser la syntaxe des modèles pour créer des applications. Cependant, dans certains cas d’utilisation, nous devons réellement utiliser toutes les capacités de programmation de JavaScript. C'est à ce moment-là que la fonction de rendu --render s'avère utile.
1. Introduction à la fonction de rendu
En termes simples, en vue, nous utilisons la syntaxe HTML du modèle pour créer des pages. En utilisant la fonction de rendu, nous pouvons utiliser le langage js pour créer le DOM. Parce que vue est un DOM virtuel, il doit être traduit en fonction VNode lors de l'obtention du modèle. En utilisant la fonction render pour construire le DOM, vue élimine le processus de traduction.
Lorsque vous utilisez la fonction de rendu pour décrire un DOM virtuel, vue fournit une fonction, qui est l'outil nécessaire pour créer un DOM virtuel. Il est nommé createElement sur le site officiel. Il existe également une abréviation convenue appelée h.
1.1 DOM virtuel
Vue suit la façon dont vous souhaitez modifier le DOM réel en créant un DOM virtuel. Veuillez regarder attentivement cette ligne de code :
return createElement('h1', this.blogTitle)
Que retournera exactement createElement ? Pas réellement un véritable élément DOM. Son nom plus précis peut être createNodeDescription, car les informations qu'il contient indiqueront à Vue quel type de nœud doit être affiché sur la page, y compris les informations de description de ses nœuds enfants. Nous décrivons un tel nœud comme un « nœud virtuel » et l'abrégons souvent en « VNode ». "Virtual DOM" est ce que nous appelons l'ensemble de l'arborescence VNode construite à partir de l'arborescence des composants Vue. 1.2 Paramètres acceptés par createElement v-bind :classe et v -bind : tout comme les styles sont traités spécialement dans la syntaxe du modèle, ils ont également des champs de niveau supérieur correspondant dans les objets de données VNode. Cet objet vous permet également de lier des attributs HTML normaux, ainsi que des attributs DOM tels que innerHTML (cela remplacera la directive v-html)
// @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 ContraintesTous les VNodes de l'arborescence des composants doivent être uniques.
Cela signifie que la fonction de rendu suivante est illégale : render:(h) => {
return h('div',{
// 给div绑定class属性
class: {
child: true,
more: false
},
// 给div绑定样式
style:{
width:'200px',
height:'200px',
},
// 给div绑定点击事件
on: {
click: () => {
console.log('点击事件')
}
},
})
}Si vous avez vraiment besoin de répéter un élément/composant plusieurs fois, vous pouvez utiliser une fonction d'usine pour y parvenir.
Par exemple, la fonction de rendu suivante restitue 20 paragraphes identiques de manière tout à fait légale : {
// 与 `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
}2 Application de la fonction de rendu
2.1 Rendu d'un élément simple
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 Ajouter des balises enfants
// app.vue （根组件）
<template>
<div id="app">
<myRender></myRender>
</div>
</template>
<script>
import myRender from './components/myRender'
export default {
components:{
myRender
}
}
</script>
2.3 Utiliser JavaScript au lieu des fonctions de modèle
Tant que les opérations peuvent être facilement effectuées en JavaScript natif, les fonctions de rendu de Vue ne fourniront pas de méthode de remplacement propriétaire.
1. Dans la syntaxe des modèles v-if et v-for :// 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>
implémentation de la fonction de rendu : <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>2.4 v-modelthis.$ Utilisation de slots
1. Composant parent<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. Composant enfant<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>2.5 Slots de portée
utilisation de slots scopedSlots
1.<script>
export default {
render:function(createElement) {
var self = this
return createElement('div',[
createElement('div',{class: 'showContent'},self.inputValue),
createElement('input',{
class: 'content',
domProps:{
value:self.inputValue
},
on:{
input:function(event){
self.inputValue = event.target.value
}
}
})
]
)
},
data(){
return{
inputValue:''
}
},
watch:{
inputValue:function(){
console.log(this.inputValue)
}
},
}
</script>
<style scoped>
.showContent
font-size 32px
letter-spacing 2px
.content
margin 10px auto
color blue
font-size 24px
</style> 
2. -component<template>
<div id="app">
<myRender>
<template v-slot:header>
<div >
头部
</div>
</template>
<template #footer>
<div >
脚部
</div>
</template>
</myRender>
</div>
</template>
<script>
import myRender from './components/myRender'
export default {
components:{
myRender
}
}
</script>[Recommandations associées : tutoriel vidéo vuejs
,développement web front-end]
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!
Articles Liés
Voir plus- Vue actualise-t-elle le dom en temps réel ?
- Le mix-in Vue peut-il utiliser le cycle de vie ?
- Vue3.0 prend-il en charge le rendu côté serveur ?
- Parlons de la façon dont $set est implémenté dans Vue ?
- Cet article parle des trois étapes du cycle de vie des composants Vue (création, exécution et destruction)
- [Organisation et partage] 7 bibliothèques JS pratiques disponibles sur les projets vue