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

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

一.核心内容

1.条件与循环指令

1.1 v-for(循环)

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

1.1.1 遍历数组

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


    
        遍历数组：
        下标：{{index}} -> 值：{{item}}

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

遍历数组

1.1.2 遍历对象

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


    
        遍历对象：
        {{value}} -> {{key}} -> {{index}}

1.1.3 遍历字符串

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


    
        遍历字符串：
        {{str}} ->{{index}}

1.2 条件判断

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

1.2.1 v-if 指令

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

v-if 指令


    
    
    正规盲人按摩
    嗯，我的存在就是为了避免你误入歧途~~~

1.2.2 v-else 指令

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

v-else


    
    
    正规盲人按摩
    嗯，我的存在就是为了避免你误入歧途~~~

1.2.3 v-else-if 指令

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

v-else-if


    
    
    666，你一定见过凌晨4点的深圳~~
    潜力巨大哦~~~
    这次成绩不理想，是不有脱单了？

2.其他指令

2.1 v-show 指令(了解)

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


    
    我眼睛比你好看，因为，我的眼里有你~~

图解：

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


    {{loverName}}，我眼睛比你好看，因为，我的眼里有你~~

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




    {{loverName}}，我眼睛比你好看，因为，我的眼里有你~~

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

image.png

2.4 v-once 指令(了解)

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

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


    
    
    
    {{loverName}}，我眼睛比你好看，因为，我的眼里有你~~
    
    
    {{loverName}}，我眼睛比你好看，因为，我的眼里有你~~

2.5 v-pre 指令(了解)

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

语法： v-pre


    
    {{loverName}}，我眼睛比你好看，因为，我的眼里有你~~
    
    {{loverName}}，我眼睛比你好看，因为，我的眼里有你~~

结果：

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 对象中

4.2.1 beforeCreate

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


    
        遍历数组：
        下标：{{index}} -> 值：{{item}}

4.2.2 created(重要)

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


    
        遍历数组：
        下标：{{index}} -> 值：{{item}}

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 在重用 同一个文本框

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

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 指令(了解)

{{loverName}}，我眼睛比你好看，因为，我的眼里有你~~

{{loverName}}，我眼睛比你好看，因为，我的眼里有你~~

2.4 v-once 指令(了解)

{{loverName}}，我眼睛比你好看，因为，我的眼里有你~~

{{loverName}}，我眼睛比你好看，因为，我的眼里有你~~

2.5 v-pre 指令(了解)

{{loverName}}，我眼睛比你好看，因为，我的眼里有你~~

{{loverName}}，我眼睛比你好看，因为，我的眼里有你~~

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

你可能感兴趣的:(Vue基础Day02判断循环_其它指令_axios)