Vue基础Day02判断循环_其它指令_axios

最近在重写 vue 基础讲义，欢迎大爷大娘们留言【批评斧正】
记得留言点赞，爱你们，么么哒：）~~

一.核心内容

1.条件与循环指令

1.1 v-for(循环)

可以用 v-for 遍历数据，并循环生成所在的标签

1.1.1 遍历数组

语法：v-for="(item,index) in array
参数：可选
- item - 数组的元素
- index - 元素的下标
注意：参数名可自己取

<div id="app">
    <ul>
        <li>遍历数组：</li>
        <li v-for="(item,index) in myArry">下标：{{index}} -> 值：{{item}}</li>
    </ul>
</div>

<script src="./vue.js"></script>
<script>
    let vm = new Vue({
        el: "#app",
        data: {
            myArry: ['P城', 'Y城', '军事基地', '研究所', 'G港']
        }
    });
</script>

详解：v-for 会根据数组中的元素生成自己所在的标签，添加到dom数中，在页面上显示

遍历数组

1.1.2 遍历对象

语法： v-for="(value，key，index in object)
参数：可选
- value - 对象属性值
- key - 对象属性名
- index - 对象属性序号(从0开始)

<div id="app">
    <ul>
        <li>遍历对象：</li>
        <li v-for="(value,key,index) in dogObj">{{value}} -> {{key}} -> {{index}}</li>
    </ul>
</div>

<script src="./vue.js"></script>
<script>
    let vm = new Vue({
        el: "#app",
        data: {
            dogObj: {
                name: "Ruiky",
                age: 2,
                gender: true
            }
        }
    });
</script>

1.1.3 遍历字符串

语法:v-for="(item,index) in array
参数：可选
- item - 数组的元素
- index - 元素的下标

<div id="app">
    <ul>
        <li>遍历字符串：</li>
        <li v-for="(str,index) in heroName">{{str}} ->{{index}}</li>
    </ul>
</div>

<script src="./vue.js"></script>
<script>
    let vm = new Vue({
        el: "#app",
        data: {
            heroName:'RuikyPuppy'
        }
    });
</script>

1.2 条件判断

有条件的渲染某些元素内容

1.2.1 v-if 指令

语法：v-if="bool值或表达式"，如果是 true，则显示 当前标签，否则不显示
需求：输入年龄 >= 18 就显示 "正规盲人按摩"；否则隐藏。

v-if 指令

<div id="app">
    <input type="text" placeholder="请输入年龄：" v-model="age">
    
    <div v-if="age>=18">正规盲人按摩</div>
    <div>嗯，我的存在就是为了避免你误入歧途~~~</div>
</div>
<script src="./vue.js"></script>
<script>
    new Vue({
        el: "#app",
        data: {
            age: 18
        }
    })
</script>

1.2.2 v-else 指令

语法：v-else
注意：上一个兄弟元素必须使用了 v-if 或 v-else-if
效果：当 v-if 或 v-else-if 不成立时，则显示 v-else 所在的标签
需求：输入年龄 >= 18 就显示 "正规盲人按摩"；否则显示 "提示"

v-else

<div id="app">
    <input type="text" placeholder="请输入年龄：" v-model="age">
    
    <div v-if="age>=18"><h1>正规盲人按摩</h1></div>
    <div v-else>嗯，我的存在就是为了避免你误入歧途~~~</div>
</div>
<script src="./vue.js"></script>
<script>
    new Vue({
        el: "#app",
        data: {
            age: 18
        }
    })
</script>

1.2.3 v-else-if 指令

语法：v-else-if="bool值或表达式"，如果是 true，则显示 当前标签，否则不显示
注意：上一个兄弟元素必须使用了 v-if 或 v-else-if
需求：输入成绩，>=90 , >=70 , < 70 显示不同文字

v-else-if

<div id="app">
    <input type="text" placeholder="请输入相应成绩" v-model="score">
    
    <div v-if="score>90">666，你一定见过凌晨4点的深圳~~</div>
    <div v-else-if="score>70">潜力巨大哦~~~</div>
    <div v-else>这次成绩不理想，是不有脱单了？</div>
</div>
<script src="./vue.js"></script>
<script>
    new Vue({
        el: "#app",
        data: {
            score: 100
        }
    })
</script>

2.其他指令

2.1 v-show 指令(了解)

作用：根据条件控制标签是否显示 (display:none)

<div id="app">
    <button @click="isShow=!isShow">隐藏或显示</button>
    <h1 v-show="isShow">我眼睛比你好看，因为，我的眼里有你~~</h1>
</div>

<script src="./vue.js"></script>
<script>
    new Vue({
        el: "#app",
        data: {
            isShow: true
        }
    })
</script>

图解：

v-show

2.2 v-show 和 v-if 区别

特点：
- v-show：在页面加载时就创建 dom ，只是通过 display 控制显示与否
- v-if ：只有遇到 true 时，才创建 dom ；变成 false 后，又会移出 dom
优劣
- v-if 会销毁和重建，开销比较大
- v-show 只会创建一次，且不会真的被销毁，开销比较小

* 课堂小彩蛋

当需要频繁切换显示和异常一个 div 时，我们用哪个比较好呢？

a.v-show

b.v-if

经验：当需要频繁显示隐藏时，使用 v-show 比较好。

2.3 v-cloak 指令(了解)

浏览器加载 vue.js 执行的过程有可能花较长时间，这时页面上的 {{胡子语法}} 就会被普通用户看到。
我们可以通过 v-cloak 先把包含胡子语法的标签隐藏起来。等 Vue.js 加载并执行完后，会再显示。

问题：网络延迟，页面会显示 {{loverName}} 出来~~！
效果：

不使用v-cloak

<div id="app">
    <h1>{{loverName}}，我眼睛比你好看，因为，我的眼里有你~~</h1>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    new Vue({
        el: "#app",
        data: {
            loverName: 'Lucy'
        }
    })
</script>

解决
- 添加 v-cloak 属性选择器
- 为包含 {{}} 的标签添加 v-cloak 属性
- 效果：
  
  v-cloak

<style>
    [v-cloak] {
        display: none;
    }
</style>

<div id="app">
    <h1 v-cloak>{{loverName}}，我眼睛比你好看，因为，我的眼里有你~~</h1>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    new Vue({
        el: "#app",
        data: {
            loverName: 'Lucy'
        }
    })
</script>

原理：vue.js 加载完毕后，会在处理完数据后，移除所有元素中的 v-cloak 属性，此时，胡子语法已经变成数据了。

image.png

2.4 v-once 指令(了解)

vue 的特点是双向绑定，但偶尔有时候，某个元素的内容，只要在第一次根据 data 数据生成；
之后不管 data数据怎么改，都不要更新到元素中。

语法：v-once 为标签添加后，该标签只会被 vue 根据 data 渲染一次，之后脱离 vue 管理

<div id="app">
    <input type="text" v-model="loverName" />
    
    <!-- 只在 vue 第一次加载时，从 data 中取出数据，之后，不管怎么改data，此标签内容都不会变-->
    <h1 v-once>{{loverName}}，我眼睛比你好看，因为，我的眼里有你~~</h1>
    
    <!-- 改data，此标签内容会变-->
    <h1>{{loverName}}，我眼睛比你好看，因为，我的眼里有你~~</h1>
</div>

<script src="./vue.js"></script>
<script>
    new Vue({
        el: "#app",
        data: {
            loverName: 'Lucy'
        }
    });
</script>

2.5 v-pre 指令(了解)

直接跳过标签中的胡子语法

语法： v-pre

<div id="app">
    <!--跳过 胡子语法-->
    <h1 v-pre>{{loverName}}，我眼睛比你好看，因为，我的眼里有你~~</h1>
    <!--解析 胡子语法-->
    <h1>{{loverName}}，我眼睛比你好看，因为，我的眼里有你~~</h1>
</div>

<script src="./vue.js"></script>
<script>
    new Vue({
        el: "#app",
        data: {
            loverName: 'Lucy'
        }
    })
</script>

结果：

v-pre

3.axios 基本使用

小巧易用的 http 请求框架，它的 ajax 封装的比 jquery 更优秀~~~

官网：http://www.axios-js.com/zh-cn/docs/
库地址：https://unpkg.com/axios/dist/axios.min.js
特点：
- 原生 ajax 太麻烦
- jquery 功能太丰富（渣男），axios 只做请求，无dom/bom操作（纯男）
- axios 功能少，文件体积小，网络加载快；
- axios 专注请求，关于请求的功能丰富（请求拦截、数据返回拦截等，以后讲）
- axios 支持 promise
- axios 支持浏览器端和 nodejs服务端

3.1 get请求

测试地址：https://autumnfish.cn/api/joke/list?num=10
语法：
- 不带参数 axios.get(url).then( ).catch( )
- 带参数
  - axios.get(url?参数).then( ).catch( )
  - axios.get(url,{ 参数对象 }).then( ).catch( )

//get请求
axios.get('请求接口路径', 
         {
            params: { ID: 12345 }
         })
    .then(res=>{
        console.log(res.data);
    })  
    .catch(err=>{
        console.log(err.message);
    });

注意：如果不用箭头函数，那么函数中的 this 将得不到 Vue实例对象

3.2 post请求

测试地址：https://autumnfish.cn/api/user/reg 参数: username
语法：
- 不带参数 axios.post(url).then( ).catch( )
- 带参数 axios.get(url,{ 参数对象 }).then( ).catch( )

//post请求
axios.post('请求接口路径',          
           {
            firstName: 'James',
            lastName: 'Zou'
           })
    .then(res=>{
        console.log("成功");
    })  
    .catch(err=>{
        console.log("失败：" + err.message);});

3.3 config配置模式

语法：axios({配置信息对象}).then( ).catch( )
配置信息对象：
- method : 请求方式 get/post/...
- url: 请求路径
- data: post 参数
- params：get 参数

//axios(config)模式  
axios({
        method: '请求方法如:post.get',
        url: '请求接口路径',
        data: {}, // post 数据
        params: {}  // get 数据
}).then(response=>{
    console.log("成功的处理");
})  
  .catch(error=>{
    console.log("错误的处理");
});

建议以后开发时使用配置模式，企业多用此方式，比较灵活

4.Vue生命周期

4.1 生命周期图

每个 Vue 实例 都有自己的生命 - 诞生到销毁，这个过程就叫做生命周期

Vue 实例生命周期图：大家可以先看一下，必须要马上理解和记忆，一步步学，推荐：《vue 生命周期 created到beforeMount详解》

Vue 实例生命周期图

4.2 生命周期中的钩子

“每个 Vue 实例 的生命中，都要要经过一系列的初始化过程——例如，需要设置数据监听、编译模板、将实例挂载到 DOM 并在数据变化时更新 DOM 等”

“同时在这个过程中也会运行一些叫做生命周期钩子的函数，这给了开发者在不同阶段添加自己的代码的机会。”

Vue生命周期 8 大钩子，今天先学第1个和第2个

Vue生命周期 8 大钩子

语法：直接将钩子函数添加到 Vue 对象中

<script src="./vue.js"></script>
<script>
    new Vue({
        el: "#app",
        data: {},
        beforeCreated(){
            // ....
        },
        created(){
            // ....
        }
        // 其他钩子函数....
    })
</script>

4.2.1 beforeCreate

Vue实例 创建前调用
特点：此时 el,data,methods... 都是undefined，所以还不能访问
执行次数：只执行 1 次

<div id="app">
    <ul>
        <li>遍历数组：</li>
        <li v-for="(item,index) in myArry">下标：{{index}} -> 值：{{item}}</li>
    </ul>
</div>

<script src="./vue.js"></script>
<script>
    let vm = new Vue({
        el: "#app",
        data: {
            myArry: ['P城', 'Y城', '军事基地', '研究所', 'G港']
        },
        beforeCreate() {
            console.log('---beforeCreate------');
            console.log(this.myArry); // undefined
        }
    });
</script>

4.2.2 created(重要)

Vue实例 创建后调用
特点：此时 el,data,methods... 都以创建赋值完毕，可以访问
执行次数：只执行 1 次

<div id="app">
    <ul>
        <li>遍历数组：</li>
        <li v-for="(item,index) in myArry">下标：{{index}} -> 值：{{item}}</li>
    </ul>
</div>

<script src="./vue.js"></script>
<script>
    let vm = new Vue({
        el: "#app",
        data: {
            myArry: ['P城', 'Y城', '军事基地', '研究所', 'G港']
        },
        beforeCreate() {
            console.log('---beforeCreate------');
            console.log(this.myArry); // undefined
        },
        created() {
            console.log('---create------');
            console.log(this.myArry); // Array
        }
    });
</script>

4.2.3 二者功能场景

beforeCreate：一般用在加载子组件时的 loading... 效果
created：等vue准备好后，可以用于取数据，比如 url 上参数，接口取值等

相当于 window.onload ，目前进入页面接口在这调用最合适

三.扩展内容

1.includes 方法

用于判断数组或者 字符串 中是否包含 某个值，包含返回 true，不包含返回 false

用于数组
- let res = arr.includes('元素');
- arr 包含 '元素'，res 为 true
- arr 不包含 '元素'，res 为 false
用于字符串与数组一样
- let resStr = str.includes('子字符串');
- str 包含 '子字符串'，resStr 为true
- str 不包含 '子字符串'，resStr 为false

2.filter和map方法

2.1 filter筛选方法

作用：
- 根据条件筛选出 原数组 中的元素，并添加到一个 新数组 中返回
- 不会改变原始数组，只是把符合条件的元素添加到一个新数组中
语法：array.filter(回调函数( currentValue,index,arr ))
- 参数
  - value - 当前元素值
  - index - 当前元素下标
- arr - 当前数组
- 返回值：
- 返回包含符合条件的元素的数组
- 没有符合条件的元素，则返回空数组。
本质：内部其实就是对数组做循环，并把原数组中符合条件的元素添加到新数组中返回
例子：筛选常量数组

//1.返回 list 数组中 大于2的元素
let list = [1, 2, 3, 4];

let list2 = list.filter((v, i) => {
    return v > 2;
});

console.log(list2); // 输出: [ 3, 4 ]

array.filter

例子：筛选对象数组：

//2.返回 list3 中 age >22 的 对象
let list3 = [
    { name: 'j', age: 12 },
    { name: 'a', age: 22 },
    { name: 'm', age: 32 },
    { name: 'e', age: 42 },
    { name: 's', age: 52 }
];

let list4 = list3.filter((v, i) => {
    return v.age > 22;
});
console.log(list4);
/* 输出:
[
  { name: 'm', age: 32 },
  { name: 'e', age: 42 },
  { name: 's', age: 52 }
]
*/

2.2 map 方法

作用：返回一个新数组，数组中的元素为原始数组元素调用函数处理后的值
- 遍历 原数组 中的元素并调用回调函数，将回调函数返回值添加到一个 新数组 中返回
- 不会改变原始数组，只是把回调函数返回值添加到新数组
语法：array.map(回调函数( currentValue,index,arr ))
- 参数
  - value - 当前元素值
  - index - 当前元素下标
  - arr - 当前数组
- 返回值：
- 将遍历数组时每次调用回调函数的返回值添加到新数组返回
本质：对数组做循环，并取出元素传入回调函数，将回调函数返回值添加到新数组返回
例子：遍历对象，将每个对象的 age 添加到新数组返回

let list5 = [
    { name: 'j', age: 12 },
    { name: 'a', age: 22 },
    { name: 'm', age: 32 },
    { name: 'e', age: 42 },
    { name: 's', age: 52 }
];

let list6 = list5.map((v, i) => {
    return v.age;
});
console.log(list6); // [ 12, 22, 32, 42, 52 ]

array.map

3.v-key指令

Vue为了能提高性能，都尽可能重用 dom 对象，但有时候，开发者不希望它重用 dom对象。

语法：v-key="id值" 简写 :key="id值"
如：
- 两个文本框，如果不加 v-key 指令，则 Vue 内部只会产生一个 dom对象，复用。
- PS：输入文字后，不管怎么切换，都会显示相同的文字，因为 Vue 在重用 同一个文本框

<div id="app">
    <button @click="isShow=!isShow">切换</button>
        <input v-if="isShow" type="text" placeholder="请输入姓名">
        <input v-else type="text" placeholder="请输入密码" >
</div>
<script src="./vue.js"></script>
<script>
    new Vue({
        el: "#app",
        data: {
            isShow: true
        },
        methods: {

        }
    })
</script>

两个文本框，如果加 v-key 指令，则 Vue 内部会产生两个 dom对象。
PS：输入文字后，切换后会显示另一个文本框，因为 Vue 创建了 两个文本框。

<div id="app">
    <button @click="isShow=!isShow">点我切换</button>
        <input  v-if="isShow" type="text" placeholder="请输入姓名" key="1">
        <input v-else type="text" placeholder="请输入密码"  key="2">
</div>
<script src="./vue.js"></script>
<script>
    new Vue({
        el: "#app",
        data: {
            isShow: true
        }
    })
</script>

4.v-if 和 v-for 一起使用

不推荐在同一个标签上同时使用他们俩
但如果一起使用， v-for 比 v-if 优先级更高！

5.自己实现 filter和map *

5.1 myfilter

*思考扩展：自己模仿一个数组的 filter 方法，返回符合条件的元素组成的新数组

// 为数组 原型 添加一个 myfilter 方法
Array.prototype.myfilter = function (fn) {
    let newArr = [];
    // 遍历当前数组
    for (let i = 0; i < this.length; i++) {
        // 调用回调函数，传入 当前元素，下标，原数组本身，获取 bool返回值
        if (fn(this[i], i, this)) {
            // 将 元素 添加到 新数组
            newArr.push(this[i]);
        }
    }
    return newArr;
}
// 调用测试：
let list9 = [
    { name: 'j', age: 12 },
    { name: 'a', age: 22 },
    { name: 'm', age: 32 },
    { name: 'e', age: 42 },
    { name: 's', age: 52 }
];

let list10 = list9.myfilter((v, i) => {
    return v.age > 22;
});

console.log(list10);

5.2 mymap

*思考扩展：自己模仿一个数组的 map 方法，返回由回调函数 return元素组成的新数组

// 为数组 原型 添加一个 mymap 方法
Array.prototype.mymap = function (fn) {
    let newArr = [];
    // 遍历当前数组
    for (let i = 0; i < this.length; i++) {
        // 调用回调函数，传入 当前元素，下标，原数组本身
        let newEle = fn(this[i], i, this);
        // 将 返回值 添加到 新数组
        newArr.push(newEle);
    }
    return newArr;
}
// 调用测试：
let list7 = [
    { name: 'j', age: 12 },
    { name: 'a', age: 22 },
    { name: 'm', age: 32 },
    { name: 'e', age: 42 },
    { name: 's', age: 52 }
];

let list8 = list7.mymap((v, i) => {
    return v.age;
});

console.log(list8);

最后编辑于：2020.03.19 18:19:33

人面猴
序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
沈念sama阅读 212,816评论 6赞 492
死咒
序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
沈念sama阅读 90,729评论 3赞 385
救了他两次的神仙让他今天三更去死
文/潘晓璐我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
开封第一讲书人阅读 158,300评论 0赞 348
道士缉凶录：失踪的卖姜人
文/不坏的土叔我叫张陵，是天一观的道长。经常有香客问我，道长，这世上最难降的妖魔是什么？我笑而不...
开封第一讲书人阅读 56,780评论 1赞 285
港岛之恋（遗憾婚礼）
正文为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
茶点故事阅读 65,890评论 6赞 385
恶毒庶女顶嫁案：这布局不是一般人想出来的
文/花漫我一把揭开白布。她就那样静静地躺着，像睡着了一般。火红的嫁衣衬着肌肤如雪。梳的纹丝不乱的头发上，一...
开封第一讲书人阅读 50,084评论 1赞 291
城市分裂传说
那天，我揣着相机与录音，去河边找鬼。笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。我是一名探鬼主播，决...
沈念sama阅读 39,151评论 3赞 410
双鸳鸯连环套：你想象不到人心有多黑
文/苍兰香墨我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
开封第一讲书人阅读 37,912评论 0赞 268
万荣杀人案实录
序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
沈念sama阅读 44,355评论 1赞 303
护林员之死
正文独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋以下内容为张勋视角年9月15日...
茶点故事阅读 36,666评论 2赞 327
白月光启示录
正文我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
茶点故事阅读 38,809评论 1赞 341
活死人
序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
沈念sama阅读 34,504评论 4赞 334
日本核电站爆炸内幕
正文年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
茶点故事阅读 40,150评论 3赞 317
男人毒药：我在死后第九天来索命
文/蒙蒙一、第九天我趴在偏房一处隐蔽的房顶上张望。院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
开封第一讲书人阅读 30,882评论 0赞 21
一桩弑父案，背后竟有这般阴谋
文/苍兰香墨我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。一阵脚步声响...
开封第一讲书人阅读 32,121评论 1赞 267
情欲美人皮
我被黑心中介骗来泰国打工，没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。一个月前我还...
沈念sama阅读 46,628评论 2赞 362
代替公主和亲
正文我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
茶点故事阅读 43,724评论 2赞 351

Vue基础Day02判断循环_其它指令_axios

一.核心内容

1.条件与循环指令

1.1 v-for(循环)

1.1.1 遍历数组

1.1.2 遍历对象

1.1.3 遍历字符串

1.2 条件判断

1.2.1 v-if 指令

1.2.2 v-else 指令

1.2.3 v-else-if 指令

2.其他指令

2.1 v-show 指令(了解)

2.2 v-show 和 v-if 区别

* 课堂小彩蛋

2.3 v-cloak 指令(了解)

2.4 v-once 指令(了解)

2.5 v-pre 指令(了解)

3.axios 基本使用

3.1 get请求

3.2 post请求

3.3 config配置模式

4.Vue生命周期

4.1 生命周期图

4.2 生命周期中的钩子

4.2.1 beforeCreate

4.2.2 created(重要)

4.2.3 二者功能场景

三.扩展内容

1.includes 方法

2.filter和map方法

2.1 filter筛选方法

2.2 map 方法

3.v-key指令

4.v-if 和 v-for 一起使用

5.自己实现 filter和map *

5.1 myfilter

5.2 mymap

推荐阅读更多精彩内容