zoukankan      html  css  js  c++  java
  • Vue creatElement

    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函数,否则会增加负担

  • 相关阅读:
    LeetCode "Median of Two Sorted Arrays"
    LeetCode "Distinct Subsequences"
    LeetCode "Permutation Sequence"

    LeetCode "Linked List Cycle II"
    LeetCode "Best Time to Buy and Sell Stock III"
    LeetCode "4Sum"
    LeetCode "3Sum closest"
    LeetCode "3Sum"
    LeetCode "Container With Most Water"
  • 原文地址:https://www.cnblogs.com/mengfangui/p/8072842.html
Copyright © 2011-2022 走看看