Vue04
自定义指令
-
directives是Vue的一个配置项
-
这里写自定义指令
自定义指令被调用的时机
-
指令与元素成功绑定时
-
指令所在的模板被重新解析时
函数式
<span v-big="n"></span> directives:{ big(element,binding){ element.innerText =binging.value *10 }
}
//element拿到的是实体标签
//binding里的value是传入的参数 n
对象式
注:函数式相当于对象式的一种简写
directives:{m:{bind:function(el,binding){el.innerHTML = binding.value;},inserted:function(el,binding){ el.focus();},update:function(el,binding){el.innerHTML = binding.value;}}
}
-
定义语法
-
局部指令,对象式,函数式
-
全局指令,Vue.directive(指令名,配置对象)或 Vue.directive(指令名,回调函数)
-
配置对象中常用的3个回调
-
bind :指令与元素成功绑定时
-
inserted:指令所在元素被插入页面时
-
update:指令所在的模板被重新解析时
-
备注
-
指令定义时不加v-,但使用时要加v-
-
指令名如果时多个单词,要使用kebab-case命名方式,不要用cameCase命名
<body><div id="root"><span v-text="n"></span><button @click="n++">点我n+1</button><input type="text" :value="n" v-focus></div>
</body>
<script>new Vue({el:'#root',data:{message:'你好哇!',n : 1},// 这里使用函数式写法,缺点是不能够在生命周期中起作用,但我感觉,可以满足大多数需求了directives:{focus(el, binding){el.focus()}}})
生命周期
生命周期
-
又名:生命周期回调函数,生命周期函数,生命周期钩子
-
是生命:Vue在关键时刻帮我们调用的一些特殊名称的函数
-
生命周期函数的名字不可更改,但函数的具体内容是程序员根据需求编写的
-
生命周期函数中的this指向是vm或组件实例对象
注:调试bug的一个技巧,在代码里写入debugger(添加断点)
挂载流程
-
beforeCreate
- 此时无法通过vm访问到data中的数据,methods中的方法
-
created
- 此时可以访问vm中的data中的数据和methods中的方法
-
beforeMount
-
页面呈现的是未经Vue编译的DOM结构
-
所有对DOM的操作,最终都不奏效
-
-
mounted
-
页面中呈现的是经过Vue编译的DOM
-
对DOM的操作均有效(尽可能避免)至此初始化过程结束,一般在从进行:开启定时器,发送网络请求,订阅消息,绑定自定义事件 等初始化操作
-
更新流程
-
beforeUpdata
- 此时:数据是新的,但页面是旧的(页面尚未和数据保持同步)
-
updated
- 此时:数据是新的,页面也是新的(页面和数据保持同步)
销毁流程
- vm.destroy() 被调用时,vm就被销毁了。完全销毁一个实例,清理它与其他实例的链接,解绑它的全部指令及自定义事件监听器
- beforeDestroy
- 此时:vm中所有的:data,methods,指令等待,都处于可用状态,马上要执行销毁过程,一般在此阶段:关闭定时器,取消订阅信息,解绑自定义事件等收尾操作
- destroyed
常用的生命周期钩子
-
mounted: 发送ajax请求,启动定时器,绑定自定义事件,订阅消息等【初始化操作】
-
beforeDestroy:清除定时器,解绑自定义事件,取消订阅消息等【收尾工作】
关于销毁Vue实例
-
销毁后借助Vue开发者工具看不到任何信息
-
销毁后自定义事件会失效,但原生DOM事件依然有效
-
一般不会在beforeDestroy操作数据,因为即操作数据,也不会再触发更新流程
// 生命周期钩子// 目前是8个生命周期钩子,分为4对// beforeCreate、created ------> create 对// beforeMount、mounted ------> mount 对// beforeUpdate、updated ------> update 对// beforeDestroy、destroyed ------> destroy 对beforCreate:function(){console.log('beforCreate');},created:function(){console.log('created');},beforeMount:function(){console.log('beforeMount');},mounted:function(){console.log('mounted');},beforeUpdate:function(){console.log('beforeUpdate');},updated:function(){console.log('updated');},beforeDestroy:function(){console.log('beforeDestroy');},destroyed:function(){console.log('destroyed');}
组件
原生 html,css,js的存在的问题
1,依赖关系混乱,不好维护
2,代码复用率不高
组件的定义:实现应用中局部功能代码和资源的集合
非单文件组件
Vue中使用组件的三大步骤
-
定义组件(创建组件)
-
注册组件
-
使用组件(写组件标签)
-
如何定义一个组件
-
使用const xxx = Vue.extend(options)创建,其中options 和 new Vue(options)传入的options几乎一样,但也有区别
-
el不要写,因为最终所有的组件都要经过一个vm的管理,由vm中的el决定服务哪个容器
-
data必须写成函数,因为避免组件被复用时,数据存在引用关系
-
注:使用template来配置组件结构
-
-
如何注册组件
-
局部注册:靠new Vue的时候传入components选项
-
全局注册:靠Vue.component(“组件名”,组件)
-
-
使用组件
- 编写组件标签
细节注意
-
关于组件名
-
一个单词组成
-
第一种写法(首字母小写):school
-
第二种写法(首字母大写):School
-
-
多个单词组成
-
第一种写法(kabab-case命名):my-school
-
第二种写法(CamelCase命名):MySchool【需要Vue脚手架支持】
-
-
注:
-
组件名尽可能回避HTML中已有的元素名称,例如:h1,H1
-
可以使用name配置项指定组件在开发者工具中呈现的名字
-
-
-
关于组件标签
-
第一种写法:
-
第二种写法:
-
注:不用脚手架时, 会导致后续组件不能渲染
-
-
一个简写方式
-
const school = Vue.extend(options) 可以简写为 const school =options
-
组件的嵌套
注:app这个组件在实际开发中管理剩余的其他组件
VueComponent
-
school 组件本质是一个名为VueComponent的构造函数,且不是程序员定义的,是Vue.extend生成的
-
我们只需要写,Vue解析时会帮我们创建school组件的实例对象
-
特别注意:每次调用Vue.extend ,返回的都一个全新的VueComponent
-
关于this指向
-
组件配置中:data中的函数,methods中的函数,watch中的函数,computed中的函数,他们的this均是【VueComponent实例对象】
-
new Vue(options) 配置中:data中的函数,methods中的函数,watch中的函数,computed中的函数,他们的this均是【Vue实例对象】
-
VueComponent的实例对象,以后简称vc(也可称为:组件实例对象)
相关文章:
Vue04
自定义指令 directives是Vue的一个配置项 这里写自定义指令 自定义指令被调用的时机 指令与元素成功绑定时 指令所在的模板被重新解析时 函数式 <span v-big"n"></span> directives:{ big(element,binding){ element.innerText bingin…...
OpenCV(9):视频处理
1 介绍 视频是由一系列连续的图像帧组成的,每一帧都是一幅静态图像。视频处理的核心就是对这些图像帧进行处理。常见的视频处理任务包括视频读取、视频播放、视频保存、视频帧处理等。 视频分析: 通过视频处理技术,可以分析视频中的运动、目标、事件等。…...
短剧源码部署搭建小程序搭建IAA+IAP混合解锁模式
在当今数字化内容消费迅速增长的时代,短剧作为一种新兴的内容形式,凭借其短小精悍、节奏紧凑的特点,迅速吸引了大量用户。作为一名软件体验测试人员,我有幸体验了一款集创新与实用为一体的短剧小程序。这款小程序不仅在前端用户体…...
基于 CFD 预测的机器学习第 2 部分:在 Benchmark 应用程序上使用 Stochos 预测流场
了解机器学习和 Stochos 如何彻底改变制造业的 CFD 预测。 挑战 预测复杂流体动力学场景中的流场一直是工程师和科学家面临的重大挑战。传统的计算流体动力学 (CFD) 方法需要大量的计算资源和时间,因此难以处理实时预测和大规模模拟。 此外…...
NLP的预处理数据
处理文本数据的主要工具是Tokenizer。Tokenizer根据一组规则将文本拆分为tokens。然后将这些tokens转换为数字,然后转换为张量,成为模型的输入。模型所需的任何附加输入都由Tokenizer添加。 如果您计划使用预训练模型,重要的是使用与之关联的…...
数据结构——单链表
前言 1. 什么是链表 链表是一种物理存储结构上非连续、非顺序的存储结构,数据元素的逻辑顺序是通过链表中的指针链接次序实现的 。与顺序表不同,链表的存储数据在内存是随机分布的。 2. 链表的分类 链表的种类多种多样,其中最常见的有八种…...
SurfaceFlinger代码笔记
drawLayers是做client合成,合成完以后的buffer会放在RenderSurface里 FrameBufferSurface里的buffer是通过setClientTarget给到HWC的(HWC应该给client合成的buffer留了一个slot) Output.cpp这个文件非常关键,代表着具体一个Display的操作 d…...
Linux-Ansible模块进阶
文章目录 Copy和FetchFile模块 🏡作者主页:点击! 🤖Linux专栏:点击! ⏰️创作时间:2025年02月22日18点49分 Copy和Fetch copy和fetch模块实践 copy模块需要注意的点:在收集日志之前…...
【机器学习】强化学习(2)——捋清深度强化学习的思路
在之前学习的过程中我了解到深度学习中很重要的一个概念是反向传播,最近看论文发现深度强化学习(DRL)有各种各样的方法,但是却很难区分他们的损失函数的计算以及反向传播的过程有何不同。在有监督的学习中,损失可以理解…...
touchgfx的工作机制
touchgfx的工作机制 一.MVP软件架构 MVP的全称为Model-View-Presenter Model: 就是数据部分,在整个touchgfx应用中,只有一个Model类实例对象,它为所有的Screen屏幕界面服务,可以理解成是一个全局变量区,同时它还负责和后端系统通信 View: 就是UI界面部分,对应于View类,在整…...
Fisher信息矩阵(Fisher Information Matrix, FIM)与自然梯度下降:机器学习中的优化利器
Fisher信息矩阵与自然梯度下降:机器学习中的优化利器 在机器学习尤其是深度学习中,优化模型参数是一个核心任务。我们通常依赖梯度下降(Gradient Descent)来调整参数,但普通的梯度下降有时会显得“笨拙”,…...
2025数学建模竞赛汇总,错过再等一年
01、2025第十届数维杯大学生数学建模挑战赛(小国赛) 竞赛介绍:数学建模行业内仅次于国赛和美赛的的第三赛事,被多所高校认定为国家级二类竞赛。赛题类型是国内唯一和高教社杯国赛题型风格完全一致的全国性数学建模竞赛࿰…...
设计模式教程:观察者模式(Observer Pattern)
一、模式概述 观察者模式(Observer Pattern)是一种行为型设计模式,它定义了一种一对多的依赖关系。一个对象(称为主题)状态发生变化时,所有依赖于它的对象(称为观察者)都会自动得到…...
代码随想录算法训练营第九天| 151.翻转字符串里的单词、右旋转字符串 、28. 实现 strStr()、459.重复的子字符串、字符串总结
151.翻转字符串里的单词 题目链接:151.翻转字符串里的单词 文档讲解:代码随想录翻转字符串里的单词 视频讲解:LeetCode:翻转字符串里的单词 状态:参考自己写出来的 思路: 反转:思路很清晰&#…...
bpmn.js + Node.js_构建高效的后端工作流处理系统
1. 引言 1.1 研究背景与意义 随着企业业务的复杂化,传统的流程管理工具已难以满足需求。BPMN(Business Process Model and Notation)作为一种标准化的流程建模语言,结合 bpmn.js 和 Node.js 可以实现高效的工作流管理系统,提升企业的运营效率。 1.3 BPMN 和 bpmn.js 简…...
DeepSeek系统架构的逐层分类拆解分析,从底层基础设施到用户端分发全链路
一、底层基础设施层 1. 硬件服务器集群 算力单元: GPU集群:基于NVIDIA H800/H100 GPU构建,单集群规模超10,000卡,采用NVLink全互联架构实现低延迟通信。国产化支持:适配海光DCU、寒武纪MLU等国产芯片,通过…...
嵌入式硬件基础知识
1.电阻(主要是贴片电阻) 01 基础课程-电阻 1.电阻封装 2.相关参数 1.功率额定值: 电阻能够长期承受的最大功率,功率过大可能导致电阻过热或损坏。封装尺寸越大,散热能力越强,功率额定值通常越高。 2.容差: 电阻…...
springboot+dubbo+zookeeper的注册服务和调用实践
目录 zookeeper为什么可作为注册中心zookeeper注册中心优缺点启动zookeeper编写springboot项目提供dubbo服务1. 服务接口2. Springboot引入dubbo实现服务接口2.1 工程目录和依赖2.2 启动程序和application.properties2.3 DubboService 实现服务接口2.4 测试api,用于…...
ARM Cortex-M处理器中的MSP和PSP
在ARM Cortex-M系列处理器中,MSP(主堆栈指针)和PSP(进程堆栈指针)是两种不同的堆栈指针,主要用于实现堆栈隔离和提升系统可靠性。以下是它们的核心区别和应用场景: 1. 基本定义 MSP(…...
计算机网络:应用层 —— 电子邮件
文章目录 电子邮件的起源与发展电子邮件的组成电子邮件协议邮件发送和接收过程邮件发送协议SMTP协议多用途因特网邮件扩展MIME 电子邮件的信息格式 邮件读取协议邮局协议POP因特网邮件访问协议IMAP 基于万维网的电子邮件 电子邮件(E-mail)是因特网上最早…...
Vue3 + Spring WebMVC 验证码案例中的跨域问题与解决方法
最近在基于vue3 SpringWebMVC前后端分离的开发环境中实现一个验证码的案例,在开发过程中遇到了一些复杂的跨域问题,现已解决,故将解决方法分享,希望能帮到有需要的人。 出现的问题: 对于验证码的实现,我选…...
【Python爬虫(60)】解锁社交媒体数据宝藏:Python爬虫实战攻略
【Python爬虫】专栏简介:本专栏是 Python 爬虫领域的集大成之作,共 100 章节。从 Python 基础语法、爬虫入门知识讲起,深入探讨反爬虫、多线程、分布式等进阶技术。以大量实例为支撑,覆盖网页、图片、音频等各类数据爬取ÿ…...
Comfy UI 快捷键
Comfy UI 页面的快捷键操作(记录下,以防忘记): 捷径命令Ctrl Enter将当前图表排队等待生成Ctrl Shift Enter将当前图表排成第一个生成图表Ctrl Z/Ctrl Y撤消/重做Ctrl S保存工作流程Ctrl O加载工作流Ctrl A选择所有节点A…...
【C++】Arrays
《C程序设计基础教程》——刘厚泉,李政伟,二零一三年九月版,学习笔记 文章目录 1、一维数组的定义与初始化1.1、一维数组的定义1.2、一维数组的初始化 2、一维数组的使用3、一维数组与函数4、二维数组4.1、二维数组的定义4.2、二维数组的初始…...
EX_25/2/24
写一个三角形类,拥有私有成员 a,b,c 三条边 写好构造函数初始化 abc 以及 abc 的set get 接口 再写一个等腰三角形类,继承自三角形类 1:写好构造函数,初始化三条边 2:要求无论如何,等腰三角形类对象&#x…...
批量导出数据库表到Excel
这篇文章将介绍如何批量的将多个甚至成千上万的数据库表导出为Excel文件。 准备数据 如下图是数据库里的表,我们需要将它们全部导出为excel文件,这里以SQL Server数据库为例 新增导出 打开的卢导表工具,新建数据库连接,这里以S…...
代码随想录D52-53 图论 Python
目录 101. 孤岛的总面积 102. 沉没孤岛 103. 水流问题 104. 建造最大岛屿 101. 孤岛的总面积 要点: 整体来说是一个图着色的问题。 这道题目的思路符合直觉,但代码实现会和直觉有差别。如果仅使用visit记录不使用着色,会遇到非常多的…...
机器学习(部分算法、模型)
一、KNN 算法 原理 K-近邻算法(K-Nearest Neighbors,简称KNN),根据K个邻居样本的类别来判断当前样本的类别; 如果一个样本在特征空间中的k个最相似(最邻近)样本中的大多数属于某个类别,则该类本也属于这个类别 比如: 有10000个样…...
axios几种请求类型的格式
Axios 是一个基于 Promise 的 HTTP 客户端,广泛用于浏览器和 Node.js 中发送 HTTP 请求。它支持多种请求格式,包括 GET、POST、PUT、DELETE 等。也叫RESTful 目录 一、axios几种请求类型的格式 1、get请求 2、post请求 3、put请求 4、delete请求 二…...
SpringBoot使用Jasypt对YML文件配置内容进行加密(例:数据库密码加密)
SpringBoot使用Jasypt对YML文件配置内容进行加密(例:数据库密码加密) 前言 在SpringBoot的项目开发中,大多数情况下 yml 配置文件中存储的密码均以明文形式展示,这种方式显然存在较大的安全隐患。一旦有开发人员离职&…...
【C语言】指针笔试题
前言:上期我们介绍了sizeof与strlen的辨析以及sizeof,strlen相关的一些笔试题,这期我们主要来讲指针运算相关的一些笔试题,以此来巩固我们之前所学的指针运算! 文章目录 一,指针笔试题1,题目一…...
力扣 下一个排列
交换位置,双指针,排序。 题目 下一个排列即在组成的排列中的下一个大的数,然后当这个排列为降序时即这个排列最大,因为大的数在前面,降序排列的下一个数即升序。所以,要是想找到当前排列的下一个排列&…...
Three.js 快速入门教程【八】常见材质类型
系列文章目录 Three.js 快速入门教程【一】开启你的 3D Web 开发之旅 Three.js 快速入门教程【二】透视投影相机 Three.js 快速入门教程【三】渲染器 Three.js 快速入门教程【四】三维坐标系 Three.js 快速入门教程【五】动画渲染循环 Three.js 快速入门教程【六】相机控件 Or…...
python~http的请求参数中携带map
背景 调试 http GET请求的 map 参数,链路携带参数一直有问题,最终采用如下方式携带map 解决 user{"demo":"true","info":"王者"}url encode之后的效果如下所示 user%7B%22demo%22:%22true%22,%22info%22:%22…...
爬虫第九篇-结束爬虫循环
最近在学习Python爬虫的过程中,遇到了一个很有趣的问题:如何优雅地结束爬虫循环?今天,我想和大家分享一下我的发现和心得。 一、爬虫循环结束的常见问题 在写爬虫时,我们经常会遇到这样的情况:当爬取到的…...
考研/保研复试英语问答题库(华工建院)
华南理工大学建筑学院保研/考研 英语复试题库,由华工保研er和学硕笔试第一同学一起整理,覆盖面广,助力考研/保研上岸!需要👇载可到文章末尾见小🍠。 以下是主要内容: Part0 复试英语的方法论 Pa…...
《Effective Objective-C》阅读笔记(中)
目录 接口与API设计 用前缀避免命名空间冲突 提供“全能初始化方法” 实现description方法 尽量使用不可变对象 使用清晰而协调的命名方式 方法命名 编辑类与协议命名 为私有方法名加前缀 理解OC错误模型 理解NSCopying协议 协议与分类 通过委托与数据源协议进行…...
前端如何解决跨域
解决前端跨域问题有多种方法 JSONP:利用 <script> 标签的跨域能力,通过动态创建 script 标签并指定回调函数来获取数据。但只能处理 GET 请求,安全性较低。 JSONP 的原理是利用了 <script> 标签的跨域能力。因为浏览器允许 <…...
【HDLbits--Comb组合逻辑】
HDLbits--Comb组合逻辑 1.5 组合逻辑1.5 Demo 在 Verilog 中,组合逻辑(Combinational Logic)是指输出仅依赖于当前输入的逻辑电路,没有记忆功能(即没有状态存储)。组合逻辑的特点是: 无时钟信号…...
如何在 Linux 上安装和配置 Zsh
文章目录 如何在 Linux 上安装和配置 Zsh1. 安装 Zsh1.1 在 Ubuntu/Debian 上安装1.2 在 CentOS/RHEL/Fedora 上安装1.3 在 Arch Linux 上安装1.4 验证 Zsh 安装 2. 设置 Zsh 为默认 Shell2.1 验证默认 shell 3. 配置 Zsh3.1 使用 Oh My Zsh3.1.1 安装 Oh My Zsh3.1.2 启用插件…...
Chromedriver与Chrome版本映射表
Chromedriver与Chrome版本映射表如下: Chrome 71-73版本对应Chromedriver 2.46Chrome 70-72版本对应Chromedriver 2.45Chrome 69-71版本对应Chromedriver 2.44Chrome 68-70版本对应Chromedriver 2.43Chrome 67-69版本对应Chromedriver 2.42…...
HarmonyOS学习第7天: 文本组件点亮界面的文字魔法棒
一、引言 在 HarmonyOS 那丰富多彩的系统界面中,从简洁直观的应用图标,到交互流畅的操作菜单,再到生动形象的图文展示,每一处细节都经过精心雕琢,为用户带来了独特而美妙的视觉与交互体验。而在这琳琅满目的界面元素中…...
06C语言——指针
一、指针入门 (1)、准备知识 0、图解: 1、内存地址 字节:字节是内存的容量单位,英文称为 byte,一个字节有8位,即 1byte(0000 0000 --- 1111 1111) 8bits(0 --- 1) 地址:系统为了便于区分每一个字节而对…...
Ubuntu DeepSeek磁盘空间不够解决办法
标签: Ubuntu; DeepSeek磁盘空间不够解决办法;Ubuntu 22, DeepSeek R1 671 B, solution for Insufficient Disk Space 问题:Ubuntu 22, DeepSeek R1 671B 磁盘空间不够解决办法 Ubuntu 22.04操作系统,台式…...
东信营销科技巨额补贴仍由盈转亏:毛利率大幅下滑,现金流告急
《港湾商业观察》施子夫 近期,东信营销科技有限公司(以下简称,东信营销科技)递表港交所,联席保荐机构为海通国际和中银国际。 东信营销科技的国内运营主体为深圳市东信时代信息技术有限公司。尽管期内收入规模有所提…...
Qt layout
文章目录 Qt layout**关键机制****验证示例****常见误区****最佳实践****总结**关键点总结:示例代码说明:结论: Qt layout 在 Qt 中,当调用 widget->setLayout(layout) 时,layout 的父对象会被自动设置为该 widget…...
本地部署轻量级web开发框架Flask并实现无公网ip远程访问开发界面
文章目录 1. 安装部署Flask2. 安装Cpolar内网穿透3. 配置Flask的web界面公网访问地址4. 公网远程访问Flask的web界面 本篇文章主要讲解如何在本地安装Flask,以及如何将其web界面发布到公网进行远程访问。 Flask是目前十分流行的web框架,采用Python编程…...
基于YOLO11深度学习的苹果叶片病害检测识别系统【python源码+Pyqt5界面+数据集+训练代码】
《------往期经典推荐------》 一、AI应用软件开发实战专栏【链接】 项目名称项目名称1.【人脸识别与管理系统开发】2.【车牌识别与自动收费管理系统开发】3.【手势识别系统开发】4.【人脸面部活体检测系统开发】5.【图片风格快速迁移软件开发】6.【人脸表表情识别系统】7.【…...
Android MMKV集成指南
首先简单介绍一下MMKV当下Android Studio最版本及Gradle8.7 MMKV集成根据官方文档重新对mmkv重新包了一次(便于开发)总结首先简单介绍一下MMKV MMKV 是腾讯开源的一款专为移动端设计的高性能键值存储组件,旨在替代传统的 SharedPreferences 和 SQLite,尤其在频繁读写和数据…...
React七Formik
Formik是一个专为React构建的开源表单库。它提供了一个易于使用的API来处理表单状态管理,表单验证以及表单提交。Formik支持React中的所有表单元素和事件,可以很好地与React生态系统中的其他库集成。同时,Formik还提供了一些高级功能…...