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

2020-03-19 本文已影响0人前端老邹_伯通

最近在重写 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);

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

猜你喜欢

热点阅读