Vue.js-Day02-PM【组件化开发（全局注册组件、局部注册组件、案例）、组件的配置选项、轮播图实例（左右切换按钮、底部导航栏、定时器、鼠标移入-图片静止）】
生活随笔
收集整理的這篇文章主要介紹了
Vue.js-Day02-PM【组件化开发（全局注册组件、局部注册组件、案例）、组件的配置选项、轮播图实例（左右切换按钮、底部导航栏、定时器、鼠标移入-图片静止）】
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
Vue.js實訓【基礎理論(5天)+項目實戰(5天)】博客匯總表【詳細筆記】?
目? ?錄
4、組件化開發
4.1、組件的注冊
全局注冊
局部注冊（只能在當前整個Vue實例的范圍內才可以使用）
使用組件
組件介紹-案例代碼
4.2、組件的配置選項
案例代碼
輪播圖實例
功能分析
運行效果1（點擊兩邊按鈕-切換圖片）
運行效果圖
代碼
運行效果2（定時器、鼠標移入-圖片靜止）
運行效果圖
代碼
4、組件化開發
什么是組件？？？ 組件就是零件，組成?個功能局部零件！
4.1、組件的注冊
全局注冊
// <script></script>中 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: "<h1>111</h1>"template: "#mb" // template指定這個組件的模板內容！})// 組件化開發： // 每個小功能模塊都是獨立的！維護起來簡單！ 復用性高！// 模塊化、組件化、工程化、自動化new Vue({el: "#app",components: { // 局部組件！kaixin: {template: "<div class='kaixin'>開心組件</div>"}}})new Vue({el: "#app2"}) </script></html>4.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>輪播圖實例
功能分析
- ?動播放；
- 左右按鈕切換圖?； [1]
- 分?下標點擊切換到對應圖?； [2]
- 圖?切換和下標?致關聯； [3]
- 輸?移?輪播區域?動播放暫停；離開區域，?動播放開始。
運行效果1（點擊兩邊按鈕-切換圖片）
運行效果圖
代碼
<!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></div><template id="lunbo"><!-- 主容器 --><div class="banner"><!-- 滑塊部分 --><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" :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, // 當前下標！ 【核心！】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: "圖書影像"}]}},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--;}}}})new Vue({el: "#app"}) </script></html>運行效果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>多謝觀看~
總結
以上是生活随笔為你收集整理的Vue.js-Day02-PM【组件化开发（全局注册组件、局部注册组件、案例）、组件的配置选项、轮播图实例（左右切换按钮、底部导航栏、定时器、鼠标移入-图片静止）】的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Vue.js-Day02-AM【Vue表
- 下一篇： Vue.js-Day03-AM【超级详细