Vueday03

最新推荐文章于 2024-08-14 15:45:18 发布

做个好梦1997

最新推荐文章于 2024-08-14 15:45:18 发布

阅读量76

点赞数

文章标签： javascript 前端 vue.js

本文链接：https://blog.csdn.net/sadouxinever/article/details/128487662

版权

1.生命周期

<!-- 2、视图层 -->
    <div id="app">
        <!-- 插值表达式 -->
        {{msg}}
        <!-- v-model数据双向绑定，常用表单 -->
        <input type="text" v-model="msg">

    </div>
    <script>
        //    3、实例化
        const vm = new Vue({
            // 控制区域
            // el: '#app',
            // 存放数据
            data: {
                msg: 'hello Vue',

            },
            // 方法
            methods: {},
            // data中的数据methods中的方法，还没有被创建
            // 一般用于页面的重定向
            // 举例:当时收藏某页面时,页面发生更新后
            beforeCreate() {
                console.log('beforeCreate');
            },
            // 初始化已经完成，第一个可以操作data,methods的生命周期
            // 一般用于接口请求和数据初始化 
            created() {
                console.log('created');
                // 可以操作data中数据
                console.log(this.msg);
            },
            // 加载阶段
            // 挂载虚拟DOM
            beforeMount() {
                console.log('beforeMount');
                // debugger 语句调用任何可用的调试功能，例如设置断点。 
                //  如果没有调试功能可用，则此语句不起作用。
                debugger
            },
            // 真实的DOM，第一个操作DOM元素的生命周期
            mounted() {
                console.log('mounted');
            },
            // 运行阶段
            // 可以执行0次或多次
            // data中的数据是最新的，页面中还是旧的
            beforeUpdate() {
                console.log('beforeUpdate');
            },
            // data和页面中的都是最新的数据
            updated() {
                console.log('updated');
            },
            // 清空定时器以及页面监听
            beforeDestroy() {
                console.log('beforeDestroy');
            },
            // 销毁完成
            destory() {
                console.log('destory');
            }

        })
        vm.$mount('#app')
    </script>

2.vue resource

<!-- 2、视图层 -->
    <div id="app">
        <!-- 插值表达式 -->
        <img :src="imgSrc" alt="" srcset="">
        <img :src="item.imgUrlPc " alt="" srcset="" v-for="(item,index) in imgList" :key="item.id">
        <!-- 渲染页面 -->
        <ul>
            <li v-for="(item,index) in courseList" :key="item.courseId">
                <img :src="item.coverFileUrl" alt="">
                <div>{{item.courseTitle}}</div>
                <div>共{{item.orderBy}}节课，{{item.learningNum}}人报名</div>
                <div>免费</div>
            </li>
        </ul>
    </div>
    <script>
        //    3、实例化
        const vm = new Vue({
            // 控制区域
            el: '#app',
            // 存放数据
            data: {
                // 图片
                imgSrc: '',
                imgList: [],
                // 课程列表
                courseList: []


            },
            // 方法
            methods: {},
            // 一般用于接口请求和数据初始化
            created() {
                console.log(this);
                // 协议http和https+主机ip 域名+地址 number=渲染数量
                // get请求
                this.$http.get('http://wkt.shangyuninfo.cn/weChat/applet/course/banner/list?number=5')
                    .then(res => {
                        console.log(res);
                        this.imgSrc = res.data.data[0].imgUrlPc
                        this.imgList = res.data.data
                    })

                // post请求 application/json、application/x-www-form-urlencoded、multipart/form-data
                //  free属于 application/x-www-form-urlencoded 
                this.$http.post(' ', {
                    type: "free",
                    pageSize: 10,
                    pageNum: 1
                }, { emulateJSON: true }).then(res => {
                    console.log(res);
                    this.courseList = res.data.rows
                })

                this.$http.post('http://wkt.shangyuninfo.cn/weChat/applet/subject/list', {
                    enable: 1
                }).then(res => {
                    console.log(res);
                })
            }
        })

3.axios的使用

<div id='app'>
        <img :src="imgSrc" alt="">
        <img :src="item.imgUrlPc" alt="" v-for="(item,index) in imgList" :key="item.id">

        <ul>
            <li v-for="(item,index) in courseList" :key="item.courseId">
                <img :src="item.coverFileUrl" alt="">
                <div>{{item.courseTitle}}</div>
                <div>共{{item.orderBy}}节课，{{item.learningNum}}人报名</div>
                <div>免费</div>
            </li>
        </ul>
        <h2>精品课程</h2>

        <ul>
            <li v-for="(item,index) in boutiqueList" :key="item.courseId">
                <img :src="item.coverFileUrl" alt="">
                <div>{{item.courseTitle}}</div>
                <div>共{{item.orderBy}}节课，{{item.learningNum}}人报名</div>
                <div v-if="item.isFree==1">免费</div>
                <div v-else-if="item.isDiscount==1">{{item.discountPrice}} <del>{{item.coursePrice}}</del> </div>
                <div v-else>{{item.coursePrice}}</div>
            </li>
        </ul>

    </div>

    <script>
        const vm = new Vue({
            el: '#app',
            data: {
                imgSrc: '',
                imgList: [],
                courseList: [],
                boutiqueList: []
            },
            methods: {
                getList(type = 'free', pageSize = 10, pageNum = 1) {
                    let url = new URLSearchParams()
                    url.append('type', type)
                    url.append('pageSize', pageSize)
                    url.append('pageNum', pageNum)

                    return axios.post('http://wkt.shangyuninfo.cn/weChat/applet/course/list/type', url)
                }
            },
            created() {
                console.log(this);
                // 协议（http https） + 主机（ip 域名） + 地址
                // console.log();
                axios.get('http://wkt.shangyuninfo.cn/weChat/applet/course/banner/list?number=5').then(res => {
                    console.log(res);
                    this.imgSrc = res.data.data[0].imgUrlPc
                    this.imgList = res.data.data
                })
                // post请求 application/json、application/x-www-form-urlencoded、multipart/form-data
                //  free属于 application/x-www-form-urlencoded 
                // console.log(this.getList());
                this.getList().then(res => {
                    this.courseList = res.data.rows
                })

                this.getList('boutique', 5).then(res => {
                    this.boutiqueList = res.data.rows
                    // this.courseList = res.data.rows
                })


                axios.post('http://wkt.shangyuninfo.cn/weChat/applet/subject/list', {
                    enable: 1
                }).then(res => {
                    console.log(res);
                })
            }
        })
    </script>

4.轮播

  <div id='app'>
        <div class="swiper-container">
            <div class="swiper-wrapper">
                <div class="swiper-slide" v-for="(item,index) in imgList">
                    <img :src="item.imgUrlPc" alt="">
                </div>
                <!-- <div class="swiper-slide">Slide 2</div>
                <div class="swiper-slide">Slide 3</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>

    <script>
        const vm = new Vue({
            el: '#app',
            data: {
                imgList: []
            },
            methods: {
            },
            created() {
                axios.get('http://wkt.shangyuninfo.cn/weChat/applet/course/banner/list?number=5').then(res => {
                    this.imgList = res.data.data
                    // 在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法，获取更新后的 DOM。
                    this.$nextTick(
                        () => {
                            var mySwiper = new Swiper('.swiper-container', {
                                // direction: 'vertical', // 垂直切换选项
                                loop: true, // 循环模式选项
                                speed: 10,
                                autoplay: true,
                                delay: 10,

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

                                // 如果需要前进后退按钮
                                navigation: {
                                    nextEl: '.swiper-button-next',
                                    prevEl: '.swiper-button-prev',
                                },

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

    </script>

5.vue动画

<style>
        #app {
            width: 600px;
            margin: auto;
        }

        .v-enter {
            transform: translateX(500px);
        }

        .v-enter-to {
            transform: translateX(0);
        }

        .v-enter-active {
            transition: all 2s;
        }

        .v-leave {
            transform: translateX(0);
        }

        .v-leave-to {
            transform: translateX(-500px);
        }

        .v-leave-active {
            transition: all 2s;
        }

        /* 向左是负的 */
        .msg-enter {
            transform: translateX(-500px);
        }

        .msg-enter-to,
        .msg-leave {
            transform: translateX(0);
        }

        .msg-enter-active,
        .msg-leave-active {
            transition: all 2s;
        }

        .msg-leave-to {
            transform: translateX(500px);
        }
    </style>
</head>

<body>
    <!-- 2、视图层 -->
    <div id="app">
        <button @click="flag=!flag">隐不隐藏</button>
        <transition>

            <div v-show="flag"> {{msg}}</div>
        </transition>
        <transition name="msg">
            <div v-show="flag">
                {{msg}}
            </div>
        </transition>
    </div>
    <script>
        //    3、实例化 
        const vm = new Vue({
            // 控制区域
            el: '#app',
            // 存放数据
            data: {
                flag: true,
                msg: 'vue动画',
                html: ''

            },
            // 方法
            methods: {
                // changeFlag() {
                //     this.flag = !this.flag
                // }
            }
        })

    </script>

6.第三方css动画库

<div id='app'>
        <button @click="show = !show">
            Toggle render
        </button>
        <transition name="custom-classes-transition" enter-active-class="animate__animated animate__fadeInLeftBig"
            leave-active-class="animate__animated animate__bounceInDown">
            <p v-if="show">hello</p>
        </transition>
    </div>

    <script>
        const vm = new Vue({
            el: '#app',
            data: {
                show: true
            },
            methods: {
            }
        })
    </script>

7.动画钩子函数

const vm = new Vue({
            el: '#app',
            data: {
                isshow: true
            },
            methods: {
                beforeEnter(el) { // 动画进入之前的回调
                    console.log(el);
                    // 给ok设置样式
                    el.style.transform = 'translateX(500px)';
                },
                enter(el, done) { // 动画进入完成时候的回调
                    console.log(done);
                    // 8.动画钩子函数.html:40 ƒ () {
                    // if (!called) {
                    //     called = true;
                    //     fn.apply(this, arguments);
                    // }

                    // 必须要加的
                    el.offsetWidth;
                    el.style.transform = 'translateX(0px)';
                    done();
                },
                afterEnter(el) { // 动画进入完成之后的回调
                    // this.isshow = !this.isshow;
                }

            }
        })

8.transition-group

<style>
        #app {
            width: 600px;
            margin: auto;
        }

        .v-enter {
            transform: translateX(500px);
        }

        .v-enter-to {
            transform: translateX(0);
        }

        .v-enter-active {
            transition: all 2s;
        }

        .v-leave {
            transform: translateX(0);
        }

        .v-leave-to {
            transform: translateX(-500px);
        }

        .v-leave-active {
            transition: all 2s;
        }


        .v-move {
            transition: all 0.8s ease;
        }

        .v-leave-active {
            position: absolute;
        }

        .v-enter-active {
            position: absolute;
        }
    </style>
</head>

<body>
    <div id='app'>
        <button @click="flag=!flag">flag</button>
        <button @click="push">push</button>

        <transition-group tag="ul">
            <li v-for="(item,index) in list" :key="index" v-if="flag">
                {{item}}
            </li>
        </transition-group>
    </div>

    <script>
        const vm = new Vue({
            el: '#app',
            data: {
                flag: true,
                list: [1, 2, 3, 4, 5, 6]
            },
            methods: {
                push() {
                    this.list.push(this.list[this.list.length - 1] + 1)
                }
            }
        })
    </script>