vue
vue爬坑之路,本专栏记录了本人学习vue框架遇到的一些问题以及记录了一些经验
帆酱
这个作者很懒,什么都没留下…
展开
-
Vue爬坑之旅(十二):webpack -- vue代码分割,按需加载(codesplit)
本文转自没睡醒的蛐蛐的博客,原文:https://blog.csdn.net/meishuixingdeququ/article/details/79393757为什么需要做代码分割(codesplit)在vue单页应用中,若不做任何处理,所有vue文件会打包为一个文件,这个文件非常的大,造成网页在首次进入时比较缓慢。做了代码分割后,会将代码分离到不同的bundle中,然后进行按需加载这些...转载 2019-01-14 22:56:41 · 2193 阅读 · 0 评论 -
Vue爬坑之旅(十一):在vue项目中引入swiper
本文转自xenowei的文章,原为地址:https://segmentfault.com/a/1190000013044682版本选择swiper是个常用的插件,现在已经迭代到了第四代:swiper4。常用的版本是swiper3和swiper4,我选择的是swiper3。安装安装swiper3的最新版本3.4.2:npm i swiper@3.4.2 -S这里一个小知识...转载 2019-01-14 10:22:59 · 870 阅读 · 3 评论 -
Vue爬坑之旅(十):Vue项目中实现图片懒加载
转自:WebCandy的博客,原文:https://blog.csdn.net/twodogya/article/details/80223331---对于图片过多的页面,为了加速页面加载速度,所以很多时候我们需要将页面内未出现在可视区域内的图片先不做加载, 等到滚动到可视区域后再去加载。这样子对于页面加载性能上会有很大的提升,也提高了用户体验。实现方法(使用vue的vue-lazyloa...转载 2019-01-12 16:16:07 · 570 阅读 · 0 评论 -
Vue爬坑之旅(九):vue打包后的线上部署Apache、nginx
我们一般情况下将vue项目开发完成后会进行打包上线,本文介绍多种部署情况。一、Apache服务器1、vue路由mode:'hash'模式(带#号模式)hash模式打包后可以直接丢到服务器上去,不会有路由上的问题,接口的话根据项目的路径写个全局配置就行了,这里不详细说。2、vue路由mode:'history'模式(不带#号模式)vue在history模式打包时,如果项目为二级目...原创 2019-01-13 23:58:22 · 7762 阅读 · 4 评论 -
Vue爬坑之旅(八):vue单页面中锚点跳转
一般情况下我们在html中使用锚点时会利用链接方式请求‘#+id名称’,此时会在url后面跟一个#号。但是在单页面中会有路由误判的情况。所以在单页面中锚点可改为参数传递的方式。一、封装一个外部js:anchor.js//锚点跳转function goAnchor(selector) { var anchor = this.$el.querySelector(selector);...原创 2019-01-08 23:24:49 · 3632 阅读 · 1 评论 -
Vue爬坑之旅(七):给v-html元素添加样式
<template> <div class="box"> <div class="con" v-html="cont"> </div></template>当我们使用v-html渲染页面,使用下面这种方式去修改样式并没有效果,<style scoped lan原创 2019-01-08 23:07:17 · 1094 阅读 · 0 评论 -
Vue爬坑之旅(六):vue组件的生命周期
转自:https://www.cnblogs.com/webbest/p/6722780.htmlVue所有的生命周期钩子自动绑定在this上下文到实例中,因此你可以访问数据,对属性和方法进行运算。这意味着你不能使用箭头函数来定义一个生命周期方法。这是因为箭头函数绑定了父上下文,因此this与你期待的Vue实例不同。1、beforeCreate 在实例初始化之后,数据观测和event...转载 2018-12-04 18:03:40 · 214 阅读 · 0 评论 -
Vue爬坑之旅(五):vue的三种图片引入方式
在vue中使用拼接图片时,会出现图片无法识别的情况<img :src="item=='seat' ? '../../statices/img/text1.png' : ' ../../statices/img/text2.png' " />此时图片有可能无法识别,需要将图片单独引入。首先给图片地址绑定变量<template> <img :sr...原创 2018-11-26 12:17:41 · 1894 阅读 · 2 评论 -
Vue爬坑之旅(四):Vue通信、传值的多种方式
Vue通信、传值的多种方式,详解(都是干货):本文转载自 飞歌Fly原文地址:https://blog.csdn.net/qq_35430000/article/details/79291287&nbsp;&nbsp;一、通过路由带参数进行传值①两个组件 A和B,A组件通过query把orderI...转载 2018-11-18 20:02:21 · 373 阅读 · 0 评论 -
Vue爬坑之旅(三):使用webpack搭建vue环境
1、安装node.js,在官网下载,直接下一步,完成。nodejs里默认包含npm环境。国内安装包的速度太慢,建议使用cnpm淘宝镜像。npm install -g cnpm --registry=https://registry.npm.taobao.org2、vue-cli构建SPA应用安装vue:npm install vue -g安装vue-cli:npm install ...原创 2018-11-18 19:46:24 · 267 阅读 · 0 评论 -
Vue爬坑之旅(二):vue单页面二级套嵌路由
在一个单页面应用里使用二级套嵌路由目录结构如下:其中main.js为全局配置文件,App.vue为项目入口。main.js中路由配置如下import Vue from 'vue'//引入vueimport App from './App'//引入主模板import Router from 'vue-router'// 引入router路由// 引入项目的模块组件imp...原创 2018-09-11 14:39:04 · 1831 阅读 · 0 评论 -
Vue爬坑之旅(一):vue使用vuex传值
下面就介绍如何使用vuex:安装可以用标签,也可以用npm,我用的是后者,文件不大,几秒钟就装好了。npm install vuex --save目录结构man.js,这里没有在入口文件直接使用,vuex可单独写个模块单独管理import store from '@/vuex/store'new Vue({ el: '#app', store, ...原创 2018-07-19 11:02:08 · 2560 阅读 · 0 评论