vue应用示例

1 . 实现轮播图

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div id="app">
    <img :src="images[currentIndex].imgSrc" alt="" @click='imgHandler'>
    <br>
    <button @click='prevHandler'>上一张</button>
    <button @click='nextHandler'>下一张</button>

</div>
<script src="./vue.js"></script>
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<script>
    let vm = new Vue({
        el: '#app',
        data() {
            return {
                images: [
                    {id: 1, imgSrc: './images/1.jpg'},
                    {id: 2, imgSrc: './images/2.jpg'},
                    {id: 3, imgSrc: './images/3.jpg'},
                    {id: 4, imgSrc: './images/4.png'}

                ],
                currentIndex: 0
            }
        },
        methods: {
            nextHandler(e) {
                this.currentIndex++;
                //更改图片地址
                if (this.currentIndex == 4) {
                    this.currentIndex = 0;
                }
            },
            prevHandler(e) {

            },
            imgHandler(e) {
                console.log(e.target);
                console.log(this);
            }
        },
        //组件创建完成， ajax   vue的钩子函数
        created() {
            //this指向问题  能用箭头函数 不要用匿名函数
            setInterval(() => {
                console.log(this);
                this.currentIndex++;
                if (this.currentIndex == 4) {    // 当索引为4的时候,让索引变成1,这样可以循环
                    this.currentIndex = 0;
                }
            }, 2000);


        }
    })
</script>
</body>
</html>

代码

　　效果 :

2 . vue 中使用ajax( created 是组件创建完成时执行)

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
        span.active{
            color:red;
        }
    </style>

</head>
<body>
<div id="app">
   <div>
       <span @click = 'handlerClick(index,category.id)' v-for = '(category,index) in categoryList' :key = 'category.id' :class = '{active:currentIndex==index}'>
           {{category.name}}
       </span>

       <ul>
           <li></li>
       </ul>
   </div>
</div>
<script src="./vue.js"></script>
<!--axios-->
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<script>
    let vm = new Vue({
        el: '#app',
        data() {
            return {
                categoryList:[],
                currentIndex:0
            }
        },
        methods: {
            handlerClick(i,id){
                this.currentIndex = i;
                //发起请求
                $.ajax({
                    url:`https://www.luffycity.com/api/v1/courses/?sub_category=${id}`,
                    type:'get',
                    success:(data) => {
                       var data = data.data;
                       console.log(data);
                   }
                })
            }
        },
        //组件创建完成， ajax   vue的钩子函数
        created() {
            //this指向问题  能用箭头函数 不要用匿名函数

            $.ajax({
                url:"https://www.luffycity.com/api/v1/course_sub/category/list/",
                type:"get",
                success: (data) => {
                    console.log(data);
                    if (data.error_no === 0){
                        var data = data.data;
                        let obj = {
                            id:0,
                            name:'全部',
                            category:0
                        }
                        this.categoryList = data;
                        this.categoryList.unshift(obj)

                    }
                },
                error:function (err) {
                    console.log(err);
                }
            })

        }
    })
</script>
</body>
</html>

3 . 实现音乐播放器

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
        ul li.active{
            background-color: darkcyan;
        }
    </style>
</head>
<body>
<div id="music">
    <!--@ended 播放完成 会自动调用该方法-->
    <!--<audio :src="musicData[currentIndex].songSrc" controls autoplay @ended = 'nextHanlder'></audio>-->
    <ul>
        <li @click = 'songHandler(index)' v-for = '(item,index) in musicData' :key="item.id" :class = '{active:index===currentIndex}'>
            <h2>歌手：{{ item.author }}</h2>
            <p>歌名：{{ item.name }}</p>
        </li>
    </ul>
</div>
<script src="./vue.js"></script>
<script>
    var musicData = [{
        id: 1,
        name: '于荣光 - 少林英雄',
        author: '于荣光',
        songSrc: './static/于荣光 - 少林英雄.mp3'
    },
        {
            id: 2,
            name: 'Joel Adams - Please Dont Go',
            author: 'Joel Adams',
            songSrc: './static/Joel Adams - Please Dont Go.mp3'
        },
        {
            id: 3,
            name: 'MKJ - Time',
            author: 'MKJ',
            songSrc: './static/MKJ - Time.mp3'
        },
        {
            id: 4,
            name: 'Russ - Psycho (Pt. 2)',
            author: 'Russ',
            songSrc: './static/Russ - Psycho (Pt. 2).mp3'
        }
    ];

    new Vue({
        el: '#music',
        data() {
            return {
                musicData:[],
                currentIndex:0
            }

        },
        methods:{
            songHandler(i){
                this.currentIndex = i;
            },
            // nextHanlder(){
            //     this.currentIndex++;
            // }
        },

        created(){
            this.musicData = musicData
        }
    })
</script>
</body>
</html>

代码

posted on 2018-12-01 15:55 二十四桥_明月夜阅读(317) 评论(0) 收藏举报

刷新页面返回顶部

夜

vue应用示例

导航

公告