VUE学习
文章平均质量分 63
夜跑者
目前从事web前端,小程序开发。熟悉vue框架,uni-app跨端框架。
展开
-
vue 动态绑定ref 父组件获取自组件data数据
vue中用ref 可以引用元素或组件中的数据,静态绑定用法非常简单,例如:this.$refs["xxx"].func() 或this.$refs["xxx"].msg 父组件调用子组件中的方法或数据。如果在父组件中用v-for循环渲染子组件,并且需要在父组件获取所有子组件中的数据,那么就需要动态绑定ref,代码如下。:注意父组件在取得子组件数据写法如下:this.$refs[`child${item.id}`][0].msg。原创 2023-09-06 18:49:43 · 1487 阅读 · 0 评论 -
Vue-router 子路由(嵌套路由)
转自:Vue-router 子路由(嵌套路由)_Sun-yz的博客-CSDN博客_vue子路由在应用界面开发中通常由多层嵌套的组件组合而成。但随着页面的增多,如果把所有的页面都塞到一个 routes 数组里面会显得很乱,你无法确定哪些页面存在关系。借助 vue-router 提供了嵌套路由的功能,让我们能把相关联的页面组织在一起。实验目的在我们的商城项目中,后台管理页 Admin 涉及到很多操作页面,比如:/admin 主页面/admin/create 创建新信息/admin/edit 编辑信息让转载 2022-06-30 14:27:26 · 4151 阅读 · 0 评论 -
vue2.0中data如何被挂载的
在面试中被问到这个问题。<html> <head> <style type="text/css"> .div-cls { color: red; } </style> </head> <body> <script src="./vue.js"></script> <div id="app"> <原创 2022-05-31 15:05:27 · 370 阅读 · 0 评论 -
什么情况下Vue使用index作为key会出问题(转)
文章转自:什么情况下Vue使用index作为key会出问题(转) - eret9616 - 博客园结论在使用非文本节点的组件,且这个组件没有依赖于响应式的props,此时使用index作为key,那么此时对于列表的删除操作会导致视图错乱。背景在动态删除v-for渲染的列表的过程中,如果key指定为index,则可能出现渲染错乱的问题。比如,你的列表有两行,你明明删了第一行,结果却是第二行消失了。解析问题源于key的重复,假设你的列表有两行,当你删了第一行,那么第二行的转载 2022-01-11 16:32:18 · 651 阅读 · 0 评论 -
我用index作为key也没啥问题啊
文章转自:https://juejin.cn/post/6999932053466644517前言所有熟悉Vue技术栈的小伙伴,都知道在列表渲染的场景下,不能使用index或random作为key。也有很多小伙伴在面试的时候会被面试官比较详细的追问,假如使用index作为key会有什么问题?假如使用random作为key会有什么问题?假如使用一个唯一不变的id作为key有什么好处呢?这道题目,表面上看起来是考察我们对同级比较过程中diff算法的理...转载 2021-08-25 08:42:07 · 256 阅读 · 0 评论 -
Vue watch 中 this 注意事项
在watch中使用this要注意,不能用箭头函数,否则会出错,例如:<template></template><script> export default{ data(){ return { isLogin: false } }, watch:{ isLogin: (newVal, oldVal) => { newVal && this.updateLogin() } },原创 2021-03-26 14:19:49 · 8747 阅读 · 0 评论 -
vue中动态化的按需使用keep-alive
文章转自:https://www.imooc.com/article/302879主要讲下啥是 keep-alive、具体到项目中怎么用的问题。项目相关:panda-mall1、啥是 keep-alive? 就是缓存,我们还是来看看具体的使用场景。 首先简单一点,第一种比较普遍的场景,当我们从首页–>列表页–>商详页–>再返回,这时候列表页应该是需要keep-alive的。 然后第二种,当我们从首页–>列表页–>商详页–>返回到列表转载 2021-02-02 13:59:52 · 245 阅读 · 0 评论 -
浅谈Vue页面级缓存解决方案feb-alive(上)
文章写的不错,转自:https://www.jb51.net/article/159668.htmfeb-alivegithub地址体验链接使用理由开发者无需因为动态路由或者普通路由的差异而将数据初始化逻辑写在不同的钩子里beforeRouteUpdate或者activated 开发者无需手动缓存页面状态,例如通过localStorage或者sessionStorage缓存当前页面的数据 feb-alive会帮你处理路由meta信息的存储与恢复为什么开发feb-laive?当我们通转载 2020-12-21 14:19:25 · 228 阅读 · 0 评论 -
通俗易懂了解Vue内置组件keep-alive内部原理
文章转自:https://www.cnblogs.com/wangjiachen666/p/11497200.html通俗易懂了解Vue内置组件keep-alive内部原理阅读目录1. 官方介绍及其用法 1.1 组件介绍 1.2 用法 2. 实现原理 2.1 props 2.2 created 2.3 destroyed 2.4 mounted 2.5 render 3. 生命周期钩子 4. 总结回到顶部1. 官方介绍及其用法.转载 2020-12-11 16:23:11 · 552 阅读 · 0 评论 -
Vue slot用法使用说明
slot 是Vue中的一个概念。把父组件中的内容插入到子组件中。有3种类型的slot, 下面分别详细描述其用法1. 单个插槽 又称为默认插槽,匿名插槽。是最简单的一种形式。用法如下:<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>vue slot demo</title></head> <body>..原创 2020-10-31 16:39:05 · 1201 阅读 · 0 评论 -
vuedraggable的使用
文章转自:https://www.cnblogs.com/whaleAlice/p/12488998.htmlDraggable为基于Sortable.js的vue组件,用以实现拖拽功能。特性支持触摸设备支持拖拽和选择文本支持智能滚动支持不同列表之间的拖拽不以jQuery为基础和视图模型同步刷新和vue2的国度动画兼容支持撤销操作当需要完全控制时,可以抛出所有变化可以和现有的UI组件兼容工作中使用了基于vue的拖动组件vuedraggable,在这里进行一些总结..转载 2020-10-24 09:50:11 · 14384 阅读 · 0 评论 -
vue 中怎么让数据变成非响应式数据
在参加一个公司的面试题时,面试官问到,vue 里面怎么让一个响应式的数据变成非响应式的,我没有回答上来。在网上搜了一下,也没搜到满意答案。各位大牛有知道的吗? 我继续看源码找答案。...原创 2020-09-18 19:42:35 · 3909 阅读 · 7 评论 -
Vue v-html用法
如果我们从服务器端获取到了HTML字符串,用浏览器显示出来。在Vue框架下,可以用v-html指令来做。例如:<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>vue demo</title></head><body><script src="./vue.js"></script><原创 2020-06-18 20:34:57 · 10918 阅读 · 0 评论 -
Vue deep watch
在我们对一个对象进行watch时,改变对象里面的一个属性后,watch对应的函数并没有被调用。这时需要deep watch。<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>deep watch</title></head><body><script src="./vue.js"></script原创 2020-05-26 20:31:35 · 429 阅读 · 0 评论 -
Vue下给 div 自定义键盘事件以及键盘修饰符
只有有焦点的元素才能输入键盘字符,例如<input>,而div元素就不行,需要给它绑定一个自定义事件。我们在手动键盘事件keydown时,发送一个自定义事件来实现。 在Vue下我们可以给事件一个修饰符,采用Vue全局config对象来添加, 例如:Vue.config.keyCodes['Left'] = 37我们通过一个例子来看看如何实现 Vue下给 div 自定义键盘事件以及键盘修饰符<!DOCTYPE html><html>...原创 2020-05-18 20:10:13 · 3682 阅读 · 1 评论 -
节流和防抖的区别,以及如何实现
文章转自:https://www.cnblogs.com/crazycode2/p/12130880.html防抖触发高频事件后n秒内函数只会执行一次,如果n秒内高频事件再次被触发,则重新计算时间实现方式:每次触发事件时设置一个延迟调用方法,并且取消之前的延时调用方法 缺点:如果事件在规定的时间间隔内被不断的触发,则调用方法会被不断的延迟 1 2 3 ...转载 2020-04-24 20:48:12 · 129 阅读 · 0 评论 -
vue-class-component 以class的模式写vue组件
文章转自:https://www.cnblogs.com/crazycode2/p/7821089.htmlvue英文官网推荐了一个叫vue-class-component的包,可以以class的模式写vue组件。vue-class-component(以下简称Component)带来了很多便利:1.methods,钩子都可以直接写作class的方法2.computed属性可以直接通过...转载 2020-04-24 20:36:22 · 3172 阅读 · 0 评论 -
vue自定义组件实现v-model双向绑定
文章转自:https://blog.csdn.net/liub37/article/details/83382205vue中父子组件通信,都是单项的,直接在子组件中修改prop传的值vue也会给出一个警告,接下来就用一个小列子一步一步实现了vue自定义的组件实现v-model双向绑定,父组件值变了子组件也会跟着变,子组件中传过来的值变了,父组件值也会跟着变化。如有错误的地方欢迎评论指出父级...转载 2020-03-26 17:49:02 · 495 阅读 · 0 评论 -
Vue中动态(import 、require)显示img图片
文章转自:https://www.cnblogs.com/lemoncool/p/11284586.htmlvue中,经常会遇到显示图片的问题,如果是一个普通组件的话,那么这样就可以了 1 <img src="../assets/images/avtor.jpg"width="100%"> 上文的弊端有两个:首先,是采用绝对路径...转载 2020-03-18 16:10:47 · 1162 阅读 · 0 评论 -
Windows下创建Vue工程步骤
文章转自:https://www.cnblogs.com/liluxiang/p/9592003.html一、使用之前,我们先来掌握3个东西是用来干什么的。npm: Nodejs下的包管理器。webpack: 它主要的用途是通过CommonJS的语法把所有浏览器端需要发布的静态资源做相应的准备,比如资源的合并和打包。vue-cli: 用户生成Vue工程模板。(帮你快速开始一个...转载 2020-02-23 16:40:01 · 269 阅读 · 0 评论 -
Vue 动态组件的使用
Vue 官方文档对动态组件有以下描述:有的时候,在不同组件之间进行动态切换是非常有用的,比如在一个多标签的界面里。上述内容可以通过 Vue 的<component>元素加一个特殊的isattribute 来实现。我们写一个使用动态组件的简单例子。<html><head> <style type="text/css">...原创 2020-02-16 10:49:45 · 312 阅读 · 0 评论 -
VUE 响应式原理- 续
VUE响应式原理,再来一个比较贴合实际的例子。假如我是房东, 我到房产中介去挂了一套房子要出售,那房产中介小哥就会把这个房子发布出去,有一些购房者有意向的话,就会去房产中介小哥那里去询问价格,房产中介小哥就让潜在购房者登记,并告诉潜在购房者如果房东价格松动会即使通知你。房东看房产大势不好,国家要出台限购限售政策,一咬牙一跺脚想降级出手,那么他就会告诉中介降级20万,房产中介小哥就会挨个打电话或微信...原创 2018-12-29 08:45:34 · 171 阅读 · 0 评论 -
VUE 响应式原理
今天终于弄懂了 VUE的响应式原理, perfectvar QingdaoWeather = { Shinan : { weath : "sunny", temperature : "-5" }, Shibei : { weath : "cloudy", temperature : "-7" ...原创 2018-12-28 11:06:11 · 140 阅读 · 0 评论 -
Vue v-for中为什么要加属性key
在Vue官网中强烈推荐在使用v-for时要加key属性,这篇文章看看加属性key和不加属性key的区别。我们模拟一下Vue中对这部分的处理流程。先创建3个div元素,内容为xiaozhangxiaowangxiaoliu然后在第一个div元素之前再添加一个新div元素xiaoli,渲染后的内容如下:xiaolixiaozhangxiaowangxiaoliu我们...原创 2020-02-08 17:39:36 · 1148 阅读 · 0 评论 -
模拟函数式组件过程
模拟一下函数式组件过程,这样不用看Vue源码,也能理解这一过程。<html> <head><style type="text/css"></style></head> <body> <div id="app"> </div> <script>...原创 2020-01-25 12:29:50 · 152 阅读 · 0 评论 -
函数式组件原理
前一篇文章分析了函数式组件用法(https://blog.csdn.net/liubangbo/article/details/104034122) ,这篇文章从源码的角度看看函数式组件,看看它怎么是无状态的,以及怎么没有实例的。我们就用之前文章的例子来进行分析。要渲染的组件如下: <div id="app"> <list-view-comp :i...原创 2020-01-22 23:35:15 · 530 阅读 · 0 评论 -
函数式组件用法
Vue 官网对函数式组件有以下描述:我们可以将组件标记为functional,这意味它无状态 (没有响应式数据),也没有实例 (没有this上下文)。一个函数式组件就像这样:Vue.component('my-component', { functional: true, // Props 是可选的 props: { // ... }, // 为了弥...原创 2020-01-18 22:01:53 · 769 阅读 · 0 评论 -
Vue render 函数使用以及原理
Vue.js 使用了基于 HTML 的模板语法,所以我们一般直接写模板,例如:template:'<divstyle="width:200px;height:200px;border:5pxsolidred">{{msg}}</div>'当然我们也可以直接写render函数。下面我们就看看怎么用render函数达到相同的效果。<html...原创 2020-01-11 23:14:59 · 1467 阅读 · 0 评论 -
Vue 由虚拟Dom创建真实Dom过程
这篇文章简单介绍一下由虚拟Dom创建真实Dom的过程,还是以一个简单例子来进行分析:<html> <head><style type="text/css"></style></head> <body> <script src="./vue.js"></script> ...原创 2020-01-05 21:21:44 · 990 阅读 · 0 评论 -
Vue $refs 减小获取dom消耗
通过前面的文章我们知道了通过$refs是如何获取元素的。其实就是$refs对象中的一个属性指向了创建的元素。<div ref="divRef" id="divId"></div>this.$refs.divRef = createElement("div");要获取div元素,我们可以通过document.getElementById("divId") , 也...原创 2019-12-31 23:34:13 · 444 阅读 · 0 评论 -
Vue $refs 原理
这篇文章分析Vue实例怎么通过$refs 访问到dom元素的。通过上一篇的例子来进行分析:<html> <head><style type="text/css"></style></head> <body> <script src="./vue.js"></script>...原创 2019-12-29 12:48:45 · 2805 阅读 · 0 评论 -
Vue $refs 用法
Vue中带$的接口是外部接口。我们通过Vue实例可以进行调用。Vue官方文档有对此的描述:vm.$refs 类型:Object 只读 详细: 一个对象,持有注册过ref特性的所有 DOM 元素和组件实例。 从上面描述可以看出,是个对象,且是只读的。这个对象持有注册过ref特性的所有dom元素或组件实例。这句话的意思就是通过$refs可以访问到dom对象,...原创 2019-12-29 12:37:30 · 193 阅读 · 0 评论 -
v-for的key
文章转自:https://blog.csdn.net/lqlqlq007/article/details/88652824参考文档:https://cn.vuejs.org/v2/guide/当使用v-for遍历数组时,如果没有指定key,则当数组元素顺序发生变更时,dom绑定的数据会更新,而dom本身的顺序不会变化;如果指定了key,则当数组元素顺序发生变更时,dom会和数据同步更...转载 2019-11-15 13:37:34 · 102 阅读 · 0 评论 -
v-for为什么要加key
文章转自:https://www.jianshu.com/p/4bd5e745ce95说到这个问题想必要举个例子了image没有key <div id="app"> <div> <input type="text" v-model="name"> <button @click="add"&g...转载 2019-11-15 13:35:58 · 107 阅读 · 0 评论 -
VUE源码分析之mixin全局方法
官网有以下解释:全局注册一个混入,影响注册之后所有创建的每个 Vue 实例。插件作者可以使用混入,向组件注入自定义的行为。不推荐在应用代码中使用。其实就相当于注册了一些全局数据和方法,在注册混入之后的Vue实例中都可以使用。我们还是通过一个例子看看:<!DOCTYPE html><html> <head> <m...原创 2019-10-21 10:19:38 · 399 阅读 · 0 评论 -
VUE methods 原理
仿照写了一下VUE methods 实现原理function VueInstance(options) { console.log("VueInstance constructor"); this._init(options);}VueInstance.prototype._init = function (options) { let vm = th...原创 2019-01-04 09:36:11 · 1837 阅读 · 0 评论 -
VUE源码分析之全局函数use原理
Vue提供了全局方法use, Vue.use(plugin)。Vue官网对此有描述:安装 Vue.js 插件。如果插件是一个对象,必须提供install方法。如果插件是一个函数,它会被作为 install 方法。install 方法调用时,会将 Vue 作为参数传入。该方法需要在调用new Vue()之前被调用。当 install 方法被同一个插件多次调用,插件将只会被安装一次...原创 2019-10-15 19:45:06 · 156 阅读 · 0 评论 -
VUE源码分析之filter函数原理
Vue提供了全局过滤器和全局过滤器,主要用在花括号插值以及v-bind表达式中。我们先看看全局过滤器在花括号插值中的用法,并分析其原理。<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>vue demo</title>...原创 2019-10-12 14:58:20 · 400 阅读 · 1 评论 -
VUE源码分析之子组件向父组件通过$emit传递数据过程
还是从一个简单例子看下这个过程:<script src="./vue.js"></script><div id="app"> <child-comp @child-event= "'handleChildEvent'"> </child-comp></div><scri...原创 2019-09-19 13:59:36 · 473 阅读 · 0 评论 -
VUE学习之extends选项
还是从一个简单的代码开始:<!DOCTYPE html><html><head><meta charset="utf-8"><title>vue demo</title></head><body><script src="./vue.js"></scri...原创 2019-04-17 12:03:07 · 1043 阅读 · 0 评论