Mac OS配置UNP（Unix網路套接字 V1）環境

阿新 • • 發佈：2022-04-11

slot插槽 (內容分發)

a. 單個slot 
b. 具名slot
    *混合父元件的內容與子元件自己的模板-->內容分發
    *父元件模板的內容在父元件作用域內編譯；子元件模板的內容在子元件作用域內編譯。

　　1、基本使用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/vue.js"></script>
</ 
head>
<body>
<div id="box">
    <!-- 不使用插槽寫的aaa不會顯示,使用就會顯示-->
    <child1>aaa</child1>

</div>
</body>
<script>
    var bus = new Vue() //new一個vue的例項，就是中央事件匯流排
    Vue.component('child1', {
        template: `<div>
          首頁
          <slot>< 
/slot>
        </div>`,

    })
 var vm = new Vue({
        el: '#box',

    })
</script>
</html>

　　2、插槽應用場景1

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/vue.js"></script> 

</head>
<body>
<div id="box">
<!--    寫了一個輪播元件，使用者想輪播什麼就放什麼-->
    <swiper>
        <p v-for="data in 4">{{data}}</p>
    </swiper>

       <swiper>
           <img :src="data" v-for="data in 5">
    </swiper>

</div>
</body>
<script>
    var bus = new Vue() //new一個vue的例項，就是中央事件匯流排
    Vue.component('swiper', {
        template: `<div>
          <slot></slot>
        </div>`,

    })
 var vm = new Vue({
        el: '#box',

    })
</script>
</html>

　　3、插槽應用場景3

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/vue.js"></script>
</head>
<body>
<div id="box">
    <!--通過插槽實現在一個元件中控制另一個元件的顯示隱藏-->
    <navbar> <button @click="isShow=!isShow">點我顯示隱藏</button></navbar>

    <swiper v-if="isShow"></swiper>
</div>
</body>
<script>
    Vue.component('navbar', {
        template: `<div>
          navbar
          <slot></slot>
        </div>`,

    })
    Vue.component('swiper', {
        template: `<div>
          <p>111</p>
          <p>222</p>
          <p>333</p>
        </div>`,

    })
    var vm = new Vue({
        el: '#box',
        data:{
            isShow:true
        }

    })
</script>
</html>

　　4、具名插槽

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/vue.js"></script>
</head>
<body>
<div id="box">
<!--    具名插槽，把p標籤給a插槽，div標籤給b插槽-->
    <navbar>
        <p slot="a">pppp</p>
        <div slot="b">bbbb</div>
    </navbar>
</div>
</body>
<script>
    Vue.component('navbar', {
        template: `<div>
        <slot name="a"></slot>
          navbar
          <slot name="b"></slot>
        </div>`,

    })
var vm = new Vue({
        el: '#box',
        data:{

        }

    })
</script>
</html>

transition過渡

　　Vue 在插入、更新或者移除 DOM 時，提供多種不同方式的應用過渡效果。

(1)單元素/元件過渡  * css過渡  * css動畫  * 結合animate.css動畫庫
(2) 多個元素過渡(設定key) 
     *當有相同標籤名的元素切換時，需要通過 key 特性設定唯一的值來標記以讓 Vue 區分它們，否則 Vue 為了效率只會替換相同標籤內部的內容。  
      mode:in-out ; out-in
(3)多個元件過渡
(4)列表過渡(設定key) 
     *<transition-group>不同於 transition， 它會以一個真實元素呈現：預設為一個 <span>。你也可以通過tag 特性更換為其他元素。  
     * 提供唯一的 key 屬性值

生命週期

i. 生命週期各個階段https://cn.vuejs.org/v2/guide/instance.html#%E7%94%9F%E5%91%BD%E5%91%A8%E6%9C%9F%E5%9B%BE%E7%A4%BA
ii. 生命週期鉤子函式的觸發條件與作用

swiper學習

　　https://www.swiper.com.cn/

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/vue.js"></script>

    <link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css">
    <script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>
    <!--    <link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.css">  -->
    <!--<script src="https://unpkg.com/swiper/swiper-bundle.js"> </script>  -->
    <style>
        .swiper-container {
            width: 80%;
            height: 600px;
        }
    </style>

</head>
<body>
<div id="box">

    <div class="swiper-container">
        <div class="swiper-wrapper">
            <div class="swiper-slide" v-for="data in datalist">

                {{data}}
                <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1608145297276&di=dd396caeaa0bb6a2a50609a109cd3120&imgtype=0&src=http%3A%2F%2Fattachments.gfan.com%2Fforum%2Fattachments2%2Fday_110915%2F1109151356c0717d7e6a91e985.jpg" alt="">
            </div>
        </div>
        <!-- 如果需要分頁器 -->
        <div class="swiper-pagination"></div>
        <!-- 如果需要導航按鈕 -->
        <div class="swiper-button-prev"></div>
        <div class="swiper-button-next"></div>

        <!-- 如果需要滾動條 -->
        <div class="swiper-scrollbar"></div>
    </div>
</div>
</body>
<script>
    var vm = new Vue({
        el: '#box',
        data: {
            datalist: [],
        },
        mounted() {
            setTimeout(() => {
                this.datalist = ['111', '222', '333']
            }, 2000)
            //輪播圖初始化不是放在這，因為資料變化和dom更新是非同步的
            //需要放在updated中
        },
        updated() {
            var mySwiper = new Swiper('.swiper-container', {
                // direction: 'vertical', // 垂直切換選項
                loop: true, // 迴圈模式選項
                // 如果需要分頁器
                pagination: {
                    el: '.swiper-pagination',
                },
                // 如果需要前進後退按鈕
                navigation: {
                    nextEl: '.swiper-button-next',
                    prevEl: '.swiper-button-prev',
                },

                // 如果需要滾動條
                scrollbar: {
                    el: '.swiper-scrollbar',
                },

            })
        },


    })
</script>
</html>

自定義元件的封裝

　　自定義封裝swiper元件（基於swiper）

　　注意：防止swipe初始化過早

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/vue.js"></script>

    <link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css">
    <script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>
    <!--    <link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.css">  -->
    <!--<script src="https://unpkg.com/swiper/swiper-bundle.js"> </script>  -->
    <style>
        .swiper-container {
            width: 80%;
            height: 600px;
        }
    </style>

</head>
<body>
<div id="box">
    {{name}}
<!--    diff演算法檢測到key變化了，會把swipper刪掉，重新建立，觸發元件的mounted執行，完成swipper例項化，不在updated中初始化-->
<!--    子元件的mounted在根元件的mounted之前執行，所有元件掛載完成後，根元件才掛載-->
    <swipper :key="datalist.length">
<!--    <swipper>-->
        <div class="swiper-slide" v-for="data in datalist">
            <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1608145297276&di=dd396caeaa0bb6a2a50609a109cd3120&imgtype=0&src=http%3A%2F%2Fattachments.gfan.com%2Fforum%2Fattachments2%2Fday_110915%2F1109151356c0717d7e6a91e985.jpg" alt="">
        </div>
    </swipper>
</div>
</body>
<script>

    Vue.component('swipper',{
        template:`
        <div class="swiper-container">
        <div class="swiper-wrapper">
          <slot></slot>
        </div>
        <div class="swiper-pagination"></div>
        <div class="swiper-button-prev"></div>
        <div class="swiper-button-next"></div>
        <div class="swiper-scrollbar"></div>
    </div>
        `,
        mounted(){
            console.log('子元件mounted')
            var mySwiper = new Swiper('.swiper-container', {
                // direction: 'vertical', // 垂直切換選項
                loop: true, // 迴圈模式選項
                // 如果需要分頁器
                pagination: {
                    el: '.swiper-pagination',
                },
                // 如果需要前進後退按鈕
                navigation: {
                    nextEl: '.swiper-button-next',
                    prevEl: '.swiper-button-prev',
                },

                // 如果需要滾動條
                scrollbar: {
                    el: '.swiper-scrollbar',
                },

            })
        },

        // updated(){//如果跟元件中有資料變化，就會導致swipper元件觸發update(vm.name='ss'測試一下),導致多次執行，影響效率，所以使用key+mounted方式
        //     console.log('子元件update')
        //     var mySwiper = new Swiper('.swiper-container', {
        //         // direction: 'vertical', // 垂直切換選項
        //         loop: true, // 迴圈模式選項
        //         // 如果需要分頁器
        //         pagination: {
        //             el: '.swiper-pagination',
        //         },
        //         // 如果需要前進後退按鈕
        //         navigation: {
        //             nextEl: '.swiper-button-next',
        //             prevEl: '.swiper-button-prev',
        //         },
        //
        //         // 如果需要滾動條
        //         scrollbar: {
        //             el: '.swiper-scrollbar',
        //         },
        //
        //     })
        // }


    })
    var vm = new Vue({
        el: '#box',
        data: {
            name:'lqz',
            datalist: [],
        },
        mounted() {
            setTimeout(() => {
                this.datalist = ['111', '222', '333']
            }, 2000)
            //輪播圖初始化不是放在這，因為資料變化和dom更新是非同步的
            //需要放在updated中
        },



    })
</script>
</html>

自定義指令

(1)自定義指令介紹 directives
(2)鉤子函式* 引數 el,binding,vnode(vnode.context)* bind,inserted,update,componentUpdated,unbind
(3)函式簡寫
(4)自定義指令-輪播
    *inserted 插入最後一個元素時呼叫(vnode.context.datalist.length-1)
    *this.$nextTick()

　　1、基本使用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/vue.js"></script>

</head>
<body>
<div id="box">
    <div v-mystyle>divdiv我是div</div>
</div>
</body>
<script>
    //自定義指令，以後用的時候必須 v-指令名，即v-mystyle
Vue.directive('mystyle',{
    //當被改指令修飾的標籤插入到dom中會執行
    inserted(){
        console.log('我執行了')
    },
})
 var vm = new Vue({
        el: '#box',
        data: {
        },



    })
</script>
</html>

　　2、讓所有使用自定義指令的標籤背景都變紅色

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/vue.js"></script>

</head>
<body>
<div id="box">
    <div v-mystyle>divdiv我是div</div>
    <p v-mystyle>我是p，用了自定義指令，會變紅</p>
</div>
</body>
<script>
    //自定義指令，以後用的時候必須 v-指令名，即v-mystyle
Vue.directive('mystyle',{
    //當被改指令修飾的標籤插入到dom中會執行
    inserted(el){
        //el就是被修飾標籤的dom
        console.log(el)
        //所以我們直接操作dom
        el.style.background='red'
    },
})
 var vm = new Vue({
        el: '#box',
        data: {
        },



    })
</script>
</html>

　　3、使用者指定自定義指令的背景色，修改變數，背景變化

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/vue.js"></script>

</head>
<body>
<div id="box">
    <!--放js的變數，所以用'red'-->
    <div v-mystyle="'red'">divdiv我是div</div>
    <p v-mystyle="mycolor">我是p，用了自定義指令，會變紅</p>
</div>
</body>
<script>
    //自定義指令，以後用的時候必須 v-指令名，即v-mystyle
Vue.directive('mystyle',{
    //當被改指令修飾的標籤插入到dom中會執行
    inserted(el,input){ //該方法，如果更新變數mycolor，並不會變化，所以需要重寫update方法  vm.mycolor='yellow'
        //el就是被修飾標籤的dom
        console.log(el)
        console.log(input) //input的value屬性是傳入的變數
        //所以我們直接操作dom
        // el.style.background='red'
        el.style.background=input.value
    },
    update(el,input){
        el.style.background=input.value

    }
})
 var vm = new Vue({
        el: '#box',
        data: {
            mycolor:'green',
        },



    })
</script>
</html>

　　4、通過指令控制swipper初始化

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/vue.js"></script>

    <link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css">
    <script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>
    <!--    <link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.css">  -->
    <!--<script src="https://unpkg.com/swiper/swiper-bundle.js"> </script>  -->
    <style>
        .swiper-container {
            width: 80%;
            height: 600px;
        }
    </style>

</head>
<body>
<div id="box">

    <div class="swiper-container">
        <div class="swiper-wrapper">
            <!--v-comp把當前索引值和陣列總長度傳入，如果索引等於陣列總長度減一說明都載入完了，完成swipper初始化-->
            <div class="swiper-slide" v-for="(data,i) in datalist" v-comp="{index:i,length:datalist.length}">

                {{data}}

            </div>
        </div>
        <!-- 如果需要分頁器 -->
        <div class="swiper-pagination"></div>
        <!-- 如果需要導航按鈕 -->
        <div class="swiper-button-prev"></div>
        <div class="swiper-button-next"></div>

        <!-- 如果需要滾動條 -->
        <div class="swiper-scrollbar"></div>
    </div>
</div>
</body>
<script>
    Vue.directive('comp', {
        inserted(el, input) {
            console.log(input.value)
            //只要校驗到傳入的是最後一個插入了，就初始化swipper
            if (input.value.index === input.value.length - 1) {
                var mySwiper = new Swiper('.swiper-container', {
                    // direction: 'vertical', // 垂直切換選項
                    loop: true, // 迴圈模式選項
                    // 如果需要分頁器
                    pagination: {
                        el: '.swiper-pagination',
                    },
                    // 如果需要前進後退按鈕
                    navigation: {
                        nextEl: '.swiper-button-next',
                        prevEl: '.swiper-button-prev',
                    },

                    // 如果需要滾動條
                    scrollbar: {
                        el: '.swiper-scrollbar',
                    },

                })
            }

        },
    })
    var vm = new Vue({
        el: '#box',
        data: {
            datalist: [],
        },
        mounted() {
            setTimeout(() => {
                this.datalist = ['111', '222', '333']
            }, 2000)
        },


    })
</script>
</html>

過濾器

https://cn.vuejs.org/v2/guide/filters.html
ele圖片轉換，貓眼電影圖片轉換

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script src="js/vue.js"></script>
</head>
<body>
<div id="box">
    <!--貓眼資料：https://m.maoyan.com/#movie-->
    <ul>
        <li v-for="data in datalist">
            <h2>{{data.nm}}</h2>
            <br>
<!--            <img :src="data.img" alt="">-->
<!--            <img :src="changePath(data.img)" alt="">-->
<!--            過濾器-->
            <img :src="data.img | myChange" alt="">
        </li>
    </ul>
</div>
</body>
<script>
    //定義過濾器
    Vue.filter('myChange',function (url) {
        return url.replace('w.h','128.180')
    })
    var vm = new Vue({
        el: '#box',
        data: {
            datalist: [],
        },
        methods:{
            changePath(url){
                return url.replace('w.h','128.180')
            }
        },
        mounted() {
            //http://p0.meituan.net/w.h/movie/b16c1c0d5ac9e743c6ffbbf7eba900522725807.jpg
            //http://p0.meituan.net/128.180/movie/b16c1c0d5ac9e743c6ffbbf7eba900522725807.jpg
            axios.get("./json/test.json").then(res => {
                console.log(res.data.coming) // axios 自動包裝data屬性 res.data
                this.datalist = res.data.coming
            }).catch(err => {
                console.log(err);
            })
        },

    })
</script>
</html>