Vue-Render渲染函数

是什么？
如何使用？
- 1. createElement的第一个参数
- - 1.1 HTML 标签名（可以动态创建标签）
  - 1.2 组件
- 2. createElement的第二个参数
- - 2.1 attrs
  - 2.2 on（事件监听器在 `on` 内）
- 3. createElement的第三个参数
- - 3.1 文本虚拟节点
  - 3.2 子级虚拟节点 (VNodes)

是什么？

render 函数 跟 模板（template） 都是用来创建 html 模板的，Vue 推荐在绝大多数情况下使用模板（template）来创建你的 HTML。然而在一些场景中，你真的需要 JavaScript 的完全编程的能力。这时你可以用渲染函数，它比模板更接近编译器。

绝大多数情况下使用模板（template）来创建你的 HTML是这个样子的。

<!--HelloWorld.vue-->
<template><div id="app">Hello World!!!</div>
</template>

render渲染函数是这个样子的。（修改HelloWorld.vue为render函数创建模板的形式）

<!--HelloWorld.vue-->
<script>
export default {//不用vue模板，使用render函数进行dom渲染，h->createElement//vue模板template最终也是要编译成render函数render(createElement){return createElement(//第一个参数：写一个 HTML 标签名、组件选项对象//或者resolve 了上述任何一种的一个 async 函数。必填项。'h1',//第二个参数：一个与模板中 attribute 对应的数据对象。//可选（具体参数见：https://cn.vuejs.org/v2/guide/render-function.html#%E6%B7%B1%E5%85%A5%E6%95%B0%E6%8D%AE%E5%AF%B9%E8%B1%A1）。{},//第三个参数：子级虚拟节点 (VNodes)，由 `createElement()` 构建而成，//也可以使用字符串来生成“文本虚拟节点”。可选。"Hello World!!!")}};
</script>

效果都是一样的。vue模板template最终也是要编译成render函数

如何使用？

1. createElement的第一个参数

1.1 HTML 标签名（可以动态创建标签）

<!--HelloWorld.vue-->
<script>
export default {//传参props: {tag: {type: String,required: true,},},//不用vue模板，使用render函数进行dom渲染，h->createElement//vue模板template最终也是要编译成render函数render(createElement) {return createElement(this.tag, {}, "Hello World!!!");},
};
</script>

<!--父组件-->
<HelloWorld tag="h2"/>

这样就通过父子组件的传参实现了动态的创建标签。

1.2 组件

我定义了一个MyButton的按钮组件（样式模仿了Element-ui），也是通过render函数渲染出来的组件。

<!--MyButton.vue-->
<script>
export default {//传参props: {type: {type: String,default: "normal",},text: {type: String,default: "",},},//渲染函数render(createElement) {return createElement("button", {//v-bind:classclass: {btn: true,"btn-success": this.type === "success","btn-error": this.type === "error","btn-warning": this.type === "warning",normal: !this.type,},//dom属性domProps: {innerText: this.text || "默认按钮",},});},
};
</script><style scoped>
.btn {border: rgb(216, 224, 235) 1px solid;width: 100px;height: 40px;border-radius: 10px;cursor: pointer;font-weight: 500;
}.normal {background: #fff;border: 1px solid #dcdfe6;color: rgb(96, 98, 102);
}
.btn:hover {color: #409eff;border-color: #c6e2ff;background-color: #ecf5ff;
}.btn-success {color: #fff;background-color: #67c23a;border-color: #67c23a;
}.btn-success:hover {background: #85ce61;border-color: #85ce61;color: #fff;
}.btn-error {color: #fff;background-color: #f56c6c;border-color: #f56c6c;
}.btn-error:hover {background: #f78989;border-color: #f78989;color: #fff;
}.btn-warning {color: #fff;background-color: #e6a23c;border-color: #e6a23c;
}.btn-warning:hover {background: #ebb563;border-color: #ebb563;color: #fff;
}
</style>

<!--HelloWorld.vue-->
<script>
import MyButton from "./MyButton.vue";
export default {//第一个参数为组件render(createElement) {return createElement(MyButton, {//MyButton组件需要type和text的参数props: {//按钮类型type: "error",//按钮文字text: "",},});},
};
</script>

这样就出来了一个error类型的按钮。

2. createElement的第二个参数

2.1 attrs

<!--HelloWorld.vue-->
<script>
export default {//不用vue模板，使用render函数进行dom渲染，h->createElement//vue模板template最终也是要编译成render函数render(createElement) {return createElement("div",{attrs: {class: "test",},},"Hello World!!!");},
};
</script><!--使用渲染函数定义了class之后，直接在style标签中定义样式就可以使用了-->
<style scoped>
.test {color: red;font-size: 20px;
}
</style>

这样就定义了attrs中的class属性。

2.2 on（事件监听器在 `on` 内）

<!--HelloWorld.vue-->
<script>
export default {//不用vue模板，使用render函数进行dom渲染，h->createElement//vue模板template最终也是要编译成render函数render(createElement) {return createElement("div",{class: "test",on: {click: function () {console.log("执行点击事件");},},},"Hello World!!!");},
};
</script><!--使用渲染函数定义了class之后，直接在style标签中定义样式就可以使用了-->
<style scoped>
.test {color: red;font-size: 20px;
}
</style>

点击字体时触发点击事件。

3. createElement的第三个参数

3.1 文本虚拟节点

同第一节的内容，写了一个 “Hello World!!!” 的内容

3.2 子级虚拟节点 (VNodes)

<!--HelloWorld.vue-->
<script>
export default {data: function () {return {tag: "ul",numArr: [1, 2, 3, 4],};},//不用vue模板，使用render函数进行dom渲染，h->createElement//vue模板template最终也是要编译成render函数render(createElement) {return createElement(this.tag,{},this.numArr.map((item) => {return createElement("li", {}, `${item}`);}));},
};
</script>

效果就是一个”ul“节点下包含着4个”li“节点。

以上就是render渲染函数最基本的内容。

我是前端Dai，一个会将自己平时项目中常见的问题以及笔试面试的知识在CSDN与大家分享的coder，希望大家一起进步，加油。

【前端基础知识】最基础的render渲染函数知识，一看就会相关推荐

vue 渲染函数处理slot_vue render 渲染函数
vue render 渲染函数经常看到使用render渲染函数的示例,而且在一些特殊情况下,确实更好使用,可以更加有效地细分组件,因而借助vue-element-admin来学习一波 render函 ...
Vue render渲染函数
这里写自定义目录标题 Vue render渲染函数基础 render渲染函数的作用 render函数讲解 render和template的区别 render举例 Vue render渲染函数基础 ...
Vue.js 2.x render 渲染函数 JSX
Vue.js 2.x render 渲染函数 & JSX Vue绝大多数情况下使用template创建 HTML.但是比如一些重复性比较高的场景,需要运用 JavaScript 的完全编程能力 ...
iview table 自定义列_基于VueJS的render渲染函数打造一款非常强大的IView 的Table组件...
1.render渲染函数的介绍字符串模板的代替方案,允许你发挥 JavaScript 最大的编程能力.该渲染函数接收一个 createElement 方法作为第一个参数用来创建 VNode. 如果组 ...
【vue3】vue3在setup的render渲染函数中如何使用slots（插槽）？
在setup中使用插槽,需要配合render渲染函数,先上代码. 子组件slotsTest.vue: <script lang="ts"> import { h,ren ...
vue3.0中使用render渲染函数渲染组件或标签
使用 render 渲染函数是使用了 js 来渲染组件或标签而我们平时使用时是直接在 template 标签中直接书写这两种方法都可以实现组件或标签的创建下面是使用 render 渲染的方法 i ...
二次封装Element Ui的Table中使用render渲染函数
render函数的使用 render在element UI中的使用 render函数是什么具体参数用法 render在element UI中的使用 {prop: 'button',label: '操 ...
vue2基础- render 渲染函数基础使用
文章目录什么是渲染函数为什么需要渲染函数函数式组件怎么使用渲染函数使用 JSX 语法示例什么是渲染函数我们知道Vue是一款流行的JavaScript前端框架.绝大多数情况下我们都是使用 ...
vuejs的render渲染函数
官网文档地址:https://cn.vuejs.org/v2/guide/render-function.html 引入: vue推荐绝大数情况下实验template创建 html,但是我们时常在vu ...

【前端基础知识】最基础的render渲染函数知识，一看就会

Vue-Render渲染函数

是什么？

如何使用？

1. createElement的第一个参数

1.1 HTML 标签名（可以动态创建标签）

1.2 组件

2. createElement的第二个参数

2.1 attrs

2.2 on（事件监听器在 `on` 内）

3. createElement的第三个参数

3.1 文本虚拟节点

3.2 子级虚拟节点 (VNodes)

【前端基础知识】最基础的render渲染函数知识，一看就会相关推荐

最新文章

热门文章

【前端基础知识】最基础的render渲染函数知识，一看就会

Vue-Render渲染函数

是什么？

如何使用？

1. createElement的第一个参数

1.1 HTML 标签名（可以动态创建标签）

1.2 组件

2. createElement的第二个参数

2.1 attrs

2.2 on（事件监听器在 on 内）

3. createElement的第三个参数

3.1 文本虚拟节点

3.2 子级虚拟节点 (VNodes)

【前端基础知识】最基础的render渲染函数知识，一看就会相关推荐

最新文章

热门文章

2.2 on（事件监听器在 `on` 内）