06.render函数

最新推荐文章于 2022-11-22 11:14:30 发布

zhuhui2000

最新推荐文章于 2022-11-22 11:14:30 发布

阅读量277

点赞数

分类专栏： vue.js

本文链接：https://blog.csdn.net/zhuhui2000/article/details/95625480

版权

vue.js 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

1.render函数，称为渲染函数，render函数接收一个createElement方法作为第一个参数用来创建VNode，当我们在vue中使用此函数时，同个id下的其他的内容都会被render排挤掉，只显示render函数中的内容，如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>vue3:选项</title>
    <script src="./vue.js"></script>
    <style>
        body{
            background:#eee;
        };
        #app{
            background:#eee;
            margin: 10px;
            padding: 10px;
        }     
    </style>
</head>
<body>
    <div id="app">
     <div v-for="val in content">{{val}}</div>
    </div>

    <script>
        var app = new Vue({
            el:"#app",
            data:{
                name:"zh",
                content:[
                    {id:1,title:"蚂蚁竞走十年了"},
                    {id:2,title:"哎呀妈耶"},
                    {id:3,title:"哎哟哦我去"}
                ]
            },

            //渲染函数render，具有非常强大的功能，但是实现起来比较复杂，因此很少有人使用，是在vue底层实现
            
            render:function(createElement){
                //在createElement中第一个参数指的是存放内容的标签，这里省略了第二个参数，第三个参数是内容
            return createElement("div",this.name)；
     
        });
    </script>
</body>
</html>

在这里插入图片描述
2.如果我们在id为app的外部定义一个div标签，那么则不会受到render函数的影响：

3.createElement有三个参数，第二个和第三个可以省略：createElement( 标签名, 标签属性, 标签里的内容)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>vue3:选项</title>
    <script src="./vue.js"></script>
    <style>
        body{
            background:#eee;
        };
        #app{
            background:#eee;
            margin: 10px;
            padding: 10px;
        }
        
       
    </style>
</head>
<body>
    <div>嘿嘿嘿哈哈哈</div>
    <div id="app">
     <div v-for="val in content">{{val}}</div>
    </div>

    <script>
        var app = new Vue({
            el:"#app",
            data:{
                name:"zh",
                content:[
                    {id:1,title:"蚂蚁竞走十年了"},
                    {id:2,title:"哎呀妈耶"},
                    {id:3,title:"哎哟哦我去"}
                ]
            },

            //渲染函数render，具有非常强大的功能，但是实现起来比较复杂，因此很少有人使用，是在vue底层实现
            render:function(createElement){
            var array = [];
            for(var i=0;i<this.content.length;i++){
            //这里面我们用到的是jsx语法，将我们获取到的内容暂时存放在一个虚拟的div中
                var _div = createElement("div",[
                    createElement("h3",[this.content[i].title])
                ])
                //将我们遍历到的content中的每一项的内容存放在array中
                 array.push(_div); 
            }
           //这里的第二个参数是一个对象，如我们要给这个对象加一个id为app的属性，写法如下，第三个参数是把获取到的数组的内容放在div中显示
            return createElement("div",{attr:{id:"app"}},[createElement("div",array)])
            }, 
        });
    </script>
</body>
</html>

在这里插入图片描述

zhuhui2000

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
06.render函数

1.render函数，称为渲染函数，render函数接收一个createElement方法作为第一个参数用来创建VNode，当我们在vue中使用此函数时，同个id下的其他的内容都会被render排挤掉，只显示render函数中的内容，如下：<!DOCTYPE html><html lang="en"><head> <meta charset=...
复制链接

扫一扫