05. vue生命周期、自定义组件、指令

于 2021-02-20 23:26:02 发布
阅读量403 收藏
点赞数
分类专栏： vue 文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/weixin_49111957/article/details/113902262
版权

生命周期、swipper、自定义指令、过滤器

一、生命周期

生命周期 
1、beforeCreate
2、created
3、beforeMount
4、Mounted	（用的最多：向后端发送请求，定时器初始化）
5、beforeUpdate
6、updated
7、beforeDestory
8、destroyed	（组件销毁：给组件写一个定时器---》组件销毁，定时器清除）

代码演示：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.min.js"></script>

</head>
<body>
<div id="box">
    <child v-if="isShow"></child>
    <hr>
    <button @click="isShow=!isShow">点击删除/显示子组件</button>
</div>
</body>
<script>
    Vue.component('child', {
        template: `
        <div>
        子组件：{{name}}
        <button @click="name='aaa'">点击更新名字</button>
        </div>
        `,
        data() {
            return {
                t: null,
                name: 'ccc',
            }
        },
        beforeCreate() {
            console.log('beforeCreate')
        },
        created() {
            console.log('created')
        },
        beforeMount() {
            console.log('beforeMount')
        },
        mounted() {
            // 用的最多，向后端加载数据，创建定时器
            // 页面已经被vue实例渲染，data、methods已经更新
            console.log('mounted')
            // 起一个定时器，每隔三秒，打印一行
            this.t = setTimeout(function () {
                console.log('挂载完毕')
            }, 3000)
        },
        beforeUpdate() {
            console.log('beforeUpdate')
        },
        updated() {
            console.log('updated')
        },
        beforeDestroy() {
            console.log('beforeDestroy')
        },
        destroyed() {
            // 组件销毁，清理定时器
            clearTimeout(this.t)
            this.t = null
            console.log('destroyed')
        },
    })
    var vm = new Vue({
        el: '#box',
        data: {

            isShow: true
        },
        beforeUpdate() {
            console.log('根组件的---beforeUpdate')
        },
        updated() {
            console.log('根组件的---updated')
        }
    })
</script>
</html>

二、swiper学习

swiper是一款轻量级的轮播图插件
vue中的钩子函数：mounted和update

代码演示：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.min.js"></script>
    <link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css">
    <script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>
    <style>
        .swiper-container {
            width: 100%;
            height: 300px;
        }
    </style>
</head>
<body>
<div id="box">
    <div class="swiper-container">
        <div class="swiper-wrapper">
            <div class="swiper-slide" v-for="data in datalist"><img :src="data" alt=""></div>

        </div>
        <!-- 如果需要分页器 -->
        <div class="swiper-pagination"></div>

        <!-- 如果需要导航按钮 -->
        <div class="swiper-button-prev"></div>
        <div class="swiper-button-next"></div>

        <!-- 如果需要滚动条 -->
        <div class="swiper-scrollbar"></div>
    </div>
</div>
</body>
<script>
    var vm = new Vue({
        el: '#box',
        data: {
            datalist: []
        },
        mounted() {
            setTimeout(() => {
                // 如果不使用箭头函数，this指的就是function这个函数
                // 使用箭头函数以后，this指的就是上一层
                this.datalist = ['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',
                    'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1608290992859&di=af43561dae480cb423386ca71ce038d7&imgtype=0&src=http%3A%2F%2Fi0.hdslb.com%2Fbfs%2Farticle%2F5047f0d4f8625c00efaca5b48cb9a2edec8cc9b0.jpg',
                    'https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=2446696665,1069673795&fm=26&gp=0.jpg'
                ]
            }, 2000)
        },
        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>

三、自定义组件的封装

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>自定义组件封装</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.min.js"></script>
    <link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css">
    <script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>
    <style>
        .swiper-container {
            width: 60%;
            height: 400px;
        }
    </style>
</head>
<body>
<div id="box">
    <swiper>
        <div class="swiper-wrapper">
            <div class="swiper-slide" v-for="data in datalist"><img :src="data" alt=""></div>
        </div>
    </swiper>
    <hr>
    <swiper :key="datalist2.length">
        <div class="swiper-wrapper">
            <div class="swiper-slide" v-for="data in datalist2"><img :src="data" alt=""></div>
        </div>
    </swiper>
</div>
</body>
<script>
    Vue.component('swiper', {
        template: `
       <div class="swiper-container">
            <slot></slot>
            <div class="swiper-pagination"></div>
            <div class="swiper-button-prev"></div>
            <div class="swiper-button-next"></div>

        </div>
        `,
        mounted() {
            var mySwiper = new Swiper('.swiper-container', {
                // direction: 'vertical', // 垂直切换选项
                loop: true, // 循环模式选项

                // 如果需要分页器
                pagination: {
                    el: '.swiper-pagination',
                },

                // 如果需要前进后退按钮
                navigation: {
                    nextEl: '.swiper-button-next',
                    prevEl: '.swiper-button-prev',
                },
            })
        }
    })
    var vm = new Vue({
        el: '#box',
        data: {
            datalist: [],
            datalist2: [],
        },
        mounted() {
            setTimeout(() => {
                // 如果不使用箭头函数，this指的就是function这个函数
                // 使用箭头函数以后，this指的就是上一层
                this.datalist = ['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',
                    'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1608290992859&di=af43561dae480cb423386ca71ce038d7&imgtype=0&src=http%3A%2F%2Fi0.hdslb.com%2Fbfs%2Farticle%2F5047f0d4f8625c00efaca5b48cb9a2edec8cc9b0.jpg',
                    'https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=2446696665,1069673795&fm=26&gp=0.jpg'
                ]
                this.datalist2 = [
                    'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1608303123638&di=765cbf80b68c6cda63e05a3f41bd0b06&imgtype=0&src=http%3A%2F%2Fc.hiphotos.baidu.com%2Fbaike%2Fpic%2Fitem%2F8644ebf81a4c510fcb36fa696e59252dd52aa5d6.jpg',
                    'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1608303123638&di=40b665efab1dec267320277b20824e25&imgtype=0&src=http%3A%2F%2Fwx1.sinaimg.com%2Fmw690%2F7f4c3f1dgy1fu9hggmremj20j60ct40u.jpg',
                    'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1608303123638&di=5c580425640c96d136969521c043a91c&imgtype=0&src=http%3A%2F%2Ftva1.sinaimg.cn%2Fmw690%2F005C9K8Gly1fz732nwxx8j30go0m8770.jpg',
                    'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1608303123638&di=9d6ebd0a0373df7f9f223dc48a8fffe9&imgtype=0&src=http%3A%2F%2Fguaiweiwu.com%2Fwp-content%2Fuploads%2F2018%2F08%2Fsougoujietu18nian08yue10ri1830_16.jpg'
                ]
            }, 2000)
        },
        update(){
            
        },
    })
</script>
</html>

四、自定义指令

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>自定义指令</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.min.js"></script>
</head>
<body>
<div id="box">
    <div v-mystyle="'green'">我是div</div>
    <div v-mystyle="'red'">我是div</div>
    <div v-mystyle="color">我是div</div>
</div>
</body>
<script>
    Vue.directive('mystyle', {
        inserted(ev, color) {  // ev就是dom对象
            console.log(ev)
            console.log(color.value)
            ev.style.background = color.value
        },
        update(el, input) {
            el.style.background = input.value
        }
    })
    var vm = new Vue({
        el: '#box',
        data: {
            color: 'blue'
        },

    })
</script>
</html>

五、过滤器

vue代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script src="js/vue.js"></script>
</head>
<body>
<div id="box">
    <ul>
        <li v-for="item in datalist">
            <h2>影片名：{{item.nm}}</h2>
            <h2>主演：{{item.star}}</h2>
            <img :src="item.img | repUrl" alt="">
            <!--        <img :src="getUrl(item.img)" alt="">-->
        </li>
    </ul>
</div>
</body>
<script>
    Vue.filter('repUrl', function (url) {
        return url.replace('w.h', '120.180')
    })
    var vm = new Vue({
        el: '#box',
        data: {
            datalist: null
        },
        methods: {
            getUrl(url) {
                return url.replace('w.h', '120.180')
            }
        },
        mounted() {
            axios.get('http://127.0.0.1:5000').then(res => {
                console.log(res.data)
                this.datalist = res.data.coming
            }).catch(err => {
                console.log(err);
            })
        }
    })

</script>
</html>

后端flask代码：

import json
from flask import Flask, jsonify

app = Flask(__name__)


@app.route('/')
def index():
    with open('db/film.json', 'rt', encoding='utf-8') as f:
        dic = json.load(f)

    res = jsonify(dic)
    res.headers['Access-Control-Allow-Origin'] = "*"
    return res


if __name__ == '__main__':
    app.run()

json数据：

"coming": [
    {
      "id": 1330790,
      "haspromotionTag": false,
      "img": "http://p0.meituan.net/w.h/movie/88e54f3e670789ba1f08e48a5f1170c1188102.jpg",
      "version": "",
      "nm": "明天你是否依然爱我",
      "preShow": false,
      "sc": 0,
      "globalReleased": false,
      "wish": 223122,
      "star": "杨颖,李鸿其,黄柏钧",
      "rt": "2020-12-24",
      "showInfo": "2020-12-24 下周四上映",
      "showst": 4,
      "wishst": 0,
      "comingTitle": "12月24日 周四"
    },
    ...
]
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值