随笔分类 -  编程语言 / Vue

localStorage的使用和vuex的拆分
摘要：问题1：在隐身模式、或者用户未启用的情况下，使用localStorage可能会导致浏览器直接报错，怎么办？ 方法：使用try-catch包裹 代码示例： 问题2：当vuex的store.js变得复杂起来时，代码看着会很庞大 方法：将state、mutations、actions拆分出去 代码示例： 阅读全文
posted @ 2019-10-14 09:31 早安帆 阅读(336) 评论(0) 推荐(0)
vuex实现数据共享
摘要：1.store.js结构 2.main.js引入 3.组件使用State的数据 4.用dispatch调用Actions，Actions用commit调用Mutations修改数据 5.数据简单，跳过Actions，直接到Mutations 阅读全文
posted @ 2019-10-12 16:34 早安帆 阅读(453) 评论(0) 推荐(0)
vue兄弟组件传值
摘要：1.本组件标签上@绑定一个函数，该函数形参为e，e.target为自身DOM 2.利用this.$emit('事件名',带的参)向外触发函数，并带上参 3.父组件监听这个事件，同样是@绑定函数的方式 4.父组件用：给目标组件以属性的方式传值 5.目标组件用props接收 6.目标组件监听数据的变化， 阅读全文
posted @ 2019-10-12 14:52 早安帆 阅读(341) 评论(0) 推荐(0)
vue中使用better-scroll滚动条插件
摘要：应用场景： overflow: hidden会让超出的部分隐藏，并且无法拖拽，所以可使用插件让长列表限定的区域滚动拖拽。 参考：https://zhuanlan.zhihu.com/p/27407024 1.去github搜素better-scroll，在终端安装： 2.html结构 BetterS 阅读全文
posted @ 2019-10-12 11:27 早安帆 阅读(3734) 评论(0) 推荐(0)
vue-router的使用
摘要：1.打开router.js(vue3)，或router文件夹下的index.js(vue2) 2.在对应的引入路径下创建文件 3.页面跳转，找到对应的按钮，添加代码（在标签中使用） 4.在js函数中使用 阅读全文
posted @ 2019-10-11 17:18 早安帆 阅读(139) 评论(0) 推荐(0)
使用axios发送ajax请求
摘要：1.安装 2.在Home.vue中引入 import axios from 'axios' export default { name: 'Home', components: { HomeSwiper, HomeIcons, HomeRecommend, HomeWeekend }, method 阅读全文
posted @ 2019-10-11 17:01 早安帆 阅读(1099) 评论(0) 推荐(0)
vue-awesome-swiper轮播插件
摘要：1. github上搜索vue-awesome-swiper 2. readme中有安装方法，建议在插件名后@版本号，使用稳定的老版本 npm install vue-awesome-swiper@x.x.x --save 3. 在项目main.js中引入 4.创建单文件组件Swiper.vue（单 阅读全文
posted @ 2019-10-06 13:18 早安帆 阅读(787) 评论(0) 推荐(0)
webpack之给目录起别名
摘要：1. 配置文件目录： build>webpack.base.config.js: 2. 于是一些长路径，如： import '../../../../../../../styles/iconfont.css' --> import 'styles/iconfont.css' @import '~@/ 阅读全文
posted @ 2019-10-05 22:42 早安帆 阅读(591) 评论(0) 推荐(0)
stylus快速上手
摘要：定义变量，比如一键切换主题色 1.创建xxx.styl文件，定义变量 2.在其他页面的style区域里，先引入这个xxx.styl文件 层级嵌套形式的书写样式，而不必像css一样加一堆的父级限制，直接嵌进父级 .header display:felx height:80px width:100px 阅读全文
posted @ 2019-10-05 22:41 早安帆 阅读(221) 评论(0) 推荐(0)
iconfont的使用
摘要：1. 下载下来的压缩文件中，字体文件.eot.svg.ttf.woff和iconfont.css放进项目，其它文件没用 2. 在全局main.js引入iconfont.css 3. 然后在需要图标的页面相应的地方插入class="iconfont"即可 阅读全文
posted @ 2019-10-05 22:40 早安帆 阅读(308) 评论(0) 推荐(0)