Vue creatElement

2018-06-24 01:05:56来源:未知 阅读 ()

新老客户大回馈,云服务器低至5折

1、传统template写法

<!DOCTYPE html>
<html lang="zh">

    <head>
        <meta charset="UTF-8" />
        <title>Vue</title>
        <link rel="stylesheet" type="text/css" href="css/style.css" />
    </head>

    <body>
        <div id="app" v-cloak>
            <ele></ele>
        </div>

        <script src="https://cdn.bootcss.com/vue/2.5.9/vue.min.js"></script>

        <script type="text/javascript">
            Vue.component('ele', {
                template: `
                    <div id="element" :class="{show:show}" @click="handleClick">
                        文本内容
                    </div>
                `,
                data: function() {
                    return {
                        show: true
                    }
                },
                methods: {
                    handleClick: function() {
                        console.log("clicked")
                    }
                }
            })
            var app = new Vue({
                el: '#app'
            })
        </script>
    </body>

</html>

2、Render写法

<!DOCTYPE html>
<html lang="zh">

    <head>
        <meta charset="UTF-8" />
        <title>Vue</title>
        <link rel="stylesheet" type="text/css" href="css/style.css" />
    </head>

    <body>
        <div id="app" v-cloak>
            <ele></ele>
        </div>

        <script src="https://cdn.bootcss.com/vue/2.5.9/vue.min.js"></script>

        <script type="text/javascript">
            Vue.component('ele', {
                render: function(createElement) {
                    return createElement(
                        'div', {
                            //动态绑定class,同:class
                            class: {
                                'show': this.show
                            },
                            //普通html特性
                            attrs: {
                                id: 'element'
                            },
                            //给div绑定click事件
                            on: {
                                click: this.handleClick
                            }
                        },
                        '文本内容'
                    )
                },

                data: function() {
                    return {
                        show: true
                    }
                },
                methods: {
                    handleClick: function() {
                        console.log("clicked")
                    }
                }
            });
            var app = new Vue({
                el: '#app'
            })
        </script>
    </body>

</html>


区别:templat的写法可读性强,简洁。所以需要在合适的场景使用Render函数,否则会增加负担

标签:

版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有

上一篇:input标签内容改变的触发事件

下一篇:es6 Symbol