【Vue3+Vite】Vue生命周期与组件 快速学习 第三期

news2024/11/15 3:26:51

文章目录

  • 一、Vue生命周期
    • 1.1 生命周期简介
    • 1.2 生命周期案例
  • 二、Vue组件
    • 2.1 组件基础
    • 2.2 组件化入门案例
    • 2.3 组件之间传递数据
      • 2.3.1父传子
      • 2.3.2 子传父
      • 2.3.3 兄弟传参
  • 总结

一、Vue生命周期

1.1 生命周期简介

  • 每个 Vue 组件实例在创建时都需要经历一系列的初始化步骤，比如设置好数据侦听，编译模板，挂载实例到 DOM，以及在数据改变时更新 DOM。
  • 在此过程中，它也会运行被称为生命周期钩子的函数，让开发者有机会在特定阶段运行自己的代码!

周期图解：
zhouqi
常见钩子函数:

  • onMounted() 注册一个回调函数，在组件挂载完成后执行。
  • onUpdated() 注册一个回调函数，在组件因为响应式状态变更而更新其 DOM 树之后调用。
  • onUnmounted() 注册一个回调函数，在组件实例被卸载之后调用。
  • onBeforeMount() 注册一个钩子，在组件被挂载之前被调用。
  • onBeforeUpdate() 注册一个钩子，在组件即将因为响应式状态变更而更新其 DOM 树之前调用。
  • onBeforeUnmount() 注册一个钩子，在组件实例被卸载之前调用。

1.2 生命周期案例

<script setup>

    import {ref,onUpdated,onMounted,onBeforeUpdate} from 'vue'
    
    let message =ref('hello')
   
    // 挂载完毕生命周期
    onMounted(()=>{
      console.log('-----------onMounted---------')
      let span1 =document.getElementById("span1")
      console.log(span1.innerText)
    })
    // 更新前生命周期
    onBeforeUpdate(()=>{
      console.log('-----------onBeforeUpdate---------')
      console.log(message.value)
      let span1 =document.getElementById("span1")
      console.log(span1.innerText)
    })
    // 更新完成生命周期
    onUpdated(()=>{
      console.log('-----------onUpdated---------')
      let span1 =document.getElementById("span1")
      console.log(span1.innerText)
    })
</script>

<template>
  <div>
    <span id="span1" v-text="message"></span> <br>
    <input type="text" v-model="message">
  </div>
  
</template>

<style scoped>
</style>

1

二、Vue组件

2.1 组件基础

  • 组件允许我们将 UI 划分为独立的、可重用的部分，并且可以对每个部分进行单独的思考。
  • 组件就是实现应用中局部功能代码和资源的集合！
  • 在实际应用中，组件常常被组织成层层嵌套的树状结构：
    1
    这和我们嵌套 HTML 元素的方式类似，Vue 实现了自己的组件模型，使我们可以在每个组件内封装自定义内容与逻辑。

传统方式编写应用：
2

组件方式编写应用：
1

  • 组件化：对js/css/html统一封装,这是VUE中的概念

  • 模块化：对js的统一封装,这是ES6中的概念

  • 组件化中,对js部分代码的处理使用ES6中的模块化

2.2 组件化入门案例

案例需求： 创建一个页面，包含头部和菜单以及内容显示区域，每个区域使用独立组建！

1

  1. 创建vue项目
npm create vite
cd vite项目
npm install
  1. 安装相关依赖
npm install sass
npm install bootstrap
  1. 创建子组件 在src/components文件下 vscode需要安装Vetur插件，这样vue文件有快捷提示
    2
  • Header.vue
<script setup>
</script>

<template>
  <div>
    欢迎：XX
    <a href="#">退出登录</a>
  </div>
</template> 

<style scoped>
</style>
  • Content.vue
<script setup>
</script>

<template>
  <div>展示内容</div>
</template> 

<style scoped>
</style>
  • Navigation.vue
<script setup>
</script>

<template>
  <div>
    <ul>
      <li>学生管理</li>
      <li>图书管理</li>
      <li>老师管理</li>
      <li>会员管理</li>
    </ul>
  </div>
</template> 

<style scoped>
</style>
  • App.vue
<script setup>
import Header from "./components/Header.vue";
import Navigation from "./components/Navigation.vue";
import Content from "./components/Content.vue";
</script>

<template>
  <div>
    <Header class="header"></Header>
    <Navigation class="nav"></Navigation>
    <Content class="content"></Content>
  </div>
</template> 

<style scoped>
.header {
  height: 80px;
  border: 1px solid red;
}
.nav {
  width: 15.5%;
  height: 800px;
  border: 1px solid green;
  float: left;
}
.content {
  width: 84%;
  height: 800px;
  border: 1px solid yellow;
  float: right;
}
</style>

运行！ npm run dev
OK

2.3 组件之间传递数据

  • 1. 父传子：

    • 父大包 -> 传参 给 子内包 数值
    • 1

  • 2. 子传父：

    • 子 内包 -> 传参给 父 大包

  • 3. 兄弟传参：

    • AB兄弟包 需要 通过父参数 传递
    • 也就是 执行了父传子 和 子传父 两个过程
    • 4

2.3.1父传子

Vue3 中父组件向子组件传值可以通过 props 进行，具体操作如下：

  1. 首先，在父组件中定义需要传递给子组件的值，接着，在父组件的模板中引入子组件，同时在引入子组件的标签中添加 props 属性并为其设置需要传递的值。

  2. 在 Vue3 中，父组件通过 props 传递给子组件的值是响应式的。也就是说，如果在父组件中的传递的值发生了改变，子组件中的值也会相应地更新。

2.3.2 子传父

2.3.3 兄弟传参

2

  • 子传父：

Navigation.vue ：子发送参数 给App.vue

<script setup>
import { defineEmits } from "vue";
//1.定义要发送给父组件的方法，可以1或者多个
let emites = defineEmits(["sendMessage"]);

function send(data) {
  //2.触发事件，向父容器发送数据
  emites("sendMessage", data);
}
</script>

<template>
  <div>
    <ul>
    <!-- 3. 子组件绑定点击方法 传参 -->
      <li @click="send('学生管理')">学生管理</li>
      <li>图书管理</li>
      <li>老师管理</li>
      <li>会员管理</li>
    </ul>
  </div>
</template> 

<style scoped>
</style>

App.vue 接收从Nav…的参数

<script setup>
import Header from "./components/Header.vue";
import Navigation from "./components/Navigation.vue";
import Content from "./components/Content.vue";

import { ref } from "vue";
//1.定义变量接收navigator传递的参数
var navigator_menu = ref("测试");

// 2. 方法接收传递来的数据
const receiver = data => {
  navigator_menu.value = data;
};
</script>

<template>
  <div>
    <hr />
    <!-- 4. 显示数据 -->
    {{navigator_menu}}
    <hr />
    <Header class="header"></Header>
    <!-- 3. 父组件绑定事件方法 接参 -->
    <Navigation @sendMessage="receiver" class="nav"></Navigation>
    <Content class="content"></Content>
  </div>
</template>

1

  • 父传子

App.vue 传递参数 给Context.vue

<script setup>
import Header from "./components/Header.vue";
import Navigation from "./components/Navigation.vue";
import Content from "./components/Content.vue";

import { ref } from "vue";
//定义接受navigator传递参数
var navigator_menu = ref("测试");

const receiver = data => {
  navigator_menu.value = data;
};
</script>

<template>
  <div>
    <hr />
    {{navigator_menu}}
    <hr />
    <Header class="header"></Header>
    <Navigation @sendMessage="receiver" class="nav"></Navigation>
    <!-- 向子组件传递数据-->
    <Content class="content" :message="navigator_menu"></Content>
  </div>
</template> 

<style scoped>
.header {
  height: 80px;
  border: 1px solid red;
}
.nav {
  width: 15.5%;
  height: 800px;
  border: 1px solid green;
  float: left;
}
.content {
  width: 84%;
  height: 800px;
  border: 1px solid yellow;
  float: right;
}
</style>
  • Content.vue 接收参数显示
<script setup>
import { defineProps } from "vue";

defineProps({
  message: String
});
</script>

<template>
  <div>
    展示内容:
    <hr />
    {{ message }}
  </div>
</template> 

<style scoped>
</style>

1

总结

兄弟传参：
在这里插入图片描述

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/1436892.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

UE5 获得频谱让nigara随音乐律动

UE5 获得频谱让nigara随音乐律动

参考视频:UE - Niagara实现可视化音乐动态粒子效果 案例演示及教程_哔哩哔哩_bilibili 先创建一个Niagara 在Properties的Sim Target改为GPU,Calculate Bounds Mode改为Fixed模式 生成的数量改为1000 这里的BoxSize可以选择修改,具体作用是粒子初始生成的范围 Drag,阻力,用来限…
阅读更多...
数据结构_找环，破环题-2.5

数据结构_找环，破环题-2.5

一. 判断单链表有无环 a. 错误的思路&#xff1a;遍历陷入死循环 1&#xff09;和相交的遍历思路一样&#xff0c;找指向相同。 错误点 一直在死循环。 思考点&#xff1a;如何破环 b. 个人思路&#xff1a;反转链表回首结点 1&#xff09;目前的经验&#xff0c;无非就…
阅读更多...
浅谈应该遵守的伦敦银交易规则

浅谈应该遵守的伦敦银交易规则

做伦敦银投资的朋友应遵守伦敦银交易规则&#xff0c;伦敦银交易规则不是指那些伦敦银交易技巧&#xff0c;而是在这个市场中要遵循的一些约定&#xff0c;下面我们就来讨论一下。 风险管理。风险管理即指投资者控制自己一笔乃至整体交易的风险&#xff0c;没有风险管理意识的投…
阅读更多...
Vue 条件渲染 双向绑定

Vue 条件渲染 双向绑定

https://www.dedao.cn/ebook/reader?id5lZOKpMGr9mgdOvYa6Ej75XRo1NML3jx810k8ZVzb2nqPpDxBeJlK4AyQ8RPQv2z v-if实现条件渲染的功能。v-model实现双向数据传输。 v-model用来进行双向绑定&#xff0c;当输入框中的文字变化时&#xff0c;其会将变化同步到绑定的变量上&#…
阅读更多...
【敏感词】敏感词检测功能v1.1.0版本正式上线

【敏感词】敏感词检测功能v1.1.0版本正式上线

背景 为了解决系统发布信息时人工审核成本高的问题&#xff0c;开发一个敏感词检测系统。该系统能够自动检测用户输入的内容中是否包含敏感词&#xff0c;从而减少不合规内容的发布&#xff0c;降低人工审核成本。通过实施这个系统&#xff0c;可以提高信息发布的效率和准确性…
阅读更多...
ArraysLambda表达式

ArraysLambda表达式

目录 一、Arrays 1、Arrays操作数组的工具类​编辑 二、Lambda表达式 1、Lambda初体验 ​编辑 2、函数式编程 ​编辑 3、Lambda表达式的标准格式 3.1 示例代码 4、小结 ​编辑5、Lambda表达式的省略写法 ​编辑5.1 示例代码 5.2 小结 ​编辑6、Lambda表达式的练习 …
阅读更多...
redis源码之：集群创建与节点通信（2）

redis源码之：集群创建与节点通信（2）

在上一篇redis源码之&#xff1a;集群创建与节点通信&#xff08;1&#xff09;我们可知&#xff0c;在集群中&#xff0c;cluster节点之间&#xff0c;通过meet将对方加入到本方的cluster->nodes列表中&#xff0c;并在后续过程中&#xff0c;不断通过clusterSendPing发送p…
阅读更多...
Jmeter 示例，格式为001-100，按顺序生成三位数的函数

Jmeter 示例，格式为001-100，按顺序生成三位数的函数

1.先添加一个循环控制器&#xff0c;每次执行生成一个数, 2.添加一个beanshell Sample,编写代码,把按00X这个格式的数字&#xff0c;赋值给一个变量LoopCount // 从JMeter变量中获取当前的计数器值 String loopCountStr vars.get("LoopCount"); int loopCount (lo…
阅读更多...
maven依赖报错处理(或者maven怎么刷新都下载不了依赖)

maven依赖报错处理(或者maven怎么刷新都下载不了依赖)

maven依赖报错&#xff0c;或者不报错&#xff0c;但是怎么刷新maven都没反应&#xff0c;可以试一下以下操作 当下载jar的时候&#xff0c;如果断网&#xff0c;或者连接超时的时候&#xff0c;会自动在文件夹中创建一个名为*lastupdate的文件&#xff0c;当有了这个文件之后…
阅读更多...
代理与Reflect反射

代理与Reflect反射

属性描述符 Proprety Descriptor 属性描述符 用于描述一个属性的相关信息 1.Object.getOwnPropertyDescriptor(对象&#xff0c;属性名) 可以得到一个对象的 某个属性的属性描述符 Object.getOwnPropertyDescriptors(对象) 可以得到某个对象的所有属性描述符 如果需要为某个…
阅读更多...
数据库学习笔记2024/2/4

数据库学习笔记2024/2/4

随笔 怎么学? 1、MySQL数据库就是存储和管理数据的一个大型软件,这个软件有一个专门的语言叫SQL,主要学的是SQL语言,但想要达到企业用人标准,就还得学会熟练使用MySQL这个软件。 2、学习分三阶段: 一. 基础篇 1. MySQL概述 1.1 数据库相关概念 数据库管理系统 -> MyS…
阅读更多...
如何修改远程端服务器密钥

如何修改远程端服务器密钥

前言 一段时间没改密码后&#xff0c;远程就会自动提示CtrlAltEnd键修改密码。但我电脑是笔记本&#xff0c;没有end键。打开屏幕键盘按这三个键也没用。 解决方法 打开远程 1、远程端WINC 输入osk 可以发现打开了屏幕键盘 2、电脑键盘同时按住CtrlAlt&#xff08;若自身电…
阅读更多...
【论文+代码】ZS-N2N实现小样本零网络图像去噪

【论文+代码】ZS-N2N实现小样本零网络图像去噪

01、引言 本文方法源于Youssef Mansour和Reinhard Heckel撰写的论文《Zero-Shot Noise2Noise: Efficient Image Denoising without any Data》&#xff0c;该文作者探索了一种不需要任何数据且高效的高效图像去噪方法。 该方法使用两个固定的内核对噪声图像进行卷积&#xff…
阅读更多...
【开源】基于JAVA+Vue+SpringBoot的快乐贩卖馆管理系统

【开源】基于JAVA+Vue+SpringBoot的快乐贩卖馆管理系统

目录 一、摘要1.1 项目介绍1.2 项目录屏 二、功能模块2.1 数据中心模块2.2 搞笑视频模块2.3 视频收藏模块2.4 视频评分模块2.5 视频交易模块2.6 视频好友模块 三、系统设计3.1 用例设计3.2 数据库设计3.2.1 搞笑视频表3.2.2 视频收藏表3.2.3 视频评分表3.2.4 视频交易表 四、系…
阅读更多...
c语言--指针运算

c语言--指针运算

目录 一、指针-整数二、指针-指针2.1条件2.2两个指针指向同一块空间代码2.2.1运行结果 2.3两个指针指向不同块空间代码2.3.1运行结果 2.4总结 三、指针的关系运算3.1代码3.1.1运行结果3.1.2分析 一、指针整数 用数组举例&#xff1a; 因为数组在内存中是连续存放的&#xff0c…
阅读更多...
C++：第十五讲高精度算法

C++：第十五讲高精度算法

每日C知识 system("color xx);是改变字体及背景颜色&#xff0c;前一个x代表一个数字&#xff0c;可以改变背景颜色&#xff0c;后一个x代表一个数字&#xff0c;可以改变字体颜色 &#xff0c;但都是根据颜色表来的。 记住&#xff1a;要加头文件&#xff1a;#include&l…
阅读更多...
详细关于如何解决mfc140.dll丢失的步骤，有效修复mfc140.dll文件丢失的问题。

详细关于如何解决mfc140.dll丢失的步骤，有效修复mfc140.dll文件丢失的问题。

mfc140.dll文件是Microsoft Visual Studio 2015程序集之一&#xff0c;它包含用于支持多种功能的代码和库。当这个mfc140.dll文件丢失时&#xff0c;可能会导致相关程序运行出错甚至无法运行。很多用户可能会遇到mfc140.dll丢失的问题&#xff0c;但是这并不是不可解决的困难。…
阅读更多...
【自然语言处理-工具篇】spaCy＜1＞--介绍及安装指南

【自然语言处理-工具篇】spaCy＜1＞--介绍及安装指南

目录 前言 安装指南 pip conda spaCy升级 总结 前言 spaCy是一个开源的自然语言处理库，用于处理和分析文本数据。它提供了许多功能，包括分词、词性标注
阅读更多...
cs50x 2024 -Lecture 0

cs50x 2024 -Lecture 0

cs50x 2024 -Lecture 0 01:43 哈佛大学CS50课程介绍 01:43CS50是哈佛大学的计算机科学和编程入门课程。 05:17计算机科学是一种通用的问题解决方式&#xff0c;适用于各个领域。 06:32课程将教授C、Python、SQL和JavaScript等编程语言。 08:18 计算机科学的重要性和二进制表…
阅读更多...
【CSS】css如何实现字体大小小于12px?

【CSS】css如何实现字体大小小于12px?

【CSS】css如何实现字体大小小于12px? 问题解决方案transform: scale(0.5)&#xff08;常用&#xff09;SVG 矢量图设置text 问题 文字需要显示为12px&#xff0c;但是小于12px的&#xff0c;浏览器是显示不来的 解决方案 transform: scale(0.5)&#xff08;常用&#xff0…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023