1.VUE的接口获取swiper轮播：
在public文件下创建一个data文件夹再创建imgJson.json文件：
{
"imglist":[
{
"imgurl":"https://img2.baidu.com/it/u=2741764822,31952901&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500",
"url":"www.baidu.com"
},
{
"imgurl":"https://img0.baidu.com/it/u=2531828205,2557062548&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=281",
"url":"www.baidu.com"
},
{
"imgurl":"https://img0.baidu.com/it/u=2752337540,3600841572&fm=253&fmt=auto&app=138&f=JPEG?w=1058&h=500",
"url":"www.baidu.com"
},
{
"imgurl":"https://img1.baidu.com/it/u=1054244600,3783921739&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=250",
"url":"www.baidu.com"
}
]
}
main.js里全局引用一下：
安装教程在上篇
import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import VueAwesomeSwiper from 'vue-awesome-swiper'
import 'swiper/css/swiper.css'
/* 导入less */
import less from 'less'
/* 把less当作组件引入 */
Vue.use(less)
Vue.config.productionTip = false
Vue.use(VueAwesomeSwiper)
new Vue({
router,
store,
render: h => h(App)
}).$mount('#app')
components下创建一个轮播组件：
<template>
<div id="app">
<!-- 因为在main.js中全局引入过了，所以组件可以直接拿来用 -->
<swiper ref="mySwiper" :options="swiperOptions" v-if="imgList.length">
<!-- @click.native 如果组件使用点击事件无效 可以使用修饰符.native 转成原生事件 -->
<swiper-slide
v-for="(v, i) in imgList"
:key="i"
@click.native="goto(v.url)"
>
<img :src="v.imgurl" width="100%" height="100%" />
</swiper-slide>
<div class="swiper-pagination" slot="pagination"></div>
</swiper>
</div>
</template>
<script>
import axios from "axios";
export default {
name: "App",
created: function () {
/* 数据是异步的， 数据还没有到情况下，轮播图组件已经开始加载了，
导致配置无缝轮播的时候效果出不来 怎么办？*/
/* 解决方法：使用条件判断，当数据还没有获取到的时候不加载轮播图，
数据到了，再加载 */
axios.get("/data/imgJson.json").then((res) => {
this.imgList = res.data.imglist;
/* 使用refs的方法 必须要配置$nextTick获取到dom之后再执行slideTo方法 */
/* 在这里使用$nextTick方法 是因为组件是后来有数据的时候加载上去的，
担当于更新了dom的值，这时候想获取dom就必须借助于$nextTick方法 */
/* 在异步操作里面slideTo第一个参数表示第几张 */
this.$nextTick(()=>{
this.$refs.mySwiper.swiper.slideTo(2,1000,false)
})
});
},
methods: {
goto: function (url) {
/* console.log(url) */
/* window.open会打开一个新的窗口 */
window.open(url);
/* location.href在当前页跳转 */
/* location.href = url; */
},
},
data() {
return {
imgList: [],
swiperOptions: {
effect:'fade',/* cube */
pagination: {
el: ".swiper-pagination",/* notNextTick: true, */
},
loop:true,
autoplay: {
delay: 1000,
/* 如果设置为true，当切换到最后一个slide时停止自动切换。（loop模式下无效）。 */
stopOnLastSlide: false,
/* 如果设置为false，用户操作swiper之后自动切换不会停止，每次都会重新启动autoplay。 */
disableOnInteraction: false,
},
},
};
},
mounted() {
/* console.log("Current Swiper instance object", this.$refs.mySwiper.swiper); */
/* this.swiper.slideTo(3, 1000, true); */
// console.log(this.$refs.mySwiper.swiper.slideTo(1,1000,false) )
},
};
</script>
<style scoped>
/* scoped 会防止组件内的样式污染全局 也会优先使用组件内的样式 */
.swiper-container {
width: 700px;
height: 500px;
border: 1px solid red;
}
.red{
color: red;
}
</style>
App.vue中引入轮播组件：
<template>
<div id="app">
<h1 class="red">轮播图</h1>
<my-swiper />
</div>
</template>
效果图：
2.安装使用less：
1、npm i less --save-dev 把less源码安装到开发环境
/* less文件是通过less.loader.js 来编译成css最后加载到页面中的 */
2、npm i less-loader@6 --save-dev 安装less解析器 （★一定要指定版本）
3、lessc -v 查看版本
4、在main.js import less from 'less' Vue.use(less)
5、独立的vue文件需要引入less <style lang="less"></style>
实际应用:
App.vue文件：
<template>
<div id="app">
<h1 class="red">轮播图</h1>
<my-swiper />
<div class="box">
<h1>欢迎使用less</h1>
</div>
<div class="box1">
<div class="box2">
<div class="box3">
</div>
</div>
</div>
<ul>
<li v-for="(v,i) in 4" :key="i">{{v}}</li>
</ul>
<div class="a1">我是a1</div>
<div class="a2">我是a2</div>
</div>
</template>
<script>
/* 这样也能引入 */
/* import './less/common.less' */
import MySwiper from '@/components/MySwiper.vue'
export default{
components:{
MySwiper
}
}
</script>
<style scopd lang="less">
/* 使用导入式引入样式库 */
@import url(./less/common.less);
</style>
src文件下创建less文件夹，创建两个less文件：
common.less文件：
/* 可以在less中引入别的less文件 从而提高代码复用 */
@import url(./init.less);
/* 定义一个函数 */
.test(@color:red,@size:14px){
background: @color;
font-size: @size;
}
.a1{
.test()
}
.a2{
.test(@color:@colorGreen,@size:30px)
}
ul{
width: @k;
height: @k;
background: @colorRed;
}
li:nth-of-type(1){
/* 加减法的时候左右一定要空格,否则会理解为横杠- */
width: @k - 20px;
background: @colorGreen;
}
.box1{
width: @k*2;
height: @k*2;
background: @colorRed;
.box2{
width: @k;
height: @k;
background:@colorGreen;
.box3{
width: @k/2;
height: @k/2;
background: @colorBlue;
}
}
}
.box{
width: 200px;
height: 200px;
border: 1px solid red;
/* url里面必须要用引号 */
background: url("@{imgurl}logo.png") no-repeat;
h1{
color: @colorRed;
}
}
init.less文件：
*{margin: 0;padding: 0;}
/* 使用变量 可以嵌套 图片路径也可以使用变量*/
@colorRed:red;
@colorGreen:green;
@colorBlue:blue;
@imgurl:'../assets/';
@k:100px;
效果图：
★☆使用手册：
1、npm i less --save-dev 把less源码安装到开发环境
/* less文件是通过less.loader.js 来编译成css最后加载到页面中的 */
2、npm i less-loader@6 --save-dev 安装less解析器 （★一定要指定版本）
3、lessc -v 查看版本
4、在main.js import less from 'less' Vue.use(less)
5、独立的vue文件需要引入less <style lang="less"></style>
less中变量的使用 定义方式：@key:value; 使用方式：@key;
字符串拼接变量使用方式 @img:'./img/'; background:url("@{img}1.png")
写减法的时候左右要加空格，否则会理解为杠-
多层嵌套+变量计算；
<div class="box1">
<div class="box2">
<div class="box3"></div>
</div>
</div>
<style lang="less">
@k:100px;
.box1{
width: @k;
height:@k;
background: red;
.box2{
width: @k/2;
height:@k/2;
background: green;
.box3{
width: @k/3;
height:@k/3;
background: blue;
}
}
}
</style>
混合 = 函数
<div class="box1">我是box1</div>
<div class="box2">我是box2</div>
<style lang="less">
//定义一个函数；
.test(@color:red,@size:14px){
background: @color;
font-size:@size;
}
.box1{
// 不传参，使用默认的；
.test()
}
.box2{
// 给函数传参；
.test(@color:green,@size:30px)
}
</style>
运算符
可以对高度、宽度、角度进行计算；
<ul>
<li v-for="item in 4">{{item}}</li>
</ul>
<style lang="less" scoped>
@k:10px;
ul{
list-style: none;
li{
border:1px solid ;
margin:10px 0 ;
}
li:nth-child(1){
width: @k + @k;
height:@k;
}
li:nth-child(2){
width: @k -5px;
height:@k;
}
li:nth-child(3){
width: @k * @k;
height:@k;
}
li:nth-child(4){
width: @k / 2;;
height:@k;
}
}
</style>
