Vue day04 组件和模块化，生命周期完善

最新推荐文章于 2022-05-03 11:11:09 发布

阅读量176

点赞数

分类专栏： Vue

本文链接：https://blog.csdn.net/csdn_zy008/article/details/110238310

版权

Vue 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

Vue day04 组件和模块化，生命周期完善

1.组件（component）

特点：一组可服用的Vue实例

2.组件和模块化

特点：一个具有html，css，js的页面

用法：

全局定义：（要写在实例之前 new Vue之前）

   		//全局定义
        Vue.component('vTwo',{
            template:'<p>第二个</p>'
        })

局部定义：(+嵌套)

    <div id="app">
        <v-one></v-one>
        {{msg}}
       
       

    </div>
    <template id="tem">
        <div>
            <h2>这是标题</h2>
            <p>这是想要有提示的</p>
            <v-two></v-two>
            {{name}}
        </div>
    </template>
    <template id="tem2">
        <div>
           <p>我是嵌套</p>
           <v-three></v-three>
        </div>
    </template>
components:{
                vOne:{
                    template:'#tem',
                    components:{
                        vTwo:{
                            template:'#tem2',
                            components:{
                                vThree:{
                                    template:'<div>这是第三个</div>'
                                }
                            }
                        }
                    },
                    data(){
                    return {
                        name:'张三'
                    }
                }
                },

*注意：template只能有一个根元素，通常是div

组件化和模块化的区别？

组件化：组件化是指解耦复杂系统时将多个功能模块拆分、重组的过程，有多种属性、状态反映其内部特性

特点：一个具有html+css+js的页面

模块化：侧重的功能的封装，主要是针对Javascript代码，隔离、组织复制的javascript代码，将它封装成一个个具有特定功能的的模块。

3.组件命名规范

1.不能以标签起名，包含大写
2.建议用驼峰起名
3.首字母大写，后面直接写名字。如果后面有大写需要转换为驼峰

4.data的使用

重点：组件中定义data为函数

原因是：为了共享数据但是又互相不干扰.



<body>
    <div id='app'>
        <div>{{msg}}</div>
        <p>{{msg}}</p>
        <button @click = 'change'>点击修改msg</button>
        <hr>

        <v-one></v-one>
        <v-one></v-one>
    </div>
    <template id="temp1">
        <div>
            <p>{{content}}</p>
            <button @click='changeOne'>修改内容</button>
        </div>
    </template>
</body>

 let vm = new Vue({
        el: '#app',
        data: {
            msg:'abc'
        },
        methods: {
            change(){
                this.msg='123'
            }
        },
        components:{
            vOne:{
                template:'#temp1',
                data(){
                    return {
                        content:'我要被修改了'
                    }
                },
                methods: {
                    changeOne(){
                        this.content = '我被修改了'
                    }
                },
            }
        }
    })
    // 总结:data定义为函数的原因:由于需要共享数据，但是又要互不干扰,所以定义为函数

5.组件的嵌套

总结：组件中关系：只有父子和非父子关系
嵌套:子组件只能在父组件中使用
组件中的data ：定义为方法，必须有返回值，同时返回值的类型为对象
data 中的数据只能供自己使用如果其他组件需要使用需要传值比如：data,methods,filter,cmpputed,watch…

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <v-one></v-one>
        {{msg}}
       
       

    </div>
    <template id="tem">
        <div>
            <h2>这是标题</h2>
            <p>这是想要有提示的</p>
            <v-two></v-two>
            {{name}}
        </div>
    </template>
    <template id="tem2">
        <div>
           <p>我是嵌套</p>
           <v-three></v-three>
        </div>
    </template>


    <script src='https://cdn.jsdelivr.net/npm/vue/dist/vue.js'></script>
    <script>


        // 全局
        // Vue.component('vTwo',{
        //     template:'<p>第二个</p>'
        // })
        new Vue({
            el:'#app',
            data:{
                msg:'aaa'

            },
            components:{
                vOne:{
                    template:'#tem',
                    components:{
                        vTwo:{
                            template:'#tem2',
                            components:{
                                vThree:{
                                    template:'<div>这是第三个</div>'
                                }
                            }
                        }
                    },
                    data(){
                    return {
                        name:'张三'
                    }
                }
                },
                vFore:{
                    
                }
                
            }
        })
    </script>
    
</body>
</html>

6.生命周期的完善(后台管理界面的例子)

注意：1.外层嵌套大盒子（container） 2.划分布局 3.书写组件 4.组件嵌套 5.添加样式

7.生命周期 --8个钩子函数 mounted 是最常用的

v-if 会引起生命周期的改变

v-show 不会引起

下述案例生命周期的执行过程为：

首先是vm实例的生命周期执行beforeCreate，created，beforeMount，之后是到组件走生命周期beforeCreate，created，beforeMount，mounted，最后是走vm的mounted。

<!DOCTYPE html>
<html lang='en'>

<head>
    <meta charset='UTF-8'>
    <meta name='viewport' content='width=device-width, initial-scale=1.0'>
    <title>Document</title>
</head>

<body>
    <div id='app'>
        <div v-html='msg' v-if='isShow'></div>
        <button @click='change'>点击</button>

        <hr>
        <v-one v-show='isShow'></v-one>

    </div>


    <template id="temp1">
        <div>
            <div v-if='show'>{{con}}</div>
            <button @click='changeC'>点击切换内容</button>
        </div>
    </template>
</body>
<script src='https://cdn.jsdelivr.net/npm/vue/dist/vue.js'></script>
<script>
    let vm = new Vue({
        el: '#app',
        data: {
            msg: 'hello world！',
            isShow: true
        },
        methods: {
            change() {
                this.isShow = !this.isShow
            }
        },
        components: {
            vOne: {
                template: '#temp1',
                data() {
                    return {
                        con: '我是组件模板',
                        show: true
                    }
                },
                methods: {
                    changeC() {
                       this.con = '我被修改了!!!!!!!'
                    }
                },
                mounted() {
                    console.log('组件内容挂载完成')
                },
                destroyed() {
                    console.log('销毁执行了')
                },
            }
        },
        mounted() {
            console.log('vm内容挂载完成')
        },
        destroyed() {
            console.log('vm销毁执行了')
        },
    })
</script>

</html>

后台管理界面例子

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=`, initial-scale=1.0">
    <title>Document</title>
    <style>
        .one{
            width: 100vw;
            height: 100vh;
            background-color: #ccc;
            display: flex;
            flex-direction: column;
        }
        .header{
            width: 100vw;
            height: 100px;
            background-color: red;

        }
        .main{
            flex: 1;
            background-color: yellow;
        }
        .footer{
            width: 100vw;
            height: 30px;
            background-color: green;
        }
    </style>
</head>
<body>
    <div id="app">
        <v-one></v-one>
    </div>
    <template id="one">
        one
        <div class="one">
            <v-header></v-header>
            <v-main></v-main>
            <v-footer></v-footer>
        </div>
    </template>

    <template id="header">
        <div class="header">
            header
        </div>

    </template>

    <template id="main">
        <div class="main">
            main
        </div>
    </template>


    <template id="footer">
        <div class="footer">
            footer
        </div>
    </template>


    <script src='https://cdn.jsdelivr.net/npm/vue/dist/vue.js'></script>
    <script>
        new Vue({
            el:'#app',
            data:{},
            components:{
                vOne:{
                    template:'#one',
                    components:{
                        vHeader:{
                            template:'#header'

                        },
                        vMain:{
                            template:'#main'

                        },
                        vFooter:{
                            template:'#footer'
                        }
                    }
                }

            }
        })

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

7.脚手架

//全局安装webpack
npm i webpack -g

//查看版本
webpack -v

//全局安装vue脚手架
npm i vue-cli -g

//查看版本
vue -V
//创建项目
vue init webpack demo

//进入项目
cd demo 

//启动 
npm run dev //localhost:8080


注意：  安装cnpm方法  淘宝镜像
npm i -g cnpm --registry=https://registry.npm.taobao.org