前端入门（三）Vue生命周期、组件技术、脚手架、存储、事件总线、

news2024/11/18 22:51:58

文章目录

  • Vue生命周期
  • Vue 组件化编程 - .vue文件
    • 非单文件组件
      • 组件的注意点
      • 组件嵌套
      • Vue实例对象和VueComponent实例对象
      • Js对象原型与原型链
      • Vue与VueComponent的重要内置关系
    • 应用单文件组件构建
  • Vue脚手架 - vue.cli
    • 项目文件结构
    • 组件相关高级属性
      • 引用名 - ref
      • 数据接入 - props
      • 混入 - mixin
    • 插件
  • 存储
    • 浏览器存储 - Window.sessionStorage与 Window.localStorage
  • 组件的自定义事件
    • 触发自定义事件 - emit()
    • 解绑自定义事件 - off

Vue生命周期

在这里插入图片描述

在这里插入图片描述

  • 1、beforeCreate(）：数据代理尚未开始，此时无法通过vm访问到data中的数据，methods中的方法。
  • 2、created()：数据监测和数据代理完成了，可以通过vm访问到data中的数据，methods中的方法。
  • 3、beforeMount()：页面呈现的是未经Vue编译的DOM结构，所有对DOM的操作，最终都不奏效。
  • 4、mounted()：页面中呈现的是经过Vue编译的DOM，此时对DOM的操作均有效，一般在此进行：开启定时器、发送网络请求、订阅消息、绑定自定义事件等初始化操作。1-4步骤构成了挂载的主要流程
  • 5、beforeUpdate()：此时数据是新的，但是页面是旧的，即新的数据尚未更新到页面上。
  • 6、updated()：此时，页面的显示的是新数据，页面和数据同步完毕。
  • 7、beforeDestroy()：此时vm中所有的data、methods、指令等等，都处于可用状态，马上要执行销毁的过程，一般在此阶段：关闭定时器、取消订阅消息，解绑自定义事件等收尾操作。
  • 8、destroyed()：销毁完毕。可以使用this.$destroy()，让vue实例自己销毁，Vue实例销毁后，自定义事件会失效，但原生DOM事件依然有效。

Vue 组件化编程 - .vue文件

组件的定义——实现应用中局部功能代码和资源的集合。

在这里插入图片描述
在这里插入图片描述

非单文件组件

一个组件文件中由多个其他组件构成，称为非单文件组件。

Vue使用组件的三大步骤：

  • 1、定义组件（创建组件）
  • 2、注册组件（Vue的components局部注册或者使用Vue.component(‘组件名’, 组件)）全局注册。
  • 3、使用组件（写组件标签）

1、创建组件
创建组件时，需要注意：

  • 不需要写el标签：el标签是将Vue实例与DOM元素绑定的，当你创建组件时，你并不知道需要将其用在哪里，因此不需要写el标签。
  • 组件的data属性需要写成函数式的：因为一个组件可能在多个地方使用，如果写为对象式的，各个组件之间的数据变化会相互影响。
  • 使用Vue.extend({})创建组件，在template属性中，使用反引号包裹HTML标签。
    在这里插入图片描述

在这里插入图片描述

2、注册组件
局部注册：在Vue实例的components属性中，标注上构建的组件。
在这里插入图片描述

使用`Vue.componet(‘组件名’, 组件)；可以注册全局组件，即所有的Vue实例，尽管在components属性中没声明该组件，也可直接使用。
在这里插入图片描述

3、使用组件，写组件标签。
在这里插入图片描述

组件的注意点

在这里插入图片描述

组件嵌套

组件可以嵌套使用。注册给谁的组件，就可以在它的template属性中应用这个组件标签。
在这里插入图片描述

Vue实例对象和VueComponent实例对象

以定义的school组件为例：

  • 1、当我们使用school标签时，本质上是调用了VueComponent构造函数，该构造函数是Vue.extend生成的。
  • 2、当使用school标签时，Vue框架解析时会帮助创建school组件的实例对象，方式就是执行new VueComponent(options)
  • 3、特别注意，每次调用Vue.extend，返回的都有一个全新的VueComponent对象。
  • 4、关于this指向，组件配置中：data函数、methods中的函数，watch、computed函数，它们的this均是VueComponent实例对象。而在new Vue(options)配置中，data函数、methods中的函数，watch、computed函数，它们的this均是Vue实例对象
  • 5、根组件Vue实例对象会有$children属性，其中就是VueComponent实例对象数组。
  • 6、Vue实例对象和VueComponent实例对象在创建时接收的options选项，除了Vue实例可以使用el 绑定具体的DOM标签外，其余都一样。

在这里插入图片描述

Js对象原型与原型链

JavaScript 是一种基于原型的语言 (prototype-based language)，每个对象拥有一个原型对象，对象以其原型为模板，从原型继承方法和属性，这些属性和方法定义在对象的构造器函数的 prototype 属性上，而非对象实例本身。

每个Js对象都会有一个名为__proto__的内部属性，该属性指向当前对象的原型对象。在Js中，当我们访问一个对象的某个属性时，如果该对象没有这个属性，Js语法引擎就会沿着该对象的原型链（在对象的__proto__上找）向上查找，直到找到该属性为止。在查找对象属性时，通过__proto__查找原型的属性这个过程，就用到原型链。

当然在Js对象中，根原型为Object，而Object的__proto__是为null的。

原型属性又可分为显示原型属性和隐式原型属性。

  • 显示原型属性访问：构造函数名.prototype
  • 隐式原型属性访问：实例对象名.__proto__
  • 由这两种方式访问到的原型对象是等价的，即指向的是同一个原型对象。构造函数名.prototype === 实例对象名.__proto__
  • 由原型链的属性访问方式可知，如果给原型对象添加一个属性x = 99，那么可以由实例对象d的原型对象属性访问它，即d.__proto__.x，实际上对于__proto__的访问是Js执行引擎自动完成的，因此d.__proto__.x访问的方式，可以等价于使用d.x

在这里插入图片描述

Vue与VueComponent的重要内置关系

VueComponent（Vue组件）的原型对象的原型对象是Vue的原型对象
在这里插入图片描述

应用单文件组件构建

1、构建一个单文件组件
一个单.vue文件，基本结构如下;
在这里插入图片描述
定义好单文件组件是为了提供给 别的文件使用，因此需要使用export将该文件进行暴露。
export default {
……
}
实际上是一种简写，等价于：
const vc = Vue.extend(
{
……
}
)

export vc

在这里插入图片描述
2、入口Vue文件：App.vue
一般而言，Vue项目的根组件为App.vue，这里使用其他的组件。
组件化编程三步走：

  • 导入
  • 注册
  • 使用标签
    在这里插入图片描述
    3、入口js文件：main.js
    构建的根组件App.vue并没有使用，在main.js中构建App.vue的实例对象，使用el属性为其绑定DOM对象。

在这里插入图片描述

4、入口HTML文件：index.html
在这里插入图片描述

Vue脚手架 - vue.cli

项目文件结构

在这里插入图片描述

组件相关高级属性

引用名 - ref

ref属性被用来给元素或者子组件注册引用信息，类似id，但是id只能绑定DOM元素标签，而ref还可以绑定vue组件，相当于给组件或DOM元素标签起一个别名，便于在程序中引用，程序中可以通过this.$refs.xxx获取到Vue组件或DOM元素标签。

在这里插入图片描述

数据接入 - props

组件中的数据，在复用时可能各自不同，props属性用于给组件传递数据。

基本使用方法：
step1：在组件的props属性配置数据项的名称接收。
在这里插入图片描述

step2：在使用组件标签时传入数据项的数据值。

在这里插入图片描述

实际上props数据接收，有三种不同的方式：

  • 简单接收
  • 限制类型
  • 限制类型、必要性、并指定默认值

在这里插入图片描述
注意：props中指定数据项名称可能会与Vue组件中的data属性中的数据项名称产生冲突，从优先级上，是props优先级会更高一点。

一般而言，props承接的数据，我们希望将其转为Vue组件的data数据项的数据，那么根据优先级关系，可以将props属性传给data属性。

将props承接的数据传给data，另一方面是由于组件在使用过程中数据可能会更新，而props属性项数据是不允许更改的，只有组件自身的data属性项可更改

在这里插入图片描述

混入 - mixin

mixin：混入，可以把多个组件的共用的options配置，抽取出一个混入对象mixin，节约配置。

使用方式：
step1：定义混入：
例如：
{
data() : {……}
methods: {……}
……
}
上述这些公共配置，写成一个js代码文件：mixin.js，然后暴露。
在这里插入图片描述

step2：使用混入，例如：

  • 全局混入：Vue.mixin(xxx)
  • 局部混入：使用mixins属性，mixins: [‘xxx’]

在这里插入图片描述

关于mixins属性需要注意：

  • 1、如果混入mixin中定义的data属性项名与组件中的已经有的data名重名，则只保留组件已经有的data名。
  • 2、mounted()等生命周期方法中的操作，则会与组件已有的内容合并。

插件

插件的功能是用于对Vue进行增强。
在这里插入图片描述
使用步骤：
step1：
定义plugins.js文件，定义install函数，表示是一个可安装的插件，在其中一般可以定义用于增强Vue的：

  • 1、全局过滤器
  • 2、全局自定义指令
  • 3、全局混入
  • 4、Vue原型方法
    在这里插入图片描述
    step2：在main.js中，导入plugins.js并使用Vue.use()。

在这里插入图片描述

step3：在Vue中使用定义的增强功能，比如上边在plugins.js中定义了Vue的原型方法hello，那么后边就可直接使用了。

在这里插入图片描述

存储

浏览器存储 - Window.sessionStorage与 Window.localStorage

在这里插入图片描述

组件的自定义事件

触发自定义事件 - emit()

以子组件向父组件传递数据为例：

如果不用自定义事件，可以通过父组件给子组件传递函数类型的props实现

step1：给子组件School绑定getSchoolName函数，相当于子组件的School的组件实例会有getSchoolName(）这个函数。

在这里插入图片描述
step2：用props承接父组件注册的getSchoolName。按钮注册点击事件，调用该函数，并将组件的name参数传递。

在这里插入图片描述

如果使用自定义事件来实现：
step1：通过v-on: 给子组件Student绑定自定义事件atguigu，该事件触发时，调用父组件的getStudentName()方法。
在这里插入图片描述
step2：使用this.$emit('atguigu', this.name) 触发子组件Student上的atguigu事件。
在这里插入图片描述
除了在子组件标签上使用v-on绑定，也可以通过代码实现：
先给子组件标签起一个引用名，随后在mounted()方法中，拿到该组件，给它绑定事件方法。

在这里插入图片描述

如果要保证事件只触发一次：
可以使用：
在这里插入图片描述

解绑自定义事件 - off

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

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

相关文章

【数据结构实验】排序（三）快速排序算法的改进（三者取中法）

【数据结构实验】排序（三）快速排序算法的改进（三者取中法）

文章目录 1. 引言2. 快速排序算法2.1 传统快速排序2.2 三者取中法 3. 实验内容3.1 实验题目（一）输入要求（二）输出要求 3.2 算法实现 4. 实验结果 1. 引言 快速排序是一种经典的排序算法，其核心思想是通过选择一个基准元…
阅读更多...
从0到0.01入门 Webpack| 003.精选 Webpack面试题

从0到0.01入门 Webpack| 003.精选 Webpack面试题

🤍 前端开发工程师（主业）、技术博主（副业）、已过CET6 🍨 阿珊和她的猫_CSDN个人主页 🕠 牛客高级专题作者、在牛客打造高质量专栏《前端面试必备》 🍚 蓝桥云课签约作者、已在蓝桥云…
阅读更多...
c语言刷题12周（1~5）

c语言刷题12周（1~5）

输入年月日，显示这一天是这一年的第几天，保证输入日期合法。 题干输入年月日，显示这一天是这一年的第几天，保证输入日期合法。输入样例2022 1 1 2022 12 31 2024 12 31 2022 4 5输出样例2022-1 2022-365 2024-366 2022-9…
阅读更多...
辅助驾驶功能开发-外部需求篇-导航式巡航辅助NCA外部依赖及需求

辅助驾驶功能开发-外部需求篇-导航式巡航辅助NCA外部依赖及需求

1.功能外部依赖 为了设计满足用户需求的 ICA/NCA 系统，需要用到的系统输入为：环境及驾驶员感知信息、 门锁监测信息、胎压监测信息、驾驶员权限管理、车辆模式管理信息、用户请求输入、转向系统 信息、惯性及导航定位信息、被动安全及约束信息、变速箱系统信息、制动系…
阅读更多...
Redis大key与热Key

Redis大key与热Key

什么是 bigkey？ 简单来说，如果一个 key 对应的 value 所占用的内存比较大，那这个 key 就可以看作是 bigkey。具体多大才算大呢？有一个不是特别精确的参考标准： bigkey 是怎么产生的？有什么危害？…
阅读更多...
3.2 CPU的自动化

3.2 CPU的自动化

CPU的自动化 改造1-使用2进制导线改造2根据整体流程开始改造指令分析指令MOV_A的开关2进制表格手动时钟gif自动时钟gif 根据之前的CPU内部结构改造,制造一个cpu控制单元 改造一 之前的CPU全由手动开关自己控制,极度繁琐,而开关能跟二进制一一对应, 开:1, 关:0图1是之前的, …
阅读更多...
2017年7月13日 Go生态洞察：向Go 2迈进

2017年7月13日 Go生态洞察：向Go 2迈进

🌷🍁 博主猫头虎（🐅🐾）带您 Go to New World✨🍁 🦄 博客首页——🐅🐾猫头虎的博客🎐 🐳 《面试题大全专栏》 🦕 文章图文…
阅读更多...
手撕AVL_二叉平衡树(图文并茂)

手撕AVL_二叉平衡树(图文并茂)

目录 前言 一 . AVL树的概念 二 . AVL树节点的定义 三 . AVL树的插入 1.插入节点 2.调节负载因子 四 . AVL树的旋转 1.左单旋 2.左右双旋 五 . AVL树性能分析 总结 前言 大家好,今天带大加手撕AVL树的插入 一 . AVL树的概念 二叉搜索树虽可以缩短查找的效率&#x…
阅读更多...
process control 化学工程 需要用到MATLAB的Simulink功能

process control 化学工程 需要用到MATLAB的Simulink功能

process control 化学工程 需要用到MATLAB的Simulink功能 所有问题需要的matlab simulink 模型 WeChat: ye1-6688 The riser tube brings in contact the recirculating catalyst with the feed oil, which then vaporizes and splits to lighter components as it flows up th…
阅读更多...
【ArcGIS Pro微课1000例】0038：基于ArcGIS Pro的人口密度分析与制图

【ArcGIS Pro微课1000例】0038：基于ArcGIS Pro的人口密度分析与制图

文章目录 一、人口密度二、人口密度分析1. 点密度分析2. 核密度分析三、结果比对一、人口密度 人口密度是指单位土地面积上居住的人口数，通常以每平方千米或每公顷内的常住人口为单位计算。人口密度同资源、经济密切结合，因此，科学准确地分析人口密度的分布情况，对合理制定…
阅读更多...
当你准备开始学习 Java 时，确保已完成以下准备工作，安装Java开发环境并验证通过。

当你准备开始学习 Java 时，确保已完成以下准备工作，安装Java开发环境并验证通过。

当你准备开始学习 Java 时，确保已完成以下准备工作： a. 安装Java开发环境 下载Java Development Kit (JDK)： 访问Oracle官方网站，选择适用于你操作系统的JDK版本，点击下载。 安装JDK： 下载完成后&#xf…
阅读更多...
window获取密码工具

window获取密码工具

工具getpass.exe 运行输出密码到5.txt 工具gethashes.exe 运行之后输入到6.txt,会得到一个$local 再运行gethashes.exe $local 可以看到加密的账户密码，用工具进行解密就可以得到密码 工具pwdump7 还有其他的mimikatz，msf工具都可以获取。
阅读更多...
如何把自己银行卡里的钱转账充值到自己支付宝上？

如何把自己银行卡里的钱转账充值到自己支付宝上？

原文来源：https://www.caochai.com/article-4524.html 支付宝余额是支付宝核心功能之一，主要用于网购支付、线下支付、转账等场景。用户可以将银行卡、余额宝等资金转入或转出至支付宝余额，实现快速转账和支付。 如何把自己银行卡里的钱转账…
阅读更多...
案例-某验四代滑块反爬逆向研究二

案例-某验四代滑块反爬逆向研究二

系列文章目录 第一部分 案例-某验四代滑块反爬逆向研究一 第二部分 案例-某验四代滑块反爬逆向研究二 文章目录 系列文章目录前言一、js文件加载先后顺序二、每次刷新都会初始化 device_id, 所以追栈可以知道它从哪执行的三、删除node中的检测点（vm忽视&#xff09…
阅读更多...
【一文讲清楚 Anaconda 相关环境配置】

【一文讲清楚 Anaconda 相关环境配置】

文章目录 0 前言1 Package 与环境1.1 module1.2 package1.3 环境 2 Conda、Miniconda、Anaconda和Pip & PyPI2.1 Conda2. 2 Miniconda2.3 Anaconda2.3.1 Anaconda Navigator2.3.2 Anaconda PowerShell Prompt & Anaconda Prompt2.3.3 Jupyter notebook 2.4 Pip & P…
阅读更多...
深信服实验学习笔记——nmap常用命令

深信服实验学习笔记——nmap常用命令

文章目录 1. 主机存活探测2. 常见端口扫描、服务版本探测、服务器版本识别3. 全端口&#xff08;TCP/UDP&#xff09;扫描4. 最详细的端口扫描5. 三种TCP扫描方式 1. 主机存活探测 nmap -sP <靶机IP>-sP代表 2. 常见端口扫描、服务版本探测、服务器版本识别 推荐加上-v参…
阅读更多...
PTA NeuDS-数据库题目集

PTA NeuDS-数据库题目集

一.判断题 1.在数据库中产生数据不一致的根本原因是冗余。T 解析&#xff1a;数据冗余是数据库中产生数据不一致的根本原因&#xff0c;因为当同一数据存储在多个位置时&#xff0c;如果其中一个位置的数据被修改&#xff0c;其他位置的数据就不一致了。因此&#xff0c;在数据…
阅读更多...
【测试开发工程师】TestNG测试框架零基础入门(上)

【测试开发工程师】TestNG测试框架零基础入门(上)

哈喽大家好&#xff0c;我是小浪。那么今天是一期基于JavaTestNG测试框架的入门教学的博客&#xff0c;从只会手工测试提升到自动化测试&#xff0c;这将对你的测试技术提升是非常大的&#xff0c;有助于我们以后在找工作、面试的时候具备更大的竞争力~ 文章目录 一、什么是T…
阅读更多...
【数据结构实验】排序（二）希尔排序算法的详细介绍与性能分析

【数据结构实验】排序（二）希尔排序算法的详细介绍与性能分析

文章目录 1. 引言2. 希尔排序算法原理2.1 示例说明2.2 时间复杂性分析 3. 实验内容3.1 实验题目&#xff08;一&#xff09;输入要求&#xff08;二&#xff09;输出要求 3.2 算法实现3.3 代码解析3.4 实验结果 4. 实验结论 1. 引言 排序算法在计算机科学中扮演着至关重要的角色…
阅读更多...
坚鹏：中国银联公司银行业前沿技术介绍及其数据分析方法实战培训

坚鹏：中国银联公司银行业前沿技术介绍及其数据分析方法实战培训

中国银联公司银行业前沿技术介绍及其数据分析方法实战培训圆满结束 ——借力数字化技术实现基于场景的精准化、场景化、智能化营销 中国银联公司&#xff08;China UnionPay&#xff09;成立于2002年3月&#xff0c;是经国务院同意&#xff0c;中国人民银行批准&#xff0c;在合…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023