![](https://img-blog.csdnimg.cn/20201014180756927.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
vue.js
文章平均质量分 63
前端鼓励师
一名有着四年多前端开发经验的前端开发工程师,要是觉得我不错可以关注我一下,我们一起共同进步 啦啦啦
展开
-
vuex的使用代码详细讲解
Vuex 是 Vue.js 应用程序的状态管理模式,它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。以下是使用 Vuex 的基本步骤以及一个简单的计数器实例来说明其工作原理:步骤1:安装和引入 Vuex。原创 2024-03-08 09:42:35 · 479 阅读 · 0 评论 -
路由的两种模式:hash模式和 history模式
属性指向 History 对象,它表示当前窗口的浏览历史。当发生改变时,只会改变页面的路径,不会刷新页面。History 对象保存了当前窗口访问过的所有页面网址。通过 history.length 可以得出当前窗口一共访问过几个网址。由于安全原因,浏览器不允许脚本读取这些地址,但是允许在地址之间导航。浏览器工具栏的“前进”和“后退”按钮,其实就是对 History 对象进行操作。原创 2023-10-08 14:25:42 · 590 阅读 · 0 评论 -
vue的几个提效技巧
也就是说,假设总计50条数据,即使经过v-if以后,只剩下25条显示,但是v-for早就循环了一遍50条数据,解决办法就是用一个计算属性先将数据过滤了以后,v-for循环过滤了之后的数据。当这个页面没有数据更新,或者是想保存状态,下次进来还是这样子的时候,例如淘宝查看列表页,点进去查看详情之后,返回列表页依旧到上次浏览到的地方,都可以使用。的值和父组件的index都要拿的情况,但是按照之前的写法,只能拿到其中一个的值,要么子组件,要么父组件,鱼和熊掌不可兼得。用来拿取路由传值的信息,比如路由的后缀?原创 2023-10-07 10:29:37 · 99 阅读 · 0 评论 -
VUE中常用的4种高级方法
要使自定义的Vue组件支持v-model,需要实现一个名为value的prop和一个名为input的事件。在组件内部,将valueprop 绑定到组件的内部状态,然后在对内部状态进行修改时触发input事件。下面是一个简单的例子,展示如何创建一个自定义的输入框组件并支持v-model:原创 2023-06-14 15:51:30 · 791 阅读 · 3 评论 -
js浏览器下载视频,不会变预览,按钮增加防抖节流
js浏览器下载视频 按钮增加防抖节流。原创 2022-10-09 11:06:57 · 605 阅读 · 0 评论 -
vue使用videoJS播放m3u8视频
vue使用videoJS播放m3u8视频原创 2022-09-29 14:21:44 · 1880 阅读 · 0 评论 -
请描述下你对vue生命周期的理解
生命周期的概念应用很广泛,特别是在政治、经济、环境、技术、社会等诸多领域经常出现,其基本涵义可以通俗地理解为“从摇篮到坟墓”的整个过程在中实例从创建到销毁的过程就是生命周期,即指从创建、初始化数据、编译模板、挂载Dom→渲染、更新→渲染、卸载等一系列过程我们可以把组件比喻成工厂里面的一条流水线,每个工人(生命周期)站在各自的岗位,当任务流转到工人身边的时候,工人就开始工作PS:在生命周期钩子会自动绑定 上下文到实例中,因此你可以访问数据,对 和方法进行运算这意味着你不能使用箭头函数来定义一个生命周期方法原创 2022-06-09 14:10:33 · 108 阅读 · 0 评论 -
vue 自测题
1. Vue 实例的 data 属性,可以在哪些生命周期中获取到?A. beforeCreateB. createdC. beforeMountD. mounted正确答案》BCD2. 下列对 Vue 原理的叙述,哪些是正确的?A. Vue 中的数组变更通知,通过拦截数组操作方法而实现B. 编译器目标是创建渲染函数,渲染函数执行后将得到 VNode 树C. 组件内 data 发生变化时会通知其对应 watcher,执行异步更新D. patching 算法首先进行同层级比较,可能执行的原创 2022-05-20 14:32:59 · 2168 阅读 · 0 评论 -
vue项目本地开发完成后部署到服务器后报404
面试官:vue项目本地开发完成后部署到服务器后报404是什么原因呢?一、如何部署前后端分离开发模式下,前后端是独立布署的,前端只需要将最后的构建物上传至目标服务器的web容器指定的静态目录下即可我们知道vue项目在构建后,是生成一系列的静态文件[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-l9wiGIH7-1652929941320)(https://imgkr2.cn-bj.ufileos.com/b9d13e56-f859-4b4b-a9da-a703a34c2原创 2022-05-19 11:12:47 · 1381 阅读 · 0 评论 -
面试官:你了解vue的diff算法吗?
面试官:你了解vue的diff算法吗?说说看一、是什么diff 算法是一种通过同层的树节点进行比较的高效算法其有两个特点:比较只会在同层级进行, 不会跨层级比较在diff比较的过程中,循环从两边向中间比较diff 算法的在很多场景下都有应用,在 vue 中,作用于虚拟 dom 渲染成真实 dom 的新旧 VNode 节点比较二、比较方式diff整体策略为:深度优先,同层比较比较只会在同层级进行, 不会跨层级比较比较的过程中,循环从两边向中间收拢下面举个vue通过dif原创 2022-05-19 10:34:09 · 603 阅读 · 0 评论 -
Vue中的$nextTick有什么作用
面试官:Vue中的$nextTick有什么作用?一、NextTick是什么官方对其的定义在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法,获取更新后的 DOM什么意思呢?我们可以理解成,Vue 在更新 DOM 时是异步执行的。当数据发生变化,Vue将开启一个异步更新队列,视图需要等队列中所有数据变化完成之后,再统一进行更新举例一下Html结构<div id="app"> {{ message }} </div>构建一个vue实例原创 2022-05-18 17:36:50 · 205 阅读 · 2 评论 -
说说你对vue的mixin的理解,有什么应用场景
面试官:说说你对vue的mixin的理解,有什么应用场景?一、mixin是什么Mixin是面向对象程序设计语言中的类,提供了方法的实现。其他类可以访问mixin类的方法而不必成为其子类Mixin类通常作为功能模块使用,在需要该功能时“混入”,有利于代码复用又避免了多继承的复杂Vue中的mixin先来看一下官方定义mixin(混入),提供了一种非常灵活的方式,来分发 Vue 组件中的可复用功能。本质其实就是一个js对象,它可以包含我们组件中任意功能选项,如data、components、m原创 2022-05-18 17:34:14 · 202 阅读 · 0 评论 -
Vue项目中你是如何解决跨域的呢?
面试官:Vue项目中你是如何解决跨域的呢?一、跨域是什么跨域本质是浏览器基于同源策略的一种安全手段同源策略(Sameoriginpolicy),是一种约定,它是浏览器最核心也最基本的安全功能所谓同源(即指在同一个域)具有以下三个相同点协议相同(protocol)主机相同(host)端口相同(port)反之非同源请求,也就是协议、端口、主机其中一项不相同的时候,这时候就会产生跨域一定要注意跨域是浏览器的限制,你用抓包工具抓取接口数据,是可以看到接口已经把数据返回回来了,只是浏览器的限原创 2022-05-16 16:05:01 · 177 阅读 · 1 评论 -
封装Axios网络请求
Axios 是目前应用最为广泛的 AJAX 封装库Axios的特性有:从浏览器中创建 XMLHttpRequests从 node.js 创建 http 请求支持 Promise API拦截请求和响应转换请求数据和响应数据取消请求自动转换 JSON 数据客户端支持防御 XSRF使用axios时,需要通过使用script标签引入:https://unpkg.com/axios/dist/axios.min.jsAxios API向axios()传递相关配置来创建请求;axio.原创 2022-05-07 15:49:42 · 204 阅读 · 0 评论 -
vue Examples模板
vue Examples模板 通过script引入使用vue 非使用脚手架<!DOCTYPE html><html><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"><title>Examples</title><meta name="description" content原创 2022-04-22 13:50:26 · 493 阅读 · 0 评论 -
vue 子组件之间传递数据
vue 子组件之间传递数据<!DOCTYPE html><html><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"><title>子组件之间传递数据</title><meta name="description" content=""><meta name=.原创 2022-04-22 10:10:53 · 90 阅读 · 0 评论 -
如何解决VUE中报错 : Property or method “xxx“ is not defined on the instance but referenced during render
处理[Vue warn]: Property or method “testhandle” is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the propertyVue.component( .原创 2022-04-18 11:33:14 · 31113 阅读 · 3 评论 -
vue 具名插槽用法
vue 具名插槽用法<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> &l.原创 2022-04-11 14:43:26 · 1820 阅读 · 0 评论