VUE
文章平均质量分 50
VUE
alokka
前端劝退师
展开
-
VUE props 传参 单向数据流
所有的 props 都遵循着单向绑定原则,props 因父组件的更新而变化,自然地将新的状态向下流往子组件,而不会逆向传递。这避免了子组件意外修改父组件的状态的情况,不然应用的数据流将很容易变得混乱而难以理解。原创 2023-03-01 15:06:25 · 776 阅读 · 0 评论 -
VUE 文件导出下载
VUE 文件导出下载原创 2022-08-09 13:59:44 · 605 阅读 · 0 评论 -
element 合并单元格
element 合并单元格原创 2022-08-03 15:10:43 · 1812 阅读 · 2 评论 -
vue 基于 Export2Excel.js 导出 Excel
vue基于 Export2Excel.js 导出 Excel原创 2022-08-02 11:36:37 · 2837 阅读 · 3 评论 -
VUE 实现拖拽效果
在我们平时做也无需求中,往往会遇到拖拽模块的需求。刚开始没有接触过拖拽的时候,会对拖拽有陌生感,会比较担心实现起来会比较的复杂,可能自己很难搞定。然后就会去网上百度一些vue拖拽相关的插件,比如vue-draggable它是基于sortable.js的二次封装,兼容了移动端,不过我们写toB项目的时候,可能只有pc端需要拖拽功能,所以这期就结合vue教大家手写实现拖拽。......原创 2022-07-31 20:07:44 · 23918 阅读 · 3 评论 -
VUE-CLI 项目搭建规范
EditorConfig 有助于为不同 IDE 编辑器上处理同一项目的多个开发人员维护一致的编码风格。VSCode需要安装一个插件:EditorConfig for VS CodePrettier 是一款强大的代码格式化工具,支持 JavaScript、TypeScript、CSS、SCSS、Less、JSX、Angular、Vue、GraphQL、JSON、Markdown 等语言,基本上前端能用到的文件格式它都可以搞定,是当下最流行的代码格式化工具。1.安装prettier2.配置.prettier原创 2022-06-08 10:23:43 · 1731 阅读 · 1 评论 -
VUE computed watch 结合监听两个值的变化 有变化就调用方法
<html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no, minimal-ui"> <!-- 引入样式 --> &原创 2022-03-31 16:43:38 · 865 阅读 · 0 评论 -
vue element el-dialog 自定义指令实现拖拽、双击全屏
'drag': { bind (el) { const header = el.querySelector('.el-dialog__header') const elDialog = el.querySelector('.el-dialog') let isFullScreen = false let originalHeight = 0 let originalWidth = 0 let originalLeft = 0..原创 2022-03-20 16:54:22 · 1959 阅读 · 0 评论 -
VUE map area coords自适应
<template> <div class="imgBox"> <img ref="img" :src="imgUrl" alt="" usemap="#controlmap"> <map name="controlmap"> <area ref="oil" shape="poly" :coords="coordsArr[0]" @click="enter('oil')"/> <area ref="原创 2022-03-16 18:03:53 · 1457 阅读 · 1 评论 -
element-ui el-input type=“number“ 清除上下箭头
在全局 css 加上input::-webkit-outer-spin-button,input::-webkit-inner-spin-button { -webkit-appearance: none;}input[type="number"]{ -moz-appearance: textfield;}原创 2022-01-27 19:38:31 · 791 阅读 · 0 评论 -
element-ui 引入图片的两种方式
1. require 引入<template> <img :src="require('@/images/lokka.png')"></template><script>export default { data () { return { } }}</script>2. import 引入<template> <img :src="imageSrc"></template>&原创 2022-01-19 13:48:02 · 4245 阅读 · 0 评论 -
VUE 监听对象中某一个属性的变化
第一种直接监听对象的属性,写法如下<!DOCTYPE html><html><head> <meta charset="UTF-8"> <!-- import CSS --> <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"></head><body> <di原创 2021-12-16 13:04:12 · 2818 阅读 · 0 评论 -
vue this.$router.push query传递对象方法
this.$router.push({ path: '/home', query: { params: JSON.stringify({ name: 'lokka', age: 18 }) }});let params = JSON.parse(this.$route.query.params)this.name = params.name; this.age = params.age;原创 2021-09-13 17:49:24 · 3201 阅读 · 0 评论 -
VUE this.$router.push跳转页面传值不同 created 函数只调用一次 页面不刷新解决办法
问题:在vue中使用 this.$router.push() 方法,如果只是传入的参数不同,会出现 url 地址变化了,但是页面没有重新请求数据,生命周期函数未调用,需要刷新一下页面才有新的数据加载。原因:由于 Vue 会复用相同组件, 即 /page/1 => /page/2 或者 /page?id=1 => /page?id=2 这类链接跳转时, 将不在执行 created, mounted 之类的钩子, 这时候你需要在路由组件中, 添加 beforeRouteUpdate 钩子来执行原创 2021-07-09 20:39:32 · 7408 阅读 · 0 评论 -
vue中this.$router和this.$route的区别
vue官网给this.$router和this.$route下的定义:this.$routerrouter 实例。this.$route当前激活的路由信息对象。这个属性是只读的,里面的属性是 immutable (不可变) 的,不过你可以 watch (监测变化) 它。this.$router:是全局路由器 router 的实例,可以在任何组件内进行访问,路由实例里面有很多属...原创 2019-12-26 17:30:26 · 863 阅读 · 0 评论 -
在vue项目中添加特殊字体
我们做项目的时候,有时候会想用一些特殊字体来美化我们的页面,下面就教大家如何在vue中引用其他字体首先要去百度搜索我们想要的字体或者在字体网站找一个我们觉得合适的字体这里推荐下面的网站 第一字体转换器 其他网站也都可以下载我们需要的.ttf文件 放在我们本地文件夹中在文件夹下 创建一个 font.css 文件 通过 @font-face 规则引入我们的文件和给字体命名...原创 2019-11-29 11:06:00 · 2714 阅读 · 0 评论 -
Vue3.0 双向数据绑定原理代码
let toProxy = new WeakMap(); // 放置的是原对象:代理过的对象let toRaw = new WeakMap(); // 被代理过的对象: 原对象function isObject(val){ return typeof val === 'object' && val !== null;}function hasOwn(target...原创 2019-11-20 11:02:25 · 617 阅读 · 0 评论 -
Vue2.0 双向数据绑定原理代码
var oldArrayPrototype = Array.prototype;let proto = Object.create(oldArrayPrototype);// 继承var arrayMethods = ['concat','join','pop','push','reverse','shift','slice','sort','splice','toSource','toSt...原创 2019-11-13 17:37:34 · 200 阅读 · 0 评论 -
vue.js实现数据驱动视图原理
vuejs实现数据驱动视图原理什么是数据驱动?数据驱动是vuejs最大的特点。在vuejs中,所谓的数据驱动就是当数据发生变化的时候,用户界面发生相应的变化,开发者不需要手动的去修改dom。比如说我们点击一个button,需要元素的文本进行是和否的切换。在jquery刀耕火种的年代中,对于页面的修改我们一般是这样的一个流程,我们对button绑定事件,然后获取文案对应的元素dom对象,然后根据切换修原创 2017-10-25 17:21:41 · 1958 阅读 · 0 评论 -
vue-router中 query传参和params传参的使用和区别
1.query传参:1.query传参路由: var router = new VueRouter({ routes: [ { path: '/login', component: login }, { name:'register',path: '/register', component: register } // name 或 pat...原创 2018-11-20 17:59:41 · 24470 阅读 · 11 评论 -
vue-router的routes中name属性作用详解
我们常用vue.js和vue-router来创建单页应用,vue-router能很方便的管理所有的单页组件。我们在定义每个路由的时候会有一个name的属性(如下面代码),通常我们不定义这个属性发现也没有任何问题,那么这个name到底有什么用呢?export default new Router({ mode: 'history', routes: [ { path...原创 2018-11-21 14:15:23 · 39857 阅读 · 9 评论 -
VUE中main.js、App.vue、index.html、render函数
1原创 2018-11-19 17:59:41 · 1510 阅读 · 0 评论 -
简单粗暴教你在VUE中引入微信SDK 调用微信分享、朋友圈分享、QQ分享......
写在前面:刚做了一个微信端的网页,用到了微信分享,在网上看了好多的资料,发现好多文档都写得云里雾里,让人看的头疼。通过对很多大佬文章的综合整理,才完成了微信分享的部分。所以我想着自己写一篇文章,能让看到我这篇文章的亲们能够清楚的明白在vue上怎么使用微信分享SDK,能够按照我写的步骤简单粗暴的实现备注:本人还是个菜鸟,刚刚接触vue 文章中有错误或者大家对我有建议,随意的提出来,我好改正,谢...原创 2018-11-23 10:30:00 · 13976 阅读 · 7 评论 -
VUE2 VUE3 父子、隔代、兄弟组件的传值方式
时隔一年多 vue 又增加了新的方法2.2.0 新增 provide 和 inject (隔代传值)2.4.0 新增 \$attrs 和 \$listeners (隔代传值)原创 2019-02-12 19:35:00 · 20828 阅读 · 5 评论 -
vue 知识点整理——指令
vue指令:v-text:用于操作纯文本。如果要更新部分的文本,需要使用 {{ Mustache }} 插值。示例:<span v-text="msg"></span><!-- 和下面的一样 --><span>{{msg}}</span>v-html:v-html用于输出html,它与v-text区别在于...原创 2019-07-31 16:20:32 · 242 阅读 · 0 评论 -
vue 知识点整理——生命周期
vue实例的生命周期什么是生命周期:从Vue实例创建、运行、到销毁期间,总是伴随着各种各样的事件,这些事件,统称为生命周期!生命周期钩子:就是生命周期事件的别名而已;生命周期钩子 = 生命周期函数 = 生命周期事件主要的生命周期函数分类:创建期间的生命周期函数:beforeCreate:实例刚在内存中被创建出来,此时,还没有初始化好 data 和 methods 属性create...原创 2019-07-31 16:20:25 · 201 阅读 · 0 评论 -
vue 知识点整理——过滤器(filter)、计算属性(computed)、方法(method)、监听器(watch)
过滤器概念:Vue.js 允许你自定义过滤器,可被用作一些常见的文本格式化。过滤器可以用在两个地方:mustache 插值和 v-bind 表达式。过滤器应该被添加在 JavaScript 表达式的尾部,由“管道”符指示;私有过滤器HTML元素:<td>{{item.ctime | dataFormat('yyyy-mm-dd')}}</td>私有 f...原创 2019-07-31 16:20:19 · 712 阅读 · 0 评论 -
vue 知识点整理——组件(components)
定义Vue组件什么是组件: 组件的出现,就是为了拆分Vue实例的代码量的,能够让我们以不同的组件,来划分不同的功能模块,将来我们需要什么样的功能,就可以去调用对应的组件即可;组件化和模块化的不同:模块化: 是从代码逻辑的角度进行划分的;方便代码分层开发,保证每个功能模块的职能单一;组件化: 是从UI界面的角度进行划分的;前端的组件化,方便UI组件的重用;全局注册: 全局组件定义的三...原创 2019-07-31 16:20:12 · 611 阅读 · 0 评论 -
vue 知识点整理——特殊特性(key、ref、is)
key:有相同父元素的子元素必须有独特的 key。重复的 key 会造成渲染错误。最常见的用例是结合 v-for:<ul> <li v-for="item in items" :key="item.id">...</li></ul>ref:// 使用 `this.$refs` 来获取元素和组件 <div id="app...原创 2019-07-31 16:20:06 · 243 阅读 · 0 评论 -
vue 知识点整理——路由(vue-router)
什么是路由**后端路由:**对于普通的网站,所有的超链接都是URL地址,所有的URL地址都对应服务器上对应的资源;**前端路由:**对于单页面应用程序来说,主要通过URL中的hash(#号)来实现不同页面之间的切换,同时,hash有一个特点:HTTP请求中不会包含hash相关的内容;所以,单页面程序中的页面跳转主要用hash实现;在单页面应用程序中,这种通过hash改变来切换页面...原创 2019-07-31 16:20:00 · 196 阅读 · 0 评论 -
vue 知识点整理——数据交互(axios、jsonp)
axios:axios是基于promise的用于浏览器和nodejs的HTTP客户端,本身有以下特征:从浏览器中创建XMLHttpRequest;从nodejs发出http请求支持promiseAPI拦截 请求和响应转换请求和响应数据取消请求自动转换JSON数据客户端支持防止CSRF/XSRF攻击安装:使用 npm:$ npm install axios引入:引...原创 2019-07-31 16:19:49 · 517 阅读 · 0 评论 -
vue 知识点整理——使用vue-cli 3.0搭建项目
Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统,提供:通过 @vue/cli 搭建交互式的项目脚手架。通过 @vue/cli + @vue/cli-service-global 快速开始零配置原型开发。一个运行时依赖 (@vue/cli-service),该依赖:可升级;基于 webpack 构建,并带有合理的默认配置;可以通过项目内的配置文件进行配置;可以通过插...原创 2019-07-31 16:19:38 · 477 阅读 · 0 评论 -
vue 知识点整理——状态管理(Vuex)
1.什么是Vuex?Vuex是一个专门为Vue.js应用程序开发的状态管理模式, 它采用集中式存储管理所有组件的公共状态, 并以相应的规则保证状态以一种可预测的方式发生变化.上面图片中绿色虚线部分就代表的是Vuex的核心。state:其中state相当于vue实例中的data,用来保存所有组件的公共数据。mutations:state只能通过mutations进行修改,不可以直接修改...原创 2019-07-31 16:19:31 · 546 阅读 · 0 评论 -
vue 知识点整理——xmind图
原创 2019-07-31 16:19:22 · 774 阅读 · 0 评论 -
node.js 学习
第一天学习:———————————————————————————————————————————————Node.js 是什么既不是语言,也不是框架,它是一个能运行JavaScript的平台简单点讲就是 Node.js 可以解析和执行 JavaScript 代码以前只有浏览器可以解析执行 JavaScript 代码也就是说现在的 JavaScript 可以完全脱离浏览器来运行,一切...原创 2019-07-31 16:18:48 · 193 阅读 · 1 评论 -
MVC思想和MVVM思想的区别和图示
MVC是包括view视图层、controller控制层、model数据层。各部分之间的通信都是单向的。View 传送指令到 ControllerController 完成业务逻辑后,要求 Model 改变状态Model 将新的数据发送到 View,用户得到反馈MVVM分为三个部分:分别是M(Model,模型层 ),V(View,视图层),VM(ViewModel,V与M连接的桥梁,也...原创 2019-02-25 09:47:34 · 1264 阅读 · 0 评论 -
VUE中组件data必须是函数function的原因
vue组件中data值不能为对象,因为对象是引用类型,组件可能会被多个实例同时引用。如果data值为对象,将导致多个实例共享一个对象,其中一个组件改变data属性值,其它实例也会受到影响。上面解释了data不能为对象的原因,这里我们简单说下data为函数的原因。data为函数,通过return 返回对象的拷贝,致使每个实例都有自己独立的对象,实例之间可以互不影响的改变data属性值。dat...原创 2018-08-27 17:12:13 · 1016 阅读 · 0 评论