1、组件化开发
- 什么是组件？？？
- 组件就是零件，组成一个功能局部零件！
1.1、组件的注册
-
全局注册
Vue.component('组件名',{ template:"#id值" // 指定组件的模板 })// HTML 中 <template id="id值"> <!--模板只能有一个根标签！--> <div> 模板内容 </div> </template> -
局部注册（只能在当前整个Vue实例的范围内才可以使用）
new Vue({ el:"", data:{}, ...., components:{ // 带s 组件名:{ template:"#id值" } } }) -
使用组件
<组件名></组件名> -
注意点：组件命名如果驼峰命名法了，那么使用组件的时候需要变成中划线的模式
-
代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>06、组件介绍</title> <style> *{ margin:0;padding: 0; } .item{display: inline-block; width: 340px; border:2px solid blue;margin:10px } .tit{height: 46px; padding: 0 10px; line-height: 46px;background-color: #eee;} .cot{ min-height: 200px; padding: 10px; } .kaixin{ width: 100px;height: 100px;background-color: orange;} </style> <script src="./vue.js"></script> </head> <body> <!-- <div class="item"> <h3 class="tit">学员故事</h3> <div class="cot"> 内容 </div> </div> <div class="item"> <h3 class="tit">公司新闻</h3> <div class="cot"> 内容 </div> </div> <div class="item"> <h3 class="tit">公司荣誉</h3> <div class="cot"> 内容 </div> </div> --> <div id="app"> <item-box></item-box> <item-box></item-box> <item-box></item-box> <kaixin></kaixin> </div> <hr> <div id="app2"> <item-box></item-box> </div> <!-- 模板内容 --> <template id="mb"> <!-- 【注意点：】 组件的模板只能有一个根标签！ --> <div class="item"> <h3 class="tit">学员故事</h3> <div class="cot"> 内容 </div> </div> </template> </body> <script> // 全局 注册一个组件！ /* Vue.component('组件名',{ 组件的配置对象信息 }) */ Vue.component('itemBox',{ template:"#mb" // template指定这个组件的模板内容！ }) // 组件化开发： // 每个小功能模块都是独立的！维护起来简单！ 复用性高！ // 模块化、组件化、工程化、自动化 new Vue({ el:"#app", components:{ // 局部组件！ kaixin:{ template:"<div class='kaixin'>开心组件</div>" } } }) new Vue({ el:"#app2" }) </script> </html>
1.2、组件的配置选项
-
组件的data是一个函数，且这个函数返回一个对象! 这个对象就是组件的数据源！
-
template是组件的模板
-
其他配置选项和Vue实例一致。（computed,watch,components）
-
注意点：组件里面不能直接用外面的数据或事件函数，外部也不可以直接用里面的数据和事件函数。
-
代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>07、组件的配置选项</title> <style> .box{ display: inline-block; background-color: #eee; padding: 4px; } .box input{ width: 40px; text-align: center; } </style> <script src="./vue.js"></script> </head> <body> <div id="app"> <num-box></num-box> <num-box></num-box> <num-box></num-box> </div> <!-- 放在app外面 --> <template id="nums"> <div class="box"> <button @click="reudce">-</button> <input type="text" v-model="num"> <button @click="add">+</button> </div> </template> </body> <script> Vue.component('numBox',{ template:"#nums", data:function(){ // 组件的data是一个函数，且这个函数返回一个对象，返回的这个对象就是组件的数据源 return { num:1 } }, methods:{ add(){ this.num++ }, reudce(){ this.num--; } }, computed:{}, watch:{}, components:{} }) // 为什么组件的data是一个函数呢！ 因为组件的数据都是独立的！ 相同的组件，数据之间是不会有干扰的！ new Vue({ el:"#app", data:{ // Vue实例的data是一个对象！ msg:"11111" } }) </script> </html>
2、轮播图组件
2.1、功能分析：
- 自动播放
- 左右按钮切换图片 [1]
- 分页下标点击切换到对应图片 [2]
- 图片切换和下标一致关联 [3]
- 输入移入轮播区域自动播放暂停；离开区域，自动播放开始
2.2、轮播代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>08、轮播图组件</title>
<script src="./vue.js"></script>
<style>
*{
margin:0;padding: 0;
list-style: none;
}
.banner{
width: 540px;
height: 280px;
border:2px solid blue;
margin:20px auto;
position: relative;
overflow: hidden;
}
.banner .bd li,
.banner .bd li img{
width: 540px;
height: 280px;
}
.banner .bd{
width: 10000px;
position: relative; /* 相当于自己原来的位置定位！*/
left:0;
overflow: hidden;
background-color: #eee;
transition: all .3s linear;
}
.banner .bd li{
float: left;
}
.banner .btn{
width: 35px;
height: 70px;
background-color: rgba(0, 0, 0, .3);
text-align: center;
line-height: 70px;
font-size: 30px;
position: absolute;
top:50%;
color: #fff;
margin-top:-35px;
cursor: pointer;
}
.banner .btn:hover{
background-color: rgba(0, 0, 0, .8);
}
.banner .prev{ left:0; }
.banner .next{ right:0; }
.banner .hd{
position: absolute;
display: inline-block;
left: 50%;
transform: translateX(-50%); /*平移自身的百分之50%*/
bottom: 0;
background-color: orange;
padding: 3px 8px;
}
.banner .hd li{
display: inline-block;
width: 15px;
height: 15px;
border-radius: 50%;
background-color: #fff;
font-size: 10px;
text-align: center;
margin: 0 10px;
cursor: pointer;
}
.banner .hd li.active{
background-color: red;
color: #fff;
}
</style>
</head>
<body>
<div id="app">
<banner></banner>
<hr>
<banner></banner>
</div>
<template id="lunbo">
<!-- 主容器 -->
<div class="banner" @mouseenter="stop" @mouseleave="start">
<!-- 滑块部分 -->
<ul class="bd" :style="'left:-'+curIndex*540+'px'">
<li v-for="item in list">
<a :href="item.link">
<img :src="item.src" :alt="item.title">
</a>
</li>
</ul>
<!-- 分页器 -->
<ul class="hd">
<li v-for="(item,index) in list" @click="change(index)" :class="curIndex==index ? 'active':''">{{index}}</li>
</ul>
<!-- 左右按钮 -->
<span class="btn prev" @click="leftClick"><</span>
<span class="btn next" @click="rightClick">></span>
</div>
</template>
</body>
<script>
Vue.component('banner',{
template:"#lunbo",
data(){ // JS 里面方法的简写 方法名:function{} 简写 方法名(){}
return{
curIndex:0, // 当前下标！ 【核心！】
timer:"", // 定时器
list:[
{
link:"http://www.taobao.com",
src:"https://img.alicdn.com/simba/img/TB1wrEbX5cKOu4jSZKbSuw19XXa.jpg",
title:"别克"
},
{
link: "http://www.jd.com",
src: "https://img.alicdn.com/tfs/TB1G9x1Hbr1gK0jSZFDXXb9yVXa-520-280.png_q90_.webp",
title: "胶原蛋白"
},
{
link: "http://www.sina.com",
src: "https://img.alicdn.com/tfs/TB1KXpUHG61gK0jSZFlXXXDKFXa-520-280.jpg_q90_.webp",
title: "图书影像"
}
]
}
},
mounted:function(){ // 生命周期函数：【挂载完成之后，自动执行！】
this.autplay();// 调用自动播放
},
methods:{
// 右点击
rightClick(){
if(this.curIndex==this.list.length-1){
this.curIndex =0;
}else{
this.curIndex++;
}
},
// 左点击
leftClick(){
if(this.curIndex==0){
this.curIndex = this.list.length-1
}else{
this.curIndex--;
}
},
// 鼠标移入轮播区域
start(){
this.autplay();// 调用自动播放方法
},
// 数量离开轮播区域
stop(){
clearInterval(this.timer);
},
// 自动播放
autplay(){
var _this = this;
this.timer = setInterval(function () {
// console.log(_this)
// 点击一下右按钮！
_this.rightClick();
}, 3000);
},
// 分页器被点击了
change(idx){
this.curIndex = idx;
}
}
})
new Vue({
el:"#app"
})
</script>
</html>
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
