![](https://img-blog.csdnimg.cn/2020102921271887.png?x-oss-process=image/resize,m_fixed,h_224,w_224)
Vue.js
文章平均质量分 52
分享Vue.js的实战例子、常见的Bug解决方法以及学习知识点干货等
Danli.
努力成为一名自律并且不断进步的程序媛。
展开
-
【Vue】为什么要使用虚拟Dom?
在回答“为什么要使用虚拟Dom”这个问题之前,先来了解Js在解析真实Dom的时候都付出哪些代价?Js操作真实Dom的代价用我们传统的开发模式,原生JS或JQ操作DOM时,浏览器会从构建DOM树开始从头到尾执行一遍流程。在一次操作中,我需要更新10个DOM节点,浏览器收到第一个DOM请求后并不知道还有9次更新操作,因此会马上执行流程,最终执行10次。例如,第一次计算完,紧接着下一个DOM更新请求,这个节点的坐标值就变了,前一次计算为无用功。计算DOM节点坐标值等都是白白浪费的性能。即使计算机硬件一直在迭代原创 2021-08-11 15:54:43 · 864 阅读 · 0 评论 -
【Vue】当父子两个组件同时定义了 beforeCreate, created, beforeMount, mounted 四个钩子, 它们的执行顺序是怎样的?
面试时常常会被问到,当父子组件同时定义了四个钩子,那么它们的执行顺序是怎么样的呢?答:首先会执行父组件的初始化过程, 所以会依次执行beforeCreate, created, 在执行挂载前又会执行beforeMount钩子, 不过在生成真实dom 的 __patch__过程中遇到嵌套子组件后又会转为去执行子组件的初始化钩子beforeCreate, created, 子组件在挂载前会执行beforeMounte, 再完成子组件的Dom创建后执行 mounted。 这个父组件的 patch 过程才算完成,原创 2021-08-11 15:44:47 · 533 阅读 · 0 评论 -
Vue数据绑定原理
Vue.js的核心是一个响应的数据绑定系统,它让数据与DOM保持同步非常简单。Vue.js拥有数据驱动的视图概念。一旦创建绑定,DOM将与数据保持同步,每当我们修改了数据,DOM也会相应地更新。那么这种 数据绑定的原理 是什么呢?Vue是通过数据劫持结合发布订阅模式的方式来实现的,也就是数据和视图的同步。其核心的方法便是通过Object.defineProperty() 来实现对属性的劫持,达到监听数据变动的目的,要实现MVVM的双向绑定,就必须要实现以下几点:(1)实现一个数据监听器Observer原创 2021-08-03 15:25:18 · 1343 阅读 · 0 评论 -
【面试】涉及Vue生命周期的常见面试题:Vue获取节点、请求异步数据在哪个生命周期、获取不到异步数据dom如何解决
文章目录Vue生命周期Vue获取节点在哪个生命周期?Vue请求异步数据是在哪个生命周期?Vue获取不到异步数据dom的原因及解决方案先分析一下原因:那么解决方法有哪些呢?Vue生命周期图示:结合代码理解:Vue.component('Test',{ template:` <div> <p>{{msg}},我是test组件</p> <button @click='msg+=" Danl原创 2021-07-31 22:00:06 · 1476 阅读 · 0 评论 -
Vue获取数组的数组数据
Q:如何在vue获取数组的数组?A:用到js的map对象方法一、data里要先定义好有两个数组二、主要代码这样就可以获取到数组的子数组数据原创 2021-05-23 14:29:49 · 10673 阅读 · 0 评论 -
什么是单页应用?它的优缺点?其缺点的解决方案是什么?
文章目录一、什么是单页应用?二、单页应用的优缺点1.优点2.缺点三、单页应用缺点的解决方案一、什么是单页应用?从字面上来理解:单页面应用(SPA--------single page application),一个web项目只有一个页面(即一个HTML文件);一个项目的所有页面的所有内容被分成了很多的小块(即组件),可以重复利用的,可以任意调整的组件,每个组件就是一个独立的部分(包括html,css和javascript代码)。从使用的过程来理解:单页面应用指一个系统只加载一次资源,然后下面的操原创 2021-02-18 18:32:55 · 5378 阅读 · 3 评论 -
【Vue实战】.vue格式单文件实现动态表格的增加、删除、查看详情等效果。(内附完整代码!!!)
上一篇博客分享了如何用动态路由传值,用实例谈谈this.router.push与this.router.push 与 this.router.push与this.route.params今天这篇博客主要想把在.vue格式单文件实现动态表格的增,删,查看等效果代码分享给大家~目录结构:一、动态表格的增加代码示例://userManager.vue<template> <div > <h1>用户管理</h1> &原创 2020-11-15 09:48:48 · 774 阅读 · 0 评论 -
【Vue实战】如何用动态路由传值,用实例谈谈this.$router.push 与 this.$route.params
文章目录前言一、动态路由是什么?二、使用步骤1.引入库2.读入数据总结前言前期我用props以及$emit()等方法来实现父子组件之间的相互传值。【Vue实战】自定义组件数据传值以及组件动态切换实例想看的小伙伴可以点击进去浏览哦~后面学习了vue-cli脚手架之后,关于在脚手架上搭建这个项目,则需要改写一些代码了,其中会涉及到动态路由的传值问题,接下来我们一步步来改写,来实现效果。一、动态路由是什么?示例:pandas 是基于NumPy 的一种工具,该工具是为了解决数据分析任务而创建的。原创 2020-11-10 19:55:31 · 1604 阅读 · 0 评论 -
【Vue】vue-cli脚手架搭建项目静态资源图片渲染失败原因及解决方法
文章目录前言一、简单的vue-cli静态资源图片渲染失败二、动态的vue-cli静态资源图片渲染失败以select选择框为例子(选择不同的图片就渲染不同的图片)解决方法一:解决方法二:前言最近学习了vue-cli脚手架搭建项目,在静态资源图片渲染的时候出现了渲染失败的问题,通过搜索资料和咨询大佬,总结了以下原因:1.vue-cli脚手架涉及到webpack的打包机制,最终页面并不会显示图片内容,原因在于图片路径并没有取打包后的资源路径。2.在select选择中,require方法所返回的是字符串原创 2020-11-08 18:08:26 · 1217 阅读 · 1 评论 -
【Vue实战】自定义父子组件数据传递以及组件动态切换实例(内附超详细代码解析!!!)
父子组件数据传递及组件动态切换实例(内附超详细代码解析!)1.效果图篇图解:点击【新增】按钮跳转个人信息填写页面=>点击【提交】按钮=>在学生信息表显示刚所输入的信息图解:点击【详情】按钮=>跳转学生信息详情页面2.HTML代码篇解析:Part1:此例子组件由一个父组件和两个子组件组成,父组件负责渲染学生信息表页面;子组件1mycomponent1负责渲染用户点击【新增】按钮后跳转的用户输入信息页面;子组件2mycomponent2负责渲染用户点击【详情】按钮后跳转的原创 2020-10-29 21:30:51 · 1013 阅读 · 2 评论