vue
文章平均质量分 88
原鑫@博客
目前工作于北京,担任前端开发,小菜鸟的进阶路程!!
展开
-
vue中nextTick的用途!
nextTick的用途!官网说法:在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法,获取更新后的 DOM 个人理解:需要在视图更新之后,基于新的视图进行操作。<div id="app"> <input ref="input" v-show="inputShow"&gt原创 2018-08-29 13:38:11 · 1522 阅读 · 0 评论 -
vue项目开发中使用mixins
mixins的使用个人理解mixins就是定义一部分公共的方法或者计算属性,然后混入到各个组件中使用,方便管理与统一修改1.在assets文件夹下创建一个js文件// 创建一个需要混入的对象 export const mixinTest1 = { created() { this.hello(); }, methods: { he...原创 2018-11-10 13:38:58 · 1665 阅读 · 0 评论 -
vuex常见用法
/** * vuex for VisPanel */import Vue from 'vue'import Vuex from 'vuex'import * as types from './type'import store from '@/store'Vue.use(Vuex);const state = { listLenght: '111'}const mut...原创 2018-11-16 12:41:00 · 173 阅读 · 0 评论 -
vue 钩子函数 使用async await
<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title>vue 钩子函数 使用async await</title> </head> <body>原创 2018-11-21 19:15:56 · 2479 阅读 · 0 评论 -
vue双向数据绑定的实现
总所周知,侦测一个对象变化的方法,常用的两种是Object.defineProperty,和es6的proxy,下面就基于Object.defineProperty实现简单的双向绑定其实vue主要是通过Object.defineProperty实现的,至于vue3.0会不会重写就不得而知,这也是为什么对象的新增属性不好检测的原因!<!DOCTYPE html><html...原创 2018-11-22 12:00:24 · 750 阅读 · 0 评论 -
vue diff算法 patch
1、diff比较算法图示:diff比较只会在同层级进行, 不会跨层级比较。代码示例<!-- 之前 --><div> <!-- 层级1 --> <p> <!-- 层级2 --> <b> aoy </b> <!-- 层级3 --&原创 2018-11-19 17:25:00 · 741 阅读 · 0 评论 -
webpack4.0+版本练习
webpack安装确保安装 Node.js 的最新版本本地安装(对于大多数项目,官方建议本地安装。这可以使我们在引入破坏式变更的依赖时,更容易分别升级项目)最新的webpack版本是:// 要安装最新版本或特定版本,请运行以下命令之一:npm install --save-dev webpacknpm install --save-dev webpack@<vers...原创 2018-11-28 08:05:41 · 763 阅读 · 0 评论 -
node+express+multer+vue+element-ui实现文件上传
实现方式 : ele-ui + express + multer如果你能看到我这篇文章,很荣幸,你一定踩了很多坑,现在node的上传普遍使用multer,这玩意,不同版本使用的方式还不太一样,希望你看完这篇文章,能够在脸上洋溢出幸福的笑容!基于multer 1.41 版本实现的上传系统直接粘代码 &lt;el-form-item label="文件" label-width="1...原创 2018-12-10 18:43:04 · 3672 阅读 · 3 评论 -
vue滚动加载插件vue-infinite-scroll
GitHub地址:https://github.com/ElemeFE/vue-infinite-scroll安装: npm i vue-infinite-scroll --save使用 &lt;div class="table__div" v-infinite-scroll="loadMore" infinite-scroll-disabled="busy" infi原创 2019-01-28 15:42:16 · 2403 阅读 · 0 评论 -
vscode中eslint的校验
文中为vue中eslint的校验新版本的vscode和老版本的不同,采用的可视化界面教程:开始->首选项->设置,搜索eslint把代码复制过去,就OK了{ "editor.tabSize": 2, "files.associations": { "*.vue": "vue" }, "eslint.autoFixOnSave": true, "...原创 2019-04-08 18:20:45 · 4978 阅读 · 0 评论 -
vue-cli中如何引入less
安装less依赖,npm install less less-loader --save第二步:进入到build的webpack.base.conf.js加入如下代码 { test: /\.less$/, loader: "style-loader!css-loader!less-loader", },然后<style lan...原创 2018-11-06 17:10:16 · 2469 阅读 · 0 评论 -
vue非父子组件传值之发布订阅模式
vue非父子组件传值之发布订阅模式目前了解的组件传值的几种方式props 再熟悉不过了vuex 也比较常用evenbus发布订阅主要说一下发布订阅Vue.prototype.bus = new Vue();其实优化一下,也可以这样Vue.prototype.$subscribe = subscribeVue.prototype.$publish = publish...原创 2018-10-31 18:27:55 · 661 阅读 · 0 评论 -
vue打包之后上传服务器出现的问题
vue-cli 发布服务器踩坑记录http://yyyxxxxin.top/dist/#/ 附上链接1.打开build/utils.js进行更改if (options.extract) { return ExtractTextPlugin.extract({ use: loaders, fallback: 'vue-style-loader', ...原创 2018-10-24 18:17:57 · 3019 阅读 · 0 评论 -
vue-cli如何对element-ui组件进行二次封装
Element组件二次封装—入门目录:Element组件二次封装—入门为什么要element对进行二次封装?如何对element对进行二次封装?为什么要element对进行二次封装? 1.element-ui组件的部分样式不满足当前项目的需求。element-ui组件的样式是固定的,比如我们常用的那些组件,table,button,icon,ta...原创 2018-08-29 17:09:55 · 44253 阅读 · 21 评论 -
vue的slot组件的入门
slot组件的入门原创 2018-08-30 00:46:14 · 2801 阅读 · 0 评论 -
npm run build发生了什么?
npm run build发生了什么?最近总是感觉对vue的一些用法和语句还是不理解,于是决定撸一下源码,用于加深自己对vue的理解,同时vue主要是通过rollup进行打包编译,因为它相比webpack更加轻量,行了,废话不多说了,开始了! 如上图所示,当我们执行npm runbuild命令的时候,首先package.json会将其解析为node build/build.js,...原创 2018-09-10 00:18:14 · 105322 阅读 · 4 评论 -
vue动画之轮播图
<template> <div class="lunbo"> <transition-group tag="ul" name="image"> <li :key="0" v-show="lunboIndex === 0"><img src原创 2018-09-17 01:28:02 · 2611 阅读 · 0 评论 -
vue的Vue.set方法的使用
vue的Vue.set方法的使用vue为了更加简洁,当data的数据是数组或者对象时,动态的添加或删除,视图将不会更新其实有些时候,当我们想动态的给data中的属性设置默认值的时候也需要用Vue.set如图所示,想通过created给设置默认值,但是默认值可以设置成功,v-model的动态效果将会失去,这时候需要用Vue.set方法当然了,上面也相当于给data中的数据添加...原创 2018-09-17 23:50:24 · 33662 阅读 · 5 评论 -
vue之watch的踩坑
vue之watch的踩坑watch中箭头函数和function的区别在上述代码中,当watch中allobj是箭头函数时,访问不到data中的this.allobj,但是参数val是有值的,普通函数function可以访问到外部的值,也就是说:vue的watch中,最好使用function,箭头函数有局限性。访问不到外部的data!...原创 2018-09-18 11:48:04 · 2019 阅读 · 0 评论 -
vue2.x源码解析准备--Runtime Only 和 Runtime+Compiler
vue2.x源码解析准备–Runtime Only 和 Runtime+Compiler1.1 Runtime Only Runtime Only相比Runtime+Compiler更加轻量,但是缺点是不能够编译jsx,在vue源码中,无论是render函数,还是template最终都是编译成render函数进行渲染的,所以,使用Runtime Only有时需要自己手动配置webpack对模...原创 2018-10-03 12:55:41 · 1085 阅读 · 0 评论 -
vue-router 踩坑
vue-router 填坑心得跳转路由的方法router-link标签router.push(location, onComplete?, onAbort?) js去做router.replace 区别是不添加history记录当然了a标签也是可以的除了嵌套路由,有时候还可以这样<router-view class="view one"></router-vi...原创 2018-10-25 15:30:04 · 1143 阅读 · 0 评论 -
vue-cli怎么和express搭建项目!
1.其实自动解除vue一来,就一直在想这个问题,问题是:express后台有一个服务是3000端口,然后vue-cli又开启了一个8080端口,那么怎么把他们两个结合在一起呢?要跨域吗?部署到服务器的时候应该运行这个npm run dev的命令吗和npm run build的命令吗???等等一大堆的问题2.原因在于现在太多的前端工具帮我们做了太多,而我们只学会了打命令,而没有搞清楚这些命令...原创 2018-10-26 16:03:57 · 3195 阅读 · 1 评论 -
HTML5原生拖拽/拖放 Drag & Drop实现一个拖拽交换组件
如果不是很了解h5拖拽api的一些特性,请移步->掘金大佬讲h5拖拽的一个帖子由于项目需求,需要实现一个拖拽组件,是一个基于html5实现的一个组件,h5的功能相对来讲已经比较完善了,因为还是在demo阶段,所以目前没有什么定制化功能,只是实现了交换功能目录结构:箭头为我们的组件demo代码:组件源代码<template> <div clas...原创 2019-04-17 11:19:25 · 2463 阅读 · 1 评论