Vue
罗彬桦
君子以自强不息
展开
-
Vue Ui
Vue Ui导入项目文件打包生成文件路径原创 2021-04-08 21:20:42 · 111 阅读 · 0 评论 -
Vue的细节优化解决300ms延迟问题
Vue的细节优化fastClick可能会有一些bug,所以我们不用fastClick了。那么将fastClick删除,并在package.json中删除。在我们的reset.css中加入touch-action: manipulation;就可以了原创 2021-03-03 04:56:39 · 265 阅读 · 0 评论 -
Vue项目城市选择页-使用Keep-alive优化网页性能(8-11)
使用Keep-alive优化网页性能当我们每次进入城市页面的时候,我们的json都会重新被加载。那怎么办呢?使用keep-alive,什么意思呢?就是当我加载一次之后,我们会把加载过的放入到内存中,下一次再执行这个函数的时候,直接使用。但是使用keep-alive,在我们需要重新刷新的时候,重新进行请求又有另外的方法。我们添加一个计算属性,在请求后面加上城市。当我们使用keep-alive的时候,会自带一个函数activated(),即使我们的数据进入了缓存,当我们刷新也会重新请求,我们可原创 2021-03-03 04:45:12 · 125 阅读 · 0 评论 -
Vue项目城市选择页-Vue的高级使用及localStorage
Vue的高级使用及localStorage如果你刷新你会发现又重新变回原本的了。我们要修改这个bug。因为在企业中项目要拆开来。定义了两个,一个为state,一个为mutationstate.js,这里就用到了localStorage用于判断是否有变动。mutation.js高级用法,让我们的共享数据不用这么麻烦。就不用原本的是这样的。也可以这样用上面的呢如下...原创 2021-03-03 03:48:50 · 146 阅读 · 0 评论 -
Vue项目城市选择页-Vue实现数据共享(8-9)
Vue实现数据共享数据共享,我们使用到vuex这个状态管理模式。https://vuex.vuejs.org/zh/ 可进此网站了解。其实数据共享就是,我创建了一个index.js文件,定义一个数据,让我的其他首页使用这个数据就可以啦,如果改变数据,那么就改变index.js文件的数据,那么多个数据都会同时变化。cnpm install vuex --save 下载如何共享数据呢。我创建了一个文件夹store,里面的index.js文件,让city: ‘上海’全局引入stroe/i原创 2021-03-03 01:16:31 · 282 阅读 · 0 评论 -
Vue项目城市选择页-搜索逻辑实现(8-8)
搜索逻辑实现根据你输入的字符进行搜索你的城市。先将搜索栏需要用到的数据先从父组件传过来。绑定我们的输入框先把数据设置为空字符串,然后给绑定的keyword进行监听,给他加了个定时器也是为了限流。 基本思路是,如果搜索到有就遍历将字符串装进list中遍历list,将搜索的显示城市出来。设置了一个计算属性,如果搜索不到就显示"没有找到可匹配数据"...原创 2021-03-02 21:45:43 · 168 阅读 · 0 评论 -
Vue项目城市选择页-列表性能优化(8-7)
列表性能优化手指放在上面滑动,我们的值就会变,但是这样写我们的性能很低。因为我们每一次滑动的时候都会重新计算一次。加一个生命周期钩子updated因为我们的值一开始我们都设置为空的,那么每次获取json都会重新刷新一次。那如果我们用updated可以解决我们每次刷新要再次加载的低性能。节流我们每次滑动的时候,频率都非常大,所以我们要做一个节流。其实就是加定时器。...原创 2021-03-02 04:01:56 · 272 阅读 · 0 评论 -
Vue项目城市选择页-兄弟组件数据传值(8-6)
兄弟组件数据传值兄弟传值其实就是子传给父亲,父亲再传给另外一个儿子。就实现了兄弟传值。想让右边英文字母跟着左边的进行切换。第一个:点击右边字母,左边进行切换。第二个:滑动右边字母,左边也跟着滑动。绑定事件向外传事件接收事件根据事件调用方法传回子组件接收数据并监听注意点::ref vue中的$refs在Vue中访问DOM元素的方法...原创 2021-03-02 03:27:23 · 229 阅读 · 1 评论 -
Vue项目城市选择页-页面的动态数据渲染(8-5)
页面的动态数据渲染如何实现呢?先创建city.json 模拟的数据引入axios创建并初始数据将数据传入子组件中子组件接受数据7. 记得还有个二次循环8. 右边的A,B,C,D… 。原创 2021-03-02 01:00:11 · 177 阅读 · 0 评论 -
Vue项目城市选择页-列表布局(8-3)
列表布局创建项目分支 city-list创建List.vue<template> <div class="list"> <div class="area"> <div class="title border-topbottom">当前城市</div> <div class="button-list"> <div class="button-wrapper">原创 2021-03-02 00:02:58 · 492 阅读 · 0 评论 -
Vue项目城市选择页-搜索框布局(8-2)
搜索框布局创建分支city-search创建Search.vue组件引入,注册,使用组件原创 2021-03-01 15:22:05 · 201 阅读 · 0 评论 -
Vue项目城市选择页-路由配置(8-1)
路由配置创建一个City.vue创建Header.vue,并利用<router-link to="/">设置路由这样就可以实现跳转路由配置了。原创 2021-03-01 11:06:10 · 92 阅读 · 0 评论 -
Vue项目首页-首页父子组件间的传值(7-9)
首页父子组件间的传值第一步,先加入数据。将值传到指定组件在子组件中接受父组件传递过来的值,并明确传递的类型修改渲染数据。回到父组件,将值的变化。原创 2021-03-01 03:34:55 · 73 阅读 · 0 评论 -
Vue项目首页-使用axios发送ajax请求(7-8)
Ajax获取首页数据首先创建一个index-ajax的分支。npm install axios --save如果新分支没有之前的代码,那就可以让新分支与之前的某个分支合并。git merge index-recommend导入axios。创建一个json数据文件,并且让他不能上传到git——在.gitigore文件下加入 static/mock又因为axios.get('/api/index.json')我们测试和上线的api不同。所以我们索性直接在config的index.j原创 2021-03-01 01:36:37 · 141 阅读 · 0 评论 -
Vue项目首页-开发周末游组件(7-7)
开发周末游组件<template> <div> <div class="title">周末去哪</div> <ul> <li class="item border-bottom" v-for="item of recommendList" :key="item.id" > <div class="item-img-wrap原创 2021-03-01 00:14:35 · 108 阅读 · 0 评论 -
Vue项目首页-热销推荐组件开发(7-6)
热销推荐组件开发创建分支在项目目录下右键打开gitbase。git pull //从线上将项目拉下来。git checkout index-recommend //进入index-recommend这个分支git status //查看本地分支引入并注册即可。<template> <div> <div class="title">热销推荐</div> <ul> <li原创 2021-02-28 23:03:13 · 160 阅读 · 0 评论 -
Vue项目首页-图标区域逻辑实现(7-5)
图标区域逻辑实现创建Icons.vue利用两层,第一层数组,第二层数据的方式,遍历输出。<template> <div class="icons"> <swiper> <swiper-slide v-for="(page, index) of pages" :key="index"> <div class="icon" v-for="item of page"原创 2021-02-28 20:15:40 · 131 阅读 · 0 评论 -
Vue项目首页-图标区域页面布局(7-4)
图标区域页面布局git pull //将线上推送到线下git checkout index-icons //切换到index-icons分支创建Icons.vue组件注册并使用组件代码如下<style lang="stylus" scoped> @import '~styles/varibles.styl' .icons overflow: hidden height: 0 padding-bottom: 50% .icon原创 2021-02-28 17:31:51 · 356 阅读 · 2 评论 -
Vue项目首页-首页轮播图(7-3)
首页轮播图我们要在真正的企业中使用到git的分支进行项目开发。1、分支使用新建分支在项目目录下右键打开gitbase。git pull //从线上将项目拉下来。git checkout index-swiper //进入index-swiper这个分支git status //查看本地分支...原创 2021-02-28 11:24:59 · 318 阅读 · 1 评论 -
Vue项目首页-iconfont的使用和代码优化(7-2)
iconfont的使用和代码优化将需要的图标放入购物车中,并进入购物车。添加至项目中。下载至本地。先打开iconfont.css,查看需要哪些文件,并将需要的文件放入。因为原本下载的时候引用的话是当前文件夹的引用,如今我修改了文件夹地址。如果你不喜欢用进制的形式去使用图标,可以把下面那些清除掉。因为我各个组件都需要用到iconfont.css,所以我放到main.js中。我们要引用图标,如何引用?代码是怎么来的呢?做一些代码上的修改。<style lang=原创 2021-02-27 04:13:58 · 260 阅读 · 0 评论 -
Vue项目首页-header区域开发(7-1)
header区域开发打开cmd,安装几个依赖包。cnpm install stylus --savecnpm install stylus-loader --save这两个包是干什么的呢?相当于把css样式当模块写。在index.html,中加入相关代码,防止页面被缩放和放大。创建文件夹,注册并导入组件。lang="stylus"导入我们的插件 scoped是指样式只对这个组件生效。样式解析<style lang="stylus" scoped>原创 2021-02-27 02:29:50 · 79 阅读 · 0 评论 -
Vue项目预热-项目代码初始化(6-6)
项目代码初始化因为main.js是项目入口,所以样式我们放在这里。安装cnpm install fastclick --save,用于解决移动端click事件延迟300ms和点击穿透问题将fastclick引入即可。原创 2021-02-26 04:02:40 · 147 阅读 · 0 评论 -
Vue项目预热-单页应用VS多页应用(6-5)
单页应用VS多页应用index.jsHome.vueList.vue <router-link to="/list">列表页</router-link> 做跳转页面原创 2021-02-25 22:59:11 · 68 阅读 · 0 评论 -
Vue项目预热-单文件与Vue中的路由(6-4)
单文件与Vue中的路由main.jscomponents: { APP } 相当于components: { APP:APP },是ES6的写法省略了。import App form ‘./App’,./代表的是在src文件下的。又因为App后面没有跟任何的后缀,其实相等于会默认的一些后缀里面选择。比如说有没有App.vue,App.js,App.json。App.vue这部分展示的代码就是App.vue那如果我将代码删除干净。怎么还会有多余的字?路由路由就是根据网址的不同,返回原创 2021-02-25 22:30:12 · 90 阅读 · 0 评论 -
Vue项目预热-项目代码(6-3)
Vue项目预热-项目代码README.md 是项目的说明文件package.json 是很多项目的依赖包信息都放在这index.html 是首页的模板文件.postcssrc.js 做一些配置需求.gitignore 这是上传git的一个文件,可以加入相关信息让上传的时候,另一些文件不上传.eslintrc.js 写代码的时候,查看一下写的是否标准,里面配置了一些规范,写代码必须按照里面的规范写。.eslintignore 在下目录可以不按照规范写/build//config//原创 2021-02-25 06:15:23 · 192 阅读 · 0 评论 -
Vue项目热部署-环境配置(6-1)
Vue项目热部署-环境配置先打开node.js的官网 https://nodejs.org/en/点击DOWNLOADSLTS是长期维护的一个版本,Current是最新版。我们一般选LTS选择自己对应的系统进行安装即可。傻瓜式下一步安装。cmd进入运行界面,通过两个命令查看是否安装成功。npm是node下载时自带的一个工具。注册码云https://gitee.com/ 用于放我们的代码,或者工作中更好的进行工作。创建项目。创建仓库,许可证一般选用MIT。仓库已原创 2021-02-25 04:39:00 · 7205 阅读 · 3 评论 -
Vue中的动画封装(5-7)
Vue中的动画封装这是一种比较推荐的一种封装方法。因为它把所以动画都封装到一个组件里面恩。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-wid原创 2021-02-25 00:59:25 · 68 阅读 · 0 评论 -
Vue中的列表过渡(5-6)
Vue中的列表过渡<transition-group>的意思就是list的时候会分出去多个,而group是组的意思。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" conten原创 2021-02-24 20:26:09 · 51 阅读 · 0 评论 -
Vue中多个元素或组件的过渡(5-5)
Vue中多个元素或组件的过渡mode="out-in"的意思是先出后进。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initi原创 2021-02-24 17:03:05 · 204 阅读 · 0 评论 -
Vue中的js动画与Velocity.js
Vue中的js动画与Velocity.js全js制作的动画。done,是回调函数,我设置的是4000毫秒后结束。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="widt原创 2021-02-24 15:19:11 · 102 阅读 · 0 评论 -
在Vue中使用过渡和动画(5-3)
在Vue中使用过渡和动画如果想引用第一次自定义动画的效果appear-active-class就得在前面加入appear。就是开第一次网页进去的自动效果<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="vie原创 2021-02-24 03:11:51 · 85 阅读 · 0 评论 -
在Vue中使用animate.css库(5-2)
在Vue中使用animate.css库运用到animate.css的库,使用一定得添加animated这个类即可。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="widt原创 2021-02-24 02:32:09 · 146 阅读 · 0 评论 -
Vue动画-Vue中CSS动画原理(5-1)
Vue动画-Vue中CSS动画原理你查看两种形式,你会发现.v的是默认的情况,也可以设定有名字绑定的动画效果。<style> .fade-enter, .fade-leave-to { opacity: 0; } .fade-enter-active, .fade-leave-active { transition: opacity 1s; }原创 2021-02-24 02:05:04 · 59 阅读 · 0 评论 -
动态组件与V-once指令(4-8)
动态组件与V-once指令使用v-once性能会更好。使用的时候就在Vue实例里加入template模板为内容即可。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="wi原创 2021-02-23 23:04:27 · 48 阅读 · 0 评论 -
作用域插槽(4-7)
作用域插槽其实就是原本要用props传值的,现在直接slot-scope=“props” 用插槽的方式就好。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=d原创 2021-02-23 19:36:48 · 57 阅读 · 0 评论 -
在Vue中使用插槽(4-6)
在Vue中使用插槽其实就是两者之间相绑定,就可以啦!<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1原创 2021-02-23 19:00:28 · 55 阅读 · 0 评论 -
非父子组件间的传值(4-5)
非父子组件间的传值原创 2021-02-23 17:22:01 · 48 阅读 · 0 评论 -
给组件绑定原生态事件(4-4)
给组件绑定原生态事件这种挺麻烦的,可以直接绑定原生态事件如下下<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-sc原创 2021-02-23 01:47:47 · 70 阅读 · 0 评论 -
组件参数校验与props特性(4-3)
组件参数校验与props特性default——默认值;required ture——就是必传 false就是不传;validator——设定传入值否则报错;<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="原创 2021-02-23 01:23:42 · 141 阅读 · 0 评论 -
父子组件间的数据传递(4-2)
父子组件间的数据传递数据的化就利用:count ="3"的值传到props:[‘count’]。还有就是组件内定义的函数方法传值到外,this.$emit(‘inc’, 2)。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <me原创 2021-02-23 00:01:30 · 49 阅读 · 0 评论