Vue的官方介绍
大致意思就是说 在render 函数中 通过 createElement 来创建Vnode 的虚拟 dom(Vue的核心思想虚拟dom)
在脚手架中的使用
新建renderDemo.vue ,index.js文件
<script>
export default {
name: "renderDemo",
data() {
return {
};
},
methods: {
},
created() {
},
render(createElement) {
return createElement("div", "render 创建的Div");
},
};
</script>
index.js
import Render from './renderDemo'
export {
Render}
使用
<template>
<div class="hello">
<img alt="Vue logo" src="../assets/logo.png" />
<render></render>
</div>
</template>
<script>
import {
Render} from '@/components'
export default {
name: 'HelloWorld',
props: {
msg: String
},
components:{
// RenderDemo,
Render
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h3 {
margin: 40px 0 0;
}
ul {
list-style-type: none;
padding: 0;
}
li {
display: inline-block;
margin: 0 10px;
}
a {
color: #42b983;
}
</style>
页面显示：
注：
- 与methods ,created 等同一级
- 弃用 template 模板 创建dom （如果使用template会替换render中的内容）
- 使用了render 就必须有返回值否则会报错
这是官方的使用方法 更多使用可参考vue官网：https://cn.vuejs.org/v2/guide/render-function.html
官方的使用方法是通过createElement 去创建一个dom 节点 然后将内容返回
既然都是返回节点 也可以这样去实现
<script>
export default {
name: "renderDemo",
data() {
return {
};
},
methods: {
},
created() {
},
render() {
return (
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
)
},
};
</script>
或者循环生成
<script>
export default {
name: "renderDemo",
data() {
return {
};
},
methods: {
},
created() {
},
render() {
const List = [
{
name: "1",
},
{
name: "2",
},
{
name: "3",
},
{
name: "4",
},
];
const LiMap = List.map((v, i) => {
return <li key={
i}>{
v.name}</li>;
});
return <ul>{
LiMap}</ul>;
},
};
</script>
添加事件
<script>
export default {
name: "renderDemo",
data() {
return {
};
},
methods: {
activateLasers() {
console.log("点击了li");
},
},
created() {
},
render() {
const List = [
{
name: "1",
},
{
name: "2",
},
{
name: "3",
},
{
name: "4",
},
];
const LiMap = List.map((v, i) => {
return (
<li key={
i} onClick={
this.activateLasers}>
{
v.name}
</li>
);
});
return <ul>{
LiMap}</ul>;
},
};
</script>
需要传递数据时(学过react的童鞋应该不陌生，这里就不过多解释了)
<script>
export default {
name: "renderDemo",
data() {
return {
};
},
methods: {
activateLasers(i) {
console.log(`第${
i+1}个li`);
},
},
created() {
},
render() {
const List = [
{
name: "1",
},
{
name: "2",
},
{
name: "3",
},
{
name: "4",
},
];
const LiMap = List.map((v, i) => {
return (
<li key={
i} onClick={
()=>this.activateLasers(i)}>
{
v.name}
</li>
);
});
return <ul>{
LiMap}</ul>;
},
};
</script>
v-model 和 v-show
<script>
export default {
name: "renderDemo",
data() {
return {
active: 0,
};
},
methods: {
activateLasers(i) {
console.log(`点击了第${
i + 1}li`);
this.active = i;
},
nextClick() {
},
},
created() {
},
render() {
const List = [
{
name: "1",
},
{
name: "2",
},
{
name: "3",
},
{
name: "4",
},
];
const LiMap = List.map((v, i) => {
return (
<li key={
i} onClick={
() => this.activateLasers(i)}>
{
v.name}
</li>
);
});
return (
<ul>
{
LiMap}
<input v-model={
this.active} />
<h1 v-show={
this.active == 1}>输入为1或者点击第一个Li时显示</h1>
</ul>
);
},
};
</script>
注：render函数不支持使用 v-if 等语法
可以使用 三目运算符 不能使用复杂判断 如if 和switch try 等
return (
<ul>
{
LiMap}
<input v-model={
this.active} />
<h1 v-show={
this.active == 1}>输入为1或者点击第一个Li时显示</h1>
{
this.active == 2 ? <h2>输入为2或者点击第二个Li时显示</h2> : ""}
</ul>
);
可以使用 map find some every等数组方法 不支持使用 for 循环
return (
<ul>
{
LiMap}
<input v-model={
this.active} />
<h1 v-show={
this.active == 1}>输入为1或者点击第一个Li时显示</h1>
{
this.active == 2 ? <h2>输入为2或者点击第二个Li时显示</h2> : ""}
{
List.map((v) => {
if (v.name == "4") {
return <h4>显示第四个Li</h4>;
}
})
}
</ul>
);
个人理解：render 函数相对template 模板更加灵活，开阔程序的可变性， 一个复杂的功能点能够细分为多个, 使组件页面逻辑更加清晰，借鉴react 开发思维 ， 更多是用于 功能性组件的封装