html页面中引入vue.js如何在引入swiper.js

最新推荐文章于 2023-07-14 16:49:41 发布

长沙彭小黑

最新推荐文章于 2023-07-14 16:49:41 发布

阅读量1.4k

点赞数 1

分类专栏： HTML 文章标签： vue javascript html

本文链接：https://blog.csdn.net/qq_45032714/article/details/106065134

版权

HTML 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

首先还是按照常规的来 引入Vue.js和Swiper.js以及Swiper.css

直接上代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		
		<script src="js/vue.min.js" type="text/javascript" charset="utf-8"></script>
		
		<script src="js/swiper.min.js" type="text/javascript" charset="utf-8"></script>
		
		<link rel="stylesheet" type="text/css" href="css/swiper.min.css"/>
		
	</head>
	<body>

		<div id="All">
			
			<div class="swiper-container">
			  <div class="swiper-wrapper">
					<div class="swiper-slide">slider1</div>
					<div class="swiper-slide">slider2</div>
					<div class="swiper-slide">slider3</div>
			  </div>
			</div>
			
		</div>
		
		<script type="text/javascript">
			
			new Vue({
				el:"#All",
				
				data(){
					return{
						a:[1,2,3]
					}
				},
				
				methods:{
					
				}
					
			})
			
			var mySwiper = new Swiper('.swiper-container', {
				pagination: {
				    el: '.swiper-pagination',
					clickable :true,
				},
				autoplay: true,//可选选项，自动滑动
				loop : true,
				delay: 3000,
			})
			
			
		</script>
		
	</body>
</html>

过程中遇到一点小困难就是我一开始swiper实例在vue实例之前

也就是

<script type="text/javascript">
			
			var mySwiper = new Swiper('.swiper-container', {
				pagination: {
				    el: '.swiper-pagination',
					clickable :true,
				},
				autoplay: true,//可选选项，自动滑动
				loop : true,
				delay: 3000,
			})
			
			new Vue({
				el:"#All",
				
				data(){
					return{
						a:[1,2,3]
					}
				},
				
				methods:{
					
				}
					
			})
			
		</script>