VUE的相关知识锦集

一.vue的生命周期(4个阶段、8个钩子函数)

第一阶段(创建阶段):beforeCreate; created 

第二阶段(挂载阶段):beforeMount; mounted

第三阶段(更新阶段):beforeUpdate; updated

第四阶段(销毁阶段):beforeDestory; destoryed

beforeCreate: 在实例初始化之后,进行数据侦听和事件/侦听器的配置之前同步调用,在这个阶段数据获取不到,真实的dom元素还没渲染出来; 

created: 在实例创建完成后被立即同步调用,这个阶段可以访问到数据但真实dom节点还没有渲染出来,在这个钩子函数里可以进行相关初始化、绑定和发送请求。

beforeMount: 在挂载开始之前被调用;代表dom马上就要渲染出来,这个钩子函数和created函数用法基本一致,可以进行相关初始化事件的绑定和发送ajax的操作;

mounted:实例被挂载调用后,这时el被新创建的vm.el替换,数据挂载完毕,dom元素渲染完成。

beforeUpdate:在数据发生改变后,dom在更新之前被调用;这个钩子函数在初始化的时候不会执行,当组件挂载完毕,并且数据改变时,才会立马执行,这个钩子函数获取的dom内容是更新之前的;

updated:在数据更改导致虚拟dom重新渲染和更新完毕之后才被调用,当这个钩子函数被调用说明,dom组件已经更新,所以可以执行依赖于dom的操作,这个钩子函数获得的是更新内容之后生成的新的虚拟dom。

beforeDestory:实例销毁之前调用,在这一步,实例仍然完全可用,当组件销毁的时候,可以做一些善后工作如,初始化事件,相关定时器等东西;

Destoryed:实例销毁以后使用,Vue实例失去活力,完全丧失功能。

二.vue Router三种路由模式

Router三种路由模式:

1.hash:使用URL的hash值作为路由;vue的默认路由模式;支持所有浏览器;

2.history:使用History API:pushState()和replaceState()方法;HTML5之后支持;

3.abstract:支持所有javaScript运行环境;如果发现没有浏览器的API,路由会自动强制进入这个模式;

hash模式:使用window.addEventListener监听hash的变化,hash变化之后,根据这个新的hash找到相应页面更新视图;优点:后端不需要额外配置;缺点:不美观.

history模式:vue监听url改变这个事件;vue在切换页面时使用pushState(), replaceState()来修改当前的url;优点:美观;缺点:后端需要额外配置.

abstract模式:针对没有浏览器的环境,通过stack和index两个变量,模拟出浏览器的历史调用记录.

若没有特殊需求,用hash模式即可;如果路径中没有#,选择history模式;非浏览器环境,选用abstract模式.

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

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

相关文章

【力扣 Hot100 | 第一天】4.10 两数相加

文章目录 1.两数相加(4.10)1.1题目1.2解法一:模拟1.2.1解题思路1.2.2代码实现 1.两数相加(4.10) 1.1题目 给你两个 非空 的链表,表示两个非负的整数。它们每位数字都是按照 逆序 的方式存储的&#xff0c…

逐步学习Go-sync.RWMutex(读写锁)-深入理解与实战

概述 在并发编程中,我们经常会遇到多个线程或协程访问共享资源的情况。为了保护这些资源不被同时修改,我们会用到"锁"的概念。 Go中提供了读写锁:sync.RWMutex。 sync.RWMutex是Go语言提供的一个基础同步原语,它是Rea…

【uniapp】省市区下拉列表组件

1. 效果图 2. 组件完整代码 <template><view class="custom-area-picker"><view

webpack里面loader的配置

关于 loader 的配置&#xff0c;写在 module.rules 属性中&#xff0c; rules 是一个数组的形式&#xff0c;因此我们可以配置很多个 loader 每一个 loader 对应一个对象的形式&#xff0c;对象属性 test 为匹配的规则&#xff0c;一般情况为正则表达式 属性 use 针对匹配到…

Android 无线调试 adb connect ip:port 失败

1. 在手机打开 无线调试 使用 adb connect 连接 adb connect 192.168.14.164:39511如果连接成功, 查看连接的设备, 忽略 配对下面的步骤. adb devices如果连接失败: failed to connect to 192.168.14.164:39511如果失败了, 可以杀死一下进程, 然后执行后面的操作 adb kill…

zabbix企业级监控平台

zabbix部署 安装源 重新创建纯净环境&#xff0c;利用base克隆一台虚拟机server1 给server1做快照&#xff0c;方便下次实验恢复使用 进入zabbix官网https://www.zabbix.com rpm -Uvh https://repo.zabbix.com/zabbix/5.0/rhel/7/x86_64/zabbix-release-5.0-1.el7.noarch.rpm …

D-Link NAS 未授权RCE漏洞复现(CVE-2024-3273)

0x01 免责声明 请勿利用文章内的相关技术从事非法测试&#xff0c;由于传播、利用此文所提供的信息而造成的任何直接或者间接的后果及损失&#xff0c;均由使用者本人负责&#xff0c;作者不为此承担任何责任。工具来自网络&#xff0c;安全性自测&#xff0c;如有侵权请联系删…

面经学习(北京商越网络实习)

个人评价 比较简单的面试题&#xff0c;不知道 nacos和gateway这块有没有深问&#xff0c;如果深问的话&#xff0c;那难度就升级了。一直对io的八股文不感冒&#xff0c;io这块的知识还得加强&#xff0c;该面经最后一问我是没有如何思路的&#xff0c;算是长知识了欸。 1.你…

SVN的介绍

首先SVN是什么&#xff1a; Apache下的一个开源的项目Subversion&#xff0c;通常缩写为 SVN&#xff0c;是一个版本控制系统。 版本控制系统是一个软件&#xff0c;它可以伴随我们软件开发人员一起工作&#xff0c;让我们编写代码的完整的历史保存下来。 目前它的各个版本的…

实现鼠标在页面点击出现焦点及大十字星

近段时间&#xff0c;在完成项目进度情况显示时候&#xff0c;用户在操作鼠标时候&#xff0c;显示当鼠标所在位置对应时间如下图所示 代码实现步骤如下&#xff1a; 1.首先引用 jquery.1.7.js 2.再次引用raphael.js 3.然后引用graphics.js 4.最后引用mfocus.js 其中mfocu…

3. DAX 时间函数-- DATE 日期--一生二,二生三,三生万物

在数据分析过程中&#xff0c;经常需要从一个数据推到另外一个数据&#xff0c;日期数据也是如此&#xff0c;需要从一个日期推到另外一个相关的日期&#xff0c;或者从一群日期推到另外一个相关的日期/一群相关的日期。这一期说的就是日期之间彼此推衍的函数&#xff0c;会比之…

Linux:自动化构建 - make

Linux&#xff1a;自动化构建 - make make基本概念makefile语法变量PHONY make基本概念 make是一个用于自动化编译和构建过程的工具。它主要用于管理大型软件项目的构建过程,帮助开发者更高效地编译和部署代码&#xff0c;并减少人为错误的发生&#xff0c;这使得软件的编译和…

Scala - 高阶函数

高阶函数&#xff08;Higher-Order Function&#xff09;就是操作其他函数的函数。 Scala 中允许使用高阶函数, 高阶函数可以使用其他函数作为参数&#xff0c;或者使用函数作为输出结果。 以下实例中&#xff0c;apply() 函数使用了另外一个函数 f 和 值 v 作为参数&#xf…

电商技术揭秘十八:电商平台的云计算与大数据应用小结

电商技术揭秘相关系列文章 电商技术揭秘一&#xff1a;电商架构设计与核心技术 电商技术揭秘二&#xff1a;电商平台推荐系统的实现与优化 电商技术揭秘三&#xff1a;电商平台的支付与结算系统 电商技术揭秘四&#xff1a;电商平台的物流管理系统 电商技术揭秘五&#xf…

【STL】list的模拟实现

目录 前言 list概述 list的节点 list的迭代器 list的结构 构造与析构 拷贝构造与赋值 list的元素操作 insert() push_back() push_front() erase() pop_back() pop_front() clear() swap() size() 完整代码链接 前言 如果你对链表还不熟悉或者忘了的话…

Harmony鸿蒙南向驱动开发-PWM

PWM&#xff08;Pulse Width Modulation&#xff09;即脉冲宽度调制&#xff0c;是一种对模拟信号电平进行数字编码并将其转换为脉冲的技术&#xff0c;广泛应用在从测量、通信到功率控制与变换的许多领域中。通常情况下&#xff0c;在使用马达控制、背光亮度调节时会用到PWM模…

微信小程序实现输入appid跳转其他小程序

前言 本文记录wx.navigateToMiniProgram打开另一个小程序API使用方法&#xff0c;并封装为组件。 wxml 部分 输入框用来记录appid&#xff0c;按钮用来查询并跳转。 <view class"container"><input class"input" placeholder"请输入要查…

Flutter Your project requires a newer version of the Kotlin Gradle plugin

在开发Flutter项目的时候,遇到这个问题Flutter Your project requires a newer version of the Kotlin Gradle plugin 解决方案分两步: 1、在android/build.gradle里配置最新版本的kotlin 根据提示的kotlin官方网站搜到了Kotlin的最新版本是1.9.23,如下图所示: 同时在Ko…

ISO27017云服务安全管理体系认证介绍!

云服务信息安全管理体系&#xff08;简称“CSISMS”&#xff09;&#xff0c;以ISO/IEC 27017:2015为认证依据。ISO/IEC 27017标准是建立在ISO/IEC 27001信息安全管理体系框架和ISO/IEC 27002作为最佳实践控制设置的坚实基础之上&#xff0c;通过ISO/IEC 27017标准认证&#xf…

python如何写入csv

在使用python对文件操作的过程中&#xff0c;你肯定碰到过对csv文件的操作&#xff0c;下面就python对csv文件的操作进行详述。 CSV&#xff08;Comma-Separated Values&#xff09;逗号分隔符&#xff0c;也就是每条记录中的值与值之间是用分号分隔的。 打开CSV文件并写入一…