vue
养只猫
这个作者很懒,什么都没留下…
展开
-
vue的provide和inject
vue官网上有提到这两个api是类似于react的context上下文,但是默认情况下是不支持响应式的,如果要支持响应式需要传入响应式对象或者数组。这个api的主要作用可以看成是vuex的精简版共享父组件的state父组件provideexport default { data() { return { testAppProvide: {name: 10}, testAppProvide1: [1, 2, 3, 4] }; }, provide原创 2021-11-03 17:31:48 · 221 阅读 · 0 评论 -
vue-cli3.0设置静态文件简写路径
经常在项目中层次比较深的vue文件需要引用一张静态图片的时候会有很多的../../../这样看起来很不舒服,vue的脚手架正好有这相关的配置。const path = require('path')module.exports = { chainWebpack:(config)=>{ config.resolve.alias .set('@assets',path...原创 2019-11-22 17:13:21 · 890 阅读 · 0 评论 -
nginx配置vue项目history的路由模式(非根目录)
vue的路由分为两种hash和history,hash路由虽然不需要做太多的配置但是url地址上会有一个很丑的#号。而history模式的路由不会有这个#号但是带来的问题却是刷新页面之后会404找不到页面,原因是spa单页面是通过js来进行跳转的。浏览器根据路由地址是找不到服务器上相关的文件的,所以这里需要进行相应的服务器配置。这里我选用的是nginx服务器。vue项目中vue.confi...原创 2019-10-29 14:34:05 · 6686 阅读 · 2 评论 -
两种websocket实现的方案(html+node,vue+node)
自定的学习计划中终于到了websocket这一块了,其实很早就像搞这一块但是之前堆积了一堆其他更重要的东西。以前对于即时聊天的实现思路就是轮询后端的接口,这样的方式是一种“假即时聊天”,websocket才是最佳的方式。前端出身的我自然是用node作为服务端。那么我们开始吧!!!方案一(html+node)这种方式适用于原生的js+html项目。客户端直接使用原生的WebSocket对象这...原创 2019-10-23 16:56:47 · 1163 阅读 · 0 评论 -
vue知识点汇总(持续更新)
最近有时间于是去翻阅了一下vue的源码,了解了很多vue实现的一些原理性的东西,包括vue源码整个架构从入口持续拆分到每个相应的方法实现都封装成对应的单个文件进行单独的引入使用;vue的双向绑定响应式原理的实现等等。在阅读源码的过程中会了解到许多日常开发中没有注意到的东西包括某些代码为什么会报错的问题,虽然不能完全读懂vue的源码,但是阅读源码对于往后开发过程中碰到的问题能更快的定位提高开发效率...原创 2019-10-15 10:39:02 · 535 阅读 · 5 评论 -
高德地图sdk的使用之路线规划
在之前的vue-amap的使用中发现了一些不足的地方,就是不支持路线规划,因此另寻它法最终找到了高德地图sdk的方式(当然了如果能直接vue-amap实现功能的话还是觉得vue-amap比较方便)index.html中引入高德地图sdk的cdn<script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4...原创 2019-05-25 22:37:48 · 1183 阅读 · 3 评论 -
vue使用echarts(数据可视化)
安装npm install echarts --save按需引入并在.vue文件中使用<!-- --><template> <div class='echart'> <div>echarts</div> <div id="myEchart"></div> </div...原创 2019-05-26 20:25:23 · 936 阅读 · 2 评论 -
关于vue单页面seo优化的方案之预渲染
今天学习了简书上的一个单页面应用seo优化的方法。前后端分离之后,前端各大框架展露头角完美的开发体验也带来了一些问题比如seo,单页面应用相比之前的php,jsp的服务端渲染方式来说是一大不足。为了让我们的项目能让更多的人看到对于seo的优化显得非常的重要。下面是引用了一位简书博主的方法。在打包项目的时候将每个vue文件打包成单独的静态文件https://www.jianshu.com/p/...转载 2019-05-23 17:03:28 · 1218 阅读 · 0 评论 -
关于vue的seo优化
好长时间没有写博客了,这个月的18号才写这个月的第一篇,回首一看这个月发生了好多事情。换工作、加班都没有时间和没有好的东西可以写。最近公司的项目中有一个非常重要的功能就是seo的优化,这个东西堵了一段时间,中间还去请教了好些人都没有得到好的解决办法。后来自己通过webpack和prerender-spa-plugin第三方插件这两个工具配合使用来实现曲线就救国。问题描述传统的vue通过vu...原创 2019-06-18 22:02:18 · 23822 阅读 · 26 评论 -
vue高德地图TypeError: v.w.uh is not a constructor错误
这是由于地图实例是异步加载的当.vue文件开始加载地图的时候地图还没完成初始化而获取不到地图实例造成的。错误代码main.js(初始化地图)import Vue from 'vue'import VueAMap from 'vue-amap'Vue.use(VueAMap);VueAMap.initAMapApiLoader({ key: '3b576d3486dc84a...原创 2019-05-25 21:41:57 · 6471 阅读 · 17 评论 -
vue使用高德地图组件
安装npm install vue-amap引入使用和配置(记得先去申请一个高德地图的账号)import VueAMap from 'vue-amap'Vue.use(VueAMap);VueAMap.initAMapApiLoader({ key: '3b576d3486dc84adc303919ebc399dba', plugin: ['AMap.Aut...原创 2019-05-25 20:55:08 · 1971 阅读 · 0 评论 -
vue-cli3.0设置页面icon图标
最近做的一个项目中在用vue-cli3.0创建项目的时候不小心选择了pwa这一个插件,碰到了不能设置网页图标的问题。在最新的vue-cli3.0直接在index.html中设置icon是不行的,需要在vue.config.js中设置一个pwa属性。pwa: { iconPaths: { favicon32: './plug_jchLogo.png', fav...原创 2019-05-25 11:20:00 · 10982 阅读 · 6 评论 -
vue监听vuex的store值的变化
直接上代码 computed: { getStoreItem () { return this.$store.state.test } }, watch: { getStoreItem () { console.log(this.$store.state.test,'asfas fas fas') ...原创 2019-05-20 19:38:41 · 8671 阅读 · 3 评论 -
关于vue子组件改变父组件传递的值的问题
正常对于vue父子组件来说子组件是不能改变父组件props过来的值的,但是今天在做项目的时候发现了一个有意思的事情,子组件是可以直接通过改变props的值来改变父组件相对应数据的值的。这里我们将props的值的类型分为3种(字符串,数组,对象)先说对象吧子组件直接改变父组件props过来的对象是可以直接更新父组件的数据的而且不会报错。子组件:<template> ...原创 2019-03-26 11:38:03 · 4148 阅读 · 7 评论 -
通过nginx代理实现koa在请求中携带cookie
最近在测试关于身份验证的实现过程和思路。之前的博客写的是使用token的方法将token存到redis数据库中。但是在几个github开源项目中看到有用cookie验证的于是就开始新的征程了...跨域(!!!ctx.headers.origin ctx.set('Access-Control-Allow-Credentials', 'true')必须设置)app.use(async (c...原创 2019-03-29 17:32:23 · 2498 阅读 · 2 评论 -
vue框架中用并上传canvas压缩图片
直接上代码<input value="上传" ref="file" type="file" multiple @change="getFiles">这里要注意的是上传代码的操作要在Image实例的onload方法中,并且是在canvas转化过后获取到canvas新图片之后。在Image实例的onload之外是获取不到canvas的打印出来的是null,我将转化后的base6...原创 2019-03-11 14:57:54 · 1402 阅读 · 0 评论 -
改变element ui中的默认icon
需求:element ui需要更换默认的样式的图标。下载和使用阿里巴巴矢量图标下载好阿里巴巴矢量图标https://blog.csdn.net/qq_40816649/article/details/85309680element的步骤条的图标是在:before的伪类里面的因此要改变图标需要改变伪类的content;这里的content不能直接写入这样是得不到想要...原创 2019-06-21 23:28:41 · 5009 阅读 · 0 评论 -
js将element的table表导出为excel
直接上代码<el-table :data="item.data" cell-class-name="itemTd" row-class-name="itemRow" ...原创 2019-06-22 15:08:18 · 587 阅读 · 2 评论 -
vue-api之mixins混入
平时vue官网介绍的api一般不用到都很少回去关注,这次在一个github的一个开源项目中又看到一个mixins这个api。官方的文档说明是这样的:mixins 选项接受一个混入对象的数组。这些混入实例对象可以像正常的实例对象一样包含选项,他们将在 Vue.extend() 里最终选择使用相同的选项合并逻辑合并。举例:如果你的混入包含一个钩子而创建组件本身也有一个,两个函数将被调用。M...原创 2019-09-28 13:59:08 · 543 阅读 · 1 评论 -
vue模拟h5外卖点餐双联列表
自己用vue手撸的一个h5外卖点餐双联列表#2019.10.28修改:当滚动右边列表时,左边列表的激活项超出列表可是范围的时候左边列表滚动到相应的激活项位置<template> <div class="goodsListNav"> <div id="left" class="left"> <span cla...原创 2019-09-24 21:40:28 · 1048 阅读 · 2 评论 -
window配置weex项目的android studio环境
weex虽然做的是前端的工作但是越往后面觉的如果不会一门移动端的框架是多么的无力。于是就开始了之前非常看好的weex框架,该框架起初是由阿里巴巴内部开源的,后面移交给apache成长历程可谓是一波三折,和react native比起来有些力不从心包括社区和github的热度。定位和react native是一款可以同时开发三端的框架。但是和原生的app比起来性能还是有待加强不过对于一些...原创 2019-09-16 15:36:14 · 317 阅读 · 3 评论 -
通过render的形式来vue组件
template的形式创建的组件相对于render形式创建的组件来说局限性大一点,render形式创建的组件能很好地展现js的能力。直接上代码<script>export default { name: 'renderComponent', props: { componentProps: String }, data() { return {...原创 2019-08-25 20:25:45 · 229 阅读 · 2 评论 -
vue动态组件的实现
在vue中组件是可以通过component标签来进行动态切换的。components文件夹下创建component和list组件,然后在main.js中设置成为公共组件(具体公共组件相关的在之前的博客有),这样在各个vue文件中都可以直接使用该组件了。import ListItem from './components/list.vue'//封装共用组件方法一(共用组件)Vue...原创 2019-08-25 20:00:40 · 422 阅读 · 0 评论 -
vue组件封装共用的组件
这里提供两种vue封装共用组件的方法方法一:main.js中import ListItem from './components/list.vue'//封装共用组件方法一Vue.component('ListItem',ListItem)方法二:新建vue文件的时候再建个相应的js文件。component.jsimport child from './compon...原创 2019-08-20 21:08:37 · 3800 阅读 · 3 评论 -
vue组件绑定v-model指令
在平常的开发中一般v-model是绑定在input框或者textarea上的。但是在element ui框架中像el-input这样的组件可以直接v-model绑定数据。<ListItem v-model="value"> <div slot="slot1">你好1</div> <div slot="slot2">...原创 2019-08-20 20:57:28 · 335 阅读 · 0 评论 -
slot插槽以及具名插槽
今天刚入职新公司,看了新公司的项目代码感觉和之前自己做的项目还是有差距的。自己之前做的项目相对于新公司来说可能还是偏浅,所以无论是框架还是原生的js都要去更加深入的了解才能应对之后的项目。都知道vue组件可以通过slot插槽插入自定义的信息,但是往更加深入的slot了解的话会发现,slot插槽也有其他更加复杂的场景。具名插槽就是其中的一个。具名插槽可以让你可以自定义多处组件中可以插入内容的...原创 2019-08-20 20:49:05 · 618 阅读 · 2 评论 -
React绑定全局方法或变量
在react脚手架创建的项目中,类似像axios请求这样的公共方法,需要给它设定到一个全局的方法中。|对比vue,vue可以直接在main.js中直接Vue.prototype.$axios = function(){}这样的形式绑定全局的方法。这样就不用每一个vue文件都去引用axios这个文件了,也方便进行统一的管理。那么react是不是也可以类似的在index.js中react.pro...原创 2019-07-29 18:27:23 · 9272 阅读 · 3 评论 -
vue上传文件到UCloud
最近公司在做一个关于短视频的项目,项目中涉及到视频文件的存储。以前是使用七牛云存储这次公司选用的是UCloud,于是文档就看起来了https://docs.ucloud.cn/storage_cdn/ufile/tools/sdk上面是sdk的demo,目录结构如下这里只要看v2就好了,因为v1在新的版本中有些地方已经不适用了。其中我们需要的文件是v2/libs下除了base64.min...原创 2019-07-10 15:59:10 · 1105 阅读 · 3 评论 -
vue-cli3.0设置环境变量
我们做项目都会有测试服和正式服,而且接口地址是不同的我们希望本地开发的时候是测试服,打包上线的时候是正式服,笨方法是每次打包的时候都去将测试服的地址改成正式服,这样也是可以的但是很麻烦有时候还会忘记(都已经上传了才发现地址没改)。研究了一下vue-cli3.0的环境变量配置可以分成生产环境(线上),开发环境(测试)开发环境npm run serve测试环境npm run build现在我...原创 2019-06-27 10:34:08 · 1973 阅读 · 2 评论 -
vue父组件直接操作子组件的方法(不通过$emit和$on)
今天再用element ui的时候走马灯有个发方法直接是通过this.$refs.carousel.prev()来控制走马灯的切换下一张的动作。之前父组件触发子组件的方法都是$emit和$on配合完成的。从走马灯的案例中启发了一个思路1父组件引入使用组件直接给组件绑定ref名字。2.子组件中在methods中定义任意方法。3.父组件中直接this.$refs.name.fn()以...原创 2019-07-01 17:51:18 · 907 阅读 · 2 评论 -
vuex模块化
为了应对往后的大型项目vuex如果只是停留在存简单的数据那肯定是不行的,很久没做项目了既然不能再项目上找到突破点,那么只能将知识深入学习一波。先来看看vuex针对模块的搭建的目录结构吧文件夹放的全是vuex相关的文件store是主要暴露vuex实例的文件最终被引用到main.jsimport store from './vuex_study_module/store'new ...原创 2019-03-05 18:38:18 · 8601 阅读 · 0 评论 -
vue自定义指令中的移动端和pc端div的拖拽行为
vue自定义指令是个非常有意思的存在,是一个非常便利的功能。今天突然想做一下拖拽div的功能,本来想直接写到.vue文件中然后想到其实拖拽是针对某个div,于是就想到自定义指令。vuetemplate中<div style="width: 100px;height: 100px;background: black;position: fixed;top: 200px;left:...原创 2019-03-08 14:25:26 · 1980 阅读 · 3 评论 -
原生js监听页面滚动事件
我们在做项目时不免会遇到列表,列表中会有分页的请求。在移动端的列表的加载中,当然如果使用ui框架就另当别论。这次在做vue移动端的项目时有一个场景是列表上拉加载数据,这种情况肯定是在mounted中给window加上一个滚动监听,记住这里要提前定义好this如果你有用到this的话,因为监听也算是异步操作,没有提前定义的话会报错。mounted () { this.ini...原创 2019-01-16 18:36:49 · 46505 阅读 · 3 评论 -
前端UI框架之pc桌面框架iview-ui
npm安装npm install iview --save配置.babelrc这里只讨论按需引入,按需引入需要安装babel-plugin依赖包npm install babel-plugin-import --save-dev在.babelrc文件中的plugins这一项中加入如下代码(注意不是替换原先的代码)"plugins": [ ["import", { ...原创 2018-10-08 21:44:37 · 1481 阅读 · 0 评论 -
vue的UI框架之有赞移动端vant-ui
最近公司不忙比较闲,于是研究了一下前端ui框架相关的一些东西npm安装npm i vant -S一般我们使用ui框架都是按需引入这里我们只讨论按需引入,按需引入我们需要安装一个依赖包babel-plugin通过命令行安装npm i babel-plugin-import -D配置然后需要配置.babelrc文件中的plugins这一项加入如下代码(注意是加入而不是替换默认的代码) ...原创 2018-10-08 21:31:07 · 7913 阅读 · 0 评论 -
vue之豆瓣电影(四)
安装vuexnpm install vuex --save配置:main.js中import Vuex from 'vuex'Vue.use(Vuex)安装axiosnpm install axios在要使用的.vue组件的script标签里面import axios from 'axios'引入这里我们会涉及到跨域的问题如果直接去请求接口的话是不行的,这里需要在vue-cl...原创 2018-10-12 00:22:14 · 352 阅读 · 0 评论 -
vue之豆瓣电影(三)
单独编写.scss文件的情况需要进行编译 安装rudy(百度下载一个) 在webstorm配置 文件-设置-工具-file watchers 添加scss文件类型配置如下 program:scss arguments:--no-cache --update $FileName$:$FileName...原创 2018-10-12 00:02:22 · 271 阅读 · 0 评论 -
setInterval和clearInterval
最近在做项目的时候遇到了setInterval和clearInterval这两个js函数,今天特地来感悟记录下我是在vue的项目中进行的代码,有下面两种用法第一种:直接在setInterval中使用clearInterval<button @click="cilck1">测试</button>事件如下:cilck1 () { var time = ...原创 2018-09-12 23:14:26 · 777 阅读 · 2 评论 -
父子组件间的数据方法的传递
在对vue了解不深的情况下去看github的项目资源的时候总是很吃力,一个页面通常都去几个文件调取数据和方法。调取数据和方法的代码也是看的很吃力。今天去修炼了一下vue框架中父子组件的关系。首先是父组件主动给子组件传值和方法分两步1.父组件调用子组件的时候调用动态属性2.在子组件里面通过props接收代码如下:父组件中先引入子组件并使用子组件在父组件中定义数据和方法并在定义的子组件标签上使用其中...原创 2018-06-01 19:05:14 · 911 阅读 · 2 评论 -
转载某位大兄弟的vue引用swiper
下载swiper首先使用npm 或者cnpm下载swiper cnpm install swiper引入swiperimport Swiper from ‘swiper’; import ‘swiper/dist/css/swiper.min.css’;使用swiper<div class="swiper-container"> <div class="swiper-wr...转载 2018-06-01 10:27:25 · 359 阅读 · 0 评论