Vue组件—通过将template定义为独立标签注册组件和私有组件的注册

注意:

        1.将直接在template后面的内容,通过template标签写出来,代码可读性更强,通过id进行连接

        2.同时也可以自定义组件,定义的方法和用法跟私有过滤器和私有指令一个套路

HTML代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../lib/vue.js"></script>
</head>
<body>
    <div id="app">
        <my-com></my-com>
        <show></show>
    </div>
    
    <template id="temp">
        <div>
            <h3>陈小帅是真的帅呢</h3>
        </div>
    </template>
    
    <script>
        Vue.component('myCom',{
            template:"#temp"
        });
        //将直接在template后面的内容,通过template标签写出来,代码可读性更强,通过id进行连接
    
        var vm = new Vue({
            el:"#app",
            components:{
                show:{
                    template: '<h3>陈小帅是真的帅呢2</h3>'
                }
            }
        });
    </script>
</body>
</html>

效果:

猜你喜欢

转载自blog.csdn.net/qq_42036616/article/details/82877019