JAVA网络爬虫
HttpClient

导航

 
vue小案例

Vue小案例

轮播图的制作
<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
<div id="app">
    <!--  :一v-bind @一v-on  -->
    <!--  :src=指定图片的显示  @click="图片被点击时执行那个函数" -->
    <img :src="images[currentIndex].imgSrc" alt="" @click="imgHandler">
    <br />
    <!--@click="图片被点击时执行那个函数"-->
    <button @click="pervHandler">上一张</button>
    <button @click="nextHandler">下一张</button>
</div>

<script src="./vue.js"></script>
<script>
    new Vue({
        // 绑定标签
        el:"#app",
        // 属性都写在data里面
        data(){
            return {
                images: [
                    {id:1, imgSrc: "./images/1.jpeg"},
                    {id:2, imgSrc: "./images/2.jpeg"},
                    {id:3, imgSrc: "./images/3.jpeg"},
                    {id:4, imgSrc: "./images/4.jpeg"}
                ],
                currentIndex:0
            }
        },
        // 函数都写在methods里面
        methods:{
            pervHandler(){
                this.currentIndex--;
                if (this.currentIndex < 0){
                    this.currentIndex = 3;
                }

            },
            nextHandler(){
                this.currentIndex++;
                if (this.currentIndex == 4){
                    this.currentIndex = 0;
                }
            },

            imgHandler(e){
                // e.target就是被点击的那个对象
                console.log(e.target);
                console.log(this);
            }

        }
      // 组件创建完成, ajax vue的钩子函数
        created(){

            // setInterval( function(){
            //     // this 指向Windows
            //     console.log(this);
            // }, 1000)

      			// 图片每隔1秒轮播
            // this指向的问题   能用箭头函数  不要用es5的匿名函数
            // 你用了es5的匿名函数this指向了windows
            // 用es6的箭头函数this指向了定义setInterval父类就是vue
            setInterval( () => {
                // this 指向vue
                // console.log(this);
                this.currentIndex++;
                if (this.currentIndex == 4){
                    this.currentIndex = 0;
                }
            }, 1000)

            // let _this = this;
            // setInterval( function(){
            //     //_this 指向vue
            //     console.log(_this);
            // }, 1000)
        }
    })

</script>
</body>
</html>
Vue中使用ajax一般vue不用ajax用axios
<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        span.active{
            color: red;
        }
    </style>
</head>
<body>
<div id="app">
    <div>
        <!--v-for优先级最高   值      下标索引 绑定key这里能用id就用id, 没有id就用下标索引  绑定class currentIndex(vue的属性)==index(下标索引)为true就显示active这个属性  当它被点击时把下标索引和当前对象的id传递给这个函数-->
        <span v-for="(category, index) in categoryList" :key="category.id" :class="{active:currentIndex==index}" @click="handlerClick(index, category.id)">{{ category.name }} </span>
    </div>
</div>

<script src="./vue.js"></script>
<script src="./jquery.min.js"></script>
<script>
    new Vue({
        // 绑定标签
        el:"#app",
        // 属性都写在data里面
        data(){
            return {
                categoryList:[],
                currentIndex:0
            }
        },
        // 函数都写在methods里面
        methods:{
            handlerClick(index, id) {
                // 把接收到的index复制给currentIndex
                this.currentIndex = index;
                // 有了id在次发送请求
                $.ajax({
                    // `....${变量名}`用的es6里的模板字符串插值
                    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) => {
                    if (data.error_no == 0){
                        var data = data.data;
                        // 因为用了箭头函数 这是的this指向了vue 不在指向ajax对象
                        console.log(this);
                        let obj = {
                            id: 0,
                            name: "全部",
                            category: 0
                        };
                        this.categoryList = data;
                        // unshift是往数组第一项添加个元素
                        this.categoryList.unshift(obj);
                    }
                },
                error:function (err) {
                    console.log(err);
                }
            })
        }
    })

</script>
</body>
</html>
音乐播放器
<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        ul li.active{
            color: red;
        }
    </style>
</head>
<body>
<div id="music">
    <!-- @ended ended(audio自带的事件) 当mp3播放完成之后会自动调用该方法 -->
    <audio :src="musicData[currentIndex].songSrc" controls autoplay @ended="nextHandler"></audio>
    <ul>
        <li v-for="(item, index) in musicData" :key="item.id" :class="{active:currentIndex===index}" @click="handlerClick(index)">
            <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:{
            handlerClick(index){
                this.currentIndex = index;
            },
            nextHandler(){
              this.currentIndex++;
              if (this.currentIndex == 4){
                  this.currentIndex = 0;
              }
            }
        },
        created(){
            this.musicData = musicData;
        }
    })

</script>
</body>
</html>
posted on 2019-07-12 14:30  gmlgxx  阅读(98)  评论(0)    收藏  举报
 
博客园  ©  2004-2025
浙公网安备 33010602011771号 浙ICP备2021040463号-3