前端Vue入门-day05-自定义指令、插槽、路由入门-Toy模板网

这篇具有很好参考价值的文章主要介绍了前端Vue入门-day05-自定义指令、插槽、路由入门。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

(创作不易，感谢有你，你的支持，就是我前行的最大动力，如果看完对你有帮助，请留下您的足迹）

前端Vue入门-day05-自定义指令、插槽、路由入门,# 前端vue入门,vue.js,前端,javascript,前端框架

自定义指令

基本语法 (全局&局部注册)

全局注册

局部注册

指令的值

v-loading 指令封装

插槽

默认插槽

后备内容（默认值）

具名插槽

作用域插槽

路由入门

单页应用程序: SPA - Single Page Application

路由的介绍

路由的基本使用

VueRouter 的介绍

VueRouter 的使用 (5 + 2)

5个基础步骤 (固定)

2 个核心步骤

自定义指令

基本语法 (全局&局部注册)

自定义指令：自己定义的指令, 可以封装一些 dom 操作，扩展额外功能

全局注册

//全局注册指令
Vue.directive('focus',{
  //inserted 会在指令所在的元素，被插入到页面中时触发
  inserted(el){
    //el就是指令所绑定的元素
    el.focus()
  }
})

 <div id="app">
    <h1>自定义指令</h1>
    <input v-focus ref="inp" type="text">
  </div>

网页显示为：前端Vue入门-day05-自定义指令、插槽、路由入门,# 前端vue入门,vue.js,前端,javascript,前端框架

局部注册

<template>
  <div id="app">
    <h1>自定义指令</h1>
    <input v-focus ref="inp" type="text">
  </div>
</template>

<script>

export default {
 directives:{
  focus:{
    inserted(el){
      el.focus()
    }
  }
 }
}
</script>

指令的值

需求：实现一个 color 指令 - 传入不同的颜色, 给标签设置文字颜色

语法：在绑定指令时，可以通过“等号”的形式为指令绑定具体的参数值

通过 binding.value 可以拿到指令值，指令值修改会触发 update 函数。

<template>
  <div id="app">
    <h1 v-color="color1">自定义指令1</h1>
    <h1 v-color="color2">自定义指令2</h1>
  </div>
</template>

<script>
export default {
  data(){
    return{
      color1:'red',
      color2:'green'
    }
  },
  directives:{
    color:{
      //1.inserted提供的是元素被添加到页面中时的逻辑
      inserted(el,binding){
        el.style.color=binding.value
      },
      //2.update 指令的值修改的时候触发，提供值变化后，dom更新的逻辑
      update(el ,binding){
        el.style.color=binding.value
      }
    }
  }
}
</script>

<style>

</style>

网页显示为：

v-loading 指令封装

场景：实际开发过程中，发送请求需要时间，在请求的数据未回来时，页面会处于空白状态 => 用户体验不好

需求：封装一个 v-loading 指令，实现加载中的效果

分析：

1. 本质 loading 效果就是一个蒙层，盖在了盒子上

2. 数据请求中，开启loading状态，添加蒙层

3. 数据请求完毕，关闭loading状态，移除蒙层

实现：

1. 准备一个 loading 类，通过伪元素定位，设置宽高，实现蒙层

2. 开启关闭 loading 状态（添加移除蒙层），本质只需要添加移除类即可

3. 结合自定义指令的语法进行封装复用

<script>
// 安装axios =>  yarn add axios
import axios from 'axios'

// 接口地址：http://hmajax.itheima.net/api/news
// 请求方式：get
export default {
  data () {
    return {
      list: [],
      isLoading: true,
      isLoading2: true
    }
  },
  async created () {
    // 1. 发送请求获取数据
    const res = await axios.get('http://hmajax.itheima.net/api/news')
    
    setTimeout(() => {
      // 2. 更新到 list 中，用于页面渲染 v-for
      this.list = res.data.data
      this.isLoading = false
    }, 2000)
  },
  directives: {
    loading: {
      inserted (el, binding) {
        binding.value ? el.classList.add('loading') : el.classList.remove('loading')
      },
      update (el, binding) {
        binding.value ? el.classList.add('loading') : el.classList.remove('loading')
      }
    }
  }
}
</script>

插槽

默认插槽

插槽基本语法：

1. 组件内需要定制的结构部分，改用<slot></slot>占位

2. 使用组件时, <MyDialog></MyDialog>标签内部, 传入结构替换slot

后备内容（默认值）

插槽后备内容：封装组件时，可以为预留的 ` <slot> ` 插槽提供后备内容（默认内容）。

语法: 在 <slot> 标签内，放置内容, 作为默认显示内容

效果:

外部使用组件时，不传东西，则slot会显示后备内容

外部使用组件时，传东西了，则slot整体会被换掉

具名插槽

需求：一个组件内有多处结构，需要外部传入标签，进行定制

默认插槽：一个的定制位置

具名插槽语法:

3. v-slot:插槽名可以简化成 #插槽名

作用域插槽

作用域插槽: 定义 slot 插槽的同时, 是可以传值的。给插槽上可以绑定数据，将来使用组件时可以用。

场景：封装表格组件

1. 父传子，动态渲染表格内容

2. 利用默认插槽，定制操作列

3. 删除或查看都需要用到当前项的 id ，属于组件内部的数据

通过作用域插槽传值绑定，进而使用