03-vue(cloak,once,pre指令,axios的get,post,config请求,处理请求回数据,生命周期2,数组forEach,map,filter,findIndex,find方法)

大力99

已于 2022-04-14 15:24:30 修改

阅读量374

点赞数

分类专栏：笔记文章标签： vue.js

于 2020-05-06 21:52:53 首次发布

本文链接：https://blog.csdn.net/Tangoneone/article/details/105959944

版权

笔记专栏收录该内容

67 篇文章 7 订阅

订阅专栏

01-v-cloak指令(了解)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
      /* 通过属性选择器获取该属性所在标签来改变样式  */
        div[v-cloak]{
            display: none
        }
    </style>
</head>
<!-- 
    v-cloak指令:
    用于vue进行实例渲染完成前这段时间标签的样式处理，
    像下面面代码就不至于让用户在vue渲染完成前看到{{msg}}这些字符
    
    数据还没来的时候给标签加一个v-cloak这个属性（这时候可通过这个属性控制标签在vue实例化前的样式了）
    在vue实例化完成之后，v-cloak属性会消失
 -->
<body>
    <div id='app'>
        <div v-cloak>{{msg}}</div>
    </div>

    <script src='./vue.js'></script>
    <script>
        //假如需要消耗一秒钟才能拿到数据
        setTimeout(() => {
            new Vue({
                el: '#app',
                data: {
                    msg: '嘻嘻哈哈'
                }
            });
        },1000)
    </script>
</body>
</html>

效果展示说明:
假如有延迟网络不好啥的,在div里面可能会展示{{msg}}字符,用v-cloak这个指令就跟隐身斗篷一样,数据出来就消失了,在延迟出来{{msg}}的那刻,可以用css样式用display:none来控制,等数据出来之后,这个v-cloak属性会自动消失

02-v-once指令(了解)

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<!-- v-once指令:
    让它所在标签只接受一次渲染，渲染一次后，后面再有值的改变它也不会再变化 .
-->
<body>
    <div id='app'>
        <button @click="btnCclick">点我</button>
        <div v-once>{{msg}}</div>
        <!-- 加了v-once 之后再点按钮点击变化msg,不会有变化,一直是'这是一个寂寞的天'-->
    </div>

    <script src='./vue.js'></script>
    <script>
        new Vue({
            el: '#app',
            data: {
                msg: '这是一个寂寞的天'
            },
            methods: {
                btnCclick() {
                    this.msg = Math.random() * 1000
                }
            }
        });
    </script>
</body>
</html>

效果展示说明: 一直点button改变msg的值想重新渲染在页面上都不可以实现,
这个指令就是让所在标签只渲染一次

03-v-pre指令(了解)

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <!-- pre标签 -->
   <pre>
        哈哈哈, 波波     是二哈
        千里是傻瓜
    </pre>
    <!-- ------------------------------------------ -->
     <!-- 
         v-pre指令
         原样输出,一般学习网站输出一些语法的时候会用到
      -->
    <div id='app'>
        <div v-pre>{{msg}}</div>
        <!-- 不会出现'这是一个寂寞的天',在页面上就出现{{msg}} -->
    </div>

    <script src='./vue.js'></script>
    <script>
        new Vue({
            el: '#app',
            data: {
                msg: '这是一个寂寞的天'
            }
        });
    </script>
</body>
</html>

效果展示:,之前学过pre这个标签预览出来会保留他原样的空格符号,原样输出
下面用v-pre渲染数据到页面上,也不会渲染出来,对他而言不存在变量什么的,不会解析出msg变量,标签里面所有的内容都是纯文本内容
在这里插入图片描述

04-axios之get请求

为什么用axios?

原生的ajax过于麻烦，调用不方便。
jquery相比ajax过于宠大，我们有时候公公只需要一个网络接口请求功能。
axios只做接口请求，体积较小，网络加载会快些，而且功能还挺丰富如（请求拦截，数据返回拦截等。后面会讲）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<!-- 
        axios使用
        1.导包
        2.使用
     axios的get请求. 
 -->
<body>
    <div id='app'>
        <button @click="btnCclick">点我使用axios发送get请求</button>
    </div>
   <script src='./vue.js'></script>
    <!-- 1.导包,也可以使用cdn地址 -->
    <script src="./axios.js"></script>
    <script>
        var app = new Vue({
            el: '#app',
            data: {

            },
            methods: {
                btnCclick() {
                    // 2.使用
                    //2.1参数直接卸载url接口地址后面(这个接口可以获得10条笑话)
                    axios.get('https://autumnfish.cn/api/joke/list?num=10').then((res) => {
                        console.log(res);
                    }, (err) => {
                        console.log(err);
                    });

                    // 2.2请求参数写在params里面(这个接口可以获得5条笑话)
                    axios.get('https://autumnfish.cn/api/joke/list', {
                        params: {
                            num: 5
                        }
                    }).then((res) => {
                        console.log(res);

                    }).catch((err) => {
                        console.log(err);

                    })

                }
            }
        });
    </script>
</body>

</html>

效果展示说明: 发送axios的get请求,(两种写参数的方式),响应笑话回来

05-axios之post请求

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id='app'>
        <button @click="btnCclick">点我使用axios发送post请求</button>
    </div>

    <script src='./vue.js'></script>
    <script src="./axios.js"></script>
    <script>
        var app = new Vue({
            el: '#app',
            data: {

            },
            methods: {
                btnCclick() {
                    //用axios发送ajax的post请求
                    axios.post('https://autumnfish.cn/api/user/reg', {
                        username: 'tangzhi1'
                    }).then((res) => {
                        console.log(res);
                    }).catch((err) => {
                        console.log(err);
                    })
                }
            }
        });
    </script>
</body>

</html>

**效果展示说明:**请求参数写在请求接口后面的一个对象里面

06-axios之config配置模式使用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id='app'>
        <button @click="btnGet">点我发送get请求</button>
        <button @click="btnPost">点我发送post请求</button>
    </div>

    <script src='./vue.js'></script>
    <!-- 1.导入axios -->
    <script src="./axios.js"></script>
    <script>
        var app = new Vue({
            el: '#app',
            data: {

            },
            methods: {
                // 1.发送get请求
                btnGet() {
                    axios({
                        method: 'get',
                        // 参数可以直接写请求接口后面
                        // url: 'https://autumnfish.cn/api/joke/list?num=10',
                        // 参数也可以写params参数对象里面
                        url: 'https://autumnfish.cn/api/joke/list',
                        params: {
                            num: 5
                        }

                    }).then((res) => {
                        console.log(res);

                    }).catch((err) => {
                        console.log(err);

                    })
                },
                //2.post请求
                btnPost() {
                    axios({
                        method: 'post',
                        url: 'https://autumnfish.cn/api/user/reg',
                        data: {
                            username: 'tangya555'
                        }
                    }).then((res) => {
                        console.log(res);

                    }).catch((err) => {
                        console.log(err);

                    })
                },
            }
        });
    </script>
</body>

</html>

效果展示说明: 就类似jquery中,$.ajax发送请求一样,里面的method千万不要加s,看是get还是post方式发送请求,
是get就用params对象里面写参数,是post就用data对象里面写参数

07-axios请求回来的数据处理

!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id='app'>
        <button @click="btnClick">点我用axios发送get请求</button>
        <ul>
            <li v-for="(item, index) in list" :key="index">{{item}}</li>
        </ul>
    </div>

    <script src='./vue.js'></script>
    <!-- 导入的是cdn网络的axios的js地址 -->
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script>
        var app = new Vue({
            el: '#app',
            data: {
                list: []
            },
            methods: {
                //了解异步请求
                // btnClick() {
                //     //  用axios发送ajax的get请求
                //     axios.get('https://autumnfish.cn/api/joke/list?num=10').then(function (res) {
                //         console.log('456');
                //         console.log(res);
                //     }).catch(function (err) {
                //         console.log(err);
                //     })
                //     console.log('123');
                //     //1.先打印123,再打印456,再打印res请求回来的数据
                // },


                // btnClick() {
                //     //  用axios发送ajax的get请求
                //     axios.get('https://autumnfish.cn/api/joke/list?num=10').then(function (res) {
                //         console.log('456');
                //         console.log(res);
                //     }).catch(function (err) {
                //         console.log(err);
                //     })

                //      //  用axios发送ajax的get请求
                //      axios.get('https://autumnfish.cn/api/joke/list?num=10').then(function (res) {
                //         console.log('123');
                //         console.log(res);
                //     }).catch(function (err) {
                //         console.log(err);
                //     })
                //    //不一定先打印123与res请求回来的数据,
                // // 还是456与res请求回来的数据
                // // (因为他们两都是异步请求,谁快谁先)

                // },

                //这个就是在第一个请求中要用到第二个请求中的数据可以这样写
                get() {
                    //  用axios发送ajax的get请求
                    axios.get('https://autumnfish.cn/api/joke/list?num=10').then(function (res) {
                        console.log('123');
                        console.log(res);
                    }).catch(function (err) {
                        console.log(err);
                    })
                },
                btnClick() {
                    //  用axios发送ajax的get请求
                    axios.get('https://autumnfish.cn/api/joke/list?num=10').then(function (res) {
                        console.log('456');
                        console.log(res);
                        this.get()
                    }).catch(function (err) {
                        console.log(err);
                    })

                },


                //-----------------------------------------------------------------------------------
               //把响应回来的数据存到data里面时
                // 1.解决办法: 使用箭头函数
                 btnClick() {
                    //  用axios发送ajax的get请求
                     axios.get('https://autumnfish.cn/api/joke/list?num=10').then((res) => {
                         console.log(res);
                        //要把这些返回的笑话数据,显示在页面上.
                       //把返回的笑话数据 保存在list数组中.  
                         this.list = res.data.jokes
                     }).catch((err) => {
                        console.log(err);

                    })
                 },

                // 2.解决办法,把指向vue实例的this用_this给存起来
                 btnClick() {
                     var _this=this
                     //用axios发送ajax的get请求
                     axios.get('https://autumnfish.cn/api/joke/list?num=10').then(function(res) {
                         console.log(res);
                         //要把这些返回的笑话数据,显示在页面上.
                         //把返回的笑话数据 保存在list数组中.
                         _this.list = res.data.jokes
                     }).catch(function(err) {
                         console.log(err);
                     })
                 }
            }
        });
    </script>
</body>
</html>

效果展示: 将请求回来的数据渲染在页面上:把请求回来的数据赋给data里的变量,再利用data里面的数据渲染到页面在这里插入图片描述

08-vue生命周期函数之beforeCreate,create函数

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<!-- 
    每一个生命周期函数都是回调函数,都是到了时间自动触发调用的
    每一个生命周期函数都是methods的兄弟,不是儿子
    beforeCreate:
         创建前,还没有完成data和methods的创建
         所以不能再这个生命周期函数访问data和methods
         实际开发中基本不用
    created:
         创建完成,可以调用data和methods了
        这个生命周期函数是那么多生命函数周期里第一个可以访问data和methods的生命周期函数
         实际开发中用的比较多

         这两个生命周期函数只会执行一次
 -->
<body>
    <div id='app'>

    </div>
    <script src='./vue.js'></script>
    <script>
        var app = new Vue({
            el: '#app',
            data: {
                msg: '这是一个寂寞的天'
            },
            methods: {
                sayHi() {
                    console.log('我是sayhi方法');
                }
            },
            beforeCreate() {
                console.log(this.msg); //undefined
                this.sayHi(); //this.sayHi is not defined

            },
            created() {
                console.log(this.msg);//这是一个寂寞的天
                this.sayHi();//我是sayhi方法
                //一般会在这里发送ajax的axios请求
            }
        });
    </script>
</body>
</html>

效果展示说明: 生命周期函数有beforeCreat与created,beforeMount与mounted,beforeUpdate与updated,beforeDestroy与destroyed这些函数,这里先讲了beforeCreat与created

09-完整网络版英雄搜索案例

 <!-- 
        分析: 
        1.一进来就应该有列表数据
          所以应该在生命周期函数created里面发送ajax请求,获取列表数据. 
          把获取到的列表数据给保存起来,存在一个heroList数组中. 
        2.左侧列表显示. 
          li标签  v-for渲染.  处理active类   点击事件给currentIndex赋值

        3.详情显示
          3.1 发送ajax请求获取英雄的详情. 保存到heroInfo中. 
              我们是写在一个getInfo方法中. 
              这个方法在created生命周期函数发送ajax请求成功的回调函数里面
          3.2 一个个的渲染. 
              英雄名字  英雄图片  英雄特征  英雄故事
        4.点击左侧英雄列表
          也要发送ajax请求,获取当前的英雄信息. 

        5.搜索功能
          5.1 input框  双向绑定v-model  @keyup.enter="search搜索事件"
          5.2 搜索按钮  @click="search搜索事件"
          5.3 search搜索事件
              遍历heroList数组
              判断每一项的name 是否包含了 输入框输入的搜索关键字inputValue
              如果你包含了就返回当前的索引,这个索引就是要显示详情的索引.
              
        6.优化
          6.1 如果没有搜到数据,就显示暂无数据
          6.2 左侧列表在搜索的时候 不应该显示全部英雄, 而是英雄显示包含搜索词的英雄. 
     -->
    <div id="app">
        <div class="nav">
            <span>英雄列表</span>
            <button class="btn" @click="search">搜 索</button>
            <input class="search" type="text" @keyup.enter="search"
            v-model="inputValue" placeholder="请输入英雄名称进行搜索">
        </div>
        <div class="content" v-if="currentIndex != -1">
            <!-- 人物列表 -->
            <ul class="list">
                <li class="item" :class="{active:currentIndex == index}" 
                @click = "liClick(index)"
                v-if="heroList[index].name.includes(searchValue)"
                v-for="(item, index) in heroList" :key="index">{{item.name}}</li>
            </ul>
            <!-- 人物详情 -->
            <div class="info">
                <div class="name">英雄姓名:{{heroInfo.name}}</div>
                <div class='img'>
                    <img :src="heroInfo.img" alt="">
                </div>
                <div class="tags">
                    <h5>英雄特征：</h5>
                    <span v-for="(item, index) in heroInfo.roles" :key="index">{{item}}</span>
                </div>
                <div class="story" v-html="heroInfo.story">英雄故事</div>
            </div>
        </div>
        <div class="noData" v-else>暂无数据</div>
    </div>
    <script src="vue.js"></script>
    <script src="./axios.js"></script>
    <script>
        new Vue({
            el: "#app",
            data: {
                //搜索框输入的搜索关键字 中转站
                searchValue:"",
                //搜索框输入的搜索关键字
                inputValue:"",
                //当前选中的左侧li标签索引. 
                currentIndex:0,
                //保存英雄列表数据的数组
                heroList:[],
                //保存英雄详细信息的数据
                heroInfo:{}
            },
            methods: {
                //左侧列表单击事件
                liClick(index){
                    this.currentIndex = index;
                    //调用这个getInfo()方法,获取的是当前点击的这个英雄的详情. 
                    this.getInfo();
                },
                //获取某个英雄的详细信息
                getInfo(){
                    axios({
                        method:'get',
                        url:'https://autumnfish.cn/api/lol/info',
                        params:{
                            id: this.heroList[this.currentIndex].id
                        }
                    }).then((res)=>{
                        console.log(res);
                        //把返回的英雄详细信息给保存起来. 
                        this.heroInfo = res.data.data;
                    });
                },
                //搜索事件
                search(){
                    //给搜索关键字 中转场变量 赋值
                    this.searchValue = this.inputValue;

                    //遍历heroList数组, 使用的是for循环的方式. 
                    // for(let i = 0; i<this.heroList.length; i++){
                    //     //判断
                    //     if(this.heroList[i].name.includes(this.inputValue)){
                    //         this.currentIndex = i;
                    //         //重新调用getInfo()方法. 
                    //         this.getInfo();
                    //         return;
                    //     }
                    // }

                    //遍历heroList数组,使用的是findIndex方法.
                    //如果搜索找不到数据会返回-1 .  
                    this.currentIndex = this.heroList.findIndex((item,index)=>{
                        return item.name.includes(this.inputValue);
                    });
                    //如果搜索到了内容,再去请求该英雄的详情. 
                    if(this.currentIndex != -1){
                        this.getInfo();
                    }
                }
            },
            //创建后的生命周期函数,可以访问data和methods
            created() {
                //发送ajax请求.
                axios({
                    method:'get',
                    url:'https://autumnfish.cn/api/lol/search',
                }).then((res)=>{
                    console.log(res);
                    //把请求回来的英雄列表数据给保存起来 
                    this.heroList = res.data.data;

                    //调用getInfo()方法
                    this.getInfo();
                }) 
            },

        })
    </script>

效果展示: 与前面一篇写的完整版英雄搜索案例一样,不过前面写的是死数据,这次是网络版发送axios得来的数据…
1.打开页面点击左侧的列表中任何英雄中间页面会显示对象的英雄名图片技能以及故事,
2.搜索或者按下回车英雄名中的某个字去搜,可以出现对应的所有的英雄名在左侧列表,并显示左侧列表中第一个英雄对应的信息显示在中间页面
3.如果在输入框输入类似123或者不属于英雄名中的字,是搜不到相关英雄的,那就中间页面显示"暂无数据"
在这里插入图片描述

10-数组forEach方法(补充)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
         //forEach
        //用来遍历数组的
        //item是遍历出来的每一个数组元素. index是对应的下标.
        //forEach不能返回内容,没有返回值 
        //也不能使用return结束forEach,也就是说forEach一定要把数组遍历完. 
        //你使用return,结束的是当前本次遍历.  
        var arr = ["莎莎", "卡莎", "西卡", "东卡", "哈卡哈"];
        var currentIndex;
        arr.forEach((item, index) => {
            //console.log(item,index);
            //return item.includes('卡');

            if (item.includes('卡')) {
                currentIndex = index;
                return;
            }
            console.log('哈哈');

        });
         console.log(currentIndex);
        //打印哈哈
              // 4
    </script>
</body>
</html>

11-数组map方法(补充)

    <script>
         //map
        //返回数组每一项经过计算(处理)后的新的值. 如果没有返回,那就返回undefined. 
        //eg01: 
        var arr1 = [10,20,30,40,50];
        var arrNew1 = arr1.map((item,index)=>{
            //console.log(item,index);
            return item*2;
        });
        console.log(arrNew1);//[20, 40, 60, 80, 100]

        //eg02: 
        var arr2 = [{name:"树树",age:18},{name:"草草",age:28},{name:"花花",age:38}];
        var arrNew2 = arr2.map((item,index)=>{
            //返回值arrNew是: 每一项的name组成的一个新数组. 
           // return item.name;//['树树','草草','花花']

            //返回值arrNew是: 由对象组成的数组,对象是经过处理后的对象
            // return {
                 name:item.name+"二货",
                 age:item.age*2,
                 gender:"男"
             }
        });
        console.log(arrNew2);
        //[{name: "树树二货", age: 36, gender: "男"},{name: "草草二货", age: 56, gender: "男"},{name: "花花二货", age: 76, gender: "男"}]

         //ps:返回的东西就是新数组里面的每一项(对老数组里的项做些计算之后的)
       </script>

12-数组filter方法(补充)

     <script>
        //filter
        //过滤数组的. 如果条件成立就会返回该项
        //eg01: 
        var arr3 = [1,2,3,4,5,6,7,8,9,10];
        var arrNew3 = arr3.filter((item,index)=>{
            //console.log(item,index);
            
            //返回值arrNew是: 条件成立的每一项组成的一个新数组. 
            return item % 2 == 0;
        });
        console.log(arrNew3);//[2, 4, 6, 8, 10]
 
        //ps:返回的东西就是新数组里面的每一项(老数组中符合条件的)
     </script>

13-数组findIndex方法(补充)

<script>
        //findIndex
        //用于数组的查找,查找符合条件的数据的下标
        //如果查到了就返回当前元素的下标, 如果找不到就返回-1. 

        var arr = ["莎莎", "卡莎", "西卡", "东卡", "哈卡哈"];
        var currrentIndex = 0;

        currrentIndex = arr.findIndex((item,index)=>{
            //console.log(item,index); //item是每一项,index是每一项对应的下标. 

            return item.includes('卡');
            //true就返回该item的index,而且中止循环
            //false继续找下去,找到true为止

        });

        console.log(currrentIndex);//1
 </script>

14-数组find方法(补充)

<script>
        //find
        //用于数组的查找,查找符合条件的数据
        //如果查到了就返回当前元素, 如果找不到就返回undefined 

        var arr = ["莎莎", "卡莎", "西卡", "东卡", "哈卡哈"];
        
         let target = arr.find(item=>{
            //console.log(item,index); //item是每一项,index是每一项对应的下标. 

            return item.includes('卡');
            //true就返回该item,而且中止循环
            //false继续找下去,找到true为止,一直没找到就返回undefined

        });

        console.log(target );// "卡莎"
 </script>

15 其他数组方法

let arr =[1,2,3,4,5,6,7,8,9]
// for in 数组对象都可
for(let i in arr){
  // i是key
  console.log(arr[i]) // 1,2,3,4,5,6,7,8,9
} 

// for of
for(let i of arr){
  // i是值并不是key，可以中断
  if(i>5){
    break
  }
  // i是key
   console.log(i) // 1,2,3,4,5
} 

// every,数组每一项执行指定函数，如果所有的项执行结果都为true的话，最终返回true
let result2= arr.every(item=>{
  // console.log(item)
  return item> 0
})

console.log(result2) // true

// some,数组每一项执行指定函数，只要有一项执行结果都为true的话，最终返回true
let result = arr.some(item=>{
  return item> 5
})

console.log(result) // true

// reduce的用法
let result3= arr.reduce((sum,item)=>{
  // console.log(sum,item)
  return sum+item
},0)

console.log(result3) // 45(1加到9)


let result4 = arr.reduce((yinzi,item)=>{
  return yinzi*item
},1)
console.log(result4) // 362880(1乘到9)


// findIndex与find一起用找到 满足条件那项的下标 以及 那项
const arr1 = [
				{ id: 1, value: "白色" },
				{ id: 2, value: "黑色" },
				{ id: 3, value: "粉色" }
			]
let index
const result5 = arr1.find((v,i)=>{
   if (v.id==2) {
     return (index = i), true
   }
})
console.log(index) // 1
console.log(result5) // console.log(result5)

大力99

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
03-vue(cloak,once,pre指令,axios的get,post,config请求,处理请求回数据,生命周期2,数组forEach,map,filter,findIndex,find方法)

01-v-cloak指令(了解)<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <tit...
复制链接

扫一扫