Vue中render函数的使用
render函数vue通过template来创建你的HTML。但是，在特殊情况下，这种写死的模式无法满足需求，必须需要js的编程能力。此时，需要用render来创建HTML。什么情况下适合使用render函数在一次封装一套通用按钮组件的工作中，按钮有四个样式(defaultsuccesserror)。首先，你可能会想到如下实现<divv-if="type==='success'">success</div><divv-else-if="type==='error'">error</div><divv-else-if="type==='warm'">warm</div><divv-else>default</div>这样写在按钮样式少的时候完全没有问题，但是试想，如果需要的按钮样式有十多个，按钮内的文字根据实际情况而定(如success按钮内的文字可能是OK、GOOD等等)。那么templa
Vue学习日记（一）——Vue介绍
前言本人学习了一段时间的vue，并尝试写了一些小Demo之后，将vue投入了几个项目之后，一直在边学习边使用，经过看了vue,vuex,vue-router的官方文档和慕课网上的一些实战视频之后，深有体会，故此写下这些文章。前端框架比较其实的话，前端有很多的框架，很多初学前端的人可能没有接触到框架，以为框架是很高大上的东西，就我个人而言，我是听从师姐的学习路线开始学习前端的，一开始的时候接触的就是html,css,js这些基本语言，对于框架，一直是觉得很高大上的东西。后来，经过长时间的与框架打交道之后，也明白了，基础对于前端开发者是很重要的，框架也就只是将你会复用的代码进行包装起来方便你的使用，最重要的还是基础。目前前端开发有很多的框架在市面上，其实说是框架，如果从C语言java语言那些语言来说，也就是库，一些封装好的东西，告诉你用法，就可以简单的实现一个简单的项目了。如果想更加了解前端框架，建议可以百度百度，或者看这篇知乎讨论，点击里面的文章看看，引用一下这里的一张图片展示一下目前的前端框架。是的这只是部分前端框架，就我个人觉得，目
vue 2之 axios
Vue.js2之axios1、axios官方文档Axios是一个基于promise的HTTP库。https://www.kancloud.cn/yunye...2、配合vue使用注意：之前的Vue.js使用的是vue-resource，不过后期不在维护，而是使用axios.(1)、安装axios$npminstallaxios(2)、引入axios在main.js中引入axios,注意：下面使用的是：Vue.prototype.$axios=Axios;//在Vue的原型上添加$axios方法(3)、组件中进行网络请求(axios官方文档:https://www.kancloud.cn/yunye...//基本情况请求方式this.$axios.get(url).then(rsp=>{console.log(rsp)}).catch(error=>{console.log(error)})//包含参数的情况一th
微信端vue项目问题总结
最近的一个微信端vue项目，出现了很多问题，总结一下vue项目配置用vue-cli脚手架搭建的项目，导入该有的各种需要包之后npmrundev，不知道是vue-cli的版本问题还是webpack的版本问题，出现了找不到css-loader和vue-loader的报错，导入成功后再运行还是这样的错。解决:建立的默认vue文件，css预设的需要改一下在package.json文件的script中的dev里面添加--host当前ip就可以用手机端访问，如：在config的index.js中的proxyTable可以代理后端api，如：微信签名问题正常的签名，需要获取当前页面的url地址，并调用微信接口，如：不同的分享页面会进入不同的链接：用watch监听路由$route，并判断url地址有没有需要的关键字分享的图片要缩小，80*80左右分享的图片自己可以看到，别人看不到，一般是因为分享的标题或描述中有部分关键字，如：红包、现金、福利...页面问题1.字体阴影普通字体阴影：text-shad
使用js获取上传文件的路径？
由于浏览器的安全限制，<inputtype="file">通过js的onchange事件获取上传文件的路径时，返回的是C:fakepath文件名，隐藏了真实的物理路径，可以使用window.URL.createObjectURL()返回一个Blob对象，Blob对象就是二进制数据，它是一个包含有只读原始数据的类文件对象组件upload：当点击按钮时触发SendDocument方法this.$refs.upload.submit();会触发beforeUpload方法打印结果如下：就可以把blob对象传给extrinsicFileName（表单里的一个字段）这样可以把表单的数据提交给后台了那么重点是，你为什么要获取上传文件的路径？我是一个初学者，刚刚开始学习做上传文件这个功能，简单以为要把文件路径返回给后台，通过他们去获取上传文件的数据。那么上传文件功能实际上是不需要获取文件路径的，而是通过二进制流传过去的，上面的blob对象其实就是表示文件的二进制数据，通过文件流的方式传输，在计算机里所有的对象都是通过二进制流传输的
假如测试说你的网站在iOS 10有问题
这篇文章不那么有趣，只是解决了一个bug。但对我来讲，因为后面还要用Vue做很多项目，而且可以预见几乎每一个项目都会遇到这个问题，所以记录在案是有用的。你用Vue做了一个单页面应用，它在一切设备上都工作正常，但是突然有一天，你的测试和你说，这个网站在iOS10上跑不起来，怎么办？于是你打开你电脑上的Chrome浏览器，工作正常；打开Safari浏览器，工作正常；打开iOS11手机，工作正常；打开各种安卓手机，工作正常。但是在iOS10的手机上，不论是微信浏览器，还是Safari浏览器，都只能看见一个白白的屏幕。于是你把手机连上电脑，在电脑端的Safari里，看到了如下的错误：SyntaxError:Cannotdeclarealetvariabletwice:'e'.可是你没有写过这样的代码，你怎么可能把一个名为e的变量定义两次？你打开代码，看到了这样美丽的代码：lete=e=>{console.log(e);for(leteof[1,2,3])co
VSCODE常用插件使用记录
常用必备：1.vscode-icon让vscode资源树目录加上图标，必备良品！2.PathIntellisense自动路劲补全，默认不带这个功能的3.beautifyBeautifycss/sass/scss/lessreact-beautify格式化代码使用指南：按F1,然后输入bea—>选择你要格式的文件类型js/css/html格式后：4.GitLens丰富的git日志插件5.BracketPairColorizer让括号拥有独立的颜色，易于区分。可以配合任意主题使用。6.AutoCloseTag自动闭合HTML标签7.TODOParserTODO管理可以列出在注释中写入的所有TODO事项使用指南：在注释中写TODO：[注意必须大写]TODO后面即是你规划的要做的内容然后点击下面的按钮控制台就会输出你的todo列表可以搜索项目中的所有todo。8.ColorInfo小窗口显示颜色值，rgb,hsl,cmyk
我开源了一个私人云盘——蓝眼云盘
蓝眼云盘在线Demo(体验账号：demo@tank.eyeblue.cn密码：123456)后端tank地址前端tank-front地址简介蓝眼云盘是蓝眼系列开源软件之一，也是蓝眼系列其他软件的基础服务软件。蓝眼博客具有以下几大特色：1.支持docker蓝眼云盘的docker镜像已经发布到了DockerHub，可以一行指令运行。2.软件体积小，跨平台，运行简单蓝眼云盘安装包6M左右，在windowslinuxmacOS操作系统中均可安装运行；蓝眼云盘为绿色软件，将安装包解压缩，修改配置文件后即可一行命令立即运行。3.使用方便，核心功能齐全蓝眼云盘主要支持pcweb端，同时手机web也具有不错的响应性支持。蓝眼云盘实现了云盘（如：百度云盘，微云)的核心功能：文件夹管理，文件管理，上传文件，下载文件，文件分享等。蓝眼云盘提供能账号管理系统，超级管理员可以管理用户，查看用户文件，普通用户只能查看自己的文件，修改自己的资料。上面提供的体验账号就是一个普通用户的账号。4.支持接口编
vue项目实现记住密码到cookie功能(附源码)
实现功能：1.记住密码勾选，点登陆时，将账号和密码保存到cookie，下次登陆自动显示到表单内2.不勾选，点登陆时候则清空之前保存到cookie的值，下次登陆需要手动输入大体思路就是通过存/取/删cookie实现的；每次进入登录页，先去读取cookie，如果浏览器的cookie中有账号信息，就自动填充到登录框中，存cookie是在登录成功之后，判断当前用户是否勾选了记住密码，如果勾选了，则把账号信息存到cookie当中，效果图如上：直接上主要的代码HTML部分<divclass="ms-login"><el-form:model="ruleForm":rules="rules"ref="ruleForm"label-width="0px"class="demo-ruleForm"><el-form-itemprop="username"><el-inputv-model="ruleForm.user
vue 阿里云上传组件
vue阿里云上传组件测试项目git地址本测试项目启动方法示例链接组件配置项实践解释本文主要介绍如何在vue项目中使用web直传方式上传阿里云oss图片默认读者对vue框架和阿里云oss有一定的了解整体的流程是加载好阿里云sdk->初始化上传客户端client->等待文件选择->文件选择进行上传->分发上传结果心急的同学直接去下载组件使用就好了，反正也很简单，没用弄npm，直接复制代码使用吧组件地址使用过程中我碰到以下的坑：1.本文使用的是js引入形式的阿里云sdk，用npm形式的sdk会需要一些后端的node功能，不能用于web直传。可以直接在html里面加上script标签<scriptsrc="https://gosspublic.alicdn.com/aliyun-oss-sdk-4.3.0.min.js"></script>组件里我包装了一个异步获取sdk的方法LoadJS，感兴趣的可以看一下2.使用js引入形式的sdk会有一个异步的问
Vue项目搭建
Vue推荐开发环境Node.js、npm、webpack、vue-cli、webstrom现在开始安装环境安装nodejs可以在终端里下载，但是不推荐，npm的版本会报错去nodejs官网下载即可，地址：http://nodejs.cn/中文网安装vue淘宝镜像npminstall-gvue–registry=https://registry.npm.taobao.org安装webpacknpminstallwebpack-g安装vue脚手架npminstallvue-cli-g—————-如果第二次编写新的vue项目，就可以在这里开始了—————–根据模板创建项目vueinitwebpack项目名字<项目名字不能用中文>会有一些初始化的设置，如下输入:Targetdirectoryexists.Continue?(Y/n)直接回车默认(然后会下载vue2.0模板，这里可能需要连代理)Projectname(vue-test)直接回车默认Proje
Vue2.x 总结
Vue2.x总结Vue是一套用于构建用户界面的渐进式框架也意味着，既可以把VUE作为该应用的一部分嵌入到一个现成的服务端应用，或者在前后端分离的应用中，利用Vue的核心库及其生态系统，把更多的逻辑放在前端来实现。AProgressiveFramework渐进式框架与Vue相比，React学习曲线陡峭，在学习React之前，需要了解JSX和ES2015,当然入门后，发现还要学习React全家桶。而Vue就可以在简单阅读了文档后，开始构建应用程序。这就要得益于Vue主张的渐进式。可以简单看下官方给出这张图：可以看出来，主要是介绍了Vue设计思想，就是框架做分层设计，每层都可选，可以单独引入，为不同的业务需求制定灵活的方案。主张最少，不会多做职责以外的事。Vue作者尤雨溪的观点,Vue设计上包括的解决方案很多，但是使用者完全不需要一上手，就把所有东西全都用上，因为完全没有必要，一般都是根据项目的复杂度，在核心的基础上任意选用其他的部件，不一定要全部整合在一起。这样渐进式的解决方案，使得学习成本大大减少了。声明式渲
vue+webpack+nginx 部署在服务器非根目录下访问404问题
最近想把所有的前端项目都整合在两台机器上，通过负载访问如下路径Https://域名/gameCenter/Https://域名/member/Https://域名/loan/这样的方式访问按照平时的打包方式，直接将webpack打包好的包放到服务器上服务器路径/H5/gameCenter(并非平时的/gameCenter)在ngnix中做好配置如下：location^~/gameCenter/{alias/H5/gameCenter/;try_files$uri$uri//gameCenter/index.html;gzipon;gzip_typesapplication/javascripttext/cssimage/jpegimage/png;}结果访问Https://域名/gameCenter/时一片红，各种/static/js/static/css找不
用Vue搭建一个应用盒子（一）：todo-list
最近在研究vue的相关知识，最好的学习方法莫过于自己开发一个SPA，这样带着问题来学习，进步自然飞速。于是边查边写差不多花了2周写完了一个todo-list，功能不够完备，但是麻雀虽小，却也是五脏俱全，基本功能是可以满足的了。话不多说，直接来看项目吧。技术栈vue全家桶(vue、vuex、vue-router)webpack实现打包和热加载ES6UI框架用的是bootstraprem方法完成适配移动端localstorage实现数据的保存node和npm(真是零基础啊，npm都是现学现卖的...)以上。接下来就是代码分析了。一、用vue-cli配置一个项目这一个步骤没什么好说的，网上教程一大堆，随便找一个照着走就好了。完成后，你应该有一个项目的文件夹，里面应该有这几个文件：README.md、build、config、index.html、package.json、src、static嗯，就这样。二、安装相关依赖和一堆玩意。配置vue-router和bootstrap先安装依赖，命令行到对应根目录文件夹执行如下命
用Vue搭建一个应用盒子（二）：datetime-picker
接着上次的进度，我们已经实现了一个todo-list。它已经具备了基本的功能，可以新建、编辑、删除任务。但是美中不足的是，它的时间设定上只能通过输入一段字符串来设定，很不社会。我们应该完成的效果是一个time-picker，日期选择器。本来打算自己造轮子，无奈公司最近一段时间项目赶得紧，加上生活上遇到了一点挫折，直到7月初才有空闲下来想想代码，造轮子时间可能不够，也只能利用别人的现成插件了。google了几个vue的时间选择器插件，不是代码修改量太大就是看不太懂，要不就是UI和我的整体风格不符。于是另选思路，找到了现在的这个bootstrap的插件，代码量不大，也在自己可以理解的范围。于是开工。不过中间还是有一些曲折，尝试几次还是没办法实现数据的双向绑定。我曾经试过想要把时间的数据换成键值对的形式，结果引发了诡异的bug，故作罢，最后还是使用了字符串，使用这个bootstrap插件，也有一部分的原因是因为这个的输出结果也是字符串，代码的修改量会很少。好了，废话说了一箩筐，看代码吧。github地址：地址相关资源首先需要下载插件：http:/
vue-router 笔记整理
组件内使用路由watch可以监听，或者beforeRouteUpdate钩子函数监听。用途？用途：如果目的地和当前路由相同，只有参数发生了改变(比如从一个用户资料到另一个/users/1->/users/2)，你需要使用beforeRouteUpdate来响应这个变化(比如抓取用户信息)。路由的三大模式路由模式（history、hash和abstract）路由的push等同window.history.pushState(一个状态对象,title,url)路由组件传参使用props将组件和路由解耦路由守卫（钩子函数全局的,单个路由独享的,组件级的全局：router.beforeEach（to,from,next）异步解析状态有“等待中”，“确定的”router.afterEach（to,from）路由独享钩子：beforeEnter（to,from,next）用法同全局的router.beforeEach（）组件级：beforeRouteEnter
vuex 笔记整理
在vuex出来以前，我们怎么管理我们的状态？data-->statetemplate-->viewmethods-->actions一个表示“单向数据流”理念的极简示意vue--(dispath)->actions---(modifystate)-->state---(render)->vue...如此循环下去vuex的出现，在actions和state之间多了一层mutationsvue--(dispath)-->actions--(commit)-->mutations--(modidy)-->state--(render)-->vue...如此单向数据流循环下去。再细分下actions-->mutations-->state就是vuexstateVuex使用单一状态树,即每个应用将仅仅包含一个store实例，但单一状态树和模块化并不冲突。可以同时设置多个子模块，统一由一个stor
用Vue搭建一个应用盒子（三）：音乐播放器
这个播放器的开发历时2个多月，并不是说它有多复杂，相反它的功能还非常不完善，仅具雏形。之所以磨磨蹭蹭这么久，一是因为拖延，二也是实习公司项目太紧。8月底结束实习前写完了样式，之后在家空闲时间多了，集中精力就把JS部分做完了。这个播放器确实比当初构想的复杂，开始只打算做一个搜歌播放的功能。现在做出来的这个播放器，可以获取热门歌曲，可以搜歌，可以调整播放进度条，功能确实完善不少。这次完成这个项目也是收获颇丰，点了不少新的技能点，当然，这个简陋的小项目也挖了不少坑，不知道啥时候能填上……话不多说，看代码吧。Muse-ui不记得在哪个网站看到这个组件库的了，觉得好酷炫，于是用起来～这是官网：地址使用这个组件库的原因除了漂亮，还因为这是基于Vue2.0，无缝对接，方便。使用方法跟之前的插件一样，npm安装：npminstall--savemuse-ui安装好后，在main.js中注册。importMuseUifrom'muse-ui'import'muse-ui/dist/muse-ui.css'import'm
vue vue-router vuex element-ui axios的学习笔记（十二）获取商品页面数据
目前完成的功能：登录注册，商品分类的路由获取页面数据的思路：一、定义api打开api.js二、在productlist.vue页面创建时获取数据打开productlist.vue三、编写mock.js打开mock.js四、测试、修改可以看出来其实数据是回来了的，我先将数据渲染到页面上打开productlist.vue<template><div><h1>prolist</h1><pv-text="$route.params.class"></p><p>共{{productlist.length}}个商品</p><ul><liv-for="(item,index)inproductlist":key="item.productclass"v-text="item.productna
vue vue-router vuex element-ui axios的学习笔记（十三）完成搜索功能
一、搜索功能的思路在搜索框中输入商品名或商品名所包含的字符，就可以搜索出相关的商品列表二、完成搜索功能的步骤1、搜索结果存在的两种情况1、搜到结果，页面跳转到结果界面2、没有结果，那页面就不应该跳转2、步骤api.jsmock.jsproduct.vue根据返回的code判断是否跳转路由productlist.vue效果：功能基本实现了总结其实这个搜索功能有两种写法第一种：上面的写法：将搜索框写在product.vue里面缺点：1、使用了2次axios请求，很繁琐。2、在productlist.vue里面的mounted（）需要进行判断是进行查询请求还是分类商品生成，逻辑变得更复杂了。3、不能在路由跳转之后清空搜索框，在路由跳转之前清空的话，又会导致在列表页面失去查询参数，不能正确查询......优点：没有发现第二种：直接将搜索框写在productlist.vue里面优点：上面缺点全没了缺点：暂时没发现