当前位置： 首页 > news >正文

Vue(6)

news 2025/11/4 21:50:59

文章目录

  • 1. 自定义指令
    • 1.1 函数式
    • 1.2 对象式
    • 1.3 自定义指令常见坑
    • 1.4 创建全局指令
  • 2. 生命周期
    • 2.1 引出生命周期
    • 2.2 分析生命周期
    • 2.3 总结
  • 3. 组件
    • 3.1 认识组件
    • 3.2 使用组件 (非单文件组件)
    • 3.3 全局组件
    • 3.4 组件的几个注意点
    • 3.5 组件的嵌套
    • 3.6 VueComponent 构造函数
    • 3.7 一个重要的内置关系

1. 自定义指令

 
上文说完了常见的指令 后 ，下面来学习 一下 自定义指令

 

1.1 函数式

 
图一 ：

在这里插入图片描述

 
图二 ：

在这里插入图片描述

 

1.2 对象式

在这里插入图片描述

 

1.3 自定义指令常见坑

 
1. 命名的坑 ， 如果是多个单词 推荐使用 - 进行分割 ，然后配置的时候 ，需要使用 ""

在这里插入图片描述

 
2. 在自定义指令内 ， this 是 window ( 这里不管是 函数式 还是 对象式 都是 window)

在这里插入图片描述

 

1.4 创建全局指令

在这里插入图片描述

 
总结 ：

在这里插入图片描述

 
学习完自定义指令， 下面学习一下 vue 中非常 重要的知识 , 生命周期 .

 

2. 生命周期

 
这里通过 一个页面效果 来 引出生命周期 :

在这里插入图片描述

2.1 引出生命周期

 
图一 ：

在这里插入图片描述

 
图二 ：

在这里插入图片描述

 
这里 周期 其实 就是 vue 在不同时期调用不同的函数 .

 
这里 mounted 等 函数 (不止 moundted 这一个函数 )， 称为 生命周期函数 .

 
关于生命周期 可以 与 人的 生命周期 进行对比 学习 .

 
比如 ： 人的一生 （人的生命周期）

呱呱坠地了 ===> 检查身体各项指标 ,

学会说话了 ， ===> 引导 孩子 多学习新的词汇

学会走路了 , ===> 买一双合脚的鞋

…

 
vm的一生 (vm的生命周期) :

1.??? 了 ===> 调用 ??? 函数

2.挂载完毕了 ===> 调用 mounted 函数

3.??? 了 ===> 调用 ???？ 函数

 
小结 :

 
生命周期 ：

  1. 又名 ： 生命周期回调函数 , 生命周期函数 ， 生命周期钩子.
  2. 是什么 ： Vue在关键时刻帮我们调用的一些特殊名称的函数
  3. 生命周期函数的名字不可更改， 但函数的具体内容 是程序猿根据需求编写的
  4. 生命周期函数中的this 指向是 vm 或 组件实例对象

 

2.2 分析生命周期

 
这里可以通过 官网的 图进行分析 :

在这里插入图片描述

 

引用 :

在这里插入图片描述

 
挂载流程 :

 
图一 :

在这里插入图片描述

 
图二 :

在这里插入图片描述

 
图三 :

在这里插入图片描述

 
图四 :

在这里插入图片描述

 
到此 挂载流程就看完了, 下面来看看更新流程

 
更新流程:

在这里插入图片描述

 
销毁流程

在这里插入图片描述

 
最后 beforeDestroy 和 destroyed 函数 修改数据 并不会触发更新 (也就是不会再去调用 update 这个函数了).

 

2.3 总结

 
图一 ：

在这里插入图片描述

 
图二 ：

在这里插入图片描述

 

3. 组件

 

3.1 认识组件

 
在学习组件前 ，这里先来解决两个问题 ：

 
1.啥是组件

 
2.组件化编程 和传统方式编程 相比有啥优势 (即 使用组件的好处 )

 
关于这两个问题 ， vue 官网 是说过了的 .

 
图一 ：

在这里插入图片描述

 
图二 ：

在这里插入图片描述

 
看完上面这两张图 ： 那么 提出的两个问题就可以回答了 。

 
1.啥是组件 ？

 
答 ： 组件是 实现应用中 局部功能代码和资源的集合

 
2. 使用组件的优势
 
答 ： 1. 依赖关系不混乱，文件好维护 ， 2. 代码复用率高

 
知道了啥是组件 ，下面再来看一些概念 ：

 
模块

  1. 理解 (啥是模块) ： 向外提供特定功能的 js 程序 ，一般就是一个js 文件
  2. 为什么 ( 使用 模块 ) : js 文件很多很复杂
  3. 作用 （模块） ：复用 js ，简化 js 的编写 ， 提高 js 运行效率

 
模块化

 
当应用中的 js 都是 以 模块来编写的 ,那么这个应用就是一个模块化的应用 .

 
其实 就是 ： 将 js 拆分成 多个 ， 比如 一个 js 很大 ， 这里 就 将它拆成了 a.js ， b.js ， c.js 等 .

 
组件化 ：

 
当应用中的功能都是多组件的方式编写的，那么这个应用就是一个组件化的应用

 

3.2 使用组件 (非单文件组件)

 
在 vue 有两种组件 ， 1. 非单文件组件 2. 单文件组件 .

 
非单文件组件 ： 一个文件中包含 n 个组件 .

在这里插入图片描述

 
单文件组件 ： 一个文件中只包含 一个 组件

在这里插入图片描述

 
下面来学习 一下 如何 创建组件 ， 注册组件 ，使用组件
 
图一 ：

在这里插入图片描述

 
图二 :

在这里插入图片描述

 
附上代码 ：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>基本使用</title><script src="../../js/vue.js"></script>
</head><body><div id="root"><school></school><hr><student></student></div><script>// 1. 创建 school 组件// extend : 扩展let school = Vue.extend({data() {return {schoolName: '翻斗幼儿园',address: 'm78',}},template:`<div><h2>名称: {{schoolName}}</h2><h2>地址: {{address}}</h2>    </div>`})// 创建 student 组件 let student = Vue.extend({data() {return {studentName: "大古",age: 18}},template:`<div><h2>姓名: {{studentName}}</h2><h2>年龄: {{age}}</h2></div>`})new Vue({el: "#root",// 注册组件 使用 components 配置项 components: {school,student}})</script></body></html>

 

3.3 全局组件

 
使用全局注册组件 (此时所有 实例都能使用)

在这里插入图片描述

 
总结 ：

 
vue 中使用组件的三大步骤 : 1. 定义 组件 (创建组件) 2. 组测组件 3. 使用组件 (写组件标签)

  1. 如何定义一个组件 ?

    a. 使用 Vue.extend （options） 创建 , 其中 options 和 new Vue(options) 时传入的那个 options 几乎一样 , 当也有点 区别 :

    • 区别如下 ：
      • el 不用谢 ， 为什么 ？ —> 最终所有的组件都要经过一个 vm 的管理 ， 由 vm 中的 el 决定服务那个容器
      • data 必须写成函数 ， 为什么 ？ —> 避免组件被复用时 ， 数据存在引用关系
    • 备注 ： 使用 template 可以配置组件结构
       

  2. 如何注册组件 ？

    • 局部注册 ： 靠 new Vue 的时候 传入 components 选项
    • 全局注册 ： 靠 Vue.component(‘组件名’ ， 组件)
       

  3. 编写组件标签 ： 如 ：<school></school>

 

3.4 组件的几个注意点

 

图一 ：

在这里插入图片描述

 
图二 ：

在这里插入图片描述

 
图三 ：

在这里插入图片描述

 

3.5 组件的嵌套

 
图示 ：

在这里插入图片描述

 
到此 ， 已经知道了组件 （非单文件组件）的基本使用 , 这里 其实 已经可以 学习 单文件组件了， 但是 为了后面内容的学习简单一点 ，

这里先来学习一下 VueComponent 构造函数 。

 

3.6 VueComponent 构造函数

 
图一 ：

在这里插入图片描述

 
图二 ：

在这里插入图片描述

 
vm 和 vc 的区别 :

在这里插入图片描述

 
最后再说一个 重要的内置关系 ，就开始 单文件的学习 .

 

3.7 一个重要的内置关系

图一 ：

在这里插入图片描述

 
图二 ：

在这里插入图片描述

 

到此 我们的 非单文件组件就看完了， 下面就可以来学习一下 单文件组件.

相关文章：

Vue(6)

文章目录1. 自定义指令1.1 函数式1.2 对象式1.3 自定义指令常见坑1.4 创建全局指令2. 生命周期2.1 引出生命周期2.2 分析生命周期2.3 总结3. 组件3.1 认识组件3.2 使用组件 (非单文件组件)3.3 全局组件3.4 组件的几个注意点3.5 组件的嵌套3.6 VueComponent 构造函数3.7 一个重要…...

编程日记 2023/2/26 21:26:16

Neo4j列表函数

使用列表 标量列表函数 size() 函数返回列表中的元素的数量 MATCH (p:Person)-[:ACTED_IN]->(m:Movie) WITH p, collect (m.title) AS MovieTitles WITH p, MovieTitles, size(MovieTitles) AS NumMovies WHERE NumMovies > 20 RETURN p.name AS Actor, NumMovies, Movie…...

编程日记 2023/2/26 21:25:10

55. 跳跃游戏

给定一个非负整数数组 nums &#xff0c;你最初位于数组的 第一个下标 。数组中的每个元素代表你在该位置可以跳跃的最大长度。判断你是否能够到达最后一个下标。示例 1&#xff1a;输入&#xff1a;nums [2,3,1,1,4]输出&#xff1a;true解释&#xff1a;可以先跳 1 步&#…...

编程日记 2023/2/26 21:24:02

typedef在c语言中的作用

在 C 语言中&#xff0c;typedef 是一个非常有用的关键字&#xff0c;用于给数据类型定义一个新的名字。typedef 的作用有以下几个方面&#xff1a; 定义新类型名&#xff1a;typedef 可以定义一个新的数据类型名称&#xff0c;使得该类型名称可以在程序中使用。这样可以提高代…...

编程日记 2023/2/26 21:22:50

计算机网络体系结构及分层参考模型

文章目录一、分层设计思想的提出二、网络分层的必要性三、什么是计算机网络体系结构四、计算机网络参考模型OSI参考模型/五层参考模型/TCP/IP参考模型一、分层设计思想的提出 最早提出分层思想的是 ARPANET网。1969年11月&#xff0c;美国国防部开始建立一个命名为ARPANET的网络…...

编程日记 2023/2/26 21:21:45

LLVM程序分析与编译转换框架论文分享

LLVM 2004年论文原文 概述 本文描述了 LLVM&#xff08;低级虚拟机&#xff09;&#xff0c;一种编译器框架&#xff0c;旨在通过在编译时、链接时、运行时&#xff0c;以及运行之间的空闲时间。 LLVM 以静态单一赋值 (SSA) 形式定义了一种通用的低级代码表示&#xff0c;具有…...

编程日记 2023/2/26 21:20:37

《程序员思维修炼》速读笔记

文章目录书籍信息概览绪论从新手到专家的历程认识大脑利用右脑调试大脑主动学习积累经验控制注意力超越专家图解书籍信息 书名&#xff1a;《程序员思维修炼&#xff08;修订版&#xff09;》 作者&#xff1a;[美] Andy Hunt 概览 绪论 再提“实用”关注情境所有人都关注这…...

编程日记 2023/2/26 21:19:31

【Hello Linux】进程概念

作者&#xff1a;小萌新 专栏&#xff1a;Linux 作者简介&#xff1a;大二学生 希望能和大家一起进步&#xff01; 本篇博客简介&#xff1a;简单介绍下进程的概念 进程基本概念PCB 程序控制块task_struct是什么task_struct里面有什么查看进程通过系统目录查看进程通过ps指令查…...

编程日记 2023/2/26 21:18:23

Bunifu.UI.WinForms 6.0.2 Crack

Bunifu.UI.WinForms为 WinForms创建令人惊叹的UI Bunifu.UI.WinForms我们为您提供了现代化的快速用户界面控件。用于 WinForms C# 和 VB.NET 应用程序开发的完美 UI 工具 简单 Bunifu.UI.WinForms没有臃肿的特征。正是您构建令人惊叹的 WinForms 应用程序所需要的。只需拖放然…...

编程日记 2023/2/26 21:17:16

学习 Python 之 Pygame 开发魂斗罗（五）

学习 Python 之 Pygame 开发魂斗罗&#xff08;五&#xff09;继续编写魂斗罗1. 加载地图2. 修改角色尺寸和地面高度继续编写魂斗罗 在上次的博客学习 Python 之 Pygame 开发魂斗罗&#xff08;四&#xff09;中&#xff0c;我们完成了角色的移动和跳跃还有射击&#xff0c;由…...

编程日记 2023/2/26 21:16:09

LeetCode 104. 二叉树的最大深度

LeetCode 104. 二叉树的最大深度 难度&#xff1a;easy\color{Green}{easy}easy 题目描述 给定一个二叉树&#xff0c;找出其最大深度。 二叉树的深度为根节点到最远叶子节点的最长路径上的节点数。 说明: 叶子节点是指没有子节点的节点。 示例&#xff1a; 给定二叉树 [3…...

编程日记 2023/2/26 21:15:03

pandas 中如何按行或列的值对数据排序?

在处理表格型数据时&#xff0c;常会用到排序&#xff0c;比如&#xff0c;按某一行或列的值对表格排序&#xff0c;要怎么做呢&#xff1f; 这就要用到 pandas 中的 sort_values() 函数。 一、 按列的值对数据排序 先来看最常见的情况。 1.按某一列的值对数据排序 以下面…...

编程日记 2023/2/26 21:13:56

「牛客网C」初学者入门训练BC139,BC158

&#x1f436;博主主页&#xff1a;ᰔᩚ. 一怀明月ꦿ ❤️‍&#x1f525;专栏系列&#xff1a;线性代数&#xff0c;C初学者入门训练 &#x1f525;座右铭&#xff1a;“不要等到什么都没有了&#xff0c;才下定决心去做” &#x1f680;&#x1f680;&#x1f680;大家觉不错…...

编程日记 2023/2/26 21:12:48

【深度学习】线性回归、逻辑回归、二分类，多分类等基础知识总结

提示&#xff1a;文章写完后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 文章目录前言1. 线性回归2、逻辑回归3. 单层神经元的缺陷&多层感知机softmax 多分类最后再来一个 二分类的例子前言 入行深度学习快2年了,是时间好好总结下基础知识了.现…...

编程日记 2023/2/26 21:11:42

【MySQL】调控 字符集

一、 MySQL 启动选项 & 系统变量 启动选项 是在程序启动时我们程序员传递的一些参数&#xff0c;而 系统变量 是影响服务器程序运行行为的变量 1.1 启动项 MySQL 客户端设置项包括&#xff1a; 允许连入的客户端数量 、 客户端与服务器的通信方式 、 表的默认存储引擎 、…...

编程日记 2023/2/26 21:10:34

FME+YOLOV7写DNF自动刷图脚本

目录 前言 一、难点分析 二、实现流程 1.DNF窗口位置获取 2.获取训练数据 3.数据标注 4.数据格式转换 5.数据训练 5.刷图逻辑编写 前言 这是一篇不务正业的研究&#xff0c;首先说明&#xff0c;这不是外挂&#xff01;这不是外挂&#xff01;这不是外挂&#xff01;这只是用a…...

编程日记 2023/2/26 21:09:25

Java语法面试题

多线程锁 Synchronized&#xff1a;一次只能被一个线程占有ReadWriteLock&#xff1a;被多个线程持有&#xff0c;写锁只能被一个线程占有ReentrantLock&#xff1a;一个线程的多个流程能获取同一把锁&#xff0c;就是可重入锁&#xff0c;即在一个线程中可以被重复的获取自旋锁…...

编程日记 2023/2/26 21:07:18

location

目录 匹配的目标 格式 匹配符号&#xff1a; 优先级 要表达不匹配条件&#xff0c;则用 if 实现 例子&#xff1a;根目录的匹配最弱 例子&#xff1a;区分大小写 和 不区分大小写 例子&#xff1a;以根开头 和 不区分大小写 例子&#xff1a;等号 匹配的目标 ng…...

编程日记 2023/2/26 21:06:12

简述RBAC模型

RBAC&#xff08;Role-Based Access Control&#xff09;模型是一种常用的访问控制模型&#xff0c;用于管理和控制用户对系统资源的访问权限。RBAC模型通过将用户分配给角色&#xff0c;并授予角色相应的权限&#xff0c;来实现安全的资源访问管理。 在RBAC模型中&#xff0c;…...

编程日记 2023/2/26 21:05:05

倒计时2天：中国工程院院士谭建荣等嘉宾确认出席，“警务+”时代来临...

近日伴随公安部、科技部联合印发通知&#xff0c;部署推进科技兴警三年行动计划&#xff08;2023-2025年&#xff09;&#xff0c;现代科技手段与警务工作相结合的方式&#xff0c;正式被定义为未来警务发展的新趋势。 21世纪以来&#xff0c;随着科技的不断发展和创新&#xf…...

编程日记 2023/2/26 21:04:00

生成xcframework

打包 XCFramework 的方法 XCFramework 是苹果推出的一种多平台二进制分发格式&#xff0c;可以包含多个架构和平台的代码。打包 XCFramework 通常用于分发库或框架。 使用 Xcode 命令行工具打包 通过 xcodebuild 命令可以打包 XCFramework。确保项目已经配置好需要支持的平台…...

编程新知 2025/10/5 2:30:38

超短脉冲激光自聚焦效应

前言与目录 强激光引起自聚焦效应机理 超短脉冲激光在脆性材料内部加工时引起的自聚焦效应&#xff0c;这是一种非线性光学现象&#xff0c;主要涉及光学克尔效应和材料的非线性光学特性。 自聚焦效应可以产生局部的强光场&#xff0c;对材料产生非线性响应&#xff0c;可能…...

编程新知 2025/11/4 16:08:05

select、poll、epoll 与 Reactor 模式

在高并发网络编程领域&#xff0c;高效处理大量连接和 I/O 事件是系统性能的关键。select、poll、epoll 作为 I/O 多路复用技术的代表&#xff0c;以及基于它们实现的 Reactor 模式&#xff0c;为开发者提供了强大的工具。本文将深入探讨这些技术的底层原理、优缺点。​ 一、I…...

编程新知 2025/11/3 20:14:40

Mac下Android Studio扫描根目录卡死问题记录

环境信息 操作系统: macOS 15.5 (Apple M2芯片)Android Studio版本: Meerkat Feature Drop | 2024.3.2 Patch 1 (Build #AI-243.26053.27.2432.13536105, 2025年5月22日构建) 问题现象 在项目开发过程中&#xff0c;提示一个依赖外部头文件的cpp源文件需要同步&#xff0c;点…...

编程新知 2025/11/3 0:36:59

docker 部署发现spring.profiles.active 问题

报错&#xff1a; org.springframework.boot.context.config.InvalidConfigDataPropertyException: Property spring.profiles.active imported from location class path resource [application-test.yml] is invalid in a profile specific resource [origin: class path re…...

编程新知 2025/9/20 12:14:18

听写流程自动化实践，轻量级教育辅助

随着智能教育工具的发展&#xff0c;越来越多的传统学习方式正在被数字化、自动化所优化。听写作为语文、英语等学科中重要的基础训练形式&#xff0c;也迎来了更高效的解决方案。 这是一款轻量但功能强大的听写辅助工具。它是基于本地词库与可选在线语音引擎构建&#xff0c;…...

编程新知 2025/11/3 20:51:33

rnn判断string中第一次出现a的下标

# coding:utf8 import torch import torch.nn as nn import numpy as np import random import json""" 基于pytorch的网络编写 实现一个RNN网络完成多分类任务 判断字符 a 第一次出现在字符串中的位置 """class TorchModel(nn.Module):def __in…...

编程新知 2025/9/24 16:25:00

【JVM】Java虚拟机（二）——垃圾回收

目录 一、如何判断对象可以回收 &#xff08;一&#xff09;引用计数法 &#xff08;二&#xff09;可达性分析算法 二、垃圾回收算法 &#xff08;一&#xff09;标记清除 &#xff08;二&#xff09;标记整理 &#xff08;三&#xff09;复制 &#xff08;四&#xff…...

编程新知 2025/10/29 23:41:19

关于uniapp展示PDF的解决方案

在 UniApp 的 H5 环境中使用 pdf-vue3 组件可以实现完整的 PDF 预览功能。以下是详细实现步骤和注意事项&#xff1a; 一、安装依赖 安装 pdf-vue3 和 PDF.js 核心库&#xff1a; npm install pdf-vue3 pdfjs-dist二、基本使用示例 <template><view class"con…...

编程新知 2025/9/18 20:16:52

ubuntu系统文件误删(/lib/x86_64-linux-gnu/libc.so.6)修复方案 [成功解决]

报错信息&#xff1a;libc.so.6: cannot open shared object file: No such file or directory&#xff1a; #ls, ln, sudo...命令都不能用 error while loading shared libraries: libc.so.6: cannot open shared object file: No such file or directory重启后报错信息&…...

编程新知 2025/10/13 23:55:54