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

Vue(6)

news 文章来源：https://blog.csdn.net/mu_tong_/article/details/129225459 2025/4/19 16:47:17

文章目录

  • 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

Python蓝桥杯训练：基本数据结构 [哈希表]

Python蓝桥杯训练&#xff1a;基本数据结构 [哈希表] 文章目录Python蓝桥杯训练&#xff1a;基本数据结构 [哈希表]一、哈希表理论基础知识1、开放寻址法2、链式法二、有关哈希表的一些常见操作三、力扣上面一些有关哈希表的题目练习1、[有效的字母异位词](https://leetcode.cn…...

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

MacOS 配置 Fvm环境

系统环境&#xff1a;MacOS 13&#xff0c;M1芯片 1. 安装HomeBrew&#xff1a; /bin/zsh -c "$(curl -fsSL https://gitee.com/cunkai/HomebrewCN/raw/master/Homebrew.sh)" speed 2. 使用brew安装Fvm&#xff1a; brew tap leoafarias/fvm brew install fvm 3…...

编程日记 2023/2/26 21:01:49

Python小白入门- 01( 第一章,第1节) 介绍 Python 编程语言

1. 介绍 Python 编程语言 1.1 Python 是什么 Python 是一种高级的、解释型、面向对象的编程语言，具有简洁、易读、易写的语法特点。Python 由 Guido van Rossum 于 1989 年在荷兰创造，并于 1991 年正式发布。 Python 语言广泛应用于数据科学、Web 开发、人工智能、自动化测…...

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

高并发系统设计之缓存

本文已收录至Github&#xff0c;推荐阅读 &#x1f449; Java随想录 这篇文章来讲讲缓存。缓存是优化网站性能的第一手段&#xff0c;目的是让访问速度更快。 说起缓存&#xff0c;第一反应可能想到的就是Redis。目前比较好的方案是使用多级缓存&#xff0c;如CPU→Ll/L2/L3→…...

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

【N32WB03x SDK使用指南】

【N32WB03x SDK使用指南】1. 简介1.1 产品简介1.2 主要资源1.3 典型应用2. SDK/开发固件文件目录结构2.1 doc2.2 firmware2.3 middleware2.4 utilities2.5 projects Projects3. 项目配置与烧录3.1 编译环境安装3.2 固件支持包安装3.3 编译环境配置3.4 编译与下载3.5 BLE工程目录…...

编程日记 2023/2/26 20:58:31

pytest测试框架——pytest.ini用法

这里写目录标题一、pytest用法总结二、pytest.ini是什么三、改变运行规则pytest.inicheck_demo.py执行测试用例四、添加默认参数五、指定执行目录六、日志配置七、pytest插件分类八、pytest常用插件九、改变测试用例的执行顺序十、pytest并行与分布式执行十一、pytest内置插件h…...

编程日记 2023/2/26 20:57:25

KAFKA安装与配置（带Zookeeper）2023版

KAFKA安装与配置（带Zookeeper） 一、环境准备： Ubuntu 64位 22.04，三台 二、安装JDK1.8 下载JDK1.8，我这边用的版本是jdk1.8.0_2022、解压jdk tar -zxvf jdk1.8.0_202.tar.gz 3、在/usr/local创建java文件夹，并将解压的jdk移动到/usr/local/java sudo mv jdk1.8.0_202…...

编程日记 2023/2/26 20:56:20

深入浅出解析ChatGPT引领的科技浪潮【AI行研商业价值分析】

Rocky Ding写在前面 【AI行研&商业价值分析】栏目专注于分享AI行业中最新热点/风口的思考与判断。也欢迎大家提出宝贵的意见或优化ideas&#xff0c;一起交流学习&#x1f4aa; 大家好&#xff0c;我是Rocky。 2022年底&#xff0c;ChatGPT横空出世&#xff0c;火爆全网&a…...

编程日记 2023/2/26 20:55:14

.net 批量导出文件，以ZIP压缩方式导出

1. 首先Nuget ICSharpCode.SharpZipLib <script type"text/javascript">$(function () {$("#OutPutLink").click(function () { // 单击下文件时$.ajax({ // 先判断条件时间内没有文件url: "/Home/ExistsFile?statTime" $(&q…...

编程日记 2023/2/26 20:54:07

数据分析：某电商优惠卷数据分析

数据分析&#xff1a;某电商优惠卷数据分析 作者&#xff1a;AOAIYI 专栏&#xff1a;python数据分析 作者简介&#xff1a;Python领域新星作者、多项比赛获奖者&#xff1a;AOAIYI首页 &#x1f60a;&#x1f60a;&#x1f60a;如果觉得文章不错或能帮助到你学习&#xff0c;可…...

编程日记 2023/2/26 20:53:01