VUE（5）{插槽、组件的生命周期、路由系统}

一、插槽 slot

在组件中把某些位置留白, 在真正使用时 利用 插槽方式插入 

         命名插槽: <slot name='名称' />

两个使用场景 、三个使用方法:

• 组件用于布局, 只管布局样式 不负责具体内容的呈现

• 组件某个位置内容需要经常变动, 用插槽占位

• 旧写法: <template slot='名称'>

• 新写法: <template v-slot:名称>

• 简化写法: <template #名称>

<template>
  <div class="box">
    <!-- 插槽 -->
    <div>
        <!-- 特点：插槽是用来做布局的 ，还可以留白-->
        <!-- 组件作为插槽 主要用于布局 把页面结构写好 但是没有具体内容 -->
        <!-- 要求：放在插槽中的数据 应该放在无意义的 template 标签中 -->
        <!-- 标签 slot 代表插槽, 相当于占位符. 真正运行时会替换成 template 中的内容 -->
        <!-- 默认插槽: -->
      <slot></slot>
    </div>
    <div>
      <!-- 具名插槽: 插槽可以起名, 使用时就可以指定向哪个插槽放东西 -->
      <slot name="body"></slot>
    </div>
    <div>
      <slot name="footer"></slot>
    </div>
    <div>
      <!-- slot: 相当于占位符, 实际运行时会被指定的内容替换 -->
      <slot name="bottom"></slot>
    </div>
            <!-- 插槽名有三种写法：旧写法 、 新写法 、 简化写法 -->
      <template slot="body">
        <h3>这是使用旧写法，指定插槽</h3>
      </template>
      <template v-slot:footer>
        <h3>这是使用新写法，指定插槽名</h3>
      </template>
      <!-- 后写的 会覆盖 先写的 多以 body 插槽会被改为这里的 -->
      <template #body>
        <h3>这是使用简化写法，指定插槽名</h3>
      </template>

  </div>
</template>

<script>
export default {}
</script>

<style lang="scss" scoped>
/* scoped: 作用域, 代表这里的样式 独属于 当前组件,
   如果被引入到其他组件中, 不会生效
   可以避免 污染其他组件的样式, 推荐是 添加!*/

.danger {
  color: white;
  background-color: red;
  padding: 10px;
}

.box {
  border: 1px solid red;
  width: 300px;
  // display: flex;
  > div {
    height: 100px;
    // width: 300px;
    border: 1px solid blue;
    margin: 4px;
  }
}
</style>

二、组件的生命周期

组件在DOM中显示 ->删除的过程中, 会触发组件的 钩子函数: 在固定时机自动触发的函数

• 开始创建:beforeCreate

• 创建结束:created -- DOM元素创建完毕

• 开始挂载: beforeMount

• 挂载完毕: mounted -- DOM元素已经显示出来

  • 此处发送网络请求: 组件加载完毕 自动发送

• 开始更新: boforeUpdate - 数据变化 导致 DOM 更新

• 更新完毕: updated

• 开始销毁: beforeDestroy

  • 定时器的例子: 组件将要销毁时, 应该在此处做一些 清理操作

• 销毁完毕: destroyed

①示例

<template>
  <div>
    <!-- 组件的生命周期 -->
    <!-- 组件: 准备创建->创建完毕->准备挂载->挂载完毕->准备更新->更新完毕 -> 准备销毁 -> 销毁完毕  -->
    <!-- 人 : 备孕->怀孕->待产->生出来->成长.-> 快死了 -> 死了 -->
    <my-life-com v-if="show" />
    <!-- v-if: 根据值 来 删除/添加DOM元素 -->
    <button @click="show = !show">显示/隐藏</button>
    <!-- show = !show   值变为自身的反向值 -->
  </div>
</template>

<script>
import MyLifeCom from "./components/MyLifeCom.vue"
export default {
  components: { MyLifeCom },
  data() {
    return {
      show: false,
    }
  },
}
</script>

<style lang="scss" scoped></style>

②简单使用

<template>
  <div>
    <h2>我是 Mylife 组件</h2>
    <div>{{ count }}</div>
    <button @click="startCount">启动定时器</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      count: 1,
    };
  },
  methods: {
    startCount() {
      //window对象的属性
      //把定时器保存在 一个 变量中 才能在其他地方使用

     //timer 没有声明 但是可以直接用，因为 对象.未定义属性 = 值
     //会自动为对象添加新的值； this 是当前的vue对象

      this.timer = setInterval(() => {
        this.count++;
        console.log(this.count);
      }, 1000);
    },
  },
  //一个组件被创建到显示 到更新 到销毁的过程中，组件都可以知道自身发生了什么
  
  //钩子函数：在固定的时机自动被触发的函数 -- hook
  beforeCreate() {
    // befor  在...之前；  create 创建
    console.log("组建即将被创建");
  },
  created() {
    console.log("创建完毕");
  },
  //mount:挂载；代表把DOM元素 加载到 DOM树上
  beforeMount() {
    console.log("开始挂载组件到DOM树");
  },
  mounted() {
    console.log("组件已显示在DOM树");
    //需求：组件加载到页面后，立刻发送网络请求，获取数据
    let url = "http://www.codeboy.com:9999/data/product/list.php";
    this.axios.get(url).then((res) => {
      console.log(res);
    });
  },
  beforeUpdate () {
    console.log("数据的改动导致DOM即将更新");
  },
  updated () {
    console.log("数据的改动，成功更新DOM");
  },
  beforeDestroy() {
    console.log("组件即将销毁");
    //销毁定时器
    clearInterval(this.timer);
  },
  destroyed() {
    console.log("组件已销毁");
  },
};
</script>

<style lang="scss" scoped></style>

三、路由系统

官网: Vue Router

目前主流的WEB项目, 都是采用 SPA: Single Page web Application 方式制作

• SPA: Single Page web Application -- 单页应用

  当页面发生变化时, 只是局部切换内容. 用户体验极佳;

• 单页应用: 整个网站只有一个页面, 通过特殊的路由系统 实现局部内容的切换

• 本质是 局部的 组件替换

• 重要标签:

  • <router-view />: 一个占位符, 会根据路径切换为对应的组件

  • <router-link to="/路径:>: 取代了 a 标签, 用来实现页面跳转; 最终显示在页面上 依然是a标签. 所以为a标签添加样式 就是给 router-link 加的样式

  • 文件夹views: 要求 所有用路由切换的组件 放此文件夹里

  • 配置文件: router/index.js

• 路由模式

  • mode='history' 模式: 路径中没有 # -- 如果最终上线到服务器 会有问题, 需要特殊配置.

  • 默认 hash 模式: 路径中有 # -- 此方式上线不需要特殊配置

• 组件 <style scoped> scoped代表作用域, 书写之后, 则样式只在当前组件有效