前端框架vue
Lpd_Reason
Stay hungry,stay study.
展开
-
vue封装diolog框
static dialog(component, dialogOptions = null, componentProps = null) { return new Promise((resolve, reject) => { let options = Object.assign( { title: "", width: "50%", customClass: "", btnClos.原创 2020-09-11 10:31:05 · 248 阅读 · 0 评论 -
解决veu项目编译速度慢的问题
主要在热更新这一块解决。step1:安装依赖npm install babel-plugin-dynamic-import-nodestep2:在webpack.prod.conf.js文件设置:new webpack.optimize.UglifyJsPlugin({ compress: { warnings: false, drop_console: true, drop_debugger: true .原创 2020-05-31 15:42:38 · 1305 阅读 · 0 评论 -
使用Vue.Draggable写一个具有拖拽功能的组件
step1:安装npm install vuedraggablestep2:引入import draggable from 'vuedraggable'step3:使用示例组件代码:<template> <Modal :value='value' :closable="false" @input='Cancel' :mask-closable='false' width='600'> <div class="flex aicent..原创 2020-05-22 16:13:36 · 223 阅读 · 0 评论 -
vue做的下拉列表组件实例
组件:<template> <div class="select-wrap" @mouseleave="onMouseLeave($event)" v-click-outside:mousedown.capture="()=>{this.showChoices=false;}"> <div :title="curFieldValue" class="currentSelect" .原创 2020-05-21 14:38:23 · 758 阅读 · 0 评论 -
vuex原理
http://www.imooc.com/article/291242这篇文章分析到位,特别是作者画的那几张图,理解了基本就OK了。转载 2020-01-08 15:20:36 · 134 阅读 · 0 评论 -
npm run 报错Error: Cannot find module 'chalk'的解决方法
最近由于整理项目清单,把公司的项目挪到了另外一个文件夹,run的时候报错了:使用npm install chalk依然无法解决问题。没办法,只好把node_modules模块删除,重新run,问题解决。...原创 2019-12-12 13:14:57 · 1398 阅读 · 0 评论 -
vue的router学习笔记2之路由编程式导航
1.router.push(对应window下的 window.history.pushState)const userId = '123'router.push({ name: 'user', params: { userId }}) // -> /user/123router.push({ path: `/user/${userId}` }) // -> /user/12...原创 2019-02-16 22:05:14 · 134 阅读 · 0 评论 -
vue的router学习笔记3之路由重定向和别名
1.路由重定向const router = new VueRouter({ routes: [ { path: '/a', redirect: to => { // 方法接收 目标路由 作为参数 // return 重定向的 字符串路径/路径对象 }} ]})const router = new VueRouter({ rou...原创 2019-02-17 20:05:52 · 586 阅读 · 1 评论 -
axios拦截器示例
import Vue from 'vue';import axios from 'axios'import store from '../vuex/store'import router from '../router'Vue.prototype.$ajax = axios;axios.interceptors.request.use( config => { ...原创 2019-02-23 22:13:29 · 262 阅读 · 0 评论 -
点击时加载组件
引入一个组件,但在需要时才加载它<button @click='onclick'></button><div><mycomponent v-if='showcom'></mycomponent></div>{ data: { showcom: false } ...原创 2019-02-19 16:50:18 · 368 阅读 · 0 评论 -
vue懒加载和同步加载
//a页面import historyTab from '../../component/historyTab/historyTab.vue';export default { components: { historyTab },}//b页面export default { components: { historyTab: ...原创 2019-02-20 23:14:13 · 1408 阅读 · 0 评论 -
vue项目的main.js示例
//引入vueimport Vue from 'vue'//引入apiimport 'common/api/global'//入口组件APPimport App from './App'//引入自定义的vue路由import router from './router'//引入jqueryimport $ from 'jquery'//引入vabel-polyfill包,用以...原创 2019-02-14 15:55:10 · 2036 阅读 · 0 评论 -
利用vue的render写的示例组件,同时支持outside-click
{ title: 'Priority', key: 'PV', width: 90, align:'left', className:'column-head column-status', ...原创 2019-02-21 22:16:07 · 428 阅读 · 0 评论 -
原生js基础部分(二)
1.ie和w3c标准下的兼容性写法有哪些?举些例子。var ev = ev || window.eventdocument.documentElement.clientWidth || document.body.clientWidthVar target = ev.srcElement||ev.target2、new操作符具体干了什么呢?1)、创建一个空对象,并且this变...原创 2019-03-07 00:09:46 · 154 阅读 · 0 评论 -
单元测试
https://www.cnblogs.com/sampapa/p/6963936.html转载 2019-03-20 16:53:32 · 109 阅读 · 0 评论 -
vue的router学习笔记1
1.获取当前的路由,并且实现后退功能export default { computed: { username () { //获取当前路由 return this.$route.params.username } }, methods: { //后退功能 goBack () { window.history.le...原创 2019-02-15 17:57:04 · 119 阅读 · 0 评论 -
vue项目引进iview库
step1:项目下安装iviewcnpm install --save iview安装完成后你会看见自己的package文件多了一行代码:也就是你的项目已经声明使用了iview的依赖。step2:在src目录下的main.js文件中引入iview的组件:接下来你就可以使用iview的组件了。 另注:本人寻大厂或潜力公司前端,node开发工作机会,base...原创 2019-02-03 08:44:40 · 325 阅读 · 0 评论 -
前端框架vue:用vue实现的一个axios请求
if(this.DEV.currentPathInfo.subprojectType == 98 || this.DEV.currentPathInfo.subprojectType == 99 || this.DEV.currentPathInfo.subprojectType == 2002) { // list view search let temp...原创 2018-08-24 17:22:36 · 382 阅读 · 0 评论 -
前端框架vue:路由渲染的两种方法和路由跳转的三种方法
路由渲染地方法:1.在当前路由中import另一个路由,将其设为一个子组件,然后在当前组件中写入即可,其实说是路由渲染其实非常勉强,因为它只是一个组件嵌套。之所以将之写入,只是因为我认为在vue中所有的视图渲染都可以称之为组件的渲染,只是这种方式时直接引入不需要在router的index.js定义组件路径而已。2.在router的index文件下导入路由,设置好组件的路径和默认路由,在要渲...原创 2018-08-24 18:54:44 · 2812 阅读 · 0 评论 -
前端框架vue:vue的生命周期
vue共有八个生命周期:1.创建前beforeCreate:这个钩子函数表示在vue实例违背未被初始化,所有的变量还未被声明时的阶段。2.创建后creted:vue的对象已经实例化出来,并且所有的方法和变量都已经被转换为setter或者getter。3.挂载前beforemount:vue实例已经初始化,但是程序正在寻找在vue实例中是否存在一个$el元素。4.挂载后mounted:...原创 2018-08-24 20:55:19 · 361 阅读 · 1 评论 -
前端框架vue:三种组件通信
1.父组件向子组件传输局:利用pros链接:https://blog.csdn.net/qq_34129336/article/details/795414472.子组件向父组件发送数据:事件监听在父组件 App.vue 中引用子组件 A.vue,把 A中的数据传给App.子组件 A.vue:<template> <div> <h3>这里...转载 2018-08-30 09:44:28 · 437 阅读 · 0 评论 -
前端框架vue:slot原理详解
刚刚本来想写一篇关于slot的博文,网上找了找看到一篇文章,瞬间就打消了写这篇文章的念头,因为那篇文章写得太好了,简直比vue教程说得更加好。文章连接:https://www.cnblogs.com/qq735675958/p/8377761.htmlvue教程看得比较费解,这篇文章相比就非常通俗易懂。主要一定要牢牢记住文中的一句话:slot的出现是为了父组件可以堂而皇之地在子组件中加...转载 2018-09-04 17:11:34 · 2463 阅读 · 1 评论 -
vue 数组和对象不能直接赋值情况和解决方法
这篇文章已经说得十分地明白与透彻了:https://www.jb51.net/article/126756.htm转载 2018-10-19 15:47:14 · 9261 阅读 · 0 评论 -
前端框架vue:深入分析vue的响应式原理
vue作为时下最流行的mvvm框架之一,相信不少前端的小伙伴们对vue绝不陌生。vue既小又快,渐进式项目功能,而且较为容易上手, 加上社区的大力开源支持,从一出生就站在巨人肩膀上的vue成为了潮流的明星。但是,vue是怎么做到了数据的绑定,dom'的更新呢?这方面我想你一定想知道,但是又不愿意去看源码,所以这篇文章,事实上值得你读一读。首先,我们来看看vue官方文档第一句:Vue.j...原创 2018-10-23 14:40:08 · 575 阅读 · 0 评论 -
vue中文件树的实现
思路:将文件树的公共部分封装一个组件,组件内部根据子数据是否存在递归使用自身,至于数据通过props分层传递。如果在每一个文夹上都有相关事件处理的需求,建议不要使用emit,应在vuex中设置一个值,监听是否有事件触发;在对应文件中监听这个值的变化。以下是关于这个组件的部分代码,虽然不全,但是整个组件的骨架和组件的核心代码已经给出:<!--文件树组件,name='manage-tr...原创 2019-01-11 23:33:05 · 1663 阅读 · 2 评论 -
vue项目的webpack自动搭建极其运行机制
一、一个vue项目必须基本的目录有八个(这也是vue的脚手架生成的项目的基本骨架),我会在这篇文中详细地去解读它。首先,我示例的这个目录如下所示:其中:(1)package.json文件是描述项目配置项的文件。(2)src是源码目录,主要的项目开发都在这个目录里面。(3)index.html是项目的网页入口,是集成vue模块的模版文件。(4)static目录是静态文件存...原创 2019-01-24 23:32:14 · 446 阅读 · 0 评论 -
用ivew写一个弹窗组件,根据单选框按钮显示不同内容
modal:<modal v-model="showSumbitDefectModalValue" width="700px" :closable='false' :mask-closable='false' > <div class="sumbit-ddefect-common-modal-head...原创 2019-01-25 21:59:34 · 924 阅读 · 0 评论 -
从头搭建一个基于webpack的vue项目
需要环境:node,vue。如果还没有node环境,请自行移步安装——http://www.runoob.com/nodejs/nodejs-install-setup.html。安装完node后,node中自带了npm,但是npm的速度太慢,可以使用淘宝的npm镜像:$ npm install -g cnpm --registry=https://registry.npm.taob...原创 2019-01-21 22:41:01 · 552 阅读 · 0 评论 -
vue中让一个div的点击事件关联到其他的相同div的方法
事实上采用的方法是利用每个元素的内部属性的特性:在以下的代码里面我用item.taskid绑定了一个自定义属性taskIdGo,于是每次通过判断这个div的taskIdGo的值是否相同来确定当前的div是否是自己所要操作的div。<a href="javascript:void(0)"><i class="fa fa-bug fa-2" v-show="item.has...原创 2019-01-31 18:05:07 · 3873 阅读 · 0 评论 -
iview组件的改写
(1)最近工作的时候常常遇到一些改变样式的需求。但是有的组件是iview提供的,在多个地方使用,如果要在某处地方修改它的样式,记得给css样式加上权重,不然会影响其他位置的样式。比如修改table的高亮样式,和每一行的hover事件的样式:#modifyelement .ivu-table-row-highlight td, .ivu-table-stripe .ivu-table-bo...原创 2019-01-17 22:45:22 · 1152 阅读 · 0 评论 -
用vue的脚手架生成的项目自动打开浏览器
用vue搭建的脚手架不会自动打开浏览器,解决方法:打开config目录下的index.js文件,将autoOpenBrowser: false,改为autoOpenBrowser: true,即可另注:本人寻大厂或潜力公司前端,node开发工作机会,base:上海,广州,深圳,杭州,有意请加微信lpd65790092 ...原创 2019-02-01 22:26:19 · 1067 阅读 · 2 评论 -
vue的eslint报错的解决方法
在config目录下的index.js文件中将useEslint: true,改为useEslint: false,即可:另注:本人寻大厂或潜力公司前端,node开发工作机会,base:上海,广州,深圳,杭州,有意请加微信lpd65790092 ...原创 2019-02-02 22:30:29 · 5012 阅读 · 0 评论 -
前端框架vue:利用axios.interceptiors.request.use(...)进行拦截session的判断
比如发送请求显示loading,请求回来loading消失之类,并且当判断到session为null时自动跳转到登录界面。import Vue from 'vue'import App from './App.vue'import axios from 'axios'import Loading from './components/Loading'import stores from...原创 2018-08-24 15:02:54 · 4874 阅读 · 0 评论