vue
gaoqiang1112
转前端了
展开
-
团队人员按模块在不同分支开发时 如何 动态获取路由 保证项目正常运行
这里的问题 就是 比如a员工在 t1分支上开发 登录注册模块b员工在 t2分支上开发 商品模块c员工在 t3分支上开发 我的模块那么 test分支 会不停的merge 这 t1 t2 t3的分支这里有一个点 正常 我们项目的路由 都写在 一个文件里 然后 里面会 import 我们对应 view下的 vue文件那如何保证 a b c 3个员工开发项...原创 2020-04-02 14:36:39 · 155 阅读 · 0 评论 -
vue 子 父组件 传值 总结 兄弟组件传值总结
vue 中 兄弟组件如何传值呢可能大家都回答的是eventBus 其实就是 利用一个js文件再new 出一个vue对象 然后进行 emit 和on 的触发与监听但其实 我们有更简单的方法第一种a组件 点击按钮 利用 emit 触发 名叫 cl2c2的监听 传输的值为 ‘哈哈哈哈’b组件 mounted阶段 组件b利用 $on 监听 cl2c2 方法 接收 值...原创 2020-04-02 12:33:18 · 343 阅读 · 0 评论 -
w万条接口数据下 如何优化vue 接值 及赋值
正题 如果你请求一个接口 接口返回数据为10000条 那么 如何 将这1w条数据赋值给vue变量呢如果你测试过 你会发现 一个 装有2000个json对象的数组 赋值给vue的data属性时 屏幕会出现卡顿出现卡顿的原理也是因为 vue 会对赋值对象 动态添加set get方法 这也是vue 双向绑定的原理 那么我们如何优化这个问题呢这里引入个知识点vue2...原创 2020-04-01 16:15:16 · 934 阅读 · 0 评论 -
vue 路由 router 相关信息复习
vue-router vue-router怎么重定向页面? router文件配置redirect vue-router怎么配置404页面? 路由里配置一个path * 然后redirect 404 即可 切换路由时,需要保存草稿的功能,怎么实现呢? 使用keep-live 不明白看这个https://seg...原创 2020-03-17 12:38:18 · 263 阅读 · 0 评论 -
vue 如何使用graphql? node.js如何使用graphql? node框架 egg 如何使用graphql?
说明 本文中 vue+node 均基于的 apollo.js使用 vue 是在apollo基础上 封装了一个 vue的组件 方便使用vue 使用 graphql1下载依赖包npm install --save vue-apollo graphql apollo-client apollo-link apollo-link-http apollo-cache-inme...原创 2019-10-31 13:20:40 · 583 阅读 · 0 评论 -
从0看vue3 源码 记录
1 vue3 源码地址 https://github.com/vuejs/vue-next.git 跳转2 看了很多文章 把了解到的知识点 做个总结 a.如果你要开发一个要发布的框架组件 也就是package 建议使用 lerna, 给你个链接 不懂也不影响v3 b.clone下v3项目后 如何运行起来https://juejin.im/post/5...原创 2019-10-18 14:07:09 · 1212 阅读 · 0 评论 -
vue.js的几个小技巧
第一招:化繁为简的Watchers场景还原:created(){ this.fetchPostList()},watch: { searchInputValue(){ this.fetchPostList() }}组件创建的时候我们获取一次列表,同时监听input框,每当发生变化的时候重新获取一次筛选后的列表这个场景很常见,有没有办法优化一下呢?招式解析:首先,在w...转载 2018-04-17 14:04:58 · 534 阅读 · 0 评论 -
vue服务端渲染ssr 报错 window is not definded解决
多数是因为服务端渲染 页面是又后台路径跳转过来的 此时页面还没有渲染出来 所以window对象还没有诞生但是你的用的各种第三方js文件 有很多都使用了window所以我们通过vue的生命周期函数去判断window对象 其实此时加不加载并不影响添加判断即可// 引入需要window的外置jsif (typeof window !== 'undefined') {...原创 2018-06-13 15:45:42 · 19831 阅读 · 6 评论 -
egg+vue+easywebpack+typescript报错can not bulid module:can find file xxxx.vue
前言网上很多文章都是 如何利用 vue-cli 建造好项目后 然后修改成typescript模式 开发文章很多 这里不说了 不过提醒一个坑 注意webpack的版本 否则 脚手架创建的项目还是webpack3而你后嫁接成ts的时候 你需要下载 ts-loader 最新的版本是4.6.1 哈哈 下完就不好使 因为 版本对不上了脚手架的webpack太老了...原创 2018-06-20 15:16:56 · 1913 阅读 · 0 评论 -
vue移动端日历组件 mintUi dateTime picker 设定开始和结束日期
=====================================追加提示2018.9.17===============================继续填坑 如果你想修改 这个组件的 取消和确定按钮 则需要像下面的startDate一样在标签上写 :cancel-text 和 :confirm-text 然后用一个vue变量接一下 设定一下值就可以了这里我只想...原创 2018-07-30 10:57:41 · 32471 阅读 · 18 评论 -
js+css 实现类似安卓Android CollapsingToolbarLayout 的折叠Toolbar 类似滴答消息页面title折叠效果
最近我们的产品看上了 滴答app==>消息页面的头部滑动样式然后 安卓有CollapsingToolbarLayout 组件 只需要修改参数即可完成 ios 10以后也有对应的组件可以直接完成此功能只有js没有 在百度搜索许久 未找到 一点有关的信息 都没有找到 最后只能自己写了实现思路1:最开始想到的就是css3的 transform里的translate ...原创 2019-02-21 08:44:48 · 313 阅读 · 0 评论 -
前端路由实现spa的原理
写在前面:通常 SPA 中前端路由有2种实现方式:window.history location.hash下面就来介绍下这两种方式具体怎么实现的一.history1.history基本介绍window.history 对象包含浏览器的历史,window.history 对象在编写时可不使用 window 这个前缀。history是实现SPA前端路由是一种主流方法,它有几个原始方...原创 2019-03-26 16:25:26 · 413 阅读 · 0 评论 -
vue 脚手架 elementUi element-ui 兼容 ie 360 急速/兼容模式 完美处理
直接上干货如果你用vue的脚手架弄的项目 那么恭喜你 要改的 也并不多 如果 是自己搭建的框架 那么 请滤清框架结构后 按我的方法操作即可1 引入babel-polyfillnpm install babel-polyfill --save2 src下 mains文件import 'babel-polyfill'3 build文件夹下web...原创 2019-07-16 17:51:35 · 12753 阅读 · 10 评论 -
this.$route和this.$router的区别
因为都绑定在this上 所以 其实 大家可以通过 打印this 来查看 $route 和 $router 的区别博主 之前看过一篇博客 https://blog.csdn.net/zzz_zed/article/details/78885944感觉 并没有把具体的内容 给指定出来 比如 方法在哪里 所以 再详细给大家说一下从上图可以看出 this上 有这个2个属性我...原创 2019-12-09 16:48:39 · 21265 阅读 · 0 评论 -
vue2中的ajax之Axios
1、vue本身不支持发送AJAX请求,需要使用vue-resource(vue1.0版本)、axios(vue2.0版本)等插件实现2、axios是一个基于Promise的HTTP请求客户端,用来发送请求,也是vue2.0官方推荐的,同时不再对vue-resource进行更新和维护3、参考:GitHub上搜索axios,查看API文档 或进入这个网站 https://www.kancloud....原创 2018-03-06 14:26:11 · 702 阅读 · 0 评论 -
component lists rendered with v-for should have 处理
报错如下 准确来说 应该是警告 不影响渲染 但总觉得别扭代码是这样的查看官方文档读后明白 现在要求在循环上加入 :key 从而提高循环效率 加入即可...原创 2018-03-03 09:51:58 · 349 阅读 · 0 评论 -
vue项目学习02
安装 nodejs 环境你可以在 https://nodejs.org/ nodejs 官方网站下载安装包,然后进行安装。如果是 linux 或者 mac 命令行的用户,也可以使用命令行安装。mac 安装 nodejs如果你没有安装 brew 包管理器,可以直接使用下面的命令安装:curl "https://nodejs.org/dist/latest/node-${VERSION:-$(wget...转载 2018-02-27 14:18:59 · 441 阅读 · 0 评论 -
vue项目学习03
但是,我们的项目代码,还一个都没有看到。因此,这个章节,我们来认识一下所有的文件。初始文件解析├── README.md // 项目说明文档├── node_modules // 项目依赖包文件夹├── build // 编译配置文件,一般不用管│ ├──...转载 2018-02-27 14:40:08 · 150 阅读 · 0 评论 -
vue项目学习04
如果你按照我的结构框架去调整了之后,那么,现在你的项目应该是出错,并且跑不起来了。所以,我们需要进行一些调整,让项目重新跑起来。调整 App.vue 文件我们先把默认项目里面没用的东西先删除掉,把代码调整为下面的样子。<template> <div id="app"> <router-view></router-view> </...转载 2018-02-27 15:52:11 · 160 阅读 · 0 评论 -
vue项目学习05
前情回顾在上一篇,我们通过配置基本的信息,已经让我们的项目能够正常的跑起来了。但是,这里还没有涉及到 AJAX 请求接口的内容。vue 本身是不支持 ajax 接口请求的,所以我们需要安装一个接口请求的 npm 包,来使我们的项目拥有这个功能。这其实是一个重要的 unix 思想,就是一个工具只做好一件事情,你需要额外的功能的时候,则需要安装对应的软件来执行。如果你以前是一个 jquery 重度用户...转载 2018-02-27 16:19:08 · 143 阅读 · 0 评论 -
vue项目学习06
前情回顾在上一篇博文中,我们已经非常顺利的调用到了 cnodejs.org 的接口了。但是,我们可以注意到我们的 src/api/index.js 的第一句,就是:// 配置API接口地址var root = 'https://cnodejs.org/api/v1'这里,我们将接口地址写死了。当然,这并不是最重要的事情,而是 cnodejs.org 帮我们把接口处理得很好,解决了跨域的问题。而我...转载 2018-02-27 16:33:53 · 158 阅读 · 0 评论 -
vue项目学习07
在前面的数篇文章中,我们做了很多的工作,又是干这个,又是干那个的,但一直没有切入到正题,那就是我们要做的工作呢,我们要开发的代码呢。这一篇博文开始,我们要来开发代码了。什么是 *.vue 文件首先,我们用 vue-cli 脚手架搭建的项目,里面我们已经遇到了很多,如 index.vue 或者 App.vue 这一的文件了。这到底是个什么东西?如果是初次接触 vue 开发的同学,可能之前没有见过这个...转载 2018-02-27 16:43:56 · 143 阅读 · 0 评论 -
vue项目学习08
前情回顾在上一篇博文中,我们队 vue 组件应该有了一个简单的认识。如果你去看了官方文档的话,再看这篇博文会比较简单。如果你没去看,呵呵,恭喜你,我喜欢你这样的人。好,这章开始,真的得写点东西了。制作 header.vue 和 footer.vue 组件文件。不是本篇文章的重点,但是还是有比较讲一下。在第三篇博文中,我们规划了我们的项目文件结构,当时保留了一个 components 的空文件夹。这...转载 2018-02-27 17:08:43 · 304 阅读 · 0 评论 -
vue项目学习09
前情回顾在上一篇博文中,我们已经成功的把一个列表给渲染出来了。我们从文章中留下的引子 <router-link :to="'/content/' + i.id"> 应该知道,我们还是要做内容页面的。好,这篇文章,就来做我们的内容页面:编写内容页面照旧,先看东西,再说话:<template> <div> <myHeader></myH...转载 2018-02-28 15:19:29 · 183 阅读 · 0 评论 -
vue项目学习10
前情回顾通过上一章的学习,我们其实已经完成了我们设想的项目的开发。但是,我们做好的这套东西,是基于 nodejs 开发的。而我们最终希望,我们开发的项目,生成好一堆文件,然后随便通过任何一个 http 服务就能跑起来,也就是,还原成我们熟悉的 html+css+js 的模式。好,这章,我们来讲解这部分内容。打包项目我们进入到终端,并且进入到我们的开发目录:cd ~/Site/MyWork/vue-...转载 2018-02-28 15:34:01 · 154 阅读 · 0 评论 -
vue项目学习11
前情回顾在上章节中,我们讲解了项目打包,默认,是打包在根目录下面的。当然,我们可以通过设置,打包到任意子目录中去。但是,我们之前的项目是没有引入资源的。比如,引入图片资源,js资源,或者字体图标之类的。那么各位可能在这个中间又会踩坑,所以,我再写一篇博客,专门来说说这个问题。在 vue 文件中,引用图片例如,我们将一张图片放到资源目录 /static/image/lyf.jpg 我们在 vue 文...转载 2018-02-28 16:06:05 · 158 阅读 · 0 评论 -
vue项目学习12富文本编辑器
前情回顾通过前面系统的学习,我相信大家都能够对 vue 项目有了一个基本的认知。现在是不是已经开始上手做自己的项目了呢?呵呵,当然这是极好的。但是我们一般用 vue 来制作管理后台,在制作管理后台的时候,不可避免的,我们需要用到富文本编辑器。我尝试过 github 上的若干富文本编辑器,虽然能够实现一部分需求,但是还是不能充分满足我的需求。而百度推出的 UEditor 编辑器口碑不错,文档充分,还...转载 2018-02-28 16:08:21 · 1655 阅读 · 0 评论 -
vue项目学习13--jquery
前情回顾在上一篇博文中,我们讲到了,如何在 vue 项目中 使用百度的 UEditor 富文本编辑器。相信大家对引用这种非 npm 的包有了一定的认识。很多人学习 js 都是从 jQuery 开始的,我也不例外。有时候进行一些操作的时候,还是感觉 jQuery 比较好用,那么,我们如何在项目中使用 jQuery 呢?这篇博文带你实践。引用 jQuery 文件首先呢,jQuery 是提供了 npm ...转载 2018-03-01 14:33:17 · 178 阅读 · 0 评论 -
vue项目学习01
Vue2+VueRouter2+Webpack+Axios 构建项目实战(一)基础知识概述基本理念通过对接 cnode.js 的公开 api 的列表,以及详情页面,实现一个超小型的项目实战,尽可能的掌握 vue 的项目入门的各项关键配置。 本系列博文不涉及 vuex 的内容。因为这部分内容属于比较高阶的内容,并且在大多数中小型项目中是没有多大用处的。所以情况是,大多数情况下,你并不需要 vuex。...转载 2018-02-27 14:16:04 · 307 阅读 · 0 评论