Vue.js学习之路（三）：组件的定义

最新推荐文章于 2023-02-20 13:28:17 发布

青柚1943

最新推荐文章于 2023-02-20 13:28:17 发布

阅读量333

点赞数 2

分类专栏： Vue.js 前端

本文链接：https://blog.csdn.net/Stefan_J/article/details/88671051

版权

Vue.js 同时被 2 个专栏收录

5 篇文章 0 订阅

订阅专栏

前端

4 篇文章 0 订阅

订阅专栏

关键字： extend、component、template

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>组件创建1</title>
    <script src="../Content/Vue-2.5.21.js"></script>
</head>
<body>
    <div id="app">
        <my-com1></my-com1>
        <mycom2></mycom2>
        <mycom3></mycom3>
        <mycom4></mycom4>
    </div>

    <div id="app2">
           <login></login>
    </div>

    <template id="test">
        <div>
            <h1 style="color:red">在外部定义组件实现语法高亮</h1>
        </div>
    </template>
    <script>
        //1.1 用Vue.extend创建全局组件
        var com1=Vue.extend({
            template:'<h3>这是Vue.extend创建的组件</h3>' //通过template属性指定组件要展示的html结构
        });
        //1.2 用Vue.component('组件名称',组件模板对象)
        Vue.component('myCom1',com1); 
        //1.3 等价写法（推荐）
        Vue.component('mycom2',Vue.extend({
            template:'<h2>这是Vue.extend创建的组件</h2>'
        }));
        //1.4 等价写法
        Vue.component('mycom3',{
            template:'<h1>这是Vue.extend创建的组件</h1>'
        });
        //1.5 等价写法（推荐）
        Vue.component('mycom4',{
            template:'#test' //名字随便取
        });
        //创建实例 得到ViewModel
        var vm=new Vue({
            el:'#app',
            data:{
            }
        });

        var vm2=new Vue({
            el:'#app2',
            data:{
            },
            memthods:{ 
            },
            filters:{

            },
            directives:{

            },
            components:{//定义实例内部私有组件
                login:{
                    template:'<h2>这是私有的login</h2>' //也可以在外部定义一个template
                }
            },
            beforeCreate(){//生命周期函数1
                //data和methods都没初始化
            },
            created(){//生命周期函数2
                //data和methods已经初始化
            },
            beforeMount(){//生命周期函数3
                 //html模板已经被编辑完成，但是没有被挂载到页面中，此时页面还是旧的数据
            },
            mounted(){//生命周期函数4（实例创建期间最后一个生命周期函数）
                //挂载到页面中，操作DOM节点最早的点
            },
            beforeUpdate(){//when data changes
                //此时data中的数据时最新的，但是页面中的数据还是旧的
            },
            updated(){
                //页面中的数据更新
            },
            beforeDestroy(){
                //Vue势力从运行阶段进入到销毁阶段
            },
            destroyed(){
                //组件完全被销毁
            }
        });

    </script>
</body>
</html>