分类：Vue

2020
10-07

多页vue应用的单页面打包方法(内含打包模式的应用)

一、简介关于如何以及为什么要构建多页vue应用，我们在上一篇文章中已经介绍过，感兴趣的请参考构建多页vue应用。本文我们要介绍的是，对于一个多页应用，如何单独打包其中一个（或几个）页面。一般来说，多页应用不需要打包单个页面，这多个页面可以作为整个应用直接放在静态资源服务器上。不过我们也说过，多页应用的每个页面也可能会放在不同的服务器上，这时候如果往每个服务器上都放置完整的资源包，就会显得过于臃肿。于是我... 继续阅读 >
2020
10-07

VUE页面中通过双击实现复制表格中内容的示例代码

VUE页面中通过双击实现复制表格中内容的示例代码 上篇文章给大家介绍了Vue实现点击按钮复制文本内容的例子，喜欢的朋友可以点击查看，今天给大家分享VUE页面中通过双击实现复制表格中内容，通过示例代码讲解的非常详细，需要的朋友参考下吧！VUE页面中通过双击实现复制表格中内容页面预览：vue中代码实现：<template><el-table:data="tableData"height="250"borderstyle="width:100%"><el-table-columnprop="date"label="日期"width="180"></el-table-column><el-tabl... 继续阅读 >
2020
10-07

vue scroll滚动判断的实现(是否滚动到底部、滚动方向、滚动节流、获取滚动区域dom元素)

vue scroll滚动判断的实现(是否滚动到底部、滚动方向、滚动节流、获取滚动区域dom元素) 1、是否滚动到底部isScrollBottom(){//是否滚动到了底部this.box=this.$refs.chatListWrappervarclientHeight=this.box.clientHeightvarscrollTop=this.box.scrollTopvarscrollHeight=this.box.scrollHeightif(scrollTop+clientHeight==scrollHeight){this.$store.dispatch('setBottomBtn',false,{root:true})//隐藏直达最新消息按钮this.isBottom=truethis.isTop=f... 继续阅读 >
2020
10-07

Vue初始化中的选项合并之initInternalComponent详解

今天给大家分享Vue初始化中的选项合并之initInternalComponent的相关知识，具体代码如下所示：exportfunctioninitInternalComponent(vm:Component,options:InternalComponentOptions){constopts=vm.$options=Object.create(vm.constructor.options)//doingthisbecauseit'sfasterthandynamicenumeration.constparentVnode=options._parentVnodeopts.parent=options.parentopts._parentVnode=parent... 继续阅读 >
2020
10-07

Vue初始化中的选项合并之initInternalComponent详解

今天给大家分享Vue初始化中的选项合并之initInternalComponent的相关知识，具体代码如下所示：exportfunctioninitInternalComponent(vm:Component,options:InternalComponentOptions){constopts=vm.$options=Object.create(vm.constructor.options)//doingthisbecauseit'sfasterthandynamicenumeration.constparentVnode=options._parentVnodeopts.parent=options.parentopts._parentVnode=parent... 继续阅读 >
2020
10-07

Vue组件为什么data必须是一个函数

前言我们需要先复习下原型链的知识，其实这个问题取决于js，而并非是vue。functionComponent(){this.data=this.data}Component.prototype.data={name:'jack',age:22,}首先我们达成一个共识（没有这个共识，请补充下js原型链部分的知识）：实例它们构造函数内的this内容是不一样的。Component.prototype，这类底下的方法或者值，都是所有实例公用的。解开疑问基于此，我们来看看这个问题：functionComponent(... 继续阅读 >
2020
10-07

Vue实现点击箭头上下移动效果

Vue实现点击箭头上下移动效果 <body><divid="app"><ul><liv-for="(item,i)inlist">{{item.name}}//i<list.length-1需要的是0,1,2,3需要四个向上的箭头长度为5减1之后长度为4小于4就是0,1,2,3<buttonv-show="i<list.length-1"@click="down(i)">↓</button><buttonv-show="i>0"@click="up(i)">↑</button></li></ul></div><scriptsrc="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script><script>Vue.config.p... 继续阅读 >
2020
10-07

详解vue 组件

Vue的两大核心1.数据驱动-数据驱动界面显示2.模块化-复用公共模块，组件实现模块化提供基础组件基础组件渲染过程template--->ast（抽象语法树）--->render--->VDom(虚拟DOM)--->真实的Dom--->页面Vue组件需要编译，编译过程可能发生在打包过程（使用vue文件编写）运行时（将字符串赋值template字段，挂载到一个元素上并以其DOM内部的HTML作为模板)对应的两种方式runtime-onlyvsruntime-compilerruntim... 继续阅读 >
2020
10-07

vue Element左侧无限级菜单实现

最近项目中,要用到element-ui的无限级分类菜单，根据角色生成不同的递归数据，查阅了网上很多资料，发现很多都不太完整并且没有很多的延伸性。梳理递归数据我们一般拿到后台的数据是：1.扁平化数据格式2.递归式数据格式letarr=[{name:小七,id:1},{name:小八,id:2},{name:小九,id:3}]我们从后台拿到的是这种扁平化处理数据，那我们实现递归菜单的话需要什么数据格式呢，需要格式如下：letmenuItems=[{name:小... 继续阅读 >
2020
10-07

Vue中key的作用示例代码详解

Vue中key的作用key的特殊attribute主要用在Vue的虚拟DOM算法，在新旧Nodes对比时辨识VNodes。如果不使用key，Vue会使用一种最大限度减少动态元素并且尽可能的尝试就地修改、复用相同类型元素的算法，而使用key时，它会基于key的变化重新排列元素顺序，并且会移除key不存在的元素。此外有相同父元素的子元素必须有独特的key，重复的key会造成渲染错误。描述首先是官方文档的描述，当Vue正在更新使用v-for渲染的元素列表时，它默认使... 继续阅读 >
2020
10-07

使用Vue Composition API写出清晰、可扩展的表单实现

表单是前端开发中最棘手的部分之一，您可能会在其中发现很多混乱的代码。基于组件的框架，如Vue.js，在提高前端代码的可扩展性方面做了很多工作，但是表单的问题仍然存在。在本教程中，将向您展示新的VueCompositionAPI（即将加入Vue3中）如何使表单代码更清晰、更具可扩展性。为什么表单代码经常很烂像Vue这种基于组件的框架的关键设计模式是组件组合。这种模式将应用程序的特性抽象为独立的、单一用途的组件，这些组件... 继续阅读 >
2020
10-07

详解vue高级特性

Vue为我们提供了很多高级特性，学习和掌握它们有助于提高你的代码水平。一、watch进阶从我们刚开始学习Vue的时候，对于侦听属性，都是简单地如下面一般使用：watch:{a(){//doSomething}}实际上，Vue对watch提供了很多进阶用法。handler函数以对象和handler函数的方式来定义一个监听属性，handler就是处理监听变动时的函数：watch:{a:{handler:'doSomething'}},methods:{doSomething(){//当a发生变化的时候，做些处理... 继续阅读 >
2020
10-07

vue实例的选项总结

一、数据API：https://cn.vuejs.org/v2/api/#%E9%80%89%E9%A1%B9-%E6%95%B0%E6%8D%AE1.data类型：Object|Function限制：组件的定义只接受function详细：Vue实例的数据对象。Vue将会递归将data的属性转换为getter/setter，从而让data的属性能够响应数据变化。对象必须是纯粹的对象(含有零个或多个的key/value对)。当一个组件被定义，data必须声明为返回一个初始数据对象的函数，因为组件可能被用来创建多个实例。如... 继续阅读 >
2020
10-06

浅谈vue的第一个commit分析

为什么写这篇vue的分析文章？对于天资愚钝的前端（我）来说，阅读源码是件不容易的事情，毕竟有时候看源码分析的文章都看不懂。每次看到大佬们用了1～2年的vue就能掌握原理，甚至精通源码，再看看自己用了好几年都还在基本的使用阶段，心中总是羞愧不已。如果一直满足于基本的业务开发，怕是得在初级水平一直待下去了吧。所以希望在学习源码的同时记录知识点，可以让自己的理解和记忆更加深刻，也方便将来查阅。目录结构本文以vue... 继续阅读 >
2020
10-06

详解Vue Cli浏览器兼容性实践

详解Vue Cli浏览器兼容性实践 浏览器市场占有率在处理浏览器兼容性问题之前，我们先来看一下现在的浏览器市场份额是怎样的，👇下面是来自statCounter的数据，基本上覆盖了全世界浏览器市场份额的统计，而且前端er经常使用的caniuse所拉取的浏览器数据就是来自statCounter。世界范围天朝范围Plus移动端分析从统计数据可以看出，对于国内的PC端浏览器，QQ浏览器以及Sogou的占比还是挺高的，所以在做兼容性处理的时候也需要多考虑这两款浏览器。不过QQ浏... 继续阅读 >
2020
10-06

vue-router的hooks用法详解

vue-router的hooks用法详解 虽然Vue3还没有正式发布，但是热爱新技术的我早已按捺不住自己的内心，开始尝试在小项目中使用它了。根据这篇《今日凌晨Vue3beta版震撼发布，竟然公开支持脚手架项目！》我搭建了一个Vue3的脚手架项目，用这种方式搭建的脚手架项目不仅仅只有vue是新版的，就连vue-router、vuex都是最新的。给大家截一下package.json的图：可以看到vue-router和vuex都已经开启4.0时代啦！不过其实我并没有去了解过vue-router4.0的新用法什么的... 继续阅读 >