專欄介紹

TypeScript從入門到實踐專欄是博主在學習和工作過程中的總結，實用性非常強，歡迎訂閱哦，學會TS不迷路。

類型守衛(wèi)

在前幾篇介紹了斷言，在使用斷言時我們已經(jīng)確定了變量的類型，確定該類型時一定存在（否則則會欺騙編譯，運行時報錯），那么為什么還要類型守衛(wèi)呢？因為類型斷言還是需要借助類型守衛(wèi)的，類型守衛(wèi)主要是用來判斷未知類型是不是所需要的類型。
類型守衛(wèi)主要包括四種方式：

• in
• typeof
• instanceof
• 自定義類型

1、in- 定義屬性場景下內容的確認

先寫兩個接口Teacher、Student，然后將這兩個接口進行聯(lián)合聲明，使用in來判斷屬性是否在傳遞的參數(shù)中，然后分別作輸出。
缺點：用 in 關鍵字縮小數(shù)據(jù)類型必須有一個獨特的屬性作為判別標準，否則不能用 in 關鍵字

interface Teacher{ name:string; courses:string; } interface Student{ name:string; study:string; } type Class = Teacher | Student； function getInfo(val:Class){ //此時val類型縮小為Teacher類型 if('courses' in val){ console.log(val.courses) } //此時val類型縮小為Student類型 if('study' in val){ console.log(val.study) } } getInfo({ name: 'student', study: "Philosophy" }); //打印結果為Philosophy，因為傳參中含有study屬性，所以走了第二個判斷 

    




    

        1
    

    

        2
    

    

        3
    

    

        4
    

    

        5
    

    

        6
    

    

        7
    

    

        8
    

    

        9
    

    

        10
    

    

        11
    

    

        12
    

    

        13
    

    

        14
    

    

        15
    

    

        16
    

    

        17
    

    

        18
    

    

        19
    

    

        20
    

    

        21
    

2、typeof-類型分類場景下的身份確認

為什么用typeof做類型守衛(wèi)呢？因為typeof能判斷JS基本數(shù)據(jù)類型。typeof只能識別以下類型：

• Boolean
• String
• Undefined
• Function
• Number
• Bigint
• Symbol

寫法：typeof a，a是變量（基本數(shù)據(jù)類型）

奇怪為什么typeof不能識別null呢？

let a= null typeof a;//object 


    

        1
    

    

        2
    

null是一個只有一個值的特殊類型，表示一個空對象引用，可以用來清空對象，它是object 類型是歷史遺留下來的問題，曾提議改為null類型，被拒絕了。
typeof 識別其他的類型比如數(shù)組，正則等都是object類型

let a =[1] typeof a;//Object var reg = RegExp("a","i"); typeof reg//reg 


    

        1
    

    

        2
    

    

        3
    

    

        4
    

typeof 怎么起到守衛(wèi)的作用呢，通過typeof判斷變量類型然后執(zhí)行相應的邏輯，具體如下：

function class(name: string, score: string | number) { //識別到sore為number類型 if (typeof score === "number") { return "teacher:" + name + ":" + score; } //識別到sore為string類型 if (typeof score === "string") { return "student:" + name + ":" + score; } } 


    

        1
    

    

        2
    

    

        3
    

    

        4
    

    

        5
    

    

        6
    

    

        7
    

    

        8
    

    

        9
    

    

        10
    

上面案例的傳參都會基本類型，當傳一個對象時候，我們也可以用對象中的屬性來進行判斷，比如：

interface A{ a:string; } interface B{ a:number; } type Class = A | B； function getInfo(val:Class){ //判斷val的屬性a的類型為number類型 if(typeof val.a === "number"){ console.log('B:'+ val.a) } //判斷val的屬性a的類型為string類型 if(typeof val.a === "string"){ console.log('A' + val.a) } } 

    




    

        1
    

    

        2
    

    

        3
    

    

        4
    

    

        5
    

    

        6
    

    

        7
    

    

        8
    

    

        9
    

    

        10
    

    

        11
    

    

        12
    

    

        13
    

    

        14
    

    

        15
    

    

        16
    

    

        17
    

3、instanceof-類型分類場景下的身份確認

為什么用instanceof呢？因為typeof有局限性，引用類型比如數(shù)組，正則等無法精確識別是哪一個種型，instanceof能夠識別變量（比如實例對象）是否屬于這個類。instanceof不能檢測原始值類型的值，但是原始值對應的對象格式實例則可以檢測。具體instanceof是怎么做類型守衛(wèi)的呢?

• 寫法：a instanceof b，a是參數(shù)，b是一般都是接口類型。

interface Teacher{ name:string; courses:string; } interface Student{ name:string; study:string; } type Class = Teacher | Student； function getInfo(val:Class){ //判斷val的類型是否是定義的接口Teacher類型 if(val instanceof Teacher){ console.log('teacher:'+ val.courses) } //判斷val的類型是否是定義的接口Student類型 if(val instanceof Student){ console.log('student' + val.study) } } 

    




    

        1
    

    

        2
    

    

        3
    

    

        4
    

    

        5
    

    

        6
    

    

        7
    

    

        8
    

    

        9
    

    

        10
    

    

        11
    

    

        12
    

    

        13
    

    

        14
    

    

        15
    

    

        16
    

    

        17
    

    

        18
    

    

        19
    

4、自定義類型

TS中有一個關鍵字is可以判斷變量是否屬于某種類型。

• 寫法：a is b，意思是a是b類型，a是函數(shù)參數(shù)，也可以是this關鍵字，this關鍵字一般用在累中判斷，b可以是接口類型，b也可以是number、string等其他合法的TS類型。這種寫法稱作類型謂詞，使用類型謂詞的函數(shù)稱為類型謂詞函數(shù)，該函數(shù)的返回值必須的boolean類型。
• 使用：先定義一個變量，該變量表示是否是某種類型，比如以下定義了isTeacher，代表了參數(shù)cls是Teacher類型，然后用這個變量來判斷。

（1）函數(shù)參數(shù)形式

函數(shù)中的參數(shù)類型為多個類型，通過is關鍵字自定義類型，將函數(shù)參數(shù)精確到某種類型，然后再執(zhí)行相應的邏輯。

interface Teacher{ name:string; courses:string; } interface Student{ name:string; study:string; } const isTeacher = function (cls: Teacher | Student): cls is Teacher { return 'courses' in cls; } const getName = (cls: Teacher | Student) => { if(isTeacher(cls)) { return cls.courses; } } 

    




    

        1
    

    

        2
    

    

        3
    

    

        4
    

    

        5
    

    

        6
    

    

        7
    

    

        8
    

    

        9
    

    

        10
    

    

        11
    

    

        12
    

    

        13
    

    

        14
    

    

        15
    

    

        16
    

（2）this形式

下面代碼中的 User 是抽象類，不能被實例化，Staff 和 Student 都繼承自 User。實例方法 isStaff 用于將類型收窄為 Staff，實例方法 isStudent 用于將類型收窄為 Student

abstract class User { name: string; constructor(name: string) { this.name = name; } isStudent(): this is Student { return this instanceof Student; } isStaff(): this is Staff { return this instanceof Staff; } } class Student extends User{ study: string; constructor(name: string, study: string) { super(name) this.study = study } } class Staff extends User { workingYears: number; constructor(name: string, workingYears: number) { super(name) this.workingYears = workingYears } } function judgeClassType(obj: User) { if (obj.isStaff()) { // obj的類型被縮小為 Staff } else if (obj.isStudent()){ // obj 的類型被縮小為 Student } }

    藍藍設計建立了UI設計分享群，每天會分享國內外的一些優(yōu)秀設計，如果有興趣的話，可以進入一起成長學習，請加藍小助，微信號:ben_lanlan，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯(lián)系01063334945。



     



    分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯(lián)系，我們立即更正或刪除。 



    藍藍設計( sillybuy.com )是一家專注而深入的界面設計公司，為期望卓越的國內外企業(yè)提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網(wǎng)站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數(shù)據(jù)可視化設計公司、UI交互設計公司、高端網(wǎng)站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司

在本教程中，我將向大家展示如何使用 Laravel + Vue 3 使用 typescript 和 Vite 設置你自己的單頁應用程序。

這是在 Laravel 項目中添加 PWA 的手動方法。我們不會使用 InertiaJS 或其他類似的東西，我們也不會混合使用。我們將手動實現(xiàn)我們自己的 VueJS 前端。

第 1 步：讓我們創(chuàng)建我們的 Laravel 項目

composer create-project laravel/laravel laravel-vue-manual 


    

        1
    

第 2 步：設置前端

在我們的 laravel 項目中，讓我們使用 yarn 運行一個命令，并選擇 vue 和 typescript。

yarn create vite 


    

        1
    

將項目名稱設置為：FrontEndApp
選擇：Vue
選擇：TypeScript

然后轉到我們的FrontEndApp目錄并運行yarn或yarn install安裝依賴項。

配置 Vite

讓我們配置我們的 vite 配置FrontEndApp\vite.config.ts

import { defineConfig } from "vite"; import vue from "@vitejs/plugin-vue"; export default ({ mode }) => { // 檢查是否開發(fā) const isDevelopment = mode === "development"; return defineConfig({ server: { port: 3000, }, build: { // 生成的文件將添加到此處 outDir: "./../public/app", }, // 也將更改基于模式的基礎 base: isDevelopment ? "/" : "/app/", plugins: [vue()], }); }; 


    

        1
    

    

        2
    

    

        3
    

    

        4
    

    

        5
    

    

        6
    

    

        7
    

    

        8
    

    

        9
    

    

        10
    

    

        11
    

    

        12
    

    

        13
    

    

        14
    

    

        15
    

    

        16
    

    

        17
    

    

        18
    

    

        19
    

    

        20
    

然后讓我們更改build腳本FrontEndApp\package.json，這樣每次我們構建它時都會替換以下文件public/app：

{ ... "scripts": { "dev": "vite", "build": "vue-tsc --noEmit && vite build --emptyOutDir", "preview": "vite preview" }, ... } 


    

        1
    

    

        2
    

    

        3
    

    

        4
    

    

        5
    

    

        6
    

    

        7
    

    

        8
    

    

        9
    

現(xiàn)在，如果我們在FrontEndApp中運行yarn build，它應該在laravel項目的根目錄中的public文件夾中創(chuàng)建一個名為 app 的文件夾。

第 3 步：設置 Laravel 路由

讓我們設置我們的 laravel 路由，以便我們可以訪問我們剛剛創(chuàng)建的文件。

讓我們編輯這個文件 routes\web.php

<?php

use Illuminate\Support\Facades\Route; Route::get('/', function () { return view('welcome'); }); Route::get('/app/{any}', function () { $path = public_path('app/index.html'); abort_unless(file_exists($path), 400, 'Page is not Found!'); return file_get_contents($path); }) ->name('FrontEndApp'); 


    

        1
    

    

        2
    

    

        3
    

    

        4
    

    

        5
    

    

        6
    

    

        7
    

    

        8
    

    

        9
    

    

        10
    

    

        11
    

    

        12
    

    

        13
    

    

        14
    

    

        15
    

現(xiàn)在，如果我們http://127.0.0.1:8000/app在瀏覽器中打開，我們現(xiàn)在可以看到我們的應用程序已啟動。

第 4 步：設置腳本

我們將在我們的根項目目錄中添加一個開發(fā)包，并同時調用它。我們用它來一次運行 2 個或更多命令。

安裝：

yarn add -D concurrently 


    

        1
    

如果我們想要自動工作，不想每次使用時都重新構建frontednapp，我們要做的是在package.json項目的根目錄中添加一個新腳本。

{ ... "scripts": { ... "front:serve": "cd FrontEndApp && yarn dev", "front:build": "cd FrontEndApp && yarn build", "serve": "concurrently \"php artisan serve --port=8080\" \"yarn front:serve\"", "deploy": "yarn setup && yarn front:build && php artisan migrate" }, ... } 


    

        1
    

    

        2
    

    

        3
    

    

        4
    

    

        5
    

    

        6
    

    

        7
    

    

        8
    

    

        9
    

    

        10
    

    

        11
    

這樣， running yarn serve將同時運行 127.0.0.1:8080 和 localhost:3000。你現(xiàn)在可以同時使用這兩個項目。

完成 FrontEndApp 的工作后，你可以運行 yarn deploy 以構建我們的前端。

結論

我相信這也是大家可以在 laravel 項目中添加 pwa 的一種方式，這樣你就可以將它們保存在一個項目中。

考慮到這一點，你可以添加routes到你的 FrontEndApp 項目中，還可以添加狀態(tài)管理器PiniaJA，例如 等等。

?? 好書推薦

《Vue.js 快速入門實戰(zhàn)》

【內容簡介】

Vue.js 快速入門實戰(zhàn)以Vue.js的知識點為基礎，結合TypeScript的使用，循序漸進地介紹了Vue.js 3.0（簡稱Vue3）的知識點和實戰(zhàn)技巧，可以幫助零基礎的讀者掌握獨立開發(fā)項目和部署項目上線的技術。全書共14章，包括Vue.js概述、搭建開發(fā)環(huán)境、Vue.js組合式API、Vue.js的模板語法、Vue.js的計算屬性和偵聽器、Vue.js中class和style的綁定、Vue.js的表單開發(fā)、Vue.js的組件開發(fā)、Vue.js的網(wǎng)絡請求、Vue.js的狀態(tài)管理、Vue.js的路由管理、Vue的項目部署、在線招聘網(wǎng)站開發(fā)實戰(zhàn)以及招聘網(wǎng)站后臺管理系統(tǒng)開發(fā)實戰(zhàn)。

藍藍設計建立了UI設計分享群，每天會分享國內外的一些優(yōu)秀設計，如果有興趣的話，可以進入一起成長學習，請加藍小助，微信號:ben_lanlan，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯(lián)系01063334945。

分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯(lián)系，我們立即更正或刪除。

藍藍設計( sillybuy.com )是一家專注而深入的界面設計公司，為期望卓越的國內外企業(yè)提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網(wǎng)站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數(shù)據(jù)可視化設計公司、UI交互設計公司、高端網(wǎng)站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司

目錄

一、回答點

二、深入回答

Computed：

Watch:

應用場景:

一、回答點

computed計算屬性: 依賴其他的值,有緩存, 當它依賴的屬性值發(fā)生改變,在下次獲取computed的值時,才會重新計算computed值,而watch監(jiān)聽器,更多的是起到監(jiān)聽的作用,它沒有緩存,每當監(jiān)聽的數(shù)據(jù)發(fā)生了都會執(zhí)行回調進行后續(xù)的操作.

二、深入回答

Computed：

• 支持緩存,當依賴的數(shù)據(jù)發(fā)生變化后,才會重新計算
• 不支持一步操作,當它里面有 異步操作時,無法監(jiān)聽數(shù)據(jù)的變化
• 計算屬性的值 默認會緩存,它是基于響應式依賴進行緩存的,就是 基于data聲明過 或者 從父組件傳遞過來的props中的數(shù)據(jù)進行金酸
• 如果一個屬性是由其他屬性計算而來,那么一般會使用計算屬性
• 如果 計算屬性的屬性值是函數(shù),那么默認會使用get 方法,函數(shù)的返回值就是屬性的屬性值,在計算屬性中,有get和set方法,當數(shù)據(jù)發(fā)生變化時,會調用set方法

Watch:

• 不支持緩存,當數(shù)據(jù)發(fā)生變化時,他就會觸發(fā),之后進行對應的操作
• 它支持異步監(jiān)聽
• 監(jiān)聽的函數(shù)會接收兩個參數(shù),第一個參數(shù)是新值,第二個參數(shù)是 舊值
• 當一個屬性發(fā)生變化時,就會執(zhí)行對應的操作
• 監(jiān)聽數(shù)據(jù)必須在data中聲明 或這 從父組件傳遞過來的props中的數(shù)據(jù) 當發(fā)生變化時,會觸發(fā)對應的操作,函數(shù)有兩個參數(shù):
  • immediate:組件加載會直接觸發(fā)回調函數(shù)
  • deep:深度監(jiān)聽,發(fā)現(xiàn)數(shù)據(jù)內部的變化,在復雜數(shù)據(jù)類型中使用.這里要注意的是 deep無法監(jiān)聽到數(shù)組和對象內部的變化.

應用場景:

• 當需要進行計算并依賴其他數(shù)據(jù)的時候,就使用 計算屬性, 因為可以利用 計算屬性的緩存特性,避免每次獲取值時候都要重新計算.而當它需要執(zhí)行異步操作時 使用watch.

一：什么是插槽

       例如老板要讓你使用組件寫分類欄，然后使用該組件生成兩個分類欄，這兩個分類欄里的數(shù)據(jù)都不一樣，但是整體結構是一樣的，這就要求組件的結構一樣，但是內部 DOM 結構是由使用組件的時候決定的，這就需要插槽，其就像放在組件中的占位標簽，使用組件時我們將要放到占位標簽處的DOM結構寫入組件標簽體中即可。

       例如如下圖例子，第一個分類框我們要展示熱門電影，第二個分類框我們要展示一張風景圖，整體的框架是一樣的，只是其內部填充的東西不一樣下面會做出更深刻的理解。

二：默認插槽 

2.1 默認插槽說明

      此板塊我們講述第一個插槽：默認插槽。之前我們使用組件的時候，引入進 App.vue 后注冊就可以采用 自閉合 與  完整組件標簽 的方式使用，以下就是常采用的自閉合與完整組件標簽方式（以 test組件為例）

    


        


            


                


                

            

            


                

                    <template>
                

            

        

        


            


                


                

            

            


                

                    <test/> //自閉合方式
                

            

        

        


            


                


                

            

            


                

                    <test></test> //完整組件標簽的方式
                

            

        

        


            


                


                

            

            


                

                    </template>
                

            

        

    

         但是插槽的使用我們就要把要放在插槽中的內容寫在組件標簽體內，例如我們要在插槽中放入一個 ul 列表，那么我們使用組件時就要這樣書寫：

    


        


            


                


                

            

            


                

                    <template>
                

            

        

        


            


                


                

            

            


                

                    <test> //組件標簽
                

            

        

        


            


                


                

            

            


                

                    <ul>
                

            

        

        


            


                


                

            

            


                

                    <li></li>
                

            

        

        


            


                


                

            

            


                

                    <li></li>
                

            

        

        


            


                


                

            

            


                

                    <li></li>
                

            

        

        


            


                


                

            

            


                

                    </ul>
                

            

        

        


            


                


                

            

            


                

                    </test> 
                

            

        

        


            


                


                

            

            


                

                    </template>
                

            

        

    

       接下來說說默認插槽的寫法，如果我們只在使用組件時的組件標簽體內寫上內容，那頁面上是顯示不出來任何東西的，這是因為標簽體內的內容確實被解析了，但是vue不知道要把這些東西放在組件中 template 的哪個位置，故我們要在組件的 template 中設置一個插槽來占位，以保證使用組件時其解析的內容可以放入占的位置中去。占位我們使用一個很重要的標簽 ------ slot，我們需要在組件的 template 中這樣書寫：

    


        


            


                


                

            

            


                

                    <template>
                

            

        

        


            


                


                

            

            


                

                    <div>
                

            

        

        


            


                


                

            

            


                

                    <span>我是一個組件，下面是我的插槽內容</span>
                

            

        

        


            


                


                

            

            


                

                    <slot></slot> //默認插槽
                

            

        

        


            


                


                

            

            


                

                    </div>
                

            

        

        


            


                


                

            

            


                

                    </template>
                

            

        

    

這樣使用組件時組件標簽體中的內容就可以放入組件的默認插槽中了

2.2 默認插槽使用 

       我們來實現(xiàn)一下上述的分類案例，讓第一個分類展示電影，第二個分類放一張圖片進去，但整體組件結構一樣

 classify.vue組件：

    


        


            


            

        

        


            

                <template>
            

        

    

    


        


            


            

        

        


            

                <div class="classify-box">
            

        

    

    


        


            


            

        

        


            

                <div class="title">{{name}}</div>
            

        

    

    


        


            


            

        

        


            

                <slot></slot> //slot設置默認插槽來占位
            

        

    

    


        


            


            

        

        


            

                </div>
            

        

    

    


        


            


            

        

        


            

                </template>
            

        

    

    


        


            


            

        

        


            


            

        

    

    


        


            


            

        

        


            

                <script>
            

        

    

    


        


            


            

        

        


            

                export default {
            

        

    

    


        


            


            

        

        


            

                name:'Classify',
            

        

    

    


        


            


            

        

        


            

                data() {
            

        

    

    


        


            


            

        

        


            

                return {
            

        

    

    


        


            


            

        

        


            

                }
            

        

    

    


        


            


            

        

        


            

                },
            

        

    

    


        


            


            

        

        


            

                props:['name'] //propos接收傳來的標題名稱
            

        

    

    


        


            


            

        

        


            

                }
            

        

    

    


        


            


            

        

        


            

                </script>
            

        

    

    


        


            


            

        

        


            


            

        

    

    


        


            


            

        

        


            

                <style scoped>
            

        

    

    


        


            


            

        

        


            

                //css太占地方就刪掉了
            

        

    

    


        


            


            

        

        


            

                </style>
            

        

    




    

App.vue組件：

    


        


            


            

        

        


            

                <template>
            

        

    

    


        


            


            

        

        


            

                <div class="app-box">
            

        

    

    


        


            


            

        

        


            

                <Classify name='熱門電影'> //使用組件并在組件標簽體中書寫要放進插槽中的內容
            

        

    

    


        


            


            

        

        


            

                <ul>
            

        

    

    


        


            


            

        

        


            

                <li>肖申克的救贖</li>
            

        

    

    


        


            


            

        

        


            

                <li>1912</li>
            

        

    

    


        


            


            

        

        


            

                <li>零的執(zhí)行人</li>
            

        

    

    


        


            


            

        

        


            

                </ul>
            

        

    

    


        


            


            

        

        


            

                </Classify>
            

        

    

    


        


            


            

        

        


            

                <Classify name="風景">
            

        

    

    


        


            


            

        

        


            

                <img src="./img/QQ圖片20220818163031.jpg" alt="">
            

        

    

    


        


            


            

        

        


            

                </Classify>
            

        

    

    


        


            


            

        

        


            

                </div>
            

        

    

    


        


            


            

        

        


            

                </template>
            

        

    

    


        


            


            

        

        


            


            

        

    

    


        


            


            

        

        


            

                <script>
            

        

    

    


        


            


            

        

        


            

                import Classify from './components/classify.vue' //引入組件
            

        

    

    


        


            


            

        

        


            

                export default {
            

        

    

    


        


            


            

        

        


            

                name: 'App',
            

        

    

    


        


            


            

        

        


            

                data() {
            

        

    

    


        


            


            

        

        


            

                return {
            

        

    

    


        


            


            

        

        


            

                }
            

        

    

    


        


            


            

        

        


            

                },
            

        

    

    


        


            


            

        

        


            

                components: {
            

        

    

    


        


            


            

        

        


            

                Classify:Classify //注冊組件
            

        

    

    


        


            


            

        

        


            

                }
            

        

    

    


        


            


            

        

        


            

                }
            

        

    

    


        


            


            

        

        


            

                </script>
            

        

    

    


        


            


            

        

        


            


            

        

    

    


        


            


            

        

        


            

                <style scoped>
            

        

    

    


        


            


            

        

        


            

                //css太占位置刪掉了
            

        

    

    


        


            


            

        

        


            

                </style>
            

        

    




    

這樣就可以實現(xiàn)一個最基本的默認插槽案例了 

三：具名插槽 

3.1 具名插槽說明

       具名插槽其實只是在默認插槽的基礎上給每個插槽起了名字，作用為可以在組件中設置多個插槽，可以更具體細分。首先給組件插槽起名字，使用 name="xxx"。

    


        


            


                


                

            

            


                

                    <template>
                

            

        

        


            


                


                

            

            


                

                    <div>
                

            

        

        


            


                


                

            

            


                

                    <span>我是一個組件，下面是我的多個具名插槽內容</span>
                

            

        

        


            


                


                

            

            


                

                    <slot name="header"></slot> //header具名插槽
                

            

        

        


            


                


                

            

            


                

                    <slot name="body"></slot> //body具名插槽
                

            

        

        


            


                


                

            

            


                

                    <slot name="footer"></slot> //footer具名插槽
                

            

        

        


            


                


                

            

            


                

                    </div>
                

            

        

        


            


                


                

            

            


                

                    </template>
                

            

        

    

        上面就在組件中定義好了三個具名插槽，下面我們來看使用插槽的寫法，依舊是在使用組件標簽時在標簽體內寫入內容，但是要注意要使用 slot="xxx" 寫在組件標簽體外層盒子上來指明放入哪個插槽中

    


        


            


                


                

            

            


                

                    <template>
                

            

        

        


            


                


                

            

            


                

                    <div class="app-box">
                

            

        

        


            


                


                

            

            


                

                    <Classify>
                

            

        

        


            


                


                

            

            


                

                    <div slot="header"> //放入header插槽
                

            

        

        


            


                


                

            

            


                

                    <span>我在header插槽中</span>
                

            

        

        


            


                


                

            

            


                

                    </div> 
                

            

        

        


            


                


                

            

            


                

                    <div slot="body"> //放入body插槽
                

            

        

        


            


                


                

            

            


                

                    <span>我在body插槽中</span>
                

            

        

        


            


                


                

            

            


                

                    </div> 
                

            

        

        


            


                


                

            

            


                

                    <div slot="footer"> //放入footer插槽
                

            

        

        


            


                


                

            

            


                

                    <span>我在footer插槽中</span>
                

            

        

        


            


                


                

            

            


                

                    </div>
                

            

        

        


            


                


                

            

            


                

                    </Classify>
                

            

        

        


            


                


                

            

            


                

                    </div>
                

            

        

        


            


                


                

            

            


                

                    </template>
                

            

        

    

    

        
    

       上面的寫法其實并不完善，slot寫在每個指定插槽的外層大盒子 div 上了，這樣會給其增加一層 DOM 結構，我們最好把 div 換成 template 標簽，因為 template 標簽不會被解析，結構更清晰不多余。

3.2 具名插槽使用

下面簡單實現(xiàn)一下具名插槽的使用

 classify.vue組件：

    


        


            


            

        

        


            

                <template>
            

        

    

    


        


            


            

        

        


            

                <div class="classify-box">
            

        

    

    


        


            


            

        

        


            

                <div class="title">下面是具名插槽的內容</div>
            

        

    

    


        


            


            

        

        


            

                <slot name="header"></slot>
            

        

    

    


        


            


            

        

        


            

                <slot name="body"></slot>
            

        

    

    


        


            


            

        

        


            

                <slot name="footer"></slot>
            

        

    

    


        


            


            

        

        


            

                </div>
            

        

    

    


        


            


            

        

        


            

                </template>
            

        

    

    


        


            


            

        

        


            


            

        

    

    


        


            


            

        

        


            

                <script>
            

        

    

    


        


            


            

        

        


            

                export default {
            

        

    

    


        


            


            

        

        


            

                name:'Classify',
            

        

    

    


        


            


            

        

        


            

                data() {
            

        

    

    


        


            


            

        

        


            

                return {
            

        

    

    


        


            


            

        

        


            

                }
            

        

    

    


        


            


            

        

        


            

                },
            

        

    

    


        


            


            

        

        


            

                }
            

        

    

    


        


            


            

        

        


            

                </script>
            

        

    

    


        


            


            

        

        


            


            

        

    

    


        


            


            

        

        


            

                <style scoped>
            

        

    

    


        


            


            

        

        


            


            

        

    

    


        


            


            

        

        


            

                </style>
            

        

    




    

App.vue組件：

    


        


            


            

        

        


            

                <template>
            

        

    

    


        


            


            

        

        


            

                <div class="app-box">
            

        

    

    


        


            


            

        

        


            

                <Classify>
            

        

    

    


        


            


            

        

        


            

                <div slot="header">
            

        

    

    


        


            


            

        

        


            

                <span>我在header插槽中</span>
            

        

    

    


        


            


            

        

        


            

                </div> 
            

        

    

    


        


            


            

        

        


            

                <div slot="body">
            

        

    

    


        


            


            

        

        


            

                <span>我在body插槽中</span>
            

        

    

    


        


            


            

        

        


            

                </div> 
            

        

    

    


        


            


            

        

        


            

                <div slot="footer">
            

        

    

    


        


            


            

        

        


            

                <span>我在footer插槽中</span>
            

        

    

    


        


            


            

        

        


            

                </div>
            

        

    

    


        


            


            

        

        


            

                </Classify>
            

        

    

    


        


            


            

        

        


            

                </div>
            

        

    

    


        


            


            

        

        


            

                </template>
            

        

    

    


        


            


            

        

        


            


            

        

    

    


        


            


            

        

        


            

                <script>
            

        

    

    


        


            


            

        

        


            

                import Classify from './components/classify.vue'
            

        

    

    


        


            


            

        

        


            

                export default {
            

        

    

    


        


            


            

        

        


            

                name: 'App',
            

        

    

    


        


            


            

        

        


            

                data() {
            

        

    

    


        


            


            

        

        


            

                return {
            

        

    

    


        


            


            

        

        


            


            

        

    

    


        


            


            

        

        


            

                }
            

        

    

    


        


            


            

        

        


            

                },
            

        

    

    


        


            


            

        

        


            

                components: {
            

        

    

    


        


            


            

        

        


            

                Classify:Classify
            

        

    

    


        


            


            

        

        


            

                }
            

        

    

    


        


            


            

        

        


            

                }
            

        

    

    


        


            


            

        

        


            

                </script>
            

        

    

    


        


            


            

        

        


            


            

        

    

    


        


            


            

        

        


            

                <style scoped>
            

        

    

    


        


            


            

        

        


            


            

        

    

    


        


            


            

        

        


            

                </style>
            

        

    




    

這樣就簡單實現(xiàn)了具名插槽 

四：作用域插槽 

4.1 作用域插槽說明

       作用域插槽較難理解，但其簡單解釋就是帶有數(shù)據(jù)的插槽，把組件中的數(shù)據(jù)綁定給插槽，然后誰使用這個組件誰就能拿到這個數(shù)據(jù)使用，也相當于一種數(shù)據(jù)通信，其需要這樣把數(shù)據(jù)綁定定義給組件插槽（名稱沒有要求）

    


        


            


                


                

            

            


                

                    <template>
                

            

        

        


            


                


                

            

            


                

                    <div class="classify-box">
                

            

        

        


            


                


                

            

            


                

                    <div class="title">下面是作用域插槽的內容</div>
                

            

        

        


            


                


                

            

            


                

                    <slot :hobby="hobby"></slot> //將數(shù)據(jù)綁定給組件插槽
                

            

        

        


            


                


                

            

            


                

                    </div>
                

            

        

        


            


                


                

            

            


                

                    </template>
                

            

        

        


            


                


                

            

            


                


                

            

        

        


            


                


                

            

            


                

                    <script>
                

            

        

        


            


                


                

            

            


                

                    export default {
                

            

        

        


            


                


                

            

            


                

                    name:'Classify',
                

            

        

        


            


                


                

            

            


                

                    data() {
                

            

        

        


            


                


                

            

            


                

                    return {
                

            

        

        


            


                


                

            

            


                

                    hobby:['打游戲','睡大覺','吃大餐'] //要綁定的數(shù)據(jù)
                

            

        

        


            


                


                

            

            


                

                    }
                

            

        

        


            


                


                

            

            


                

                    },
                

            

        

        


            


                


                

            

            


                

                    }
                

            

        

        


            


                


                

            

            


                

                    </script>
                

            

        

    

    

        
    

然后就要使用組件時使用 slot-scope="xxx" 去接收，或者直接使用 scope，要注意的是此處標準一點最好寫在 template 中，這里的 xxx 不需要和組件插槽中起的名字一樣，隨便起就行。然后我們打印一下接收到的數(shù)據(jù)看看其是什么

    


        


            


                


                

            

            


                

                    <template>
                

            

        

        


            


                


                

            

            


                

                    <div class="app-box">
                

            

        

        


            


                


                

            

            


                

                    <Classify>
                

            

        

        


            


                


                

            

            


                

                    <template slot-scope="datas">
                

            

        

        


            


                


                

            

            


                

                    <div>{{datas}}</div>
                

            

        

        


            


                


                

            

            


                

                    </template>
                

            

        

        


            


                


                

            

            


                

                    </Classify>
                

            

        

        


            


                


                

            

            


                

                    </div>
                

            

        

        


            


                


                

            

            


                

                    </template>
                

            

        

    

       可以看到我們接受到了一個對象，對象中包含的是你插槽中綁定的所有數(shù)據(jù)（我們只綁定了一個所以對象里只有一組數(shù)據(jù)），對此我們就能在組件標簽體中使用得到的數(shù)據(jù)了

 

4.2 作用域插槽使用

下面簡單實現(xiàn)一下作用域插槽的使用

 classify.vue組件：

    


        


            


            

        

        


            

                <template>
            

        

    

    


        


            


            

        

        


            

                <div class="classify-box">
            

        

    

    


        


            


            

        

        


            

                <div class="title">下面是作用域插槽的內容</div>
            

        

    

    


        


            


            

        

        


            

                <slot :hobby="hobby"></slot>
            

        

    

    


        


            


            

        

        


            

                </div>
            

        

    

    


        


            


            

        

        


            

                </template>
            

        

    

    


        


            


            

        

        


            


            

        

    

    


        


            


            

        

        


            

                <script>
            

        

    

    


        


            


            

        

        


            

                export default {
            

        

    

    


        


            


            

        

        


            

                name:'Classify',
            

        

    

    


        


            


            

        

        


            

                data() {
            

        

    

    


        


            


            

        

        


            

                return {
            

        

    

    


        


            


            

        

        


            

                hobby:['打游戲','睡大覺','吃大餐']
            

        

    

    


        


            


            

        

        


            

                }
            

        

    

    


        


            


            

        

        


            

                },
            

        

    

    


        


            


            

        

        


            

                }
            

        

    

    


        


            


            

        

        


            

                </script>
            

        

    

    


        


            


            

        

        


            


            

        

    

    


        


            


            

        

        


            

                <style scoped>
            

        

    

    


        


            


            

        

        


            


            

        

    

    


        


            


            

        

        


            

                </style>
            

        

    




    

App.vue組件：

此處 slot-scope 接收的數(shù)據(jù)使用了es6解構把數(shù)據(jù)解構出來了

    


        


            


            

        

        


            

                <template>
            

        

    

    


        


            


            

        

        


            

                <div class="app-box">
            

        

    

    


        


            


            

        

        


            

                <Classify>
            

        

    

    


        


            


            

        

        


            

                <template slot-scope="{hobby}">
            

        

    

    


        


            


            

        

        


            

                <ul>
            

        

    

    


        


            


            

        

        


            

                <li v-for="(h,index) in hobby" :key="index">{{h}}</li>
            

        

    

    


        


            


            

        

        


            

                </ul>
            

        

    

    


        


            


            

        

        


            

                </template>
            

        

    

    


        


            


            

        

        


            

                </Classify>
            

        

    

    


        


            


            

        

        


            

                </div>
            

        

    

    


        


            


            

        

        


            

                </template>
            

        

    

    


        


            


            

        

        


            


            

        

    

    


        


            


            

        

        


            

                <script>
            

        

    

    


        


            


            

        

        


            

                import Classify from './components/classify.vue'
            

        

    

    


        


            


            

        

        


            

                export default {
            

        

    

    


        


            


            

        

        


            

                name: 'App',
            

        

    

    


        


            


            

        

        


            

                data() {
            

        

    

    


        


            


            

        

        


            

                return {
            

        

    

    


        


            


            

        

        


            


            

        

    

    


        


            


            

        

        


            

                }
            

        

    

    


        


            


            

        

        


            

                },
            

        

    

    


        


            


            

        

        


            

                components: {
            

        

    

    


        


            


            

        

        


            

                Classify:Classify
            

        

    

    


        


            


            

        

        


            

                }
            

        

    

    


        


            


            

        

        


            

                }
            

        

    

    


        


            


            

        

        


            

                </script>
            

        

    

    


        


            


            

        

        


            


            

        

    

    


        


            


            

        

        


            

                <style scoped>
            

        

    

    


        


            


            

        

        


            


            

        

    

    


        


            


            

        

        


            

                </style>
            

        

    




    

這樣就簡單實現(xiàn)了作用域插槽的案例

 感謝支持'


 來源：csdn

藍藍設計建立了UI設計分享群，每天會分享國內外的一些優(yōu)秀設計，如果有興趣的話，可以進入一起成長學習，請加微信ban_lanlan，報下信息，藍小助會請您入群。歡迎您加入噢~~
希望得到建議咨詢、商務合作，也請與我們聯(lián)系01063334945。 

分享此文一切功德，皆悉回向給文章原作者及眾讀者. 免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯(lián)系，我們立即更正或刪除。 

藍藍設計( sillybuy.com )是一家專注而深入的界面設計公司，為期望卓越的國內外企業(yè)提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網(wǎng)站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數(shù)據(jù)可視化設計公司、UI交互設計公司、高端網(wǎng)站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司

畫面平衡是一個很基本的設計理念，但很多朋友在平時的作品中容易忽視這個點。彩云在星球中幫不少朋友看過作品集，發(fā)現(xiàn)最多的問題之一就是畫面平衡沒做好，我覺得只要把這個基本問題解決了，作品就能提升一個檔次。

用戶本能地會對不平衡的設計感到厭煩，如何在畫面中創(chuàng)造一個有吸引力的平衡？是本篇文章要分享的內容。

平衡是一個作品中最重要的元素之一。平衡中的對稱關系能夠創(chuàng)造平衡與和諧，這種平衡狀態(tài)直觀上能夠讓用戶感到舒適。

人體是垂直對稱的，我們的視覺接收也與之相對應。我們喜歡物體在垂直軸上保持平衡，直覺上總是傾向于平衡一種力量與另一種力量。

在設計環(huán)境中，平衡是基于元素的視覺重量，而視覺重量是用戶對圖像的注意力范圍。如果畫面是平衡的，用戶會下意識地感到舒適。畫面平衡被認為是其元素在視覺上的比例安排。

如何讓一個頁面看起來平衡？

一、對稱（靜態(tài)）平衡

最常見的平衡例子就是使用對稱。

在潛意識層面上，對稱的視覺能讓人愉悅，能讓畫面看起來和諧有條理。對稱的平衡是通過在水平或垂直的中軸兩側均勻放置元素來創(chuàng)造的。也就是說，畫面中間假想線的兩邊實際上是彼此的鏡像。有些人認為對稱的平衡是無聊和可預測的，但它經(jīng)受住了時間的考驗，到現(xiàn)在仍然是在頁面上創(chuàng)造舒適和穩(wěn)健感覺的最好方法之一。

二、不對稱（動態(tài)）平衡

兩側重量不相同的元素構成具有不對稱平衡。

動態(tài)平衡通常會比靜態(tài)平衡更有設計感，讓畫面不至于呆板。在缺乏平衡的情況下，我們的目光會條件反射性地開始尋找平衡點，這是一個很好的機會，可以將注意力吸引到頁面上可能還沒被注意到的部分。頁面重點就應該放在這里——抓住用戶的注意力，就像產品的生命線一樣。

比如一般這樣去“配重”的元素會是一個按鈕或者標題。

重要信息（或者是行動按鈕）就是我們需要去配重的價值元素。

不對稱的現(xiàn)象越嚴重，用戶就越想找出其中的原因（檢查配重）。人們本能地比平時更仔細地研究這樣的畫面。然而，這里需要注意分寸，過于古怪的構圖并不總是能被很好的感知。

三、徑向平衡

平衡中的另一種類型，特點是視覺元素從一個共同的中心點放射出來。徑向平衡在設計中不常用。它的優(yōu)點是，注意力很容易找到并保持一個焦點——恰好就在它的中心，這通常是構圖中最引人注目的部分。

四、馬賽克平衡

這是一種平衡中的混亂，就像 Jackson Pollock的畫作一樣。這樣的組成沒有突出的焦點，所有的元素都有同樣的視覺重量。沒有層次，乍一看，畫面就像視覺噪音，但所有元素又相互匹配，形成一個連貫的整體。

（彩云注：這是一種比較高階的設計平衡處理手法，用的好可以讓畫面非常具有設計感，但把握不好的話，就會非常凌亂。所以，我們平時能看到很多大師的作品看似一些簡單圖形的使用，但就是好看，輪到自己設計的時候就會發(fā)現(xiàn)，越簡單的設計似乎越難設計好。）

五、視覺平衡的秘密？

當談到構圖中的重量平衡時，他們經(jīng)常將其與物理世界中的重量進行比較：重力、杠桿、重量和支點。我們的大腦和眼睛感知平衡的方式非常類似于力學定律。我們很容易把一幅畫想象成一個在某一點上平衡的平面，就像一個天平。如果我們在圖像的邊緣添加一個元素，它就會失去平衡，有必要修復它。元素是否是一組色調、顏色還是點并不重要，目標是找到圖像的視覺“重心”，即圖像的重心。

不幸的是，沒有精確的方法來確定一個物體的視覺質量。一般來說，設計師依賴于他們的直覺。不過，下面這些有用的觀察可能會有所幫助：

1）大小

大的物體總是更重。

2）形狀

不規(guī)則形狀比規(guī)則形狀的元素輕。

3）顏色

暖色比冷色重。

4）色調

深色物體比淺色物體重。

5）圖案

帶有圖案的元素顯得更重。

6）3D

帶有紋理貼圖的元素顯得更重。

7）位置

物體離中心越遠，其視覺重量越大。

8）方向

垂直元素比水平元素更重。

9）密度

許多小元素可以抵消一個大元素。

10）內部復雜性

物體內部越復雜，視覺重量更大。

11）填充空間關系

正形空間比負形空間更重。

12）對重量的感知

照片中的啞鈴看起來會比一只鋼筆更重。

六、總結

當使用對稱時，作品看起來可以更加的專業(yè)和有科學性。其中，靜態(tài)對稱的作品顯得更加有專業(yè)精神和嚴肅的；而動態(tài)對稱的設計方法則能吸引用戶的興趣，表達出個性和創(chuàng)造力，能讓用戶集中注意力。

作者：彩云sky
來源：人人都是產品經(jīng)理
著作權歸作者所有。商業(yè)轉載請聯(lián)系作者獲得授權，非商業(yè)轉載請注明出處。

藍藍設計建立了UI設計分享群，每天會分享國內外的一些優(yōu)秀設計，如果有興趣的話，可以進入一起成長學習，請加藍小助，微信號:ben_lanlan，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯(lián)系01063334945。

分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯(lián)系，我們立即更正或刪除。

藍藍設計( sillybuy.com )是一家專注而深入的界面設計公司，為期望卓越的國內外企業(yè)提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網(wǎng)站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數(shù)據(jù)可視化設計公司、UI交互設計公司、高端網(wǎng)站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司