Vue.js
@凌晨三点半
人生没有重来,过好当下的生活
展开
-
关于el-transfer样式错乱的问题
刚将el-transfer放置组建中的时候是这样的:但是文档中是这样的:在各方面代码都核对了一遍,并没有出错。 无奈只能检查元素一个个看样式了。然后我就发现了这两个:1.文本没有左对齐的问题定位:哦 原来是项目初始化的时候 App.vue的样式没有完全清除导致2. 左右穿梭控制按钮不对齐:收到reset.css的影响导致。最后只需要在el-transfer组件下添加两个样式即可(stylus):...原创 2021-12-03 14:56:30 · 1778 阅读 · 0 评论 -
启动Vue项目(开发模式)报错API fatal error handler returned after process out of memory
启动Vue项目时(开发模式)报错API fatal error handler returned after process out of memory解决办法:电脑重启或注销下。原创 2020-05-19 00:18:44 · 2029 阅读 · 0 评论 -
Vue页面刷新后store数据丢失
原因:store本意不是用来存储数据的,而是存储组件状态。但是因为存取速度比sessionStorage快。所以还是有人用来存数据。比如我。那么这个重置的问题要咋搞呢?解决办法:使用window的beforeunload事件将store中的数据存储到sessionStorage中。然后再声明周期函数created()中将session的数据替换掉vue中的store数据不过这里有一个...原创 2020-02-21 15:28:28 · 1378 阅读 · 0 评论 -
Vue移动端better-scroll组件中的@click事件失效
今天项目做完了,在手机上测试。发现在better-scroll组件中的所有@click事件都失效了。网上查了下 是在建立BScroll对象的时候需要添加以下参数即可解决这个问题this.scroll = new BScroll(this.$refs.wrapper, { scrollX: true, mouseWheel: true, ...原创 2020-02-21 14:15:41 · 920 阅读 · 0 评论 -
Vue 2.5 学习笔记 8.6 兄弟组件数据传递
今天的教程内容有点多 我慢慢缕下要实现的功能: 右边的字母表点击后右边的城市列表页会自动切换到相对应的首字母去所以列表组件需要知道右边的字母列表的点击事件所对应的元素字母。这就需要兄弟组件的数据传递的实现了1. 兄弟组件间的数据传递。因为层级结构简单。所以采用的是子组件传递数据给父组件,然后父组件再传递数据给子组件先说子组件将点击事件发生后对应的字母传递给父组件。<t...原创 2019-03-29 14:08:33 · 259 阅读 · 0 评论 -
Vue2.5 学习笔记8.1 城市页面 router
主页写好了,接下来就是写城市列表页1. 先去src/router/index.js中添加新的url路径此路径表示 /city路径指向 src/pages/city/City.vue中的Cityimport Vue from 'vue'import Router from 'vue-router'import Home from '@/pages/home/Home'impo...原创 2019-03-22 18:18:07 · 203 阅读 · 0 评论 -
Vue2.5学习笔记 9.1 详情页的Banner
从这篇笔记开始进入到详情页的开发:1. 首先建立路由,main.js关联Detail页面// Home/Recommend.vue<template> <div> <div class="title">热销推荐</div> <ul>//这里是将li标签携程router-link标签。也可以在<li...原创 2019-04-04 13:34:36 · 736 阅读 · 0 评论 -
Vue2.5 学习笔记9.2 轮播图预览样式
新建一个预览图片的组件:因为有可能在其他页面上会用到,所以做成一个独立的组件供调用为了调用方便,省的些那么长路径 build/webpack.base.conf.js中设置好别名 resolve: { extensions: ['.js', '.vue', '.json'], alias: { 'vue$': 'vue/dist/vue.esm.js...原创 2019-04-04 14:57:40 · 399 阅读 · 0 评论 -
Vue2.5 学习笔记 8.4 城市列表页字母滚动条
先展示下预期效果:在做这个之前要先解决一个问题。因为在上一个学习章节中将整个列表组件添加了这两个样式: .list overflow: hidden position: absolute这导致了页面无法滚动。解决这个问题的办法是添加第三方滚动组件:better-scroll 这个组件能够帮我们实现上下滚动页面的样式https://github.com/u...原创 2019-03-27 14:06:44 · 316 阅读 · 0 评论 -
Vue学习笔记 7.9 将获取到的Ajax展示到页面上(父子组件传递)
首先先展示下json的数据city,swiperList部分iconList部分recommendList部分weekendList部分好了 现在将各个组件的数据全部替换成获取到的json数据1.首先在Home.vue中分发数据到各个子组件中:<template> <div>//3.将各个变量传递给各个子组件 ...原创 2019-03-22 14:02:23 · 360 阅读 · 0 评论 -
Vue2.5 学习笔记 7.8 Ajax获取数据
这次是讲解如何通过Ajax获取数据1. 首先要安装axiosnpm install axios --save2. 在Hme.vue中导入 axios,并且在HTML加载完成后使用生命周期函数 mounted加载Ajax数据 methods: { getHomeInfo () { axios.get('/api/index.json') .t...原创 2019-03-22 13:09:06 · 176 阅读 · 0 评论 -
Vue2.5 学习笔记 8.3 城市列表
1.上代码//分3个模块,当前城市, 热门城市,字母顺序<template> <div class="list"> <div class="area"> <div class="title border-topbottom">当前城市</div> <div class="button-l...原创 2019-03-25 14:27:15 · 120 阅读 · 0 评论 -
Vue 2.5 学习笔记 8.2 城市搜索框
跟添加Header.vue的添加方式一样。没啥好写的 就把组件代码贴出来吧。= =<template> <div class="search"> <input class="search-input" type="text" placeholder="输入城市名或拼音"> </div></template>...原创 2019-03-25 13:12:08 · 158 阅读 · 0 评论 -
Vue学习笔记 7.7 周末去哪儿
<template> <div> <div class="title">周末去哪儿</div> <ul> <li class="item border-bottom" v-for="item of recomendList" :key="item.id...原创 2019-03-21 13:45:38 · 104 阅读 · 0 评论 -
Vue7.6学习笔记 热门推荐
上代码:<template> <div> <div class="title">热销推荐</div> <ul> <li class="item border-bottom" v-for="item of recomendList" :key="it...原创 2019-03-20 14:02:10 · 167 阅读 · 0 评论 -
Vue学习笔记7.5 icon组件的分页
首先去Swiper.vue组件中吧Swiper标签复制过来用 <swiper> <swiper-slide> <div class="icon"> <div class="icon-img"> <img class='icon-img-content' src=原创 2019-03-15 14:02:52 · 259 阅读 · 0 评论 -
Vue2.5 学习笔记 9.6 使用Ajax获取动态数据
1. 获取AJAX数据模拟后端传过来的JSON获取数据:<script>import DetailBanner from './components/Banner'import DetailHeader from './components/Header'import DetailList from './components/List'import axio...原创 2019-04-10 14:08:11 · 345 阅读 · 0 评论 -
Vue2.5学习笔记 8.7城市列表页新能优化
主要优化2个方面1. 反复计算顶部与A字母标签的距离 这个抽取出来只在页面加载的时候计算一次即可 data () { return { touchStatus: false,// 这里添加一个变量 startY: 0, } },// 页面一开始的时候cities变量是空值。然后通过ajax获取到数据的时候并加载至页面的时候//触发生命周...原创 2019-04-01 13:42:24 · 136 阅读 · 0 评论 -
Vue 2.5 学习笔记 8.5 城市列表页数据改成AJAX获取
没啥内容 就是把之前首页的数据获取重新做了一遍。直接上代码1. 通过axios获取数据://City.vue<script>import axios from 'axios'import CityHeader from './components/Header'import CitySearch from './components/Search'import Ci...原创 2019-03-28 13:49:53 · 119 阅读 · 0 评论 -
谷歌浏览器插件安装Vue插件 ,Vue Devtools
github下载:https://github.com/vuejs/vue-devtools下载好后解压缩进入vue-devtools-master工程目录执行npm install 或者有淘宝版的执行 cnpm install然后执行 npm build然后到工程目录下的shell/chrome/manifest.json中修改:"persistent": true...原创 2019-06-09 09:44:31 · 18502 阅读 · 0 评论 -
Vue项目设置能够局域网访问
1. 项目根目录下的package.json中找到// 添加了 “--host 0.0.0.0”"dev": "webpack-dev-server --host 0.0.0.0 --inline --progress --config build/webpack.dev.conf.js",2. 关闭电脑防火墙根据自家网络类型关闭相应的防火墙就可以了 我家是专用网络(当时随便选...原创 2019-06-14 01:13:18 · 5372 阅读 · 4 评论 -
Vue 新建项目的各个选项
在执行 vue init webpack 项目名之后会有很多选项让你设置,这里列下:Project name ;项目名称Project description (A Vue.js project) 项目描述 (A Vue.js project);Author (XXXX XXXX@XXX.com) ;XXXX@XXX.com(项目作者);Vue build ❯ Runtime + Com...原创 2019-06-14 01:04:46 · 4303 阅读 · 1 评论 -
Vue2.5 学习笔记 9.5递归组件的使用
1. 展示多级列表数据(多层JSON数据的时候就会用到组件递归调用。不然每个都写一次for 会恶心死的)先新建个list组件:<template> <div> <detail-banner></detail-banner> <detail-header></detail-header>//...原创 2019-04-09 14:05:19 · 171 阅读 · 0 评论 -
Vue2.5 学习笔记8.9 使用Vuex实现数据共享
现在要实现的功能是在城市列表页无论是点击列表中的城市还是点击搜索栏搜索出来的城市。都能够自动跳转到首页。并且将所点击的城市名带到首页。现在的情况是 City.vue和Home.vue是两个独立的组件。他们没有公用的父级组件(App.vue那个不算)可以用BUS总线的技术进行传递。不过我这里说的是另一种方法: VuexVuex--数据层框架官方文档:https://vuex.vuej...原创 2019-04-03 13:47:53 · 289 阅读 · 0 评论 -
Vue2.5学习笔记 9.4 全局事件解绑定
在上一节的教程中说道通过window.addEventListener来板顶scroll事件。这个表面上看起来是没啥问题。但其实是有问题的。因为他绑定的是window全局事件。也就是说 不仅仅在当且页面会触发,在别的页面也有可能触发 比如说这事件在页面滑动的时候输出scroll。 在当前页面是这么输出。返回到首页后,然后会在输出所以 要做全局事件的解绑定。添加一下生命周期函数即可...原创 2019-04-09 13:22:43 · 377 阅读 · 1 评论 -
Vue2.5 学习笔记 9.3 详情页的header渐隐渐现
效果是 在详情页的页面内容往下拉的时候 顶部的标题栏能够渐渐的显现出来开始:1. 建子组件detail/components/Header.vue然后那些吧子组件加到Detail.vue的步骤就不写了直接把代码贴出来 在代码中加注释<template> <div>// 这部分是左边的那个小箭头 用于返回到首页的 <rou...原创 2019-04-08 14:32:52 · 291 阅读 · 0 评论 -
Vue2.5 学习笔记 8.8 城市列表页的搜索功能实现
嗯。。看来教程还是有说搜索功能的嘛 嘿嘿好了 直接上内容:1.首先做一个搜索结果显示的样式:<template>// 外出需要用一个div包裹下 因为template只允许子标签只有一组 <div> <div class="search"> <input v-model="keyword" class="sea...原创 2019-04-02 13:07:56 · 446 阅读 · 0 评论 -
Vue2.5学习笔记 10.4 上线联调 组件异步加载
打包后 的内容:正常默认的情况下是 第一次打开页面的时候会把所有的文件全部下载好。这样切换到其他页面的时候就不需要再次发送请求下载数据了。这有一个问题 项目小的时候OK 项目大的时候会导致第一次加载变慢。所以如果有需要 可以将组件加载改成异步的首先进入router/index.js中修改:import Vue from 'vue'import Router f...原创 2019-04-11 14:18:16 · 198 阅读 · 0 评论 -
Vue2.5学习笔记10.3 打包交给后端
执行npm run build命令完成后会生成将这两个目录丢给后端就完事了。 不过有要求 必须要放在根目录下 也就是说 XXX:80/ 这个根目录如果不想这样想单独建一个目录然后给访问那就需要去修改下 build: { // Template for index.html index: path.resolve(__dirname, '....原创 2019-04-11 13:54:41 · 554 阅读 · 0 评论 -
Vue2.5学习笔记 前后端联调 10.1-10.2
1.请求地址修改在本地开发的时候 配置文件是这样: // Travel/config/index.js assetsSubDirectory: 'static', assetsPublicPath: '/', proxyTable: { '/api': { target: 'http://localhost:8...原创 2019-04-11 13:46:49 · 286 阅读 · 0 评论 -
Vue2.5 学习笔记 9.7 动画效果
这节教程的实现: 将上次那个detail/banner.vue的图片预览与取消预览的动作做动画效果过渡。1. 新建fadeanimation组件,有可能别的组件也会用到 所以坐公共// FadeAnimation.vue<template>// 通过包裹插槽的形式实现动画效果 <transition> <slot></slo...原创 2019-04-11 13:23:11 · 172 阅读 · 0 评论 -
Vue学习笔记7.4 icon区域的图标样式笔记(前端渣,咳~只能靠烂笔头了)
图标区域的组件写出来大概是这个样子:首先, 新建Icons.vue在pages/home/components/中然后在Home.vue中添加组件即可<template> <div> <home-icons></home-icons> <div>test</div> ...原创 2019-03-15 12:50:46 · 518 阅读 · 0 评论 -
Vue学习笔记 项目搭建7.2 iconfont和全局CSS样式,路径替代符
1. 字体图标去https://www.iconfont.cn挑,然后下载下来这几个字体单独放在iconfont目录中(目录名字自己取 我是取iconfont)然后将iconfont.css和iconfont目录放到项目中的专门放置样式的地方然后在main.js中导入iconfont.css 这样每个子组件都能用import Vue from 'vue'import...原创 2019-02-26 14:07:38 · 685 阅读 · 0 评论 -
Vue学习笔记4.2 父子组件传递
<!DOCTYPE html><html><head> <title>父子组件传递</title> <meta charset="utf-8"> <script src="vue.js"></script></head&原创 2019-01-22 13:22:20 · 176 阅读 · 0 评论 -
Vue学习笔记4.1 is方法,全局组件的data, Vue中操作DOM元素
1.is方法看如下情况<body> <div id="root"> <table> <row></row> <row></row> </table> </div></body>原创 2019-01-21 13:52:33 · 683 阅读 · 0 评论 -
Vue学习笔记3.8 列表渲染 v-for
基本的v-for使用方式:<!DOCTYPE html><html><head> <title>列表渲染</title> <script src="vue.js"></script></head><body> &原创 2019-01-15 14:41:29 · 278 阅读 · 0 评论 -
Vue学习笔记3.7 v-if v-show v-if-else
今天学习了 Vue的条件渲染1. v-if<div v-if="content">helloworld</div><script type="text/javascript"> var vm = new Vue({ el:'#app', data: { content: true } })</script>...原创 2019-01-15 13:39:03 · 195 阅读 · 0 评论 -
Vue学习笔记 绑定样式的4种方法
通过Vue绑定样式来做到切换:第一种 <!DOCTYPE html><head> <title>样式自定义</title> <script type="text/javascript" src="vue.js"></script> <style> .Cha原创 2019-01-14 14:16:27 · 132 阅读 · 0 评论 -
Vue学习笔记4.5 非父子组件之间的数据传递(bus机制/订阅者模式/观察者模式)
看注释 有步骤<!DOCTYPE html><html><head> <meta charset="utf-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>非父子组件数据传递&原创 2019-01-24 14:02:21 · 134 阅读 · 0 评论 -
Vue改变(或增加)数组或对象中的数据---set()
在之前说过 改变对象的数据只能改变他的引用,其实还有一个set()的方法可以操作:这是3.8的代码<!DOCTYPE html><html><head> <title>列表渲染</title> <script src="vue.js"></script></he原创 2019-01-18 13:05:45 · 7382 阅读 · 0 评论