Vue专题
追代码的小外星人
这个作者很懒,什么都没留下…
展开
-
Vue如何正确的使用Element组件库
其实官网上写的很清楚,怎么安装,怎么引用。但是初学者(比如我)即使按部就班也会出现各种bug。所以我决定在这里写下自己遇到的错误以及如何解决的。1.安装并引用Element① 安装npm i element-ui -S② 引用import Vue from 'vue'import ElementUI from 'element-ui'import 'element-ui/lib/theme-chalk/index.css'import App from './App.vue'Vue原创 2020-07-23 00:43:39 · 1080 阅读 · 0 评论 -
Vue中Toast最简单的方式!
使用过Mint-ui组件库的小伙伴都应该知道Toast这个玩意。小编刚刚用的时候,觉得一切的逻辑都是十分完美,但是就是不出来。下面看看具体的使用步骤1.安装并引入mint-ui① 安装方式npm i mint-ui -S② 引入方式引入的方式主要有两种,一种是全局引入,一种是按需引入。一般推荐按需引入。因为全局引入时会引入很多不必要的代码,使性能降低。import { Toast } from 'mint-ui';Vue.use(Toast)2.引入Toast尽管在前面的main.js原创 2020-07-22 16:37:30 · 1938 阅读 · 0 评论 -
Vue实现点击展开收起功能
为了节省大家宝贵的时间,先看看效果图是不是你们想要的吧。1.实现思路数据存放到showList数组中,通过控制showList元素的个数来决定显示的个数。未点击展示时,showList只存放一定数目的数据,当点击展开时,showList存放全部数据。① 数据部分 data(){ return{ literarys:["中国先当代随笔","名家作品","文集",'纪实文学',"中国古诗词","中国现当代诗歌", "外原创 2020-07-20 23:17:43 · 3421 阅读 · 0 评论 -
Vue使用懒加载加载图片
相信大家都知道,浏览器渲染会直接将页面中的所有元素都直接渲染出来,如果某个页面的图片比较多,而且网络不太好时,整个页面的加载就会很慢,为了提高性能,Vue中提供了一个插件 vue-lazyload 来实现图片的懒加载,下面是具体的使用步骤。1.安装插件npm install vue-lazyload --save-dev2.在入口函数main.js中引用插件import VueLazyLoad from 'vue-lazyload'Vue.use(VueLazyLoad)3.使用v-la原创 2020-07-18 16:07:56 · 342 阅读 · 1 评论 -
Vue使用Swiper插件在同一个页面制作多个轮播图
其实很简单,只需要为每个轮播图设置不同的class类和不同的options名即可。1.设置不同的class类和options名//轮播图1 // class="swiper-container swiper-pagination1" // :options="swiperOptionSwiper1"<swiper :options="swiperOptionSwiper1" class="swiper-container swiper-pagination1" ref="mySwipe原创 2020-07-18 10:23:50 · 1666 阅读 · 0 评论 -
Vue中使用Swiper制作轮播图
最近在用Vue制作移动端项目,碰到了轮播图的制作,接下来就让小编一步一步带大家动作制作吧。1.下载安装包cnpm install vue-awesome-swiper@3 --save 因为版本不兼容的问题,这里指定下载的版本是3.xxx。第一次下载的时候可以先不指定,等到轮播图没有结果时再重新指定版本下载。 下载完成之后,要先将swiper.css 和swiper.js放到自己的项目文件夹下,这两个文件的存放位置在 dist --> css -->swiper.css / di原创 2020-07-17 23:35:32 · 1537 阅读 · 0 评论