zoukankan      html  css  js  c++  java

  • vue组件生命周期钩子

    1 slot插槽 (内容分发)

    1
    2
    3
    4
    		 
    a. 单个slot 
    b. 具名slot
    	*混合父组件的内容与子组件自己的模板-->内容分发
    	*父组件模板的内容在父组件作用域内编译；子组件模板的内容在子组件作用域内编译。

    1.1 基本使用

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    		 
    <!DOCTYPE html>
    <htmllang="en">
    <head>
        <metacharset="UTF-8">
        <title>Title</title>
        <scriptsrc="js/vue.js"></script>
    </head>
    <body>
    <divid="box">
        <!-- 不使用插槽写的aaa不会显示,使用就会显示-->
        <child1>aaa</child1>

    </div>
    </body>
    <script>
    var bus = new Vue() //new一个vue的实例，就是中央事件总线
        Vue.component('child1', {
            template: `<div>
              首页
    <slot></slot>
    </div>`,

        })
    var vm = new Vue({
            el: '#box',

        })
    </script>
    </html>

    1.2 插槽应用场景1

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    		 
    <!DOCTYPE html>
    <htmllang="en">
    <head>
        <metacharset="UTF-8">
        <title>Title</title>
        <scriptsrc="js/vue.js"></script>
    </head>
    <body>
    <divid="box">
    <!--    写了一个轮播组件，用户想轮播什么就放什么-->
        <swiper>
            <pv-for="data in 4">{{data}}</p>
        </swiper>

           <swiper>
               <img:src="data"v-for="data in 5">
        </swiper>

    </div>
    </body>
    <script>
    var bus = new Vue() //new一个vue的实例，就是中央事件总线
        Vue.component('swiper', {
            template: `<div>
    <slot></slot>
    </div>`,

        })
    var vm = new Vue({
            el: '#box',

        })
    </script>
    </html>

    1.3 插槽应用场景2

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    		 
    <!DOCTYPE html>
    <htmllang="en">
    <head>
        <metacharset="UTF-8">
        <title>Title</title>
        <scriptsrc="js/vue.js"></script>
    </head>
    <body>
    <divid="box">
        <!--通过插槽实现在一个组件中控制另一个组件的显示隐藏-->
        <navbar> <button @click="isShow=!isShow">点我显示隐藏</button></navbar>

        <swiperv-if="isShow"></swiper>
    </div>
    </body>
    <script>
        Vue.component('navbar', {
            template: `<div>
              navbar
    <slot></slot>
    </div>`,

        })
        Vue.component('swiper', {
            template: `<div>
    <p>111</p>
    <p>222</p>
    <p>333</p>
    </div>`,

        })
    var vm = new Vue({
            el: '#box',
            data:{
                isShow:true
            }

        })
    </script>
    </html>

    1.4 具名插槽

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    		 
    <!DOCTYPE html>
    <htmllang="en">
    <head>
        <metacharset="UTF-8">
        <title>Title</title>
        <scriptsrc="js/vue.js"></script>
    </head>
    <body>
    <divid="box">
    <!--    具名插槽，把p标签给a插槽，div标签给b插槽-->
        <navbar>
            <pslot="a">pppp</p>
            <divslot="b">bbbb</div>
        </navbar>
    </div>
    </body>
    <script>
        Vue.component('navbar', {
            template: `<div>
    <slotname="a"></slot>
              navbar
    <slotname="b"></slot>
    </div>`,

        })
    var vm = new Vue({
            el: '#box',
            data:{

            }

        })
    </script>
    </html>

    2 transition过渡

    1
    2
    3
    4
    5
    6
    7
    8
    9
    		 
    Vue 在插入、更新或者移除 DOM 时，提供多种不同方式的应用过渡效果。
    (1)单元素/组件过渡  * css过渡  * css动画  * 结合animate.css动画库
    (2) 多个元素过渡(设置key) 
    	 *当有相同标签名的元素切换时，需要通过 key 特性设置唯一的值来标记以让 Vue 区分它们，否则 Vue 为了效率只会替换相同标签内部的内容。  
    	  mode:in-out ; out-in
    (3)多个组件过渡
    (4)列表过渡(设置key) 
    	 *<transition-group>不同于 transition， 它会以一个真实元素呈现：默认为一个 <span>。你也可以通过tag 特性更换为其他元素。  
    	 * 提供唯一的 key 属性值

    3 生命周期

    1
    2
    		 
    i. 生命周期各个阶段https://cn.vuejs.org/v2/guide/instance.html#%E7%94%9F%E5%91%BD%E5%91%A8%E6%9C%9F%E5%9B%BE%E7%A4%BA
    ii. 生命周期钩子函数的触发条件与作用

    4 swiper学习

    ​ https://www.swiper.com.cn/

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    		 
    <!DOCTYPE html>
    <htmllang="en">
    <head>
        <metacharset="UTF-8">
        <title>Title</title>
        <scriptsrc="js/vue.js"></script>

        <linkrel="stylesheet"href="https://unpkg.com/swiper/swiper-bundle.min.css">
        <scriptsrc="https://unpkg.com/swiper/swiper-bundle.min.js"></script>
        <!--    <link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.css">  -->
        <!--<script src="https://unpkg.com/swiper/swiper-bundle.js"> </script>  -->
        <style>
    .swiper-container {
                width: 80%;
                height: 600px;
            }
    </style>

    </head>
    <body>
    <divid="box">

        <divclass="swiper-container">
            <divclass="swiper-wrapper">
                <divclass="swiper-slide"v-for="data in datalist">

                    {{data}}
                    <imgsrc="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1608145297276&di=dd396caeaa0bb6a2a50609a109cd3120&imgtype=0&src=http%3A%2F%2Fattachments.gfan.com%2Fforum%2Fattachments2%2Fday_110915%2F1109151356c0717d7e6a91e985.jpg"alt="">
                </div>
            </div>
            <!-- 如果需要分页器 -->
            <divclass="swiper-pagination"></div>
            <!-- 如果需要导航按钮 -->
            <divclass="swiper-button-prev"></div>
            <divclass="swiper-button-next"></div>

            <!-- 如果需要滚动条 -->
            <divclass="swiper-scrollbar"></div>
        </div>
    </div>
    </body>
    <script>
    var vm = new Vue({
            el: '#box',
            data: {
                datalist: [],
            },
            mounted() {
                setTimeout(() => {
    this.datalist = ['111', '222', '333']
                }, 2000)
    //轮播图初始化不是放在这，因为数据变化和dom更新是异步的
    //需要放在updated中
            },
            updated() {
    var mySwiper = new Swiper('.swiper-container', {
    // direction: 'vertical', // 垂直切换选项
                    loop: true, // 循环模式选项
    // 如果需要分页器
                    pagination: {
                        el: '.swiper-pagination',
                    },
    // 如果需要前进后退按钮
                    navigation: {
                        nextEl: '.swiper-button-next',
                        prevEl: '.swiper-button-prev',
                    },

    // 如果需要滚动条
                    scrollbar: {
                        el: '.swiper-scrollbar',
                    },

                })
            },


        })
    </script>
    </html>

    5 自定义组件的封装

    ​ 自定义封装swiper组件（基于swiper）
    ​ 注意： 防止swipe初始化过早

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    101
    102
    103
    104
    105
    106
    107
    108
    109
    110
    111
    112
    113
    		 
    <!DOCTYPE html>
    <htmllang="en">
    <head>
        <metacharset="UTF-8">
        <title>Title</title>
        <scriptsrc="js/vue.js"></script>

        <linkrel="stylesheet"href="https://unpkg.com/swiper/swiper-bundle.min.css">
        <scriptsrc="https://unpkg.com/swiper/swiper-bundle.min.js"></script>
        <!--    <link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.css">  -->
        <!--<script src="https://unpkg.com/swiper/swiper-bundle.js"> </script>  -->
        <style>
    .swiper-container {
                width: 80%;
                height: 600px;
            }
    </style>

    </head>
    <body>
    <divid="box">
        {{name}}
    <!--    diff算法检测到key变化了，会把swipper删掉，重新创建，触发组件的mounted执行，完成swipper实例化，不在updated中初始化-->
    <!--    子组件的mounted在根组件的mounted之前执行，所有组件挂载完成后，根组件才挂载-->
        <swipper:key="datalist.length">
    <!--    <swipper>-->
            <divclass="swiper-slide"v-for="data in datalist">
                <imgsrc="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1608145297276&di=dd396caeaa0bb6a2a50609a109cd3120&imgtype=0&src=http%3A%2F%2Fattachments.gfan.com%2Fforum%2Fattachments2%2Fday_110915%2F1109151356c0717d7e6a91e985.jpg"alt="">
            </div>
        </swipper>
    </div>
    </body>
    <script>

        Vue.component('swipper',{
            template:`
            <div class="swiper-container">
            <div class="swiper-wrapper">
    <slot></slot>
    </div>
            <div class="swiper-pagination"></div>
            <div class="swiper-button-prev"></div>
            <div class="swiper-button-next"></div>
            <div class="swiper-scrollbar"></div>
    </div>
            `,
            mounted(){
    console.log('子组件mounted')
    var mySwiper = new Swiper('.swiper-container', {
    // direction: 'vertical', // 垂直切换选项
                    loop: true, // 循环模式选项
    // 如果需要分页器
                    pagination: {
                        el: '.swiper-pagination',
                    },
    // 如果需要前进后退按钮
                    navigation: {
                        nextEl: '.swiper-button-next',
                        prevEl: '.swiper-button-prev',
                    },

    // 如果需要滚动条
                    scrollbar: {
                        el: '.swiper-scrollbar',
                    },

                })
            },

    // updated(){//如果跟组件中有数据变化，就会导致swipper组件触发update(vm.name='ss'测试一下),导致多次执行，影响效率，所以使用key+mounted方式
    //     console.log('子组件update')
    //     var mySwiper = new Swiper('.swiper-container', {
    //         // direction: 'vertical', // 垂直切换选项
    //         loop: true, // 循环模式选项
    //         // 如果需要分页器
    //         pagination: {
    //             el: '.swiper-pagination',
    //         },
    //         // 如果需要前进后退按钮
    //         navigation: {
    //             nextEl: '.swiper-button-next',
    //             prevEl: '.swiper-button-prev',
    //         },
    //
    //         // 如果需要滚动条
    //         scrollbar: {
    //             el: '.swiper-scrollbar',
    //         },
    //
    //     })
    // }


        })
    var vm = new Vue({
            el: '#box',
            data: {
                name:'lqz',
                datalist: [],
            },
            mounted() {
                setTimeout(() => {
    this.datalist = ['111', '222', '333']
                }, 2000)
    //轮播图初始化不是放在这，因为数据变化和dom更新是异步的
    //需要放在updated中
            },



        })
    </script>
    </html>

    6 自定义指令

    1
    2
    3
    4
    5
    6
    		 
    (1)自定义指令介绍 directives
    (2)钩子函数* 参数 el,binding,vnode(vnode.context)* bind,inserted,update,componentUpdated,unbind
    (3)函数简写
    (4)自定义指令-轮播
    	*inserted 插入最后一个元素时调用(vnode.context.datalist.length-1)
    	*this.$nextTick()

    6.1 基本使用

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    		 
    <!DOCTYPE html>
    <htmllang="en">
    <head>
        <metacharset="UTF-8">
        <title>Title</title>
        <scriptsrc="js/vue.js"></script>

    </head>
    <body>
    <divid="box">
        <divv-mystyle>divdiv我是div</div>
    </div>
    </body>
    <script>
    //自定义指令，以后用的时候必须 v-指令名，即v-mystyle
    Vue.directive('mystyle',{
    //当被改指令修饰的标签插入到dom中会执行
        inserted(){
    console.log('我执行了')
        },
    })
    var vm = new Vue({
            el: '#box',
            data: {
            },



        })
    </script>
    </html>

    6.2 让所有使用自定义指令的标签背景都变红色

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    		 
    <!DOCTYPE html>
    <htmllang="en">
    <head>
        <metacharset="UTF-8">
        <title>Title</title>
        <scriptsrc="js/vue.js"></script>

    </head>
    <body>
    <divid="box">
        <divv-mystyle>divdiv我是div</div>
        <pv-mystyle>我是p，用了自定义指令，会变红</p>
    </div>
    </body>
    <script>
    //自定义指令，以后用的时候必须 v-指令名，即v-mystyle
    Vue.directive('mystyle',{
    //当被改指令修饰的标签插入到dom中会执行
        inserted(el){
    //el就是被修饰标签的dom
    console.log(el)
    //所以我们直接操作dom
            el.style.background='red'
        },
    })
    var vm = new Vue({
            el: '#box',
            data: {
            },



        })
    </script>
    </html>

    6.3 用户指定自定义指令的背景色,修改变量，背景变化

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    		 
    <!DOCTYPE html>
    <htmllang="en">
    <head>
        <metacharset="UTF-8">
        <title>Title</title>
        <scriptsrc="js/vue.js"></script>

    </head>
    <body>
    <divid="box">
        <!--放js的变量，所以用'red'-->
        <divv-mystyle="'red'">divdiv我是div</div>
        <pv-mystyle="mycolor">我是p，用了自定义指令，会变红</p>
    </div>
    </body>
    <script>
    //自定义指令，以后用的时候必须 v-指令名，即v-mystyle
    Vue.directive('mystyle',{
    //当被改指令修饰的标签插入到dom中会执行
        inserted(el,input){ //该方法，如果更新变量mycolor，并不会变化，所以需要重写update方法  vm.mycolor='yellow'
    //el就是被修饰标签的dom
    console.log(el)
    console.log(input) //input的value属性是传入的变量
    //所以我们直接操作dom
    // el.style.background='red'
            el.style.background=input.value
        },
        update(el,input){
            el.style.background=input.value

        }
    })
    var vm = new Vue({
            el: '#box',
            data: {
                mycolor:'green',
            },



        })
    </script>
    </html>

    6.4 通过指令控制swipper初始化

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    		 
    <!DOCTYPE html>
    <htmllang="en">
    <head>
        <metacharset="UTF-8">
        <title>Title</title>
        <scriptsrc="js/vue.js"></script>

        <linkrel="stylesheet"href="https://unpkg.com/swiper/swiper-bundle.min.css">
        <scriptsrc="https://unpkg.com/swiper/swiper-bundle.min.js"></script>
        <!--    <link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.css">  -->
        <!--<script src="https://unpkg.com/swiper/swiper-bundle.js"> </script>  -->
        <style>
    .swiper-container {
                width: 80%;
                height: 600px;
            }
    </style>

    </head>
    <body>
    <divid="box">

        <divclass="swiper-container">
            <divclass="swiper-wrapper">
                <!--v-comp把当前索引值和数组总长度传入，如果索引等于数组总长度减一说明都加载完了，完成swipper初始化-->
                <divclass="swiper-slide"v-for="(data,i) in datalist"v-comp="{index:i,length:datalist.length}">

                    {{data}}

                </div>
            </div>
            <!-- 如果需要分页器 -->
            <divclass="swiper-pagination"></div>
            <!-- 如果需要导航按钮 -->
            <divclass="swiper-button-prev"></div>
            <divclass="swiper-button-next"></div>

            <!-- 如果需要滚动条 -->
            <divclass="swiper-scrollbar"></div>
        </div>
    </div>
    </body>
    <script>
        Vue.directive('comp', {
            inserted(el, input) {
    console.log(input.value)
    //只要校验到传入的是最后一个插入了，就初始化swipper
                if (input.value.index === input.value.length - 1) {
    var mySwiper = new Swiper('.swiper-container', {
    // direction: 'vertical', // 垂直切换选项
                        loop: true, // 循环模式选项
    // 如果需要分页器
                        pagination: {
                            el: '.swiper-pagination',
                        },
    // 如果需要前进后退按钮
                        navigation: {
                            nextEl: '.swiper-button-next',
                            prevEl: '.swiper-button-prev',
                        },

    // 如果需要滚动条
                        scrollbar: {
                            el: '.swiper-scrollbar',
                        },

                    })
                }

            },
        })
    var vm = new Vue({
            el: '#box',
            data: {
                datalist: [],
            },
            mounted() {
                setTimeout(() => {
    this.datalist = ['111', '222', '333']
                }, 2000)
            },


        })
    </script>
    </html>

    7 过滤器

    1
    2
    		 
    https://cn.vuejs.org/v2/guide/filters.html
    ele图片转换，猫眼电影图片转换
    		 
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    		 
    <!DOCTYPE html>
    <htmllang="en">
    <head>
        <metacharset="UTF-8">
        <title>Title</title>
        <scriptsrc="https://unpkg.com/axios/dist/axios.min.js"></script>
        <scriptsrc="js/vue.js"></script>
    </head>
    <body>
    <divid="box">
        <!--猫眼数据：https://m.maoyan.com/#movie-->
        <ul>
            <liv-for="data in datalist">
                <h2>{{data.nm}}</h2>
                <br>
    <!--            <img :src="data.img" alt="">-->
    <!--            <img :src="changePath(data.img)" alt="">-->
    <!--            过滤器-->
                <img:src="data.img | myChange"alt="">
            </li>
        </ul>
    </div>
    </body>
    <script>
    //定义过滤器
        Vue.filter('myChange',function(url){
    return url.replace('w.h','128.180')
        })
    var vm = new Vue({
            el: '#box',
            data: {
                datalist: [],
            },
            methods:{
                changePath(url){
    return url.replace('w.h','128.180')
                }
            },
            mounted() {
    //http://p0.meituan.net/w.h/movie/b16c1c0d5ac9e743c6ffbbf7eba900522725807.jpg
    //http://p0.meituan.net/128.180/movie/b16c1c0d5ac9e743c6ffbbf7eba900522725807.jpg
                axios.get("./json/test.json").then(res => {
    console.log(res.data.coming) // axios 自动包装data属性 res.data
    this.datalist = res.data.coming
                }).catch(err => {
    console.log(err);
                })
            },

        })
    </script>
    </html>
    每天逼着自己写点东西，终有一天会为自己的变化感动的。这是一个潜移默化的过程，每天坚持编编故事，自己不知不觉就会拥有故事人物的特质的。 Explicit is better than implicit.(清楚优于含糊)
  • 相关阅读:
    死磕Lambda表达式（四）：常用的函数式接口
    死磕Lambda表达式（三）：更简洁的Lambda
    死磕Lambda表达式（二）：Lambda的使用
    死磕Lambda表达式（一）：初识Lambda
    二叉树面试题：前中序求后序、中后序求前序
    五分钟后，你将真正理解MySQL事务隔离级别！
    详细解析Redis中的布隆过滤器及其应用
    详细解析Java虚拟机的栈帧结构
    面试真题：求100万内的质数
    C#-Xamarin的Android项目开发(一)——创建项目
  • 原文地址：https://www.cnblogs.com/kylin5201314/p/14155071.html
Copyright © 2011-2022 走看看