vuejs
文章平均质量分 57
积码成猿
不积蛙步无以至千里 不积小流无以成江海
展开
-
子类有定位 父类border-radius overflow-hidden 失效的解决方案(最新)
父类加overflow: hidden; 或者position: relative; 或者z-index:1; 或者transform:translate3d(0,0,0);效果都达不到预期解决:在父类加属性:clip-path: circle(235rpx);既可以解决;原创 2021-08-23 15:51:39 · 163 阅读 · 0 评论 -
router基本使用
1、vue2中的路由定义层:router-linkto="/goods">商品router-link> 这里用to指向路径表现层1.1、keep-alive>如果把切换出去的组件保留在内存中,可以保留它的状态或避免重新渲染。为此可以添加一个keep-alive指令keep-alive>router-view:seller="seller">contentrouter-view>ke原创 2018-01-24 21:29:22 · 22835 阅读 · 2 评论 -
vue跨域解决方法
vue项目中,前端与后台进行数据请求或者提交的时候,如果后台没有设置跨域,前端本地调试代码的时候就会报“No 'Access-Control-Allow-Origin' header is present on the requested resource.” 这种跨域错误。要想本地正常的调试,解决的办法有三个:一、后台更改header12转载 2018-01-08 14:55:01 · 2892 阅读 · 0 评论 -
vuejs开发的命名规范
views 命名views 文件夹下面是由 以页面为单位的 vue 文件 或者 模块文件夹 组成的,放在 src 目录之下,与 components、assets 同级。views 下的文件夹命名views 下面的文件夹代表着模块的名字由名词组成(car、order、cart)单词只能有一个(good: car order cart)(bad: carInfo转载 2018-01-25 21:00:04 · 3803 阅读 · 0 评论 -
better-scroll无法滚动
总结一下目前为止碰到的better-scroll无法滚动的问题。12遇见better-scroll(以下简称:BS)无法滚动,可从两方面去考虑。 一是层级关系出错,二是计算高度出错。1,层级关系BS的基本结构是:一个wrapper层,一个content层。wrapper层是整个滚动页面占据的显示空间。content层则包含了全部的页面内容。div class="wrapper"> div原创 2018-01-19 07:08:12 · 895 阅读 · 0 评论 -
axios的封装
找了很多axios的封装,终于组拼出了自己的axios喜欢的同学。麻烦给个star,谢谢 https://github.com/zaofeng/just_for_base import axios from 'axios'import qs from 'qs'let axiosIns = axios.create({});if (process.env.NODE_ENV ==转载 2018-02-05 17:25:13 · 609 阅读 · 0 评论 -
vue组件之间互相传值:父传子,子传父
今看到一篇很不错的vue组件传值文章,便于理解,遂做笔记~一般页面的视图App.vue应为这样一.父组件向子组件传值1.创建子组件,在src/components/文件夹下新建一个Child.vue2.Child.vue的中创建props,然后创建一个名为message的属性3.在App.vue中注册Child组件,并在template中加入child标签,标签中添加message属性并赋值4.保...转载 2018-03-10 16:35:52 · 17275 阅读 · 1 评论 -
Vue2.0 Transition常见用法全解惑
Vue2.0的过渡系统(transition)有了很大的改变,想把1.0的项目迁移到2.0,着实需要费一些功夫,今天我就要把vue2.0的过渡系统的用法搞清楚,因为之前确实踩了不少坑。这里只涉及单元素/组件的过渡实现,vue2.0的文档中还讲到了初始渲染的过渡、多个元素的过渡、多...转载 2018-03-11 09:01:53 · 4108 阅读 · 0 评论 -
vue2.0 transition -- demo实践填坑
原文地址:https://www.cnblogs.com/jr1993/p/vue.html前言vue1.0版本和2.0版本的过渡系统改变还是蛮彻底的,具体请自行详看文档介绍:https://vuefe.cn/v2/guide/migration.html#过渡。在使用2.0版本做过渡效果的时候,虽然比1.0版本强大很多,但是实践过程中还是踩了一些不应该踩但是还是踩了的坑。虽然官网文档已经很详细地...转载 2018-03-11 12:22:20 · 159 阅读 · 0 评论 -
vuejs之---$mount()
所遇到问题之一:ReferenceError: vm is not defined[详细了解]demo.html:108:1深入之后发现还有后面情况 $mount手动挂载一说,此处应该写为app.$mount("#app");或者在new vue 括号里面el:#app;Vue 的$mount()为手动挂载,在项目中可用于延时挂载(例如在挂载之前要进行一些其他操作、判断等),之后要手动挂载上。ne...原创 2018-03-11 15:06:51 · 9163 阅读 · 0 评论 -
vue2.x饿了吗实战总结
vue2.x仿饿了么app项目总结仿饿了么app是基于vue2.x最新实战项目,用到的技术栈vue2 + vue-router2 + vue-cli2+ axios + stylus + webpack2 + node.js页面相对简单,所以没有用到vuex, 它更适合对复杂的单页面进行状态管理实现功能:• Goods、Ratings、Seller组件视图均可上下滚动• 商品页 点...转载 2018-02-26 07:10:26 · 1484 阅读 · 0 评论 -
vue组件的生命周期
Vue所有的生命周期钩子自动绑定在this上下文到实例中,因此你可以访问数据,对属性和方法进行运算。这意味着你不能使用箭头函数来定义一个生命周期方法。这是因为箭头函数绑定了父上下文,因此this与你期待的Vue实例不同。1、beforeCreate 在实例初始化之后,数据观测和event/watcher时间配置之前被调用。2、created 实例已经创建完成之后被调用。在这一步,实例已经完成以...转载 2018-05-13 17:35:00 · 984 阅读 · 0 评论 -
美团meituan 2.0 vuejs项目记录
<h2>Summary of project questions 项目问题点总结:</h2> 一,touch的使用 以下是四种touch事件 touchstart: //手指放到屏幕上时触发 touchmove: //手指在屏幕上滑动式触发 touchend: //手指离开屏幕时触发 t...原创 2018-12-16 17:11:41 · 450 阅读 · 0 评论 -
Webpack HMR 的配置与回退策略
Webpack HMR 的配置与回退策略文章目录热加载(HMR)是 Webpack Dev Server 最强大的功能之一,页面源码的变更可以无需刷新地实时推送到页面上。以 vue 为例,一个最简的 HMR 配置策略如下所示:首先安装 webpack-dev-server 与前端 JS 库的 HMR 依赖(如 Vue 的 vue-hot-reload-api),而后编辑pa转载 2018-01-05 22:27:02 · 1377 阅读 · 0 评论 -
vuejs源代码目录结构
App.vue # 顶级组件│ client-entry.js # 前端入口文件│ config.js # 配置文件│ main.js # 主入口文件│├─api # 接口 API├─assets # 静态资源├─components # 通用组件├─directives # 自定义指令├─mock转载 2017-12-23 22:14:26 · 581 阅读 · 0 评论 -
vuejs中created与mounted区别
什么是生命周期Vue实例有一个完整的生命周期,也就是从开始创建、初始化数据、编译模板、挂载Dom、渲染→更新→渲染、卸载等一系列过程,我们称这是Vue的生命周期。通俗说就是Vue实例从创建到销毁的过程,就是生命周期。在Vue的整个生命周期中,它提供了一系列的事件,可以让我们在事件触发时注册js方法,可以让我们用自己注册的js方法控制整个大局,在这些事件响应方法中的this直接指向的转载 2017-12-24 02:40:34 · 6794 阅读 · 0 评论 -
使用 vue 构建 video 组件
以浏览器的原生组件 video: src="example.mp4" width="320" height="240" onload="loadHandler" onerror="errorHandler"> Your browser does not support the video tag.在 Vue 组件中,状态称为 props,事件称为 e原创 2017-12-23 22:06:41 · 3252 阅读 · 0 评论 -
vuejs实现升级无缝轮播图效果
import BScroll from 'better-scroll'//better scroll插件import {AddClass} from 'common/js/dom' export default { data() { return { dots: [], //图片滚动时 有放大效果 定义一个变量 默认为第一页原创 2017-12-21 23:14:46 · 3180 阅读 · 0 评论 -
better-scroll 与fastclick点击事件相冲突
better-scroll 点击事件与fastclick点击事件相冲突导致图片点击无反应import BScroll from 'better-scroll' export default { props: { probeType: { type: Number, default: 1 }, cl原创 2017-12-26 22:42:16 · 2560 阅读 · 0 评论 -
图片懒加载插件 vue-lazyload
图片懒加载插件使用1.vue-lazyload:版本号1.0.32.首先引入依赖(main.js)import VueLazyLoad from 'vue-lazyload'//配置vue-lazyloadvue.use (VueLazyLoad, ){ loading: require('common/image/default.png')}3.模版部分原创 2017-12-26 22:10:27 · 248 阅读 · 0 评论 -
当 better-scroll 遇见 Vue
在我们日常的移动端项目开发中,处理滚动列表是再常见不过的需求了,以滴滴为例,可以是这样竖向滚动的列表,如图所示:也可以是横向滚动的导航栏,如图所示:可以打开“微信 —> 钱包—>滴滴出行”体验效果。我们在实现这类滚动功能的时候,会用到我写的第三方库,better-scroll。什么是 better-scrollbetter-scroll 是一个移动端滚动的解转载 2017-12-26 23:39:49 · 127 阅读 · 0 评论 -
axios调取本地mock模拟数据详细讲解
需要与后台进行数据交互 这里使用本地json数据来模仿后台数据交互流程 我们使用了mock数据(模拟后台数据)作为前端经常需要模拟后台数据,我们称之为mock。mock 的真正意义在于简化测试环境。假如你现在要测试一个dao,但是你有不想构建数据库环境就可以用mock模拟数据库的返回结果。进入正题:一,在vuejs 2.0版本 在配置文件webpack.dev.conf.js进行本地数据访问,在...原创 2018-01-13 22:31:44 · 14724 阅读 · 0 评论 -
axios 使用
参考:http://blog.csdn.net/connie_0217/article/details/78703112Vue 原本有一个官方推荐的 ajax 插件 vue-resource,但是自从 Vue 更新到 2.0 之后,官方就不再更新 vue-resource目前主流的 Vue 项目,都选择 axios 来完成 ajax 请求,而大型项目都会使用 Vuex 来管转载 2018-01-21 20:36:55 · 1046 阅读 · 0 评论 -
如何在用PC开发的时候用手机实时预览
1.window下开发打开ipconfig 不同开发环境输入命令不同(ifconfig)2.找到ip地址 将http://localhost替换为ip地址(http://192.168.1.105)例如:http://192.168.1.105:8080/index.html3.复制地址到草料二维码网站 扫描生成的二维码即可需要保证手机和电脑连接同一个区域网才ok (一般手机和电脑是原创 2018-01-21 20:57:41 · 3320 阅读 · 0 评论 -
web app 无限加载终极解决方案
该项目 是一个演示了 web app 各大【scroll view】主流插件的用法,主要面向 vue 项目开发者,使用vux 作为项目骨架,scroll view 采用图文的方式进行布局,可以无限加载数据,用于测试各大插件在滑动的过程中是否卡顿,滑动效果是否自然,比较了8种较为主流的 scroll view 插件(具体见插件比较),并对 mescroll 进行了源代码上的封装,对 better转载 2018-01-05 16:34:23 · 491 阅读 · 0 评论 -
学习vuejs时遇到源映射错误的情况
在网上找到一份很详细的文章 大家参考下:https://www.cnblogs.com/xuld/p/5882677.html转载 2017-12-21 22:29:56 · 4480 阅读 · 0 评论