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.rhkb.cn/news/233080.html

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

相关文章

OpenCV | 光流估计

OpenCV | 光流估计

光流估计 光流是空间运动物体在观测成像平面上的像素运动的“瞬时速度”&#xff0c;根据各个像素点的速度的速度矢量特征&#xff0c;可以对图像进行动态分析&#xff0c;例如目标跟踪 高度恒定&#xff1a;同一点随着时间的变化&#xff0c;其亮度不会发生改变。小运动&…
阅读更多...
Hive实战：网址去重

Hive实战：网址去重

文章目录 一、实战概述二、提出任务三、完成任务&#xff08;一&#xff09;准备数据1、在虚拟机上创建文本文件2、上传文件到HDFS指定目录 &#xff08;二&#xff09;实现步骤1、启动Hive Metastore服务2、启动Hive客户端3、基于HDFS数据文件创建Hive外部表4、利用Hive SQL实…
阅读更多...
JavaScript基础(24)_dom查询练习（一）

JavaScript基础(24)_dom查询练习（一）

<!DOCTYPE html> <html lang"zh"> <head><meta charset"UTF-8"><link rel"stylesheet" href"../browser_default_style/reset.css"><title>dom查询练习一</title><style>.text {widt…
阅读更多...
uniapp 微信小程序跳转外部链接

uniapp 微信小程序跳转外部链接

一、背景&#xff1a; 开发小程序时&#xff0c;跳转到内部路径通常会使用&#xff1a;uni.navigateTo&#xff0c;uni.redirectTo&#xff0c;uni.reLaunch&#xff0c;uni.switchTab等方法&#xff0c;可以跳转到pages.json中已经注册的页面 uni.navigateTo(OBJECT) | uni-…
阅读更多...
架构模式：分片

架构模式：分片

什么是分片&#xff1f; 分片是一种数据库架构模式&#xff0c;涉及将数据库划分为更小、更快、更易于管理的部分&#xff0c;称为分片。每个分片都是一个不同的数据库&#xff0c;这些分片共同构成了整个数据库。分片对于管理大型数据库特别有用&#xff0c;可以显着提高性能…
阅读更多...
部署上传漏洞的靶场环境upload-labs

部署上传漏洞的靶场环境upload-labs

1、工具介绍 upload-labs是一个使用php语言编写的&#xff0c;专门收集渗透测试和CTF中遇到的各种上传漏洞的靶场。旨在帮助大家对上传漏洞有一个全面的了解。目前一共20关&#xff0c;每一关都包含着不同上传方式。 upload-labs靶场开源地址&#xff1a;&#xff1a;https://…
阅读更多...
代码随想录day60:贪心算法｜84.柱状图中最大的矩形

代码随想录day60:贪心算法｜84.柱状图中最大的矩形

84. Largest Rectangle in Histogram 进行优化&#xff0c;如果我们想获得left就给他left即可&#xff0c;我们只需要在求宽度的时候用到left,而没必要修改原数组。 所以给栈插入一个虚拟索引-1 思考过程&#xff1a; left应该为多少呢&#xff1f; 首先确定left是什么&#…
阅读更多...
HCIA-Datacom题库（自己整理分类的）_11_其他网络协议单选【9道题】

HCIA-Datacom题库（自己整理分类的）_11_其他网络协议单选【9道题】

1.DNS协议的主要作用是&#xff1f; 文件传输 远程接入 域名解析 邮件传输 2.下列属于链路状态协议的是? Direct static FTP OSPF 解析&#xff1a; FTP&#xff1a;文件传输协议 OSPF&#xff1a;链路状态路由协议 3.如下图所示的网络主机A通过Telnet登录到路由…
阅读更多...
力扣labuladong一刷day54天前缀树

力扣labuladong一刷day54天前缀树

力扣labuladong一刷day54天前缀树 文章目录 力扣labuladong一刷day54天前缀树一、208. 实现 Trie (前缀树)二、648. 单词替换三、211. 添加与搜索单词 - 数据结构设计四、1804. 实现 Trie &#xff08;前缀树&#xff09; II五、677. 键值映射 一、208. 实现 Trie (前缀树) 题…
阅读更多...
【DevOps-05】Integrate工具

【DevOps-05】Integrate工具

一、简要说明 持续集成、持续部署的工具很多，其中Jenkins是一个开源的持续集成平台。 Jenkins涉及到将编写完毕的代码发布到测试环境和生产环境的任务，并且还涉及到了构建项目等任务。 Jenkins需要大量的插件保证工作，安装成本较高，下面会基于Docker搭建Jenkins。 二、Jenk…
阅读更多...
11.perror函数的使用

11.perror函数的使用

文章目录 perror函数介绍简介&#xff1a; 测试代码 perror函数介绍 函数原型&#xff1a;void perror(char const *message); 简介&#xff1a; perror函数&#xff0c;以一种简单、统一的方式报告错误。标准库函数在一个外部整型变量errno&#xff08;在errno.h中定义&…
阅读更多...
大模型实战营Day2 作业

大模型实战营Day2 作业

基础作业 1 使用 InternLM-Chat-7B 模型生成 300 字的小故事 2 熟悉 hugging face 下载功能&#xff0c;使用 huggingface_hub python 包&#xff0c;下载 InternLM-20B 的 config.json 文件到本地 进阶作业 1 完成浦语灵笔的图文理解及创作部署 2 完成 Lagent 工具调用 Demo…
阅读更多...
vue3 响应式api中特殊的api

vue3 响应式api中特殊的api

系列文章目录 TypeScript 从入门到进阶专栏 文章目录 系列文章目录一、shallowRef()二、triggerRef()三、customRef()四、shallowReactive()五、shallowReadonly()六、toRaw()七、markRaw()八、effectScope()九、getCurrentScope() 一、shallowRef() shallowRef()是一个新的响…
阅读更多...
多线程高级面试题

多线程高级面试题

1. 什么是 ThreadLocal&#xff1f; 参考答案 ThreadLocal 叫做本地线程变量&#xff0c;意思是说&#xff0c;ThreadLocal 中填充的的是当前线程的变量&#xff0c;该变量对其他线程而言是封闭且隔离的&#xff0c;ThreadLocal 为变量在每个线程中创建了一个副本&#xff0c;…
阅读更多...
【AI视野·今日Robot 机器人论文速览 第七十一期】Fri, 5 Jan 2024

【AI视野·今日Robot 机器人论文速览 第七十一期】Fri, 5 Jan 2024

AI视野今日CS.Robotics 机器人学论文速览 Fri, 5 Jan 2024 Totally 11 papers &#x1f449;上期速览✈更多精彩请移步主页 Daily Robotics Papers Machine Learning in Robotic Ultrasound Imaging: Challenges and Perspectives Authors Yuan Bi, Zhongliang Jiang, Felix D…
阅读更多...
gradle安装

gradle安装

从gradle下载安装包。 安装环境变量以及仓库存储地址。 在path中添加bin路径 打开cmd命令&#xff0c; 输入 gradle -v 查看版本信息。
阅读更多...
JVM工作原理与实战(九)：类加载器-启动类加载器

JVM工作原理与实战(九)：类加载器-启动类加载器

专栏导航 JVM工作原理与实战 RabbitMQ入门指南 从零开始了解大数据 目录 专栏导航 前言 一、启动类加载器 二、通过启动类加载器去加载用户jar包 1.放入jre/lib目录进行扩展 2.使用参数进行扩展 总结 前言 JVM作为Java程序的运行环境&#xff0c;其负责解释和执行字节码…
阅读更多...
优化器（一）torch.optim.SGD-随机梯度下降法

优化器（一）torch.optim.SGD-随机梯度下降法

torch.optim.SGD-随机梯度下降法 import torch import torchvision.datasets from torch import nn from torch.utils.data import DataLoaderdataset torchvision.datasets.CIFAR10(root./data, trainFalse, downloadTrue,transformtorchvision.transforms.ToTensor()) data…
阅读更多...
RK3399平台入门到精通系列讲解（实验篇）自定义工作队列的使用

RK3399平台入门到精通系列讲解（实验篇）自定义工作队列的使用

🚀返回总目录 文章目录 一、自定义工作队列介绍1.1、工作队列相关结构体1.2、工作队列相关接口函数二、自定义共享队列案例2.1、Makefile2.2、驱动案例共享队列是由内核管理的全局工作队列，自定义工作队列是由内核或驱动程序创建的特定工作队列，用于处理特定的任务。 一、…
阅读更多...
华为mstp、vrrp、ospf、isis、bgp等综合一起排错

华为mstp、vrrp、ospf、isis、bgp等综合一起排错

最终实现左边私网和右边私网全部ping通 SW1 vlan batch 12 34 stp region-configuration //mstp配置 region-name test instance 12 vlan 12 instance 34 vlan 34 active region-configuration interface GigabitEthernet0/0/3 port link-type trunk port trunk allow-pass …
阅读更多...
最新文章
推荐文章

Copyright @ 2022~2023

友情链接： 我的编程经验分享 一条长河网 尧图网站开发