目錄

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">&lt;</span>
            <span class="btn next" @click="rightClick">&gt;</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">&lt;</span>
            <span class="btn next" @click="rightClick">&gt;</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【組件化開發（全局註冊組件、局部註冊組件、案例）、組件的配置選項、輪播圖實例（左右切換按鈕、底部導航欄、定時器、鼠標移入-圖片靜止）】

4、組件化開發

4.1、組件的註冊

全局註冊

局部註冊（只能在當前整個Vue實例的範圍內纔可以使用）

使用組件

注意點

組件介紹-案例代碼

4.2、組件的配置選項

案例代碼

輪播圖實例

功能分析

運行效果1（點擊兩邊按鈕-切換圖片）

運行效果圖

代碼

運行效果2（定時器、鼠標移入-圖片靜止）

運行效果圖

代碼

python gdal 安裝使用（Windows， python 3.6.8）

微信小程序02【配置詳解（頁面、窗口、tabBar、網絡超時、debug）】

微信小程序01【目錄結構詳解、視圖與渲染、事件、input、scroll-view】

JavaScript基礎03【算數運算符、一元運算符、自增and自減】

微信小程序基礎4【互聯網軟件的開發流程】

數學建模【數據處理方法-一維、二維插值方法；數據擬合方法；插值and擬合的MATLAB實現】

Mac下配置sublime實現LaTeX

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結