vue
关注
分享
扫一扫
文章平均质量分 59
霜如明月
这个作者很懒，什么都没留下…
展开
-
用vue脚手架搭建的项目后期上线后-webkit-box-orient: vertical不显示的问题
目前这个问题我也是第一次碰到，也只是在vue打包项目上线的时候遇到的，其它地方暂时没有实践。做页面效果的时候，我们经常会遇到文本溢出用“…”代替的情况，下面这种样式是我的代码（可能和你们的大同小异）：这里是最多显示两行，第二行溢出隐藏用“…”代替这样写完之后在本地测试是完全OK的，但是npm run build之后就不显示-webkit-box-orient: vertical了：解决办...原创 2018-10-11 21:17:34 · 556 阅读 · 0 评论 -
vue引入axios同源跨域
前言：跨域方案有很多种，既然我们用到了Vue，那么就使用vue提供的跨域方案。解决方案：1.修改HttpRequestUtil.js1 import axios from 'axios'2 3 export var baseurl = '/api'4 /**5 * Get请求6 */7 export function get(url, callback){8 co...原创 2018-10-11 21:32:22 · 1197 阅读 · 0 评论 -
Vue provide/inject 部分源码分析 实现响应式数据更新
下面是我自己曾经遇到 一个问题，直接以自己QA的形式来写吧官网给出实例，说本身是不支持数据响应式的， 但是可以传入响应式数据，那么provide,inject就可以实现响应式。我这里理解应该没错哈，有不对的地方请指出。我自己写的demo,做了如下更改parent 页面：export default { provide(){ return {foo:...原创 2018-10-11 22:06:09 · 2259 阅读 · 0 评论 -
前端Vue 源码分析-逻辑层
Vue 源码分析-逻辑层预期的效果：监听input的输入，input在输入的时候，会触发 watch与computed函数，并且会更新原始的input的数值。所以直接跟input相关的处理就有3处，但实际上会有连带性的触发，触发watch的input函数的时候，还会触发this.answer对应的依赖处理看看内部是如何处理的：Vue在初始化data的时候，会通过Object.defineP...原创 2018-09-27 21:33:23 · 972 阅读 · 0 评论 -
单页面vue引入百度统计的使用方法
最近组长安排着做一个项目，h5的应用下载项目，想着做起来还是比较容易，可是看到提出的需求，我就有点懵逼了！需要对应用的下载进行统计！！！我当时就想着我前端怎么对页面点击按钮就行数据统计啊！我以前的项目也有对应用的下载量就行数据统计的，可是那些项目都是后台人员编写进行数据统计的。我当时就有点不知所措了。想着怎么进行统计，怎么搞定这个！百度得知，百度统计可以帮着解决这个问题，可是没有用过啊！硬着头皮，...原创 2018-10-12 20:54:03 · 2578 阅读 · 0 评论 -
初识 vue —— 最简单的前后端交互示例
一、学习 vue 面临的问题最近想学一门前端技术防身，看到博客园中写 vue 的多，那就 vue 吧。都说 vue 的官方教程写得好，所以我就从官方教程开始学习。官方教程说“Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。”但是这个概念是个什么鬼？还是让人一头雾水嘛。而且我一开始也没有搞清楚 vu...原创 2018-10-12 21:27:06 · 55408 阅读 · 0 评论 -
vue + webpack 前端性能优化
vue + webpack 前端性能优化背景对于程序开发者而言，开发一个项目不仅仅注重效率和功能，前端的性能问题也是非常重要的。这直接影响用户的体验，从而间接的也反应该项目质量的好坏。 影响项目性能的原因有很多，如：资源文件的大小，业务的繁杂程度等，所以前端优化的方式也很多。这些东西很零碎，容易被人遗忘。所以这篇文章中对我平时用的优化方式总结一下，可能不是太全面，大家有其它的优化方式...原创 2018-10-17 21:49:39 · 1126 阅读 · 0 评论 -
Vue绑定内联样式
使用 v-bind:style 可以给元素绑定内联样式,方法与:class类似,也有对象语法和数组语法,看起来很直接在元素上写CSS:<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>示例</title></head&原创 2018-10-17 22:04:37 · 801 阅读 · 0 评论 -
Vue v-if/v-show/插值表达式导致闪现的原因及解决办法
在开发过程中经常会发现当页面明明不应该出现的元素或内容会闪现一下然后消失，最近研究了一下这个问题的原因和解决办法，这里和大家分享一下。1.闪现的原因这个问题是因为Vue要等到HTML DOM加载完成后才会执行JS的编译，所以对使用的指令如 v-if , v-show 或者使用了插值表达式 {{}} 都会出现闪现的情况。因为在这些判断条件或表达式执行之前，DOM已经渲染出来了，之后Vue才会执行...原创 2018-10-14 16:55:54 · 2772 阅读 · 0 评论 -
Vue+koa2开发一款全栈小程序(服务端环境搭建和项目初始化）
1.微信公众平台小程序关联腾讯云腾讯云的开发环境是给免费的一个后台，但是只能够用于开发，如果用于生产是需要花钱的，我们先用开发环境吧1.用小程序开发邮箱账号登录微信公众平台2.【设置】→【开发者工具】→第一次是git管理，开启腾讯云关联3.会一路跳转到腾讯云的【开通开发环境】的流程要走1.已经完成2.下载安装微信开发者工具，也已经下载安装了3.下载Node.js版本Demo将de...原创 2018-10-08 14:35:08 · 2954 阅读 · 0 评论 -
Vue与Element走过的坑。。。。带上Axios
1.Axios中post传参数组（java后端接收数组）虽然源数据本身就是数组，但是传参时会自动变成key:数值或者服务器无法接收的对象，如下如果不仔细看，很容易认为这两种情况没毛病。。（后端不背锅，哈哈）第一种方式转化为数组：JSON.stringify_this.item.push(row.id);//此处_this.item是数组const params = new URLSe...原创 2018-10-15 22:03:47 · 3768 阅读 · 0 评论 -
vue组件通信--注意事项及经验总结
组件间的通信是是实际开发中非常常用的一环，如何使用对项目整体设计、开发、规范都有很实际的的作用，我在项目开发中对此深有体会，总结下vue组件间通信的几种方式，讨论下各自的使用场景文章对相关场景预览父->子组件间的数据传递子->父组件间的数据传递兄弟组件间的数据传递组件深层嵌套，祖先组件与子组件间的数据传递文章相关技术预览prop、emit、bus、vuex、路由URL、...原创 2018-10-15 22:28:39 · 558 阅读 · 0 评论 -
vue 项目实战 (生命周期钩子)
开篇先来一张图下图是官方展示的生命周期图Vue实例的生命周期钩子函数（8个） 1. beforeCreate 刚 new了一个组件，无法访问到数据和真实的dom，基本上这个好像不能干啥&am原创 2018-10-16 16:39:32 · 477 阅读 · 0 评论 -
浅析 React / Vue 跨端渲染原理与实现
当下的前端同学对 React 与 Vue 的组件化开发想必不会陌生，RN 与 Weex 的跨界也常为我们所津津乐道。UI 框架在实现这样的跨端渲染时需要做哪些工作，其技术方案能否借鉴乃至应用到我们自己的项目中呢？这就是本文所希望分享的主题。概念简介什么是跨端渲染呢？这里的「端」其实并不局限在传统的 PC 端和移动端，而是抽象的 渲染层 (Renderer) 。渲染层并不局限在浏览器 DOM 和...原创 2018-10-10 14:40:00 · 572 阅读 · 0 评论 -
Vue开发库存管理前端页面时一些小经验记录
场景是在项目中很多地方都需要用到相同的函数，例如this.$message({ type: 'success', message: '提示语'})如果出现次数过多，会造成书写麻烦和代码复杂的情况。解决思路：首先对函数进行抽象封装，封装后利用vue的mixin将其注入到各个vue中。因为这里的函数是大部分组件中都可能用到的，固利用vue的全局混合。新建一个global文件：...原创 2018-10-19 19:44:16 · 1494 阅读 · 0 评论 -
vue axios数据请求get、post方法的使用
我们常用的有get方法以及post方法，下面简单的介绍一下这两种请求方法vue中使用axios方法我们先安装axios这个方法npm install --save axios安装之后采用按需引入的方法，哪个页面需要请求数据就在哪个页面里引入一下。import axios from ‘axios’引入之后我们就可以进行数据请求了，在methods中创建一个方法 methods：{ g...原创 2018-10-19 22:21:15 · 989 阅读 · 0 评论 -
Vue篇之vue 使用Jade模板写html，stylus写css
vue 使用Jade模板写html，stylus写cssvue 使用Jade模板写html，stylus写css日常工作都是使用vue开发页面和webApp,写的多了就想偷懒简化各种书写方式，所以使用了jade写html，stylus写css，省了很多的步骤和提高了效率。安装包：// 安装jade包npm install jade jade-loader --save-dev// 如果...原创 2018-10-10 21:31:15 · 1039 阅读 · 0 评论 -
Vue 爬坑之路 — vue-cli 3.x 搭建项目
一、安装 @vue/cli更新到 3.x 之后，vue-cli 的包名从vue-cli 改成了 @vue/cli如果之前全局安装了旧版本的vue-cli (1.x 或 2.x)，首先需要使用以下命令卸载掉// 如果没有安装旧版本的 vue-cli 可以跳过卸载直接安装npm uninstall vue-cli -g # ORyarn global remove vue-cli 然后...原创 2018-10-17 16:09:13 · 909 阅读 · 0 评论 -
Vue.JS 开发常见问题集锦
由于公司的前端开始转向 Vue.JS，最近开始使用这个框架进行开发，遇到一些问题记录下来，以备后用。主要写一些 官方手册 上没有写，但是实际开发中会遇到的问题，需要一定知识基础。涉及技术栈CLI: Vue-CLIUI: ElementHTML: Pug(Jade)CSS: LessJavaScript: ES6polyfill 与 transform-runtime首先，vu...原创 2018-10-22 15:20:52 · 637 阅读 · 0 评论 -
vue init深度定制团队自己的Vue template
大家都知道，使用vue-cli可以快速的初始化一个基于Vue.js的项目，全局安装脚手架之后，你可以通过vue list命令看到官方提供的5个模板#####vue list当开发一个独立项目的时候，使用官方提供的template确实很方便，省去了繁琐的依赖配置，webpack等配置问题，甚至连项目目录结构也不需要去考虑，着实方便。但是，当我们需要开发多个系统，每个系统依赖的包，webpack...原创 2018-10-23 15:20:31 · 593 阅读 · 0 评论 -
在Vue项目里面使用d3.js
之前写一个 Demo里面 有些东西要使用d3实现一些效果 但是在很多论坛找资源都找不到可以在Vue里面使用D3.js的方法,npm 上面的D3相对来说 可以说是很不人性化了 完全没有说 在webpack上怎么使用D3.js最后折腾很久 看到某位外国大佬 看他的案例 成功的实现了在Vue项目里面实现D3的使用首先安装npm install d3 --save-dev以防万一,然后看pack...原创 2018-10-23 16:59:37 · 4604 阅读 · 0 评论 -
为什么只会Vue的都是前端小白
今天看见一个讨论比较火热的问题，为什么只会vue的都是前端小白？大家各有各的说法，毕竟每个人心中都有自己那一杆衡量的秤。根据大家提出来的问题，我总结了下面几点吧：1、如果他只会Vue，那他就真的只会这一个东西了。但是，如果他同时还会Angular或者其它一些前端框架，一般就意味着这个人的性价比会非常高。首先，如果他会Angular，那么降低一个维度去写Vue是完全没有问题的，毕竟Vue里面大部分...原创 2018-10-31 15:34:19 · 6184 阅读 · 2 评论 -
vue.js如何在标签属性中插入变量参数
html的标签的属性，比如id、class、href需要动态传递参数，拼接字符串，查了一些资料，并没有找到合适的解决方法，琢磨了一上午，终于试出了方法：v-bind:属性=“ ‘字符串’+自定义变量名”，自己试了没问题，有需要的朋友可以借鉴下！最后需要注意一下属性一定是**":属性="**这种形式才会起作用<ul class="menu" v-for="(item,index) in...原创 2018-10-31 21:24:28 · 10591 阅读 · 2 评论 -
vue vue-router 完美实现前进刷新，后退不刷新。附scrollBehavior源码解析
需求：在一个vue的项目中，我们需要从一个列表页面点击列表中的某一个详情页面，从详情页面返回不刷新列表，而从列表的上一个页面重新进入列表页面则需要刷新列表。而浏览器的机制则是每一次的页面打开都会重新执行所有的程序，所以这个功能并不能直接实现。而vue-router给我们提供了一个叫scrollBehavior的回调函数，我门可以用这个方法结合keep-alive能很好的实现这个功能，下面第一步附...原创 2018-10-30 17:15:07 · 633 阅读 · 0 评论 -
保存头像- vue项目-base64字符串转图片
<img :onerror="errpic" class="customerHead" :src="param.customerHead" alt="">data() { return { param:{ id:"", customerHead: "", } }}let _this =原创 2018-10-30 19:36:50 · 10338 阅读 · 1 评论 -
在vue项目中集成graphql(vue-ApolloClient)
1.什么是graphqlGraphQL 是一个用于 API 的查询语言，是一个使用基于类型系统来执行查询的服务端运行时下图展示graphql所处的位置2.优点1.GraphQL API 有强类型 schemaGraphQL schema是强类型的，可使用SDL(GraphQL Schema Definition Language)来定义。比如，可以使用构建工具验证API请求，编译时检查...原创 2018-11-09 15:18:19 · 3899 阅读 · 0 评论 -
vue-swiper的使用教程
在通常的登录界面我们都可以看到验证码，验证码的作用是检测是不是人在操作，防止机器等非人操作，防止数据库被轻而易举的攻破。验证码一般用PHP和java等后端语言编写。但是在前端，用canva或者SVG也可以绘制验证码。绘制验证码不能是简单的随机字符串，而应该在绘制界面有一些干扰项：如：干扰线段、干扰圆点、背景等等。这里的这个demo的canvas验证码干扰项比较简单。可以在图示中看到本例...原创 2018-11-09 20:48:31 · 2598 阅读 · 0 评论 -
Vue加载组件、动态加载组件的几种方式
组件是Vue.js最强大的功能之一。组件可以扩展HTML元素，封装可重用的代码。这篇文章通过实例代码给大家介绍了Vue加载组件、动态加载组件的几种方式，需要的朋友参考下吧什么是组件：组件是Vue.js最强大的功能之一。组件可以扩展HTML元素，封装可重用的代码。在较高层面上，组件是自定义的元素，Vue.js的编译器为它添加特殊功能。在有些情况下，组件也可以是原生HTML元素的形式，以is特...原创 2018-11-09 21:18:44 · 18169 阅读 · 0 评论 -
实例详解Vue项目使用eslint + prettier规范代码风格
团队开发的项目，如果没有对代码风格作要求，有多少团队成员，就当然会出现多少种不同的代码风格。因此，我们需要一种能够统一团队代码风格的工具，作为强制性的规范，统一整个项目的代码风格。幸好，我们有 eslint 和 prettier 。eslint VS prettier应该大多数项目都已经采用eslint来对代码进行质量检查，可能少部分还会采用其进行一定程度上的统一风格。那为什么还需要pret...原创 2018-11-10 16:06:07 · 12464 阅读 · 0 评论 -
Vue 作用域插槽
使用场景：复用子组件的slot，又可以使slot的内容不一样。<!DOCTYPE html><html lang="zh"> <head> <meta charset="UTF-8" /> <title>Vue</title> </he原创 2018-11-05 15:09:09 · 986 阅读 · 0 评论 -
Vue props 单向数据流
1、props通信注意：DOM模板的驼峰命名props要转为短横分割命名。<!DOCTYPE html><html lang="zh"> <head> <meta charset="UTF-8" /> <title>Vue</title> &原创 2018-11-05 19:20:36 · 755 阅读 · 0 评论 -
vue watch深度监听对象实现数据联动效果
当对象内的某一个元素发生变化，判断对象另一元素，并进行赋值<template> <input type="text" v-model="a.a1.a12"/>{{a.a1.a12}} <input type="text" v-model="a.a2.a22"/>{{a.a2.a22}}</template>原创 2018-11-13 17:55:25 · 545 阅读 · 0 评论 -
详解如何从零开始搭建Express+Vue开发环境
准备工作1. 为前端选择合适的预处理工具和资源管理工具预处理工具又分为 js 预处理工具和 css 预处理工具。Javascript 一直以来最为人诟病的一点就是缺乏原生的模块机制，所有 js 代码文件在被 html 页面引入后将共用同一个命名空间。所以才出现了各种“标准”尝试解决这个问题，但他们都不是原生的，需要额外的工具对代码进行特殊处理。虽然 ES6 终于引入了模块机制，但以现在的浏览器...原创 2018-11-11 21:49:45 · 1660 阅读 · 0 评论 -
打通前后端构建一个Vue+Express的开发环境
前端做多了，自然就会想往后端伸手。更何况现在有了Node和Express，让前端做后端开发的学习降低了不少。最近正好揽下了一个 Vue + Express + mysql 的小项目。项目开始时是前后端分开开发的，但是当后台做好一部分要进行连接测试时问题就来了。前端部分在每次修改过就需要build一次，而后台也每次需要重启一次服务器才能进行调试。可想而知，这样的开发和调试效率是很低的。在这么煎熬着...原创 2018-11-11 22:27:40 · 563 阅读 · 0 评论 -
Vue-Router的使用方法
使用 Vue.js 做项目的时候，一个页面是由多个组件构成的，所以在跳转页面的时候，并不适合用传统的 href，于是 vue-router 应运而生。路由，其实就是指向的意思，当我点击页面上的home按钮时，页面中就要显示home的内容，如果点击页面上的about 按钮，页面中就要显示about 的内容。Home按钮 => home 内容， about按钮 => abou...原创 2018-11-08 19:21:35 · 908 阅读 · 0 评论 -
Vue props用法小结
Vue props用法详解组件接受的选项之一 props 是 Vue 中非常重要的一个选项。父子组件的关系可以总结为：props down, events up父组件通过 props 向下传递数据给子组件；子组件通过 events 给父组件发送消息。父子级组件比如我们需要创建两个组件 parent 和 child。需要保证每个组件可以在相对隔离的环境中书写，这样也能提高组件的可维护性。...原创 2018-11-14 16:07:19 · 3162 阅读 · 0 评论 -
详解vue-router 初始化时做了什么
vue router 的初始化使用步骤我们首先来看 vue-router 的使用步骤，然后再分别去看各个步骤都发生了什么。使用 vue-router 需要经过一下几个步骤：引入 vue-router：import VueRouter from 'vue-router';利用 vue 的插件机制，加载 vue-router：Vue.use(VueRouter);实例化 VueRou...原创 2018-11-20 15:55:29 · 3054 阅读 · 0 评论 -
vue-router 源码实现前端路由的两种方式
在学习 vue-router 的代码之前，先来简单了解一下前端路由。前端路由主要有两种实现方法：Hash 路由History 路由先来看看这两种方法的实现原理。接着我们将用它们来简单实现一个自己的前端路由。前端路由Hash 路由url 的 hash 是以 # 开头，原本是用来作为锚点，从而定位到页面的特定区域。当 hash 改变时，页面不会因此刷新，浏览器也不会向服务器发送请求...原创 2018-11-20 20:40:53 · 920 阅读 · 0 评论 -
Vue瀑布流插件的使用示例
我自己写的一个的Vue瀑布流插件，列数自适应，不用设置每个卡片的高度。测试页面：Page.vue模板页面：WaterFollow.vue 和 WFColumn.vue在Page.vue中，修改itemW的值，设置每列的最小宽度。例如：itemW=“200”（意为200px）。list为数组。高度不用设置，:style="{height:item+‘px’}"是我为了创造卡片高度加上去的，不加...原创 2018-11-16 15:08:20 · 3260 阅读 · 0 评论 -
vue-router的HTML5 History 模式设置
VUE是当下最火爆的前端框架之一，vue-router是vue项目中几乎都会用到的组件，然而体验一时爽，其实坑不少。本篇经验将详细介绍vue-router的两种mode效果和开发测试环境下的问题，并给出解决方案。vue-router的HTML5 History 模式，这种模式充分利用 history.pushState API 来完成 URL 跳转而无须重新加载页面。const router ...原创 2018-11-16 19:26:52 · 1937 阅读 · 0 评论