Vue知识总结-中

VUE-生命周期

  • 生命周期概述
    • 生命周期也常常被称为生命周期回调函数/生命周期函数/生命周期钩子
    • 生命周期是Vue在关键时刻帮我们调用的一些特殊名称的函数
    • 生命周期函数的名字不能更改,但函数的具体内容是由我们程序员自己编写的
    • 生命周期函数中的this指向是vm或组件实例对象 
  • 生命周期钩子
    • beforecreate
      • 此时,无法通过vm访问到data中的数据、methods中的方法
    • 初始化:数据监测、数据代理(在beforecreate和create之间进行)
    • create
      • 此时可以通过vm访问到data中的数据、methods中配置的方法
    • beforemount
      • 页面呈现的是未经Vue编译的DOM结构
      • 所有对DOM的操作最终都不奏效
    • mounted
      • 页面呈现的是经过Vue编译的DOM结构
      • 对DOM的操作都奏效(尽可能避免操作DOM),到此Vue初始化结束,一般在此进行
        • 开启定时器、发送网络请求、订阅消息、绑定自定义事件      
    • beforeupdate
      • 此时:数据是最新的,但页面是旧的,即页面和数据还未同步
    • updated
      • 此时页面和数据保持同步
    • beforedestroy
      • vm中所有的:data、methods、指令等都处于可用状态,马上执行销毁过程,一般在此进行
        • 关闭定时器、取消订阅消息、解绑自定义事件等首尾工作
    • destroyed
      • vue销毁完成
  • 常用的生命周期钩子
    • mounted:主要包含发送ajax请求,启动定时器,绑定自定义事件,订阅消息等,相当于【初始化操作】
    • beforeDestroy:清除定时器、解绑自定义事件、取消订阅消息等,相当于【收尾操作】
  • 关于销毁Vue实例
    •  销毁 后借助Vue开发者工具看不到任何信息
    • 销毁后自定义事件会失败,但原生DOM事件依然有效
    • 一般不会在beforeDestroy操作数据,因为即便操作数据也不会再触发更新流程了 

VUE-组件

每个组件就是实现应用中的局部功能的代码和资源的集合
模块和组件
  • 模块
    •  由于js文件很多很复杂,因此为了复用js、简化js编写、提高js运行效率,所以将一个js中可复用的js抽取独立为一个个模块
  • 模块化
    •  当应用中的js都以模块来编写,那这个应用就是一个模块化的应用
  • 组件
    •  由于一个界面功能可能很复杂,因此为了复用编码,简化项目编码,提高运行效率,所以将局部功能代码独立出来一个个组件(html+js+css+image等)
    • 非单文件组件:即一个文件中包含了n个组件(Vue工程化项目采取的都是单文件组件)
  • 组件化
    •  当应用中的界面功能都以组件来编写,那这个应用就是一个组件化的应用
Vue使用组件的步骤
  • 定义组件
    • 可以使用Vue.extend(options)创建【可简写为const test = options】,其中options和new Vue(options)时传入的几乎一样,区别如下:
      • 不定义el配置项:因为最终所有的组件都要经过一个vm管理,由vm的el决定服务哪个容器
      • data必须写成函数:为了避免组件被复用时,数据存在引用关系
  • 注册组件
    • 局部注册:new Vue()时传入components配置项
    • 全局注册:Vue.component('组件名',组件)
  • 使用组件
    • 在需要使用组件的页面中使用组件标签,比如:<test></test>或者<test/>(仅可用于脚手架项目,否则会导致其后的组件不能正常渲染)
  • 注意
    • 组件名
  • 一个单词组成
    • 字母全部小写,如:student
    • 首字母大写:Student(推荐采用该命名方式】)
  • 多个单次组成
    • 采用kebab-case命名:my-student
    • 采用CamelCase命名:MyStudent(仅支持脚手架项目,推荐采用该命名方式)
  • 备注
    • 组件名尽可能避免HTML中已有的元素名称,如h2,H2等
    • 使用name配置项指定组件在开发者工具中呈现的名字(防止他人在注册自己的组件时任意改名)
VueComponent
  • 组件本质是一个名为VueComponent的构造函数,是由Vue.extend创建组件时生成的
  • 在使用组件时,Vue在解析组件时会帮我们创建组件的实例对象,即调用new VueComponent(options)
  • 每次调用Vue.extend(options)返回的都是一个全新的VueComponent!!!
  • 关于this指向
    • 在组件配置中,data函数、methods中函数、watch中函数、computed函数等都是指向【VueComponent实例对象,可简称vc】
    • 在new Vue()配置中,data函数、methods中函数、watch中函数、computed函数等都是指向【Vue实例对象,简称vm】
  • 重要的内置关系
    • VueComponent.prototype._proto_ === Vue.prototype,该关系可以让VueComponent组件实例对象访问到Vue原型上的属性和方法    

VUE-ref属性

  • ref属性常用来给元素或子组件注册引用信息(id的替代者)
  • 应用在html标签上获取的是真实DOM元素,应用在组件标签上是组件实例对象(vc)
  • 使用方式
    • 示例:<h1 ref="xxx">...</h1>或者<Student ref="xxx"></Student>
    • 获取:this.$refs.xxx

VUE-props配置项

  • 功能就是让组件本身接收外部传过来的数据,然后组件本身中的props进行接收对应数据
  • 传递数据:如<Demo name="xxx"/>
  • 接收数据:配置项props:['name'](只接受); 或者props:{name:string}(限制类型)或者props:{name:{type:String,required:true,default:'test'}}(限制类型、必要性、默认值)
  • 注意
    • props是只读的,Vue底层会监测你对props的修改,如果进行修改,就会发出警告,若业务需要修改,请复制props的内容到data配置项中一份,然后通过读取data中对应的属性实现数据的修改

VUE-mixin混入

  • 功能就是把多个组件公用的配置项提取到一个混合对象js文件,再进行混合对象的暴露,在需要使用该混合对象的组件进行引入即可使用
  • 使用方式
    • 第一步定义混合,如:{data(){},methods:{}...}
    • 第二步使用混入,如
      • 全局混入:Vue.mixin{xxx}
      • 局部混入:mixins:['xxx']

    
VUE-插件plugin

  • 功能就是用来增强Vue,本质就是包含install方法的一个对象的js文件,install的第一个参数时Vue,第二个及后续参数是插件使用者传递的数据
  • 定义插件
  • 对象.install = function(Vue,options)    {
    • //下面定义的所有方法即可直接被组件调用
      • //添加全局过滤器
      •  Vue.filter(...)
      • //添加全局指令
      • Vue.directive(...)
      • //配合全局混入/合
      • Vue.mixin()
      • //添加实例方法
      • Vue.prototype.$myMethod = function(){...}
      • Vue.prototype.$myProperty = xxx
  • 使用插件
    • 引入插件js文件然后Vue.use(引入插件时的名称)

VUE-scoped样式

  • 在组件的style加上scoped可以让样式在局部生效,防止冲突,即<style scoped>    

VUE-脚手架

  • Vue脚手架[也称为vue cli(command line interface)]是Vue官方提供的用于Vue项目开发的标准化开发工具/平台(脚手架文档:https://cli.vuejs.org/zh/)
  • 脚手架项目具体使用步骤
    • 注意:在执行第一步前,需要配置npm淘宝镜像(防止因网速慢导致下载中断):npm config set registry https://registry.npm.taobao.org
    • 第一步:仅第一次执行,全局安装@vue/cli:npm install -g @vue/cli
    • 第二步:切换到要创建项目的目录,再创建项目:vue create xxx
    • 第三步:启动项目:npm run serve 
Vue不同版本
  • vue.js与vue.runtime.xxx.js
    • vue.js是完整版Vue,包含了核心功能和模板解析器
    • vue.runtime.xxx.js是运行版Vue,只包含核心功能,没有模板解析器
    • 注意:我们在开发过程中,引用的vue采用的就是vue.runtime.esm.js【无模板解析器】,所以我们不能在new Vue时传入template配置项,而只能通过render函数接收到createElement元素去指定具体内容(比如在指定vue服务App容器时)
vue.config.js配置文件 
  • Vue脚手架隐藏了所有webpack相关配置,可以通过vue inspect> output.js查看脚手架默认配置
  • 创建vue.config.js文件可以对脚手架进行个性化定制(比如可修改入口文件main.js名字)【可参考https://cli.vuejs.org/zh】

扩展

webStorage
  • 称为浏览器存储,包括localStorage和sessionStorage
  • 存储内容大小一般支持5MB左右(不同浏览器可能不一样)
  • 浏览器端通过window.sessionStorage和window.localStorage属性来实现本地存储机制
  • 相关API
    • xxxStorage.setItem('key','value'); //添加键值到存储中,若存在该键名,则更新其对应的值
    • xxxStorage.getItem('key'); //获取该key对应的值
    • xxxStorage.removeItem('key'); //获取该key对应的值
    • xxxStorage.getItem('key'); //从存储中移除该键值
    • xxxStorage.clear(); //清空存储中所有数据
  • 注意
    • SessionStorage存储的内容会随着浏览器窗口关闭而消失
    • LocalStorage存储的内容需要手动清除才会消失
    • xxxStorage.getItem('key');当获取该key对应的值不存在时,则会返回null,JSON.parse(null)结果依然是null

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【软件测试】学习笔记-如何做好测试计划

本篇文章将为你介绍一份成功的测试计划应该包含哪些内容&#xff0c;以及如何才能做好测试计划。 软件项目&#xff0c;通常都会有详细的项目计划。软件测试作为整个项目中的重要一环&#xff0c;也要执行详细的测试计划。正所谓运筹帷幄之中&#xff0c;决胜千里之外&#xf…

【开题报告】基于微信小程序的母婴商品仓库管理系统的设计与实现

1.选题背景 随着社会经济的发展和家庭生活水平的提高&#xff0c;母婴商品市场逐渐兴起。然而&#xff0c;传统的母婴商品仓库管理方式存在着许多问题&#xff0c;如信息不透明、操作繁琐等。为了提高仓库管理的效率和准确性&#xff0c;基于微信小程序的母婴商品仓库管理系统…

Pointnet++损失函数改进:Focalloss | 助力解决正负样本比例不均衡问题

简介:1.该教程提供大量的首发改进的方式,降低上手难度,多种结构改进,助力寻找创新点!2.本篇文章对Pointnet++特征提取模块进行改进,加入Focalloss损失函数,解决正负样本比例不均衡问题。3.专栏持续更新,紧随最新的研究内容。 目录 1.理论介绍 2.修改步骤 2.1 步骤一…

解决在test以外的目录下导入junit无效

以上引用来自src目录下的文件&#xff0c;可以看到&#xff0c;和junit有关的导入都飘红&#xff0c;但明明junit已经被正确导入进了项目中。 再看右侧的Maven的依赖下方&#xff0c;junit的右边有一个很不起眼的(test) 这是因为junit作为测试框架&#xff0c;可能包含仅适用于…

杰发科技AC7840——CAN通信简介(2)

1.时钟频率 2.位时间 3.采样点 4.消息缓冲区 和ST、NXP的邮箱类似&#xff0c;AutoChips用了缓冲区的概念。 5.接收缓冲区 屏蔽掉demo程序的发送&#xff0c;只看接收情况 在回调中接收数据 先判断是不是进了接收中断 接收数据的处理函数 所有buff数据放到Info buff的内容 BUF…

NumPy 高级教程——性能优化

Python NumPy 高级教程&#xff1a;性能优化 在处理大规模数据集或进行复杂计算时&#xff0c;性能是关键的考虑因素。NumPy 提供了一些工具和技巧&#xff0c;帮助用户优化代码以提高执行效率。在本篇博客中&#xff0c;我们将深入介绍 NumPy 中的性能优化技术&#xff0c;并…

css_auto的用法

<div style"display: flex; justify-content: center;"><div style"margin-right: auto;"></div><div>其他元素</div> </div>auto到底是什么意思&#xff0c;为什么可以让父div中的子div向左边对齐&#xff1f; auto是…

数据结构与算法Python版:基数排序

简介&#xff1a;基数排序&#xff08;radix sort&#xff09;属于“分配式排序”&#xff08;distribution sort&#xff09;&#xff0c;又称“桶子法”&#xff08;bucket sort&#xff09;或bin sort&#xff0c;顾名思义&#xff0c;它是透过键值的部份资讯&#xff0c;将…

1872_S32K344 MCU基本信息了解

全部学习汇总&#xff1a; GreyZhang/g_s32k344: A new MCU learning notes. I would try to use MCAL instead of SDK. (github.com) 以下的摘录信息来自&#xff1a; S32K Auto General-Purpose MCUs | NXP Semiconductors 安全等级可以到ASIL D。 M7的内核&#xff0c;主频可…

深入理解并解析Flutter Widget

文章目录 完整代码程序入口构建 Widget 结构定义 widget 状态定义 widget UI获取上下文关于build()build() 常用使用 完整代码 import package:english_words/english_words.dart; import package:flutter/material.dart; import package:provider/provider.dart;void main() …

抖音在线查权重系统源码,附带查询接口

抖音权重在线查询只需输入抖音主页链接&#xff0c;即可查询作品情况。 搭建教程 上传源码并解压 修改数据库“bygoukai.sql” 修改“config.php” 如需修改水印请修改第40行 如需修改限制次数&#xff0c;请修改第156行 访问域名user.php即可查看访问用户&#xff0c;停…

2023年度总结:技术沉淀、持续学习

2023年度总结&#xff1a;技术沉淀、持续学习 一、引言 今年是我毕业的第二个年头&#xff0c;也是完整的一年&#xff0c;到了做年终总结的时候了 这一年谈了女朋友&#xff0c;学习了不少技术&#xff0c;是充实且美好的一年&#xff01; 首先先看年初定的小目标&#xf…

第二次面试总结 - 宏汉科技 - Java后端开发

&#x1f9f8;欢迎来到dream_ready的博客&#xff0c;&#x1f4dc;相信您对博主首页也很感兴趣o (ˉ▽ˉ&#xff1b;) 博主首页&#xff0c;更多redis、java等优质好文以及各种保姆级教程等您挖掘&#xff01; 目录 总结 (非详细) 面试内容(提问内容) - 带答案 1、字符串相…

多文件上传

HTML中实现多文件上传是通过用<input type"file">元素的multiple属性&#xff0c;以下简单描述多文件上传的步骤 HTML表单准备&#xff0c;使用<input type"file">元素&#xff0c;并为其添加multiple属性&#xff0c;以允许用户选择多个文件…

管理系统-基于javaweb的图书管理系统

基于javaweb的图书管理系统 &#x1f345; 作者主页 央顺技术团队 &#x1f345; 欢迎点赞 &#x1f44d; 收藏 ⭐留言 &#x1f4dd; &#x1f345; 文末获取源码联系方式 &#x1f4dd; 本项目采用eclipse工具开发&#xff0c;jspservlet技术编写&#xff0c;样式采用了layui…

2022年全国职业院校技能大赛软件测试赛题卷②—自动化测试解析报告(含术语)

2022年全国职业院校技能大赛软件测试任务四 自动化测试 目录 第一题:按照以下步骤在PyCharm中进行自动化测试脚本编写,并执行脚本。

一、二进制方式 安装部署K8S

目录 一、操作系统初始化 1、关闭防火墙 2、关闭 SELinu 3、 关闭 swap 4、添加hosts 5、同步系统时间 二、集群搭建 —— 使用外部Etcd集群 1、自签证书 2、自签 Etcd SSL 证书 ① 创建 CA 配置文件&#xff1a;ca-config.json ② 创建 CA 证书签名请求文件&#xff…

Golang 结构体

前言 在 Go 语言中&#xff0c;结构体&#xff08;struct&#xff09;是一种自定义的数据类型&#xff0c;将多个不同类型的字段&#xff08;fields&#xff09;组合在一起 结构体通常用于模拟真实世界对象的属性和行为 定义结构体 可以使用 type 关键字和 struct 关键字来定…

C++笔记之cout高亮输出以及纯C++实现一个彩色时钟

C笔记之cout高亮输出以及纯C实现一个彩色时钟 code review! 文章目录 C笔记之cout高亮输出以及纯C实现一个彩色时钟一.cout高亮输出1.1.运行1.2.代码一1.3.代码二1.4.重置终端的文本格式到默认设置说明 二.纯C实现一个彩色时钟2.1.运行2.2.main.cc2.3.cout带颜色打印输出技巧…

[ffmpeg系列 03] 文件、流地址(视频)解码为YUV

一 代码 ffmpeg版本5.1.2&#xff0c;dll是&#xff1a;ffmpeg-5.1.2-full_build-shared。x64的。 文件、流地址对使用者来说是一样。 流地址(RTMP、HTTP-FLV、RTSP等)&#xff1a;信令完成后&#xff0c;才进行音视频传输。信令包括音视频格式、参数等协商。 接流的在实际…