【Vue 从入门到实战 进阶式掌握完整知识体系】027
【Vue 从入门到实战 进阶式掌握完整知识体系】027
4、更加底层的render函数通过render函数实现显示不同的h标签代码语言：javascript代码运行次数：0运行复制<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
【Vue 从入门到实战 进阶式掌握完整知识体系】027
4、更加底层的render函数
通过render函数实现显示不同的h标签
代码语言：javascript代码运行次数：0运行复制<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>hello vue</title>
<!-- 引入Vue库 -->
<script src="@next"></script>
</head>
<body>
<div id="root"></div>
</body>
<script>
ct app = ({
template: `
<my-title :level="">
hello
</my-title>
`
});
// 不同的参数呈现不同的标签
appponent("my-title", {
props: ['level'],
// 使用 render
render(){
ct { h } = Vue;
// 匿名插槽 this.$slots.default()
return h('h' + this.level, {}, this.$slots.default());
// return h('h' + this.level, {}, 'hello world');
}
// 使用 template 写起来很复杂
// template: `
// <h1 v-if="level === 1"><slot /></h1>
// <h2 v-if="level === 2"><slot /></h2>
// <h v-if="level === "><slot /></h>
// <h4 v-if="level === 4"><slot /></h4>
// <h5 v-if="level === 5"><slot /></h5>
// `
});
ct vm = ('#root');
</script>
</html>运行结果
render函数和template对比
代码语言：javascript代码运行次数：0运行复制<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>hello vue</title>
<!-- 引入Vue库 -->
<script src="@next"></script>
</head>
<body>
<div id="root"></div>
</body>
<script>
ct app = ({
template: `
<my-title :level="">
hello
</my-title>
`
});
// 不同的参数呈现不同的标签
appponent("my-title", {
props: ['level'],
// 真实 DOM
// <div>hello</div>
// render函数 -> 虚拟 DOM （是对真实 DOM 的映射）
// {
// tagame: 'div',
// text: 'hello',
// attributes: {}
// }
// 使用 render 的好处
// 1、使得 vue 的性能更快；
// 2、使得 vue 跨平台能力更强；
// 使用 render
render(){
ct { h } = Vue;
// 匿名插槽 this.$slots.default()
// 虚拟 DOM
// tagame：'h' + this.level
// attributes：{}
// text：this.$slots.default()
// vue 会将虚拟 DOM 转换成真实的 DOM ，就显示在了页面上
return h('h' + this.level, {}, this.$slots.default());
// return h('h' + this.level, {}, 'hello world');
}
// 使用 template 写起来很复杂
// template: `
// <h1 v-if="level === 1"><slot /></h1>
// <h2 v-if="level === 2"><slot /></h2>
// <h v-if="level === "><slot /></h>
// <h4 v-if="level === 4"><slot /></h4>
// <h5 v-if="level === 5"><slot /></h5>
// `
});
ct vm = ('#root');
</script>
</html>执行逻辑
template模板 ——> render函数 ——> h 系列标签——> 虚拟DOM（JS对象）——> 真实DOM ——> 展示到页面；
无限嵌套render
代码语言：javascript代码运行次数：0运行复制<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>hello vue</title>
<!-- 引入Vue库 -->
<script src="@next"></script>
</head>
<body>
<div id="root"></div>
</body>
<script>
ct app = ({
template: `
<my-title :level="">
hello
</my-title>
`
});
// 不同的参数呈现不同的标签
appponent("my-title", {
props: ['level'],
render(){
ct { h } = Vue;
return h('h' + this.level, {}, [
this.$slots.default(),
h("div", {}, [
"我是div内容-嵌套1",
h("h1", {style:"color:red;"}, "我是h1内容-嵌套2")
])
]);
}
});
ct vm = ('#root');
</script>
</html>运行结果
#感谢您对电脑配置推荐网 - 最新i3 i5 i7组装电脑配置单推荐报价格的认可，转载请说明来源于"电脑配置推荐网 - 最新i3 i5 i7组装电脑配置单推荐报价格
上传时间： 2025-07-23 17:43:29
推荐阅读
| 留言与评论（共有 16 条评论） |
| 本站网友 弈品围棋 | 12分钟前 发表 |
| 使得 vue 的性能更快； // 2 | |
| 本站网友 9块9包邮官网 | 8分钟前 发表 |
| ` <my-title | |
| 本站网友 阳光上东 | 18分钟前 发表 |
| ['level'] | |
| 本站网友 惠安房产 | 26分钟前 发表 |
| [ "我是div内容-嵌套1" | |
| 本站网友 调色 | 19分钟前 发表 |
| [ "我是div内容-嵌套1" | |
| 本站网友 宝宝咳嗽食疗 | 30分钟前 发表 |
| ` <my-title | |
| 本站网友 棒子老虎鸡 | 10分钟前 发表 |
| initial-scale=1.0"> <title>hello vue</title> <!-- 引入Vue库 --> <script src="@next"></script> </head> <body> <div id="root"></div> </body> <script> ct app = ({ template | |
| 本站网友 芜湖房产信息 | 2分钟前 发表 |
| {} | |
| 本站网友 孕妇防辐射服排名 | 16分钟前 发表 |
| {} | |
| 本站网友 79微冲 | 15分钟前 发表 |
| ['level'] | |
| 本站网友 巴马县房价 | 23分钟前 发表 |
| { props | |
| 本站网友 jj斗地主新手卡 | 1分钟前 发表 |
| level=""> hello </my-title> ` }); // 不同的参数呈现不同的标签 appponent("my-title" | |
| 本站网友 致景投资 | 6分钟前 发表 |
| {} | |
| 本站网友 李晓明 | 30分钟前 发表 |
| this.$slots.default()); // return h('h' + this.level | |
| 本站网友 大腿吸脂手术 | 4分钟前 发表 |
| 'div' | |