Vue第三章自定义指令、axios、网络请求、v-if（附带详细代码）

张的俊.

已于 2023-03-31 11:32:44 修改

阅读量497

点赞数 1

分类专栏： Vue 文章标签： vue.js 前端 javascript html 前端框架

于 2022-10-06 22:58:26 首次发布

本文链接：https://blog.csdn.net/a2499797637/article/details/127189118

版权

Vue 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

一、自定义指令

自定义指令: 用户可以制作自己的指令
directive: 指令
指令必须是 v- 开头
v-blue: v- 是标识; blue 是指令名

v-color="'orange'"> 
color(el, bindings) {
      // 参数1: DOM元素
      // 参数2: 指令携带的信息, 包括名称和值 等...
      console.log(arguments)
      el.style.color = bindings.value
    }

自定义指令的高级用法

系统的autofocus属性, 可以让元素自动获得焦点
自制 v-focus 指令, 实现相同的操作
指令的精确配置模式: 指令名:{配置项...}

错误示例

focus(el) {
    //   // focus(): 元素自带的方法, 调用后会获得焦点
    //   el.focus()
    // },
	此写法: 默认是在DOM元素 内存创建阶段触发的, 获取焦点会失败

正确写法

focus: {
      // inserted:嵌入;  指令所在的元素 嵌入到 页面中展示出来
      // DOM元素的生命周期: 内存中创建->渲染到页面->更新->销毁
      // 让元素获得焦点在哪个周期?  必须是元素呈现到页面上以后
      // inserted: 会在DOM元素 呈现到页面上后 自动触发
      inserted(el) {
        el.focus()
      },

二、axios

由于原生的请求代码较为复杂, 所以会进行封装后使用
jQuery: `$.get(请求地址, data=>{})`
1. 缺点: 存在`回调地狱`风险, 在ES6中的 Promise 方案被解决
axios: 一款专业的用 `Promise` 封装而来的网络请求模块, 不存在回调地狱风险
项目中默认不具有此模块, 需要单独安装
在`项目包目录`下执行安装命令: `npm i axios vue-axios`

三、网络请求

axios: 网络请求模块, 前提要先安装 npm i axios vue-axios
使用方式分两种: 局部全局
1. 局部用法: 在 .vue 文件中, 引入axios模块
2. ```
import axios from 'axios' //页面没报错,说明已安装
```
v-if: 如果值是真的, 才会加载这个DOM元素;
1. 由于网络请求是异步操作, 所以数据项 data的值，初始时是null, 请求到数据以后才被赋予真正的数据
2. 使用时, 必须判断 data 不是null 再使用, 才不会报错
3. <div v-if="data">

四、v-if

v-if 指令: 当条件为真的时候才会触发相关的代码
真:加载元素假:不加载元素

<div v-if="true">Hello</div>
<div v-if="false">Vue</div>

面试常问: v-if 和 v-show 都可以让元素不显示, 区别?
1. v-if: 不加载元素
2. v-show: 加载元素但是用 css来隐藏
v-if 和 v-show 的取舍?
1. v-show: 把元素准备好, 随时可以展示; 适合元素频繁切换显示
2. v-if: 如果满足条件再展示; 适合元素切换不频繁的场景
3. 网络请求: 请求的数据未完成前不展示, 完成后再显示,适合v-if
4. 使用v-else-if时，中间不可间断（v-if与v-else-if中间不可有其他任何代码）