Vue实战笔记

配置环境, 使用stylus语法
下载stylus包

npm install stylus --save

npm install stylus-loader --save
Vue实战笔记_第1张图片
建立HomeHeader主页头部组件,
Vue实战笔记_第2张图片
iconfont的使用,~~~
Vue实战笔记_第3张图片
建立一个iconfont文件夹放入上面的4个文件,在上一级目录放入iconfont.css, 把css的路径修改

在main.js中引入

使用styl创建全局变量css, 使通用的css引用
Vue实战笔记_第4张图片
css的导入要加入@

把代码提交到git上的命令 git add .
git commit -m ‘项目描述’
Vue实战笔记_第5张图片

轮播图 使用github的 vue-awesome-swiper
Vue实战笔记_第6张图片
Vue实战笔记_第7张图片
Vue实战笔记_第8张图片

git checkout master 切换到master分支
git merge origin/index-swiper 合并swiper分支
git push 提交
Vue实战笔记_第9张图片
图标导航布局和翻页
Vue实战笔记_第10张图片

产品栏和周末栏
Vue实战笔记_第11张图片
Vue实战笔记_第12张图片
在主组件请求数据再分配到各个子组件
Vue实战笔记_第13张图片
在静态资源目录下存放数据文件
Vue实战笔记_第14张图片
在gitignore文件添加数据文件路径使文件不更新到git本地和线上仓库
Vue实战笔记_第15张图片
在配置文件下将请求的接口路径接到静态文件目录下的数据文件,在写
axios.get(/api/index.json)函数时改变请求的默认路径为api开头,而不是static
Vue实战笔记_第16张图片
Vue实战笔记_第17张图片
添加city路由,创建city页面,再增加页面的各个组件
Vue实战笔记_第18张图片
页面滚动插件下载使用
Vue实战笔记_第19张图片
右侧字母组件

垂直居中
Vue实战笔记_第20张图片

使用watch监听按得字母是哪个,定一个参数ref=key来接收dom到element上,获取的是数组,所以在后面加个[0],再scrollToElement跳转到该元素位置
Vue实战笔记_第21张图片

把对象要取的A B C的值push到数组letters中,以便计算距离和拖动

Vue实战笔记_第22张图片
添加touchstart开始移动结束方法,
计算字母A到头部的距离和鼠标所在位置到头部距离,再鼠标位置距离减去字母的距离获得当前所在字母的所在dom元素index,
Vue实战笔记_第23张图片
Vue实战笔记_第24张图片

性能优化 获取到数据后,cityies值才发生变化,Alphabet才被渲染时,
当往ulphabet传送数据时,重新渲染,那么updated会被执行,页面已展示字母列表内容,获取A字母所在的dom的top的值就没有问题
Vue实战笔记_第25张图片
节流限制一下函数的频率,如果正在做这件事情,让他延迟16毫秒或自己设定的秒数再去执行,假设16毫秒之间又执行了滑动,那么把上一次的操作清楚掉,重新执行这一次的事情

Vue实战笔记_第26张图片
搜索栏逻辑,节流限制, 定义一个数组result,循环cities,再对cities[i]进行循环,当数据里的spall或者name的值与keyword输入的值匹配时,把值添加到数组result中,再把result返回到list数组,循环数组显示搜索数据

如果搜索栏为空,则把list置为空返回,边隐藏搜索区内容v-show,当不等于数据的长度或0时v-show=!this.list.length,显示没找到匹配
Vue实战笔记_第27张图片
把this.list.length添加到计算函数中,返回一个函数
Vue实战笔记_第28张图片
使用vuex实现home与city组件的数据共享,vuex的dispatch
Vue实战笔记_第29张图片

Vue实战笔记_第30张图片

Vue实战笔记_第31张图片
改变state没有异步操作,操作也简单,组件没必要dispatch调用action进行转发,直接用commit调用mutations,vuex的action可以删除

state公用数据,使用localStorage实现页面数据缓存, z使用dispatch
try catch 在隐私模式时防止本地缓存报错
Vue实战笔记_第32张图片
可以对defaultCity和mutations进行拆分

Vue实战笔记_第33张图片
Vue实战笔记_第34张图片
Vue实战笔记_第35张图片

使用vuex高级API {{mapxxxx}} 把city数据映射到计算属性xxxx如:currentCity中,就可以直接调用this.currentCity

Vue实战笔记_第36张图片
Vue实战笔记_第37张图片

keep-alive优化网页性能,使同样的数据ajax来回请求只请求一次,
Vue实战笔记_第38张图片
Vue实战笔记_第39张图片
选择特定城市是要跳到特定的城市页面, 在api接口后加上city
Vue实战笔记_第40张图片

使用keep-alive时会多出activated生命周期,在里面j也会执行的生命周期activated 函数 ,每次重新加载页面会加载,
监听最后请求与当前城市是否相同,如果相同,则不加载,不相同,则把选择的页面重新加载
Vue实战笔记_第41张图片

第三屏,创建一个详情页的路由

Vue实战笔记_第42张图片
创建全局组件gallary对banner图片进行轮播
Vue实战笔记_第43张图片

paginationType,轮播数目显示的类型,fraciton是数字,
observeParents,当父级页面改变时,重新渲染页面,
observe,当页面改变时,同上
Vue实战笔记_第44张图片
bannner的样式
Vue实战笔记_第45张图片

对头部组件使用全局监听事件来改变头部的渐变
Vue实战笔记_第46张图片

详情页列表, 使用递归组件,自己调用自己
Vue实战笔记_第47张图片
Vue实战笔记_第48张图片
把接口指向本地的php服务器

Vue实战笔记_第49张图片
本地服务器文件地址
sudo apachectl restart 重启
sudo apachectl start启动
sudo apachectl stop 停止
Vue实战笔记_第50张图片
Vue实战笔记_第51张图片

在package.json 的dev里加上–host 0.0.0.0就可以使用本机IP地址访问该网页
Vue实战笔记_第52张图片

任何组件的异步使用,

Vue实战笔记_第53张图片
至少当主的父组件达到1Mb的时候才需要组件的异步加载
Vue实战笔记_第54张图片

你可能感兴趣的:(Vue实战笔记)