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

Vue(6)

news 2026/3/30 0:33:49

文章目录

  • 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

AVR微控制器通用驱动库VitconCommon详解

1. VitconCommon 库概述VitconCommon 是一个面向 AVR 微控制器平台的底层通用函数库集合&#xff0c;由 Vitcon 团队开发并维护&#xff0c;作为其系列外设驱动库&#xff08;如 VitconGP2Y0A21YK、VitconSAA1064T 等&#xff09;的公共依赖基础。该库不提供独立的应用层功能&a…...

编程新知 2026/3/30 0:21:39

别再死磕分布式事务了！用MySQL+RabbitMQ手撸一个本地消息表，搞定订单库存一致性问题

轻量级数据一致性实战&#xff1a;基于MySQL与RabbitMQ的本地消息表设计 在电商系统开发中&#xff0c;订单创建与库存扣减的原子性操作一直是技术难点。传统单体架构下的数据库事务无法跨越服务边界&#xff0c;而引入分布式事务框架又往往带来额外的复杂性和性能损耗。本文将…...

编程新知 2026/3/29 22:42:54

Gemini Advanced 2025生产力跃迁：从入门到精通的场景化应用手册

1. Gemini Advanced 2025入门指南&#xff1a;从零开始的AI生产力工具 第一次打开Gemini Advanced时&#xff0c;我完全被它的界面简洁性震惊了——没有复杂的菜单&#xff0c;只有一个干净的对话框。但别被这简单外表迷惑&#xff0c;这个AI助手能做的事情远超想象。对于刚接触…...

编程新知 2026/3/29 22:32:50

WeKnora镜像免配置教程：支持知识库版本管理与灰度问答切换机制

WeKnora镜像免配置教程&#xff1a;支持知识库版本管理与灰度问答切换机制 1. 引言&#xff1a;告别AI幻觉&#xff0c;让知识问答精准可控 你有没有遇到过这种情况&#xff1f;你给AI看了一份产品说明书&#xff0c;然后问它一个具体参数&#xff0c;结果它回答得头头是道&a…...

编程新知 2026/3/29 21:28:23

REFramework技术实战指南：问题解决与架构优化

REFramework技术实战指南&#xff1a;问题解决与架构优化 【免费下载链接】REFramework REFramework 是 RE 引擎游戏的 mod 框架、脚本平台和工具集&#xff0c;能安装各类 mod&#xff0c;修复游戏崩溃、卡顿等问题&#xff0c;还有开发者工具&#xff0c;让游戏体验更丰富。 …...

编程新知 2026/3/29 20:18:06

OpenClaw怎么做到不串台、能并行、还总回对群 [特殊字符]✅（含源码解析）--OpenClaw系列第1期

你把 OpenClaw 部署进群&#xff0c;大家立刻把它当万能同事用&#xff1a;小王在 dev-team 群&#xff1a;bot 帮我写发布计划小李在同群线程&#xff1a;bot CI 为啥挂了&#xff1f;你在私聊&#xff1a;这个别在群里说…还有人&#xff1a;bot 同时分析文档 A、B&#xff0…...

编程新知 2026/3/29 19:49:45

如何免费完成专业定性数据分析：QualCoder终极指南

如何免费完成专业定性数据分析&#xff1a;QualCoder终极指南 【免费下载链接】QualCoder Qualitative data analysis for text, images, audio, video. Cross platform. Python 3.8 or newer and PyQt6. 项目地址: https://gitcode.com/gh_mirrors/qu/QualCoder 你是否…...

编程新知 2026/3/29 17:41:09

[实时流媒体] RTSP-HLS跨平台转换技术解析：从原理到实践的完整指南

[实时流媒体] RTSP-HLS跨平台转换技术解析&#xff1a;从原理到实践的完整指南 【免费下载链接】rtsp-stream Out of box solution for RTSP - HLS live stream transcoding. Makes RTSP easy to play in browsers. 项目地址: https://gitcode.com/gh_mirrors/rt/rtsp-stream…...

编程新知 2026/3/29 17:27:06

C语言和C++有啥区别？孩子学编程该选哪个

C乃是当下国内信息学奥赛所指定的语言&#xff0c;它还是现今最为流行的编程语言当中的一种&#xff0c;所以不少孩子于选择编程语言去学习时&#xff0c;会挑选C这种编程语言。从C的名字不难看出&#xff0c;它跟老牌语言C语言之间有着颇深的关系。那么&#xff0c;C与C语言的…...

编程新知 2026/3/29 17:02:34

Volcano调度算法全解析：从DRF公平分配到Binpack节点装箱（含权重调优技巧）

Volcano调度算法深度实战&#xff1a;从DRF公平分配到Binpack节点装箱 在Kubernetes生态中&#xff0c;资源调度一直是决定集群效率和稳定性的核心环节。当你的业务从简单的Web服务扩展到AI训练、大数据处理等复杂场景时&#xff0c;原生Kubernetes调度器的局限性就会凸显——它…...

编程新知 2026/3/29 16:56:31