vue render 函数详解 (配参数详解)

2024-03-31 20:28

本文主要是介绍vue render 函数详解 (配参数详解),希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

vue render 函数详解 (配参数详解)



在 Vue 3 中,`render` 函数被用来代替 Vue 2 中的模板语法。 它接收一个 h 函数(或者是 `createElement` 函数的别名),并且返回一个虚拟 DOM。

render 函数的语法结构如下:

render(h) {return h('div', { class: 'container' }, 'Hello, World!')
}

在上面的示例中,我们使用 h 函数创建了一个 div 元素,并设置了 class 属性,并且在 div 元素中添加了文本内容 “Hello, World!”。

h 函数的使用方式如下:

h(tag, data, children)
  • tag:表示要创建的元素的标签名,可以是字符串或者是组件选项对象。
  • data:表示要添加到元素的属性、事件等。
  • children:表示要作为子节点添加到元素中的内容。

data 可以包含普通 HTML 属性、DOM 属性、事件、样式等。例如:

render(h) {return h('div', { class: 'container',style: { color: 'red' },on: {click: () => {console.log('Clicked!')}}}, 'Hello, World!')
}

在上面的示例中,我们设置了 class 属性为 'container',样式为红色,以及点击事件监听器。当用户点击该元素时,控制台会打印 “Clicked!”。

除了使用原生的 HTML 标签,我们还可以使用组件选项对象来创建组件。例如:

const MyComponent = {render(h) {return h('div', 'Hello, Component!')}
}render(h) {return h(MyComponent)
}

在上面的示例中,我们定义了一个名为 MyComponent 的组件,然后在 render 函数中使用 h 函数创建了该组件。这将会渲染出一个 div 元素,内容为 “Hello, Component!”。

需要注意的是,在 Vue 3 中,所有组件都需要使用 defineComponent 函数包裹起来,以便能够正确使用组件特定的 API。

import { defineComponent } from 'vue'const MyComponent = defineComponent({render(h) {return h('div', 'Hello, Component!')}
})
以下是h函数的第二个参数属性的详解(class、style、attrs、props、on、nativeOn、directives、slot、key、ref、scopedSlots):
  1. class - 设置元素的CSS类名,可以使用字符串或对象。对象的键是类名,值是一个布尔值,用于动态地添加或移除类名。
h('div', {class: 'red'
})
// 创建<div class="red"></div>h('div', {class: {red: true,bold: false}
})
// 创建<div class="red"></div>
  1. style - 设置元素的内联样式,可以使用字符串、对象或数组。
h('div', {style: 'color: red;'
})
// 创建<div style="color: red;"></div>h('div', {style: {color: 'red',fontSize: '14px'}
})
// 创建<div style="color: red; font-size: 14px;"></div>h('div', {style: [{ color: 'red' },{ fontSize: '14px' }]
})
// 创建<div style="color: red; font-size: 14px;"></div>
  1. attrs - 设置元素的属性,可以使用对象或数组。
h('input', {attrs: {type: 'text',placeholder: 'Enter text'}
})
// 创建<input type="text" placeholder="Enter text">h('div', {attrs: [{ id: 'my-id' },{ 'data-custom-attr': 'value' }]
})
// 创建<div id="my-id" data-custom-attr="value"></div>
  1. props - 设置元素的DOM属性,与attrs类似,但是props适用于组件的props。
h('my-component', {props: {message: 'Hello world'}
})
// 创建<my-component message="Hello world"></my-component>
  1. on - 绑定事件处理函数,可以使用对象或数组。
h('button', {on: {click: handleClick}
})
// 创建<button @click="handleClick"></button>h('div', {on: [{ click: handleClick },{ mouseover: handleMouseOver }]
})
// 创建<div @click="handleClick" @mouseover="handleMouseOver"></div>
  1. nativeOn - 属性用于指定元素的原生事件监听器,即直接绑定到DOM元素上的事件,而不是绑定到组件上的自定义事件。
import Vue from 'vue';Vue.component('my-component', {render(h) {return h('button', {nativeOn: {click: this.handleClick}}, 'Click me');},methods: {handleClick() {console.log('Button clicked');}}
});new Vue({el: '#app'
});
  1. domProps - 设置元素的DOM属性,比如innerHTML、textContent等。
h('span', {domProps: {textContent: 'Hello'}
})
// 创建<span>Hello</span>h('div', {domProps: {innerHTML: '<p>Paragraph</p>'}
})
// 创建<div><p>Paragraph</p></div>
  1. key - 用于VNode的唯一标识,用于在列表渲染中进行优化。
h('div', {key: 'my-key',class: 'red'
})
// 创建<div key="my-key" class="red"></div>
  1. ref - 用于给元素或组件设置一个引用标识,以便通过$refs属性访问。
h('input', {ref: 'myInput',attrs: {type: 'text'}
})
// 创建<input ref="myInput" type="text">h('my-component', {ref: 'myComponent'
})
// 创建<my-component ref="myComponent"></my-component>
  1. slot - 用于分发内容到组件的插槽。
h('my-component', [h('div', {slot: 'header'}, 'Header content'),h('div', {slot: 'footer'}, 'Footer content')
])
// 创建<my-component><div slot="header">Header content</div><div slot="footer">Footer content</div></my-component>
  1. scopedSlots - 属性是一个包含插槽信息的对象。它的每个键是插槽的名称,对应的值是一个函数或者一个具有render函数的对象。
// 示例组件
const MyComponent = {render(h) {return h('div', [h('h1', 'Hello World'),h('slot', {// 插槽名称为defaultscopedSlots: {default: props => h('p', `Scoped Slot Content: ${props.text}`)}})])}
}// 父组件
new Vue({render(h) {return h('my-component', {// 通过scopedSlots属性传递插槽内容scopedSlots: {default: props => h('div', `Parent Slot Content: ${props.text}`)}})},components: {MyComponent}
}).$mount('#app')// 最终渲染的结果是:
<div id="app"><div><h1>Hello World</h1><div>Parent Slot Content: Child Slot Text</div></div>
</div>

12 . directives-属性是一个对象,用来设置指令。指令是一种特殊的属性,通过设置指令可以在元素上执行一些自定义的逻辑或者操作。

import Vue from 'vue';Vue.directive('my-directive', {// 指令的生命周期钩子函数bind: function (el, binding, vnode) {// 在绑定时被调用,可以在这里进行初始化设置// el是指令绑定的元素// binding是一个对象,包含了指令的相关信息,如指令参数、修饰符、绑定值等// vnode是指令所在的虚拟DOM节点el.style.color = binding.value;},update: function (el, binding, vnode) {// 在节点更新时被调用,可以在这里对节点进行更新el.style.color = binding.value;}
});var vm = new Vue({el: '#app',render: function (h) {return h('div', {directives: [{name: 'my-directive',value: 'red'}],style: {width: '100px',height: '100px',background: 'yellow'}}, 'Hello, Vue.js!');}
});

ok!搞定!

这篇关于vue render 函数详解 (配参数详解)的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/865256

相关文章

Vue3 的 shallowRef 和 shallowReactive:优化性能

大家对 Vue3 的 ref 和 reactive 都很熟悉,那么对 shallowRef 和 shallowReactive 是否了解呢? 在编程和数据结构中,“shallow”(浅层)通常指对数据结构的最外层进行操作,而不递归地处理其内部或嵌套的数据。这种处理方式关注的是数据结构的第一层属性或元素,而忽略更深层次的嵌套内容。 1. 浅层与深层的对比 1.1 浅层(Shallow) 定义

Spring Security基于数据库验证流程详解

Spring Security 校验流程图 相关解释说明(认真看哦) AbstractAuthenticationProcessingFilter 抽象类 /*** 调用 #requiresAuthentication(HttpServletRequest, HttpServletResponse) 决定是否需要进行验证操作。* 如果需要验证,则会调用 #attemptAuthentica

这15个Vue指令,让你的项目开发爽到爆

1. V-Hotkey 仓库地址: github.com/Dafrok/v-ho… Demo: 戳这里 https://dafrok.github.io/v-hotkey 安装: npm install --save v-hotkey 这个指令可以给组件绑定一个或多个快捷键。你想要通过按下 Escape 键后隐藏某个组件,按住 Control 和回车键再显示它吗?小菜一碟: <template

【 html+css 绚丽Loading 】000046 三才归元阵

前言:哈喽,大家好,今天给大家分享html+css 绚丽Loading!并提供具体代码帮助大家深入理解,彻底掌握!创作不易,如果能帮助到大家或者给大家一些灵感和启发,欢迎收藏+关注哦 💕 目录 📚一、效果📚二、信息💡1.简介:💡2.外观描述:💡3.使用方式:💡4.战斗方式:💡5.提升:💡6.传说: 📚三、源代码,上代码,可以直接复制使用🎥效果🗂️目录✍️

【前端学习】AntV G6-08 深入图形与图形分组、自定义节点、节点动画(下)

【课程链接】 AntV G6:深入图形与图形分组、自定义节点、节点动画(下)_哔哩哔哩_bilibili 本章十吾老师讲解了一个复杂的自定义节点中,应该怎样去计算和绘制图形,如何给一个图形制作不间断的动画,以及在鼠标事件之后产生动画。(有点难,需要好好理解) <!DOCTYPE html><html><head><meta charset="UTF-8"><title>06

Andrej Karpathy最新采访:认知核心模型10亿参数就够了,AI会打破教育不公的僵局

夕小瑶科技说 原创  作者 | 海野 AI圈子的红人,AI大神Andrej Karpathy,曾是OpenAI联合创始人之一,特斯拉AI总监。上一次的动态是官宣创办一家名为 Eureka Labs 的人工智能+教育公司 ,宣布将长期致力于AI原生教育。 近日,Andrej Karpathy接受了No Priors(投资博客)的采访,与硅谷知名投资人 Sara Guo 和 Elad G

hdu1171(母函数或多重背包)

题意:把物品分成两份,使得价值最接近 可以用背包,或者是母函数来解,母函数(1 + x^v+x^2v+.....+x^num*v)(1 + x^v+x^2v+.....+x^num*v)(1 + x^v+x^2v+.....+x^num*v) 其中指数为价值,每一项的数目为(该物品数+1)个 代码如下: #include<iostream>#include<algorithm>

OpenHarmony鸿蒙开发( Beta5.0)无感配网详解

1、简介 无感配网是指在设备联网过程中无需输入热点相关账号信息,即可快速实现设备配网,是一种兼顾高效性、可靠性和安全性的配网方式。 2、配网原理 2.1 通信原理 手机和智能设备之间的信息传递,利用特有的NAN协议实现。利用手机和智能设备之间的WiFi 感知订阅、发布能力,实现了数字管家应用和设备之间的发现。在完成设备间的认证和响应后,即可发送相关配网数据。同时还支持与常规Sof

C++11第三弹:lambda表达式 | 新的类功能 | 模板的可变参数

🌈个人主页: 南桥几晴秋 🌈C++专栏: 南桥谈C++ 🌈C语言专栏: C语言学习系列 🌈Linux学习专栏: 南桥谈Linux 🌈数据结构学习专栏: 数据结构杂谈 🌈数据库学习专栏: 南桥谈MySQL 🌈Qt学习专栏: 南桥谈Qt 🌈菜鸡代码练习: 练习随想记录 🌈git学习: 南桥谈Git 🌈🌈🌈🌈🌈🌈🌈🌈🌈🌈🌈🌈🌈�

如何在页面调用utility bar并传递参数至lwc组件

1.在app的utility item中添加lwc组件: 2.调用utility bar api的方式有两种: 方法一,通过lwc调用: import {LightningElement,api ,wire } from 'lwc';import { publish, MessageContext } from 'lightning/messageService';import Ca