一.Vue的Swiper使用

模拟接口后台获取图片

@click.native 如果组件使用点击事件无效 可以使用修饰符.native 转成原生事件

模拟异步请求获取图片

数据是异步的， 数据还没有到情况下，轮播图组件已经开始加载了，导致配置无缝轮播的时候效果出不来 怎么办？

 解决方法：使用条件判断，当数据还没有获取到的时候不加载轮播图，数据到了，再加载

使用refs的方法 必须要配置$nextTick获取到dom之后再执行slideTo方法 ， 在这里使用$nextTick方法 是因为组件是后来有数据的时候加载上去的，担当于更新了dom的值，这时候想获取dom就必须借助于$nextTick方法

 scoped 会阻止组件内的样式在全局使用 ，造成污染

二.less

1.安装less

1、npm i less --save-dev 把less源码安装到开发环境 -  less文件是通过less.loader.js 来编译成css最后加载到页面中的

2、npm i less-loader@6 --save-dev 安装less解析器 （★一定要指定版本）

3、npm i less -g 然后    lessc -v 查看版本

4、在main.js  import less from 'less'  Vue.use(less)

5、独立的vue文件需要引入less

2. 使用less

1.less中变量的使用 定义方式：@key:value; 使用方式：@key;

2.写减法的时候左右要加空格，否则会理解为杠-

3.多层嵌套+变量计算；

4.定义一个函数；不传参就是默认值

使用

可以创建一个文件这less 里面可以放一个类似全局的样式 以这个变量为基础 后面的样式做修改 然后再剩下的样式中引入 另外这个公共的样式谁想使用 就可以直接引入 比较维护和方便使用

在另外一个页面引入公共的样式 然后再次基础上对后面的标签做修改

背景图片的使用方式

嵌套使用 也可以运算 减号左右需要空格 运算符可以对高度、宽度、角度进行计算；

定义函数