Vue.js 解释createElement()方法的参数

本文介绍了vue.js的createElement()方法的参数。此方法用于在DOM中创建具有innerHTML和其他属性的HTML元素的虚拟节点。

该方法可用于动态实例化元素。Vue.js创建一个虚拟DOM来观察动态创建的节点。虚拟DOM只是所有虚拟节点的组件树。

使用render函数与createElement()方法一起使用来渲染创建的元素的实例。在Vue组件中使用render函数执行诸如创建元素的任务。

语法: 以下是在vue.js中创建和渲染HTML元素的语法：

render: function (createElement) {
    return createElement(....arguments...)
}

参数：

TagName – (字符串) – 需要元素的TagName (h1，p，span等)。
Options – (对象) – 包含HTML属性，属性，事件监听器，类和样式绑定。
Children – (数组/字符串) – 对于字符串，将以该字符串作为元素的文本来渲染。对于数组，可以在数组上再次调用createElement来生成复杂的树。

TagName是必需的，但其他两个参数是可选的。

在编写示例代码之前，通过以下CDN链接导入vue.js：

<script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>

示例 1： 在这个示例中，我们使用 createElement 方法在id为’test_comp’的<div>元素中创建了一个新的<p>元素。在下面的语法中，第一个参数是标签名——’p’，第二个参数——’Explain createElement Arguments?’是<p>元素的内容。

createElement('p', 'Explain createElement Arguments?' );

HTML

<!DOCTYPE html>
<html lang="en">
 
<head>
    <!-- Vue.js CDN Link to import the 
         vue.js in the project -->
    <script src=
"https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js">
    </script>
</head>
 
<body>
    <!-- Heading. -->
    <h1 style="color: green;">
        GeeksforGeeks
    </h1>
 
    <!-- Vue.js component -->
    <div id="test_comp"></div>
 
    <script>
        new Vue({
            el: '#test_comp',
 
            // CreateElement Method
            render(createElement) {
 
                // Return a 'p' node with 
                // the following text
                return createElement('p', 
                    'Explain createElement Arguments?')
            },
        });
    </script>
</body>
 
</html>

输出： 正如你所看到的，在<div>元素的<h1>元素之后创建了一个新的<p>元素。

Vue.js 解释createElement()方法的参数

示例 2： 在这个示例中，我们使用createElement方法创建了<img>元素，并通过向该方法传递附加参数来应用一些CSS、类名和JavaScript功能。在下面的语法中，第一个参数是标签名 – ‘img’，第二个参数是对象。这个对象包含了将应用于这个<img>元素的属性、样式和JavaScript方法。

‘attrs’定义了属性 – src和alt，’style’定义了CSS属性，’class’定义了类名，’on’定义了onclick方法。对象中定义的所有属性将直接应用于这个<img>元素。当用户点击这个<img>时，将自动生成提示框。

createElement('img', {
    attrs: {
        src: '../gfg.jpg',
        alt:'gfg',
    },

    style: {
        width : '200px',
        height : 'auto',
        border : '2px solid green',
        cursor: 'pointer'
    },

    class: ['gfg_image'],

    on: {
        click: this.click_method,
    }
})

HTML

<!DOCTYPE html>
<html lang="en">
 
<head>
    <!-- Vue.js CDN Link to import the 
         vue.js in the project -->
    <script src=
"https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js">
    </script>
</head>
 
<body>
    <!-- Heading. -->
    <h1 style="color: green;">
        GeeksforGeeks
    </h1>
 
    <!-- Vue.js component. -->
    <div id="test_comp"></div>
 
    <script>
        new Vue({
 
            // Component
            el: '#test_comp',
             
            // Method object for defining 
            // the JS methods
            methods: {
             
                // Onclick method -
                click_method: function () {
 
                    // Alert will be generated
                    alert('Clicked!')
                }
            },
            render(createElement) {
                return createElement('img',
 
                    // Options object
                    {
                        // Img attributes
                        attrs: {
                            src:
'https://media.geeksforgeeks.org/wp-content/uploads/20230201193809/geeksforgeeks.jfif',
                            alt: 'gfg',
                        },
 
                        // CSS styling
                        style: {
                            width: '200px',
                            height: 'auto',
                            border: '2px solid green',
                            cursor: 'pointer'
                        },
 
                        // class-Name
                        class: ['gfg_image'],
 
                        // Onclick Event
                        on: {
                            click: this.click_method,
                        }
                    },
                )
            },
        });
    </script>
</body>
 
</html>

输出：

Vue.js 解释createElement()方法的参数