Vue系列——vue2封装swiper轮播组件

第三步：编写Banner.vue的JavaScript代码。

根据swiper的官方教程，我们需要实例化swiper。

1、导入swiper；

2、导入swiper的css；

3、通过获取图片数据listImg；

4、mounted类似react中的componentDidMount方法，实例化swiper必须等到dom渲染完成才能操作。

<script>

import Swiper from ‘swiper’;

import ‘swiper/dist/css/swiper.min.css’;

export default {

data(){

return {

//图片路径

listImg:[

{url:‘…/…/…/static/01.jpg’},

{url:‘…/…/…/static/02.jpg’},

{url:‘…/…/…/static/03.jpg’}

]

}

},

mounted() {

console.log(‘mounted’, this)

var mySwiper = new Swiper (‘.swiper-container’, {

loop: true,

pagination: {

el: ‘.swiper-pagination’,

},

// 如果需要前进后退按钮

navigation: {

nextEl: ‘.swiper-button-next’,

prevEl: ‘.swiper-button-prev’,

},

autoplay: {

disableOnInteraction: false,

},

})

}

}

</script>

第四步：写css样式

<style>

.swiper-container {width: 100%; height: 10rem;}

.swiper-wrapper {width: 100%; height: 100%; }

.swiper-slide { width: 100%;   height: 100%;}

.swiper-pagination-bullet { width:0.833rem;

height: 0.833rem;display: inline-block; background: #7c5e53; }

.swiper-slide img{width: 100%;height: 100%; }

JavaScript

• js的基本类型有哪些？引用类型有哪些？null和undefined的区别。

• 如何判断一个变量是Array类型？如何判断一个变量是Number类型？（都不止一种）

• Object是引用类型嘛？引用类型和基本类型有什么区别？哪个是存在堆哪一个是存在栈上面的？

• JS常见的dom操作api

• 解释一下事件冒泡和事件捕获

• 事件委托（手写例子），事件冒泡和捕获，如何阻止冒泡？如何组织默认事件？

• 对闭包的理解？什么时候构成闭包？闭包的实现方法？闭包的优缺点？

• this有哪些使用场景？跟C,Java中的this有什么区别？如何改变this的值？

• call，apply，bind

• 显示原型和隐式原型，手绘原型链，原型链是什么？为什么要有原型链

• 创建对象的多种方式

• 实现继承的多种方式和优缺点

• new 一个对象具体做了什么

• 手写Ajax，XMLHttpRequest

• 变量提升

• 举例说明一个匿名函数的典型用例

• 指出JS的宿主对象和原生对象的区别，为什么扩展JS内置对象不是好的做法？有哪些内置对象和内置函数？

• attribute和property的区别

• document load和document DOMContentLoaded两个事件的区别

• JS代码调试

• 开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】