template(标签模板)

最新推荐文章于 2024-09-22 01:59:41 发布

该睡觉觉了

最新推荐文章于 2024-09-22 01:59:41 发布

阅读量333

点赞数

分类专栏： vue 文章标签： vue

本文链接：https://blog.csdn.net/zhangyiyang111/article/details/115384559

版权

vue 专栏收录该内容

37 篇文章 0 订阅

订阅专栏

template(标签模板)

作用:将组件的模板内容通过标签模板的形式展示出来,其目的为了书写简便.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 引入vue.js -->
    <script src="./vue.js"></script>
</head>
<body>
    <!-- 作用域 -->
    <div id="app">
        <v-one></v-one>
        <v-two></v-two>
    </div>

    <!-- 标签模板 -->
    <template id="one">
        <div>
            <h1>one组件</h1>
            <div>王运舵</div>
        </div>
    </template>


    <!-- 标签模板 -->
    <template id="two">
        <h1>two组件</h1>
    </template>
    <script>
        // 实例化vue
        new Vue({
            el:'#app',
            data:{},
            methods:{},
            // 局部组件
            components:{
                vOne:{
                    template:'#one'
                },
                vTwo:{
                    template:'#two'
                }
            }
        })
    </script>
</body>
</html>

定义的任何一个组件是一个VueComponent实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 引入vue.js -->
    <script src="./vue.js"></script>
</head>
<body>
    <!-- 作用域 -->
    <div id="app">
        <v-one></v-one>
        <v-two></v-two>
    </div>

    <!-- 标签模板 -->
    <template id="one">
        <div class="one">
            <h1>one组件</h1>
            <div>王运舵</div>
        </div>
    </template>


    <!-- 标签模板 -->
    <template id="two">
        <div class="two">
            <h1>two组件</h1>
        </div>
    </template>
    <script>
        // 实例化vue
        new Vue({
            el:'#app',
            data:{},
            methods:{},
            // 局部组件
            components:{
                // 定义的任何一个组件是一个VueComponent实例
                vOne:{
                    template:'#one',
                    beforeCreate(){
                        console.group('==one组件创建之前==')
                        console.groupEnd()
                    },
                    created(){
                        console.group('==one组件创建完成==')
                        console.groupEnd()
                    },
                    beforeMount(){
                        console.group('==one组件挂载之前==')
                        console.groupEnd()
                    },
                    mounted(){
                        console.group('==one组件挂载完成==')
                        console.log(this);
                        console.groupEnd()
                    }
                },
                vTwo:{
                    template:'#two',
                    beforeCreate(){
                        console.group('==two组件创建之前==')
                        console.groupEnd()
                    },
                    created(){
                        console.group('==two组件创建完成==')
                        console.groupEnd()
                    },
                    beforeMount(){
                        console.group('==two组件挂载之前==')
                        console.groupEnd()
                    },
                    mounted(){
                        console.group('==two组件挂载完成==')
                        console.log(this);
                        console.groupEnd()
                    }
                }
            },
            beforeCreate(){
                console.group('==父组件创建之前==')
                console.groupEnd()
            },
            created(){
                console.group('==父组件创建完成==')
                console.groupEnd()
            },
            beforeMount(){
                console.group('==父组件挂载之前==')
                console.groupEnd()
            },
            mounted(){
                console.group('==父组件挂载完成==')
                console.log(this);
                console.groupEnd()
            }
        })
    </script>
</body>
</html>