首頁

jquery 根據(jù)下標(biāo)獲取classname,以及其子元素，修改classname的值

前端達(dá)人

1. 根據(jù)下標(biāo)獲取對應(yīng)的classname,實(shí)現(xiàn)點(diǎn)擊按鈕觸發(fā)當(dāng)前塊的點(diǎn)擊事件 

<div class="right" @click="meetingfileVisible(index)">
  <span class="foldIcon">
     <i class="el-icon-caret-bottom"></i>
  </span>
</div>
<div class="meeting-file">
  <span>與現(xiàn)實(shí)生活一致</span>
</div> 
            
    

                
  • 
                    1
                
    • 

                
  • 
                    2
                
    • 

                
  • 
                    3
                
    • 

                
  • 
                    4
                
    • 

                
  • 
                    5
                
    • 

                
  • 
                    6
                
    • 

                
  • 
                    7
                
    • 

                
  • 
                    8
                
    • 

            


.meeting-file{ display:none; } 
            
    

                
  • 
                    1
                
    • 

                
  • 
                    2
                
    • 

                
  • 
                    3
                
    • 

            


meetingfileVisible(index) { $(".meeting-file").eq(index).slideToggle("slow"); var cal =$(".foldIcon").eq(index).children("i").attr("class"); cal = cal === 'el-icon-caret-bottom' ? 'el-icon-caret-top' : 'el-icon-caret-bottom'; $(".foldIcon").eq(index).children("i").attr("class", cal); }, 
            
    

                
  • 
                    1
                
    • 

                
  • 
                    2
                
    • 

                
  • 
                    3
                
    • 

                
  • 
                    4
                
    • 

                
  • 
                    5
                
    • 

                
  • 
                    6
                
    •
評論(0) 瀏覽(580)

jquery里判斷數(shù)組內(nèi)是否包含了指定的值或元素的方法

前端達(dá)人

本文講的是在jquery里，如何判斷一個數(shù)組里是否包含了指定的值，變量，或其它對象元素的方法。

在jquery里，我們可以用$.inArray來判斷一個數(shù)組里是否包含了指定的值或其它對象元素，來看一個簡單的實(shí)例： 


    
    

        
  1. 

            
    

                
    

                
    

            
    

            
    

                
    
                    var arr=["aijquery","jquery","I like it"];
                
    

            
    

        
    2. 

        
  2. 

            
    

                
    

                
    

            
    

            
    

                
    
                    var str="aijquery.cn";
                
    

            
    

        
    3. 

        
  3. 

            
    

                
    

                
    

            
    

            
    

                
    
                    if($.inArray(str,arr)<0){
                
    

            
    

        
    4. 

        
  4. 

            
    

                
    

                
    

            
    

            
    

                
    
                    alert("數(shù)組里不包含！");
                
    

            
    

        
    5. 

        
  5. 

            
    

                
    

                
    

            
    

            
    

                
    
                    }
                
    

            
    

        
    6.

$.inArray是用來獲取指定的值在數(shù)組中的位置，從0開始計數(shù)(如果沒有找到則返回 -1 。

 

上面的數(shù)組只是普通的字符型數(shù)組，下面我們來看其它類型的數(shù)組，比如jquery里用$.makeArray來生成的HTML元素類數(shù)組： 


    
    

        
  1. 

            
    

                
    

                
    

            
    

            
    

                
    
                    //我們首先使用$.makeArray來生成一個數(shù)組
                
    

            
    

        
    2. 

        
  2. 

            
    

                
    

                
    

            
    

            
    

                
    
                    var arr=$.makeArray($("div"));
                
    

            
    

        
    3.

現(xiàn)在假設(shè)這些div里，我們其中有一個ID為"aijquery"的div，那么我們是否可以用上面的方法來判斷這個div是否包含在這個數(shù)組里呢？

答案是可以的，不過需要注意轉(zhuǎn)換jquery對象為js對象，來看下面站長的測試結(jié)果： 


    
    

        
  1. 

            
    

                
    

                
    

            
    

            
    

                
    
                    $.inArray($("#aijquery"),arr);//返回-1 這是錯誤的結(jié)果
                
    

            
    

        
    2. 

        
  2. 

            
    

                
    

                
    

            
    

            
    

                
    
                    $.inArray($("#aijquery")[0],arr);//返回0 這才是正確的結(jié)果
                
    

            
    

        
    3.

 

 

PS:關(guān)于jquery對象與js對象之間的轉(zhuǎn)換：jquery對象與dom對象之間互相轉(zhuǎn)換的方法，使jquery對象可以直接使用js里的方法

 

  
<!doctype html>
<html lang="en">
<head>
<title>$.inArray判斷元素是否包含在數(shù)組中的在線演示-aijQuery.cn</title>
<script language="JavaScript" src="http://cdn.bootcss.com/jquery/1.9.1/jquery.min.js"></script>
<link rel="stylesheet" >
</head>
<body>
  <div id="aijquery">aijquery</div>
  <div>1</div><div>2</div><div>3</div>
  <P id="inarray">div#aijquery在數(shù)組里的位置是：</P>
<script language="javascript"> var arr=$.makeArray($("div")); //在測試的時候，可以把下面代碼中的[0]去掉，換成jquery對象來試 $("#inarray").append($.inArray($("#aijquery")[0],arr)); </script>
</body>
</html>
View Code

摘自：http://www.aijquery.cn/Html/jqueryrumen/79.html


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

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

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

評論(0) 瀏覽(808)

關(guān)于vue播放flv，m3u8視頻流(監(jiān)控)的方法

前端達(dá)人

前文：隨著前端大屏頁面的逐漸壯大，客戶的需求也越來越多，大屏上面展示的事物也越來越豐     富。其中實(shí)時播放監(jiān)控的需求逐步增加，視頻流格式也是有很多種，用到最多的.flv、.m3u8。

一、 JessibucaPlayer插件用來播放flv流

1.首先是先把文件放在vue項目的public下面

2.在index.html文件里面引入 index.js文件（直接引入即可）

 3.把封裝好的JessibucaPlayer組件放到公共components 



    

    
  1. 

        
    

            
    

            
    

        
    

        
    

            
    
                <template>
            
    

        
    

    
    2. 

    
  2. 

        
    

            
    

            
    

        
    

        
    

            
    
                <div class="jessibuca-player" style="width: 100%; height: 100%">
            
    

        
    

    
    3. 

    
  3. 

        
    

            
    

            
    

        
    

        
    

            
    
                <div class="container" :id="id" ref="container"></div>
            
    

        
    

    
    4. 

    
  4. 

        
    

            
    

            
    

        
    

        
    

            
    
                </div>
            
    

        
    

    
    5. 

    
  5. 

        
    

            
    

            
    

        
    

        
    

            
    
                </template>
            
    

        
    

    
    6. 

    
  6. 

        
    

            
    

            
    

        
    

        
    

            
    

            
    

        
    

    
    7. 

    
  7. 

        
    

            
    

            
    

        
    

        
    

            
    
                <script>
            
    

        
    

    
    8. 

    
  8. 

        
    

            
    

            
    

        
    

        
    

            
    
                export default {
            
    

        
    

    
    9. 

    
  9. 

        
    

            
    

            
    

        
    

        
    

            
    
                name: "JessibucaPlayer",
            
    

        
    

    
    10. 

    
  10. 

        
    

            
    

            
    

        
    

        
    

            
    
                props: {
            
    

        
    

    
    11. 

    
  11. 

        
    

            
    

            
    

        
    

        
    

            
    
                videoUrl: {
            
    

        
    

    
    12. 

    
  12. 

        
    

            
    

            
    

        
    

        
    

            
    
                type: String,
            
    

        
    

    
    13. 

    
  13. 

        
    

            
    

            
    

        
    

        
    

            
    
                default: ""
            
    

        
    

    
    14. 

    
  14. 

        
    

            
    

            
    

        
    

        
    

            
    
                },
            
    

        
    

    
    15. 

    
  15. 

        
    

            
    

            
    

        
    

        
    

            
    
                id: {
            
    

        
    

    
    16. 

    
  16. 

        
    

            
    

            
    

        
    

        
    

            
    
                type: Number,
            
    

        
    

    
    17. 

    
  17. 

        
    

            
    

            
    

        
    

        
    

            
    
                required: true
            
    

        
    

    
    18. 

    
  18. 

        
    

            
    

            
    

        
    

        
    

            
    
                }
            
    

        
    

    
    19. 

    
  19. 

        
    

            
    

            
    

        
    

        
    

            
    
                },
            
    

        
    

    
    20. 

    
  20. 

        
    

            
    

            
    

        
    

        
    

            
    
                data() {
            
    

        
    

    
    21. 

    
  21. 

        
    

            
    

            
    

        
    

        
    

            
    
                return {
            
    

        
    

    
    22. 

    
  22. 

        
    

            
    

            
    

        
    

        
    

            
    
                jessibuca: null // jessibuca 實(shí)例化對象
            
    

        
    

    
    23. 

    
  23. 

        
    

            
    

            
    

        
    

        
    

            
    
                };
            
    

        
    

    
    24. 

    
  24. 

        
    

            
    

            
    

        
    

        
    

            
    
                },
            
    

        
    

    
    25. 

    
  25. 

        
    

            
    

            
    

        
    

        
    

            
    
                methods: {
            
    

        
    

    
    26. 

    
  26. 

        
    

            
    

            
    

        
    

        
    

            
    
                init() {
            
    

        
    

    
    27. 

    
  27. 

        
    

            
    

            
    

        
    

        
    

            
    
                this.jessibuca = new window.Jessibuca({
            
    

        
    

    
    28. 

    
  28. 

        
    

            
    

            
    

        
    

        
    

            
    
                container: document.getElementById(this.id), // 播放器容器,若為 string ，則底層調(diào)用的是 document.getElementById('id')
            
    

        
    

    
    29. 

    
  29. 

        
    

            
    

            
    

        
    

        
    

            
    
                videoBuffer: 0.2, // 設(shè)置最大緩沖時長，單位毫秒，播放器會自動消除延遲。
            
    

        
    

    
    30. 

    
  30. 

        
    

            
    

            
    

        
    

        
    

            
    
                forceNoOffscreen: true, // 是否不使用離屏模式（提升渲染能力）
            
    

        
    

    
    31. 

    
  31. 

        
    

            
    

            
    

        
    

        
    

            
    
                hasAudio: false, // 是否有音頻
            
    

        
    

    
    32. 

    
  32. 

        
    

            
    

            
    

        
    

        
    

            
    
                rotate: 0, // 設(shè)置旋轉(zhuǎn)角度，只支持，0(默認(rèn)) ，180，270 三個值
            
    

        
    

    
    33. 

    
  33. 

        
    

            
    

            
    

        
    

        
    

            
    
                isResize: false, // 1.當(dāng)為true的時候：視頻畫面做等比縮放后,高或?qū)拰Rcanvas區(qū)域,畫面不被拉伸,但有黑邊;2.當(dāng)為false的時候：視頻畫面完全填充canvas區(qū)域,畫面會被拉伸
            
    

        
    

    
    34. 

    
  34. 

        
    

            
    

            
    

        
    

        
    

            
    
                isFullSize: true, // 當(dāng)為true的時候：視頻畫面做等比縮放后,完全填充canvas區(qū)域,畫面不被拉伸,沒有黑邊,但畫面顯示不全
            
    

        
    

    
    35. 

    
  35. 

        
    

            
    

            
    

        
    

        
    

            
    
                debug: false, // 是否開啟控制臺調(diào)試打印
            
    

        
    

    
    36. 

    
  36. 

        
    

            
    

            
    

        
    

        
    

            
    
                timeout: 30, // 設(shè)置超時時長, 單位秒,在連接成功之前和播放中途,如果超過設(shè)定時長無數(shù)據(jù)返回,則回調(diào)timeout事件
            
    

        
    

    
    37. 

    
  37. 

        
    

            
    

            
    

        
    

        
    

            
    
                supportDblclickFullscreen: true, // 是否支持屏幕的雙擊事件，觸發(fā)全屏，取消全屏事件。
            
    

        
    

    
    38. 

    
  38. 

        
    

            
    

            
    

        
    

        
    

            
    
                showBandwidth: false, // 是否顯示網(wǎng)速
            
    

        
    

    
    39. 

    
  39. 

        
    

            
    

            
    

        
    

        
    

            
    
                operateBtns: {
            
    

        
    

    
    40. 

    
  40. 

        
    

            
    

            
    

        
    

        
    

            
    
                // 配置功能
            
    

        
    

    
    41. 

    
  41. 

        
    

            
    

            
    

        
    

        
    

            
    
                fullscreen: false, // 是否顯示全屏按鈕
            
    

        
    

    
    42. 

    
  42. 

        
    

            
    

            
    

        
    

        
    

            
    
                screenshot: false, // 是否顯示截圖按鈕
            
    

        
    

    
    43. 

    
  43. 

        
    

            
    

            
    

        
    

        
    

            
    
                play: false, // 是否顯示播放暫停按鈕
            
    

        
    

    
    44. 

    
  44. 

        
    

            
    

            
    

        
    

        
    

            
    
                audio: false // 是否顯示聲音按鈕
            
    

        
    

    
    45. 

    
  45. 

        
    

            
    

            
    

        
    

        
    

            
    
                },
            
    

        
    

    
    46. 

    
  46. 

        
    

            
    

            
    

        
    

        
    

            
    
                keepScreenOn: false, // 開啟屏幕常亮，在手機(jī)瀏覽器上, canvas標(biāo)簽渲染視頻并不會像video標(biāo)簽?zāi)菢颖３制聊怀Ａ痢?/span>
            
    

        
    

    
    47. 

    
  47. 

        
    

            
    

            
    

        
    

        
    

            
    
                isNotMute: false, // 是否開啟聲音，默認(rèn)是關(guān)閉聲音播放的。
            
    

        
    

    
    48. 

    
  48. 

        
    

            
    

            
    

        
    

        
    

            
    
                loadingText: "加載中...", // 加載過程中文案。
            
    

        
    

    
    49. 

    
  49. 

        
    

            
    

            
    

        
    

        
    

            
    
                background: "" // 背景圖片。
            
    

        
    

    
    50. 

    
  50. 

        
    

            
    

            
    

        
    

        
    

            
    
                });
            
    

        
    

    
    51. 

    
  51. 

        
    

            
    

            
    

        
    

        
    

            
    
                // 事件：
            
    

        
    

    
    52. 

    
  52. 

        
    

            
    

            
    

        
    

        
    

            
    
                this.jessibuca_load()
            
    

        
    

    
    53. 

    
  53. 

        
    

            
    

            
    

        
    

        
    

            
    
                // 1. 監(jiān)聽 jessibuca 初始化事件。
            
    

        
    

    
    54. 

    
  54. 

        
    

            
    

            
    

        
    

        
    

            
    
                this.jessibuca.on("load", () => {
            
    

        
    

    
    55. 

    
  55. 

        
    

            
    

            
    

        
    

        
    

            
    
                this.jessibuca_load()});
            
    

        
    

    
    56. 

    
  56. 

        
    

            
    

            
    

        
    

        
    

            
    
                // 2. 信息，包含錯誤信息
            
    

        
    

    
    57. 

    
  57. 

        
    

            
    

            
    

        
    

        
    

            
    
                this.jessibuca.on("log", data => this.jessibuca_log(data));
            
    

        
    

    
    58. 

    
  58. 

        
    

            
    

            
    

        
    

        
    

            
    
                // 3. 觸發(fā)暫停事件
            
    

        
    

    
    59. 

    
  59. 

        
    

            
    

            
    

        
    

        
    

            
    
                this.jessibuca.on("pause", this.jessibuca_pause);
            
    

        
    

    
    60. 

    
  60. 

        
    

            
    

            
    

        
    

        
    

            
    
                // 4. 觸發(fā)播放事件
            
    

        
    

    
    61. 

    
  61. 

        
    

            
    

            
    

        
    

        
    

            
    
                this.jessibuca.on("play", this.jessibuca_play);
            
    

        
    

    
    62. 

    
  62. 

        
    

            
    

            
    

        
    

        
    

            
    
                // 5. 當(dāng)前是否全屏
            
    

        
    

    
    63. 

    
  63. 

        
    

            
    

            
    

        
    

        
    

            
    
                this.jessibuca.on("fullscreen", this.jessibuca_fullscreen);
            
    

        
    

    
    64. 

    
  64. 

        
    

            
    

            
    

        
    

        
    

            
    
                // 6. 觸發(fā)聲音事件，返回boolean值
            
    

        
    

    
    65. 

    
  65. 

        
    

            
    

            
    

        
    

        
    

            
    
                this.jessibuca.on("mute", this.jessibuca_mute);
            
    

        
    

    
    66. 

    
  66. 

        
    

            
    

            
    

        
    

        
    

            
    
                // 7. 當(dāng)解析出音頻信息時回調(diào)
            
    

        
    

    
    67. 

    
  67. 

        
    

            
    

            
    

        
    

        
    

            
    
                this.jessibuca.on("audioInfo", this.jessibuca_audioInfo);
            
    

        
    

    
    68. 

    
  68. 

        
    

            
    

            
    

        
    

        
    

            
    
                // 8. 當(dāng)解析出視頻信息時回調(diào)
            
    

        
    

    
    69. 

    
  69. 

        
    

            
    

            
    

        
    

        
    

            
    
                this.jessibuca.on("videoInfo", this.jessibuca_videoInfo);
            
    

        
    

    
    70. 

    
  70. 

        
    

            
    

            
    

        
    

        
    

            
    
                // 9. 錯誤信息
            
    

        
    

    
    71. 

    
  71. 

        
    

            
    

            
    

        
    

        
    

            
    
                this.jessibuca.on("error", this.jessibuca_error);
            
    

        
    

    
    72. 

    
  72. 

        
    

            
    

            
    

        
    

        
    

            
    
                // 10. 當(dāng)設(shè)定的超時時間內(nèi)無數(shù)據(jù)返回,則回調(diào)
            
    

        
    

    
    73. 

    
  73. 

        
    

            
    

            
    

        
    

        
    

            
    
                this.jessibuca.on("timeout", this.jessibuca_timeout);
            
    

        
    

    
    74. 

    
  74. 

        
    

            
    

            
    

        
    

        
    

            
    
                // 11. 流狀態(tài)統(tǒng)計，流開始播放后回調(diào)，每秒1次
            
    

        
    

    
    75. 

    
  75. 

        
    

            
    

            
    

        
    

        
    

            
    
                this.jessibuca.on("start", this.jessibuca_start);
            
    

        
    

    
    76. 

    
  76. 

        
    

            
    

            
    

        
    

        
    

            
    
                // 12. 渲染性能統(tǒng)計，流開始播放后回調(diào)，每秒1次
            
    

        
    

    
    77. 

    
  77. 

        
    

            
    

            
    

        
    

        
    

            
    
                this.jessibuca.on("performance", this.jessibuca_performance);
            
    

        
    

    
    78. 

    
  78. 

        
    

            
    

            
    

        
    

        
    

            
    
                // 13. 當(dāng)前網(wǎng)速， 單位KB 每秒1次,
            
    

        
    

    
    79. 

    
  79. 

        
    

            
    

            
    

        
    

        
    

            
    
                this.jessibuca.on("kBps", this.jessibuca_kBps);
            
    

        
    

    
    80. 

    
  80. 

        
    

            
    

            
    

        
    

        
    

            
    
                },
            
    

        
    

    
    81. 

    
  81. 

        
    

            
    

            
    

        
    

        
    

            
    
                // 事件：
            
    

        
    

    
    82. 

    
  82. 

        
    

            
    

            
    

        
    

        
    

            
    
                jessibuca_load() {
            
    

        
    

    
    83. 

    
  83. 

        
    

            
    

            
    

        
    

        
    

            
    
                // 監(jiān)聽 jessibuca 初始化事件。
            
    

        
    

    
    84. 

    
  84. 

        
    

            
    

            
    

        
    

        
    

            
    
                console.log("on load");
            
    

        
    

    
    85. 

    
  85. 

        
    

            
    

            
    

        
    

        
    

            
    
                console.log("module", this.videoUrl);
            
    

        
    

    
    86. 

    
  86. 

        
    

            
    

            
    

        
    

        
    

            
    
                this.methods_play(this.videoUrl);
            
    

        
    

    
    87. 

    
  87. 

        
    

            
    

            
    

        
    

        
    

            
    
                },
            
    

        
    

    
    88. 

    
  88. 

        
    

            
    

            
    

        
    

        
    

            
    
                jessibuca_log(data) {
            
    

        
    

    
    89. 

    
  89. 

        
    

            
    

            
    

        
    

        
    

            
    
                // 信息，包含錯誤信息
            
    

        
    

    
    90. 

    
  90. 

        
    

            
    

            
    

        
    

        
    

            
    
                console.log("on log", data);
            
    

        
    

    
    91. 

    
  91. 

        
    

            
    

            
    

        
    

        
    

            
    
                },
            
    

        
    

    
    92. 

    
  92. 

        
    

            
    

            
    

        
    

        
    

            
    
                jessibuca_pause(flag) {
            
    

        
    

    
    93. 

    
  93. 

        
    

            
    

            
    

        
    

        
    

            
    
                // 觸發(fā)暫停事件
            
    

        
    

    
    94. 

    
  94. 

        
    

            
    

            
    

        
    

        
    

            
    
                console.log("on pause", flag);
            
    

        
    

    
    95. 

    
  95. 

        
    

            
    

            
    

        
    

        
    

            
    
                },
            
    

        
    

    
    96. 

    
  96. 

        
    

            
    

            
    

        
    

        
    

            
    
                jessibuca_play(flag) {
            
    

        
    

    
    97. 

    
  97. 

        
    

            
    

            
    

        
    

        
    

            
    
                // 觸發(fā)播放事件
            
    

        
    

    
    98. 

    
  98. 

        
    

            
    

            
    

        
    

        
    

            
    
                console.log("on play", flag);
            
    

        
    

    
    99. 

    
  99. 

        
    

            
    

            
    

        
    

        
    

            
    
                },
            
    

        
    

    
    100. 

    
  100. 

        
    

            
    

            
    

        
    

        
    

            
    
                jessibuca_fullscreen(flag) {
            
    

        
    

    
    101. 

    
  101. 

        
    

            
    

            
    

        
    

        
    

            
    
                // 當(dāng)前是否全屏
            
    

        
    

    
    102. 

    
  102. 

        
    

            
    

            
    

        
    

        
    

            
    
                console.log("on fullscreen", flag);
            
    

        
    

    
    103. 

    
  103. 

        
    

            
    

            
    

        
    

        
    

            
    
                if (flag) {
            
    

        
    

    
    104. 

    
  104. 

        
    

            
    

            
    

        
    

        
    

            
    
                let myEvent = new Event("resize");
            
    

        
    

    
    105. 

    
  105. 

        
    

            
    

            
    

        
    

        
    

            
    
                setTimeout(() => {
            
    

        
    

    
    106. 

    
  106. 

        
    

            
    

            
    

        
    

        
    

            
    
                window.dispatchEvent(myEvent);
            
    

        
    

    
    107. 

    
  107. 

        
    

            
    

            
    

        
    

        
    

            
    
                }, 100);
            
    

        
    

    
    108. 

    
  108. 

        
    

            
    

            
    

        
    

        
    

            
    
                }
            
    

        
    

    
    109. 

    
  109. 

        
    

            
    

            
    

        
    

        
    

            
    
                },
            
    

        
    

    
    110. 

    
  110. 

        
    

            
    

            
    

        
    

        
    

            
    
                jessibuca_mute(flag) {
            
    

        
    

    
    111. 

    
  111. 

        
    

            
    

            
    

        
    

        
    

            
    
                // 觸發(fā)聲音事件
            
    

        
    

    
    112. 

    
  112. 

        
    

            
    

            
    

        
    

        
    

            
    
                console.log("on mute", flag);
            
    

        
    

    
    113. 

    
  113. 

        
    

            
    

            
    

        
    

        
    

            
    
                },
            
    

        
    

    
    114. 

    
  114. 

        
    

            
    

            
    

        
    

        
    

            
    
                jessibuca_audioInfo(data) {
            
    

        
    

    
    115. 

    
  115. 

        
    

            
    

            
    

        
    

        
    

            
    
                // 當(dāng)解析出音頻信息時回調(diào)，2個回調(diào)參數(shù)
            
    

        
    

    
    116. 

    
  116. 

        
    

            
    

            
    

        
    

        
    

            
    
                // 1. numOfChannels：聲頻通道
            
    

        
    

    
    117. 

    
  117. 

        
    

            
    

            
    

        
    

        
    

            
    
                // 2. sampleRate 采樣率
            
    

        
    

    
    118. 

    
  118. 

        
    

            
    

            
    

        
    

        
    

            
    
                console.log("audioInfo", data);
            
    

        
    

    
    119. 

    
  119. 

        
    

            
    

            
    

        
    

        
    

            
    
                },
            
    

        
    

    
    120. 

    
  120. 

        
    

            
    

            
    

        
    

        
    

            
    
                jessibuca_videoInfo(data) {
            
    

        
    

    
    121. 

    
  121. 

        
    

            
    

            
    

        
    

        
    

            
    
                // 當(dāng)解析出視頻信息時回調(diào)
            
    

        
    

    
    122. 

    
  122. 

        
    

            
    

            
    

        
    

        
    

            
    
                // 1. w：視頻寬
            
    

        
    

    
    123. 

    
  123. 

        
    

            
    

            
    

        
    

        
    

            
    
                // 2. h：視頻高
            
    

        
    

    
    124. 

    
  124. 

        
    

            
    

            
    

        
    

        
    

            
    
                console.log("videoInfo", data);
            
    

        
    

    
    125. 

    
  125. 

        
    

            
    

            
    

        
    

        
    

            
    
                },
            
    

        
    

    
    126. 

    
  126. 

        
    

            
    

            
    

        
    

        
    

            
    
                jessibuca_error(error) {
            
    

        
    

    
    127. 

    
  127. 

        
    

            
    

            
    

        
    

        
    

            
    
                // 錯誤信息
            
    

        
    

    
    128. 

    
  128. 

        
    

            
    

            
    

        
    

        
    

            
    
                console.log("error:", error);
            
    

        
    

    
    129. 

    
  129. 

        
    

            
    

            
    

        
    

        
    

            
    
                },
            
    

        
    

    
    130. 

    
  130. 

        
    

            
    

            
    

        
    

        
    

            
    
                jessibuca_timeout() {
            
    

        
    

    
    131. 

    
  131. 

        
    

            
    

            
    

        
    

        
    

            
    
                // 當(dāng)設(shè)定的超時時間內(nèi)無數(shù)據(jù)返回,則回調(diào)
            
    

        
    

    
    132. 

    
  132. 

        
    

            
    

            
    

        
    

        
    

            
    
                console.log("timeout");
            
    

        
    

    
    133. 

    
  133. 

        
    

            
    

            
    

        
    

        
    

            
    
                },
            
    

        
    

    
    134. 

    
  134. 

        
    

            
    

            
    

        
    

        
    

            
    
                jessibuca_start(s) {
            
    

        
    

    
    135. 

    
  135. 

        
    

            
    

            
    

        
    

        
    

            
    
                // 流狀態(tài)統(tǒng)計，流開始播放后回調(diào)，每秒1次
            
    

        
    

    
    136. 

    
  136. 

        
    

            
    

            
    

        
    

        
    

            
    
                // 1. buf: 當(dāng)前緩沖區(qū)時長，單位毫秒
            
    

        
    

    
    137. 

    
  137. 

        
    

            
    

            
    

        
    

        
    

            
    
                // 2. fps: 當(dāng)前視頻幀率,
            
    

        
    

    
    138. 

    
  138. 

        
    

            
    

            
    

        
    

        
    

            
    
                // 3. abps: 當(dāng)前音頻碼率，單位bit,
            
    

        
    

    
    139. 

    
  139. 

        
    

            
    

            
    

        
    

        
    

            
    
                // 4. vbps: 當(dāng)前視頻碼率，單位bit，
            
    

        
    

    
    140. 

    
  140. 

        
    

            
    

            
    

        
    

        
    

            
    
                // 5. ts:當(dāng)前視頻幀pts，單位毫秒
            
    

        
    

    
    141. 

    
  141. 

        
    

            
    

            
    

        
    

        
    

            
    
                // console.log('stats is', s);
            
    

        
    

    
    142. 

    
  142. 

        
    

            
    

            
    

        
    

        
    

            
    
                },
            
    

        
    

    
    143. 

    
  143. 

        
    

            
    

            
    

        
    

        
    

            
    
                jessibuca_performance(performance) {
            
    

        
    

    
    144. 

    
  144. 

        
    

            
    

            
    

        
    

        
    

            
    
                // 渲染性能統(tǒng)計，流開始播放后回調(diào)，每秒1次。
            
    

        
    

    
    145. 

    
  145. 

        
    

            
    

            
    

        
    

        
    

            
    
                // 0: 表示卡頓、1: 表示流暢、2: 表示非常流程
            
    

        
    

    
    146. 

    
  146. 

        
    

            
    

            
    

        
    

        
    

            
    
                // console.log('performance', performance);
            
    

        
    

    
    147. 

    
  147. 

        
    

            
    

            
    

        
    

        
    

            
    
                },
            
    

        
    

    
    148. 

    
  148. 

        
    

            
    

            
    

        
    

        
    

            
    
                jessibuca_kBps(kBps) {
            
    

        
    

    
    149. 

    
  149. 

        
    

            
    

            
    

        
    

        
    

            
    
                // 當(dāng)前網(wǎng)速， 單位KB 每秒1次,
            
    

        
    

    
    150. 

    
  150. 

        
    

            
    

            
    

        
    

        
    

            
    
                // console.log('kBps', kBps);
            
    

        
    

    
    151. 

    
  151. 

        
    

            
    

            
    

        
    

        
    

            
    
                },
            
    

        
    

    
    152. 

    
  152. 

        
    

            
    

            
    

        
    

        
    

            
    
                // 方法：
            
    

        
    

    
    153. 

    
  153. 

        
    

            
    

            
    

        
    

        
    

            
    
                methods_play(url) {
            
    

        
    

    
    154. 

    
  154. 

        
    

            
    

            
    

        
    

        
    

            
    
                // 播放
            
    

        
    

    
    155. 

    
  155. 

        
    

            
    

            
    

        
    

        
    

            
    
                if (this.jessibuca.hasLoaded()) {
            
    

        
    

    
    156. 

    
  156. 

        
    

            
    

            
    

        
    

        
    

            
    
                this.jessibuca.play(url);
            
    

        
    

    
    157. 

    
  157. 

        
    

            
    

            
    

        
    

        
    

            
    
                } else {
            
    

        
    

    
    158. 

    
  158. 

        
    

            
    

            
    

        
    

        
    

            
    
                console.error("視頻數(shù)據(jù)未加載完畢，請稍后操作");
            
    

        
    

    
    159. 

    
  159. 

        
    

            
    

            
    

        
    

        
    

            
    
                }
            
    

        
    

    
    160. 

    
  160. 

        
    

            
    

            
    

        
    

        
    

            
    
                },
            
    

        
    

    
    161. 

    
  161. 

        
    

            
    

            
    

        
    

        
    

            
    
                methods_mute() {
            
    

        
    

    
    162. 

    
  162. 

        
    

            
    

            
    

        
    

        
    

            
    
                // 靜音
            
    

        
    

    
    163. 

    
  163. 

        
    

            
    

            
    

        
    

        
    

            
    
                this.jessibuca.mute();
            
    

        
    

    
    164. 

    
  164. 

        
    

            
    

            
    

        
    

        
    

            
    
                },
            
    

        
    

    
    165. 

    
  165. 

        
    

            
    

            
    

        
    

        
    

            
    
                methods_cancelMute() {
            
    

        
    

    
    166. 

    
  166. 

        
    

            
    

            
    

        
    

        
    

            
    
                // 取消靜音
            
    

        
    

    
    167. 

    
  167. 

        
    

            
    

            
    

        
    

        
    

            
    
                this.jessibuca.cancelMute();
            
    

        
    

    
    168. 

    
  168. 

        
    

            
    

            
    

        
    

        
    

            
    
                },
            
    

        
    

    
    169. 

    
  169. 

        
    

            
    

            
    

        
    

        
    

            
    
                methods_pause() {
            
    

        
    

    
    170. 

    
  170. 

        
    

            
    

            
    

        
    

        
    

            
    
                // 暫停
            
    

        
    

    
    171. 

    
  171. 

        
    

            
    

            
    

        
    

        
    

            
    
                this.jessibuca.pause();
            
    

        
    

    
    172. 

    
  172. 

        
    

            
    

            
    

        
    

        
    

            
    
                },
            
    

        
    

    
    173. 

    
  173. 

        
    

            
    

            
    

        
    

        
    

            
    
                methods_setVolume(volume) {
            
    

        
    

    
    174. 

    
  174. 

        
    

            
    

            
    

        
    

        
    

            
    
                // 設(shè)置音量
            
    

        
    

    
    175. 

    
  175. 

        
    

            
    

            
    

        
    

        
    

            
    
                this.jessibuca.setVolume(volume);
            
    

        
    

    
    176. 

    
  176. 

        
    

            
    

            
    

        
    

        
    

            
    
                },
            
    

        
    

    
    177. 

    
  177. 

        
    

            
    

            
    

        
    

        
    

            
    
                methods_setRotate(rotate) {
            
    

        
    

    
    178. 

    
  178. 

        
    

            
    

            
    

        
    

        
    

            
    
                // 設(shè)置旋轉(zhuǎn)角度 0\180\270
            
    

        
    

    
    179. 

    
  179. 

        
    

            
    

            
    

        
    

        
    

            
    
                this.jessibuca.setRotate(rotate);
            
    

        
    

    
    180. 

    
  180. 

        
    

            
    

            
    

        
    

        
    

            
    
                },
            
    

        
    

    
    181. 

    
  181. 

        
    

            
    

            
    

        
    

        
    

            
    
                methods_destroy() {
            
    

        
    

    
    182. 

    
  182. 

        
    

            
    

            
    

        
    

        
    

            
    
                // 關(guān)閉視頻，釋放底層資源
            
    

        
    

    
    183. 

    
  183. 

        
    

            
    

            
    

        
    

        
    

            
    
                if (this.jessibuca) {
            
    

        
    

    
    184. 

    
  184. 

        
    

            
    

            
    

        
    

        
    

            
    
                this.jessibuca.destroy();
            
    

        
    

    
    185. 

    
  185. 

        
    

            
    

            
    

        
    

        
    

            
    
                }
            
    

        
    

    
    186. 

    
  186. 

        
    

            
    

            
    

        
    

        
    

            
    
                },
            
    

        
    

    
    187. 

    
  187. 

        
    

            
    

            
    

        
    

        
    

            
    
                methods_fullscreen(flag) {
            
    

        
    

    
    188. 

    
  188. 

        
    

            
    

            
    

        
    

        
    

            
    
                // 全屏(取消全屏)播放視頻
            
    

        
    

    
    189. 

    
  189. 

        
    

            
    

            
    

        
    

        
    

            
    
                this.jessibuca.setFullscreen(flag);
            
    

        
    

    
    190. 

    
  190. 

        
    

            
    

            
    

        
    

        
    

            
    
                },
            
    

        
    

    
    191. 

    
  191. 

        
    

            
    

            
    

        
    

        
    

            
    
                methods_screenShot() {
            
    

        
    

    
    192. 

    
  192. 

        
    

            
    

            
    

        
    

        
    

            
    
                // 截圖
            
    

        
    

    
    193. 

    
  193. 

        
    

            
    

            
    

        
    

        
    

            
    
                // 1. screenshot(filename, format, quality)
            
    

        
    

    
    194. 

    
  194. 

        
    

            
    

            
    

        
    

        
    

            
    
                // 2. {string} filename、 {string} format、{number} quality
            
    

        
    

    
    195. 

    
  195. 

        
    

            
    

            
    

        
    

        
    

            
    
                // 3.filename: 保存的文件名, 默認(rèn) 時間戳、format : 截圖的格式，可選png或jpeg或者webp ,默認(rèn) png、quality: 可選參數(shù)，當(dāng)格式是jpeg或者webp時，壓縮質(zhì)量，取值0 ~ 1 ,默認(rèn) 0.92
            
    

        
    

    
    196. 

    
  196. 

        
    

            
    

            
    

        
    

        
    

            
    
                this.jessibuca.screenshot();
            
    

        
    

    
    197. 

    
  197. 

        
    

            
    

            
    

        
    

        
    

            
    
                },
            
    

        
    

    
    198. 

    
  198. 

        
    

            
    

            
    

        
    

        
    

            
    
                methods_setBufferTime(time) {
            
    

        
    

    
    199. 

    
  199. 

        
    

            
    

            
    

        
    

        
    

            
    
                // 設(shè)置最大緩沖時長，單位秒，播放器會自動消除延遲。
            
    

        
    

    
    200. 

    
  200. 

        
    

            
    

            
    

        
    

        
    

            
    
                // {number} time
            
    

        
    

    
    201. 

    
  201. 

        
    

            
    

            
    

        
    

        
    

            
    
                this.jessibuca.setBufferTime(Number(time));
            
    

        
    

    
    202. 

    
  202. 

        
    

            
    

            
    

        
    

        
    

            
    
                },
            
    

        
    

    
    203. 

    
  203. 

        
    

            
    

            
    

        
    

        
    

            
    
                methods_setScaleMode(mode) {
            
    

        
    

    
    204. 

    
  204. 

        
    

            
    

            
    

        
    

        
    

            
    
                // 設(shè)置播放器填充
            
    

        
    

    
    205. 

    
  205. 

        
    

            
    

            
    

        
    

        
    

            
    
                // 1. 0 視頻畫面完全填充canvas區(qū)域,畫面會被拉伸 等同于參數(shù) isResize 為false
            
    

        
    

    
    206. 

    
  206. 

        
    

            
    

            
    

        
    

        
    

            
    
                // 2. 1 視頻畫面做等比縮放后,高或?qū)拰Rcanvas區(qū)域,畫面不被拉伸,但有黑邊 等同于參數(shù) isResize 為true
            
    

        
    

    
    207. 

    
  207. 

        
    

            
    

            
    

        
    

        
    

            
    
                // 3. 2 視頻畫面做等比縮放后,完全填充canvas區(qū)域,畫面不被拉伸,沒有黑邊,但畫面顯示不全 等同于參數(shù) isFullSize 為true
            
    

        
    

    
    208. 

    
  208. 

        
    

            
    

            
    

        
    

        
    

            
    
                this.jessibuca.setScaleMode(Number(mode));
            
    

        
    

    
    209. 

    
  209. 

        
    

            
    

            
    

        
    

        
    

            
    
                },
            
    

        
    

    
    210. 

    
  210. 

        
    

            
    

            
    

        
    

        
    

            
    
                restartPlay() {
            
    

        
    

    
    211. 

    
  211. 

        
    

            
    

            
    

        
    

        
    

            
    
                // 重新加載
            
    

        
    

    
    212. 

    
  212. 

        
    

            
    

            
    

        
    

        
    

            
    
                this.methods_destroy();
            
    

        
    

    
    213. 

    
  213. 

        
    

            
    

            
    

        
    

        
    

            
    
                this.methods_play(this.videoUrl);
            
    

        
    

    
    214. 

    
  214. 

        
    

            
    

            
    

        
    

        
    

            
    
                }
            
    

        
    

    
    215. 

    
  215. 

        
    

            
    

            
    

        
    

        
    

            
    
                },
            
    

        
    

    
    216. 

    
  216. 

        
    

            
    

            
    

        
    

        
    

            
    
                mounted() {
            
    

        
    

    
    217. 

    
  217. 

        
    

            
    

            
    

        
    

        
    

            
    
                this.init();
            
    

        
    

    
    218. 

    
  218. 

        
    

            
    

            
    

        
    

        
    

            
    
                window.onerror = msg => (this.err = msg);
            
    

        
    

    
    219. 

    
  219. 

        
    

            
    

            
    

        
    

        
    

            
    
                },
            
    

        
    

    
    220. 

    
  220. 

        
    

            
    

            
    

        
    

        
    

            
    
                beforeDestroy() {
            
    

        
    

    
    221. 

    
  221. 

        
    

            
    

            
    

        
    

        
    

            
    
                if (this.jessibuca) this.jessibuca.destroy();
            
    

        
    

    
    222. 

    
  222. 

        
    

            
    

            
    

        
    

        
    

            
    
                }
            
    

        
    

    
    223. 

    
  223. 

        
    

            
    

            
    

        
    

        
    

            
    
                };
            
    

        
    

    
    224. 

    
  224. 

        
    

            
    

            
    

        
    

        
    

            
    
                </script>
            
    

        
    

    
    225. 

    
  225. 

        
    

            
    

            
    

        
    

        
    

            
    

            
    

        
    

    
    226. 

    
  226. 

        
    

            
    

            
    

        
    

        
    

            
    
                <style>
            
    

        
    

    
    227. 

    
  227. 

        
    

            
    

            
    

        
    

        
    

            
    
                @import url("./JessibucaPlayer.css");
            
    

        
    

    
    228. 

    
  228. 

        
    

            
    

            
    

        
    

        
    

            
    
                </style>
            
    

        
    

    
    229.

 4.最后再自己用到的文件里面 引入組件即可

 如有想要文件的請私聊

二、easyplayer插件播放m3u8流

教程：

1.首先npm安裝EasyPlayer、copy-webpack-plugin
ps：copy-webpack-plugin版本一定一定一定不能大于6.0，否則會報錯。 



    

    
  1. 

        
    

            
    

            
    

        
    

        
    

            
    
                npm install @easydarwin/easyplayer --save
            
    

        
    

    
    2. 

    
  2. 

        
    

            
    

            
    

        
    

        
    

            
    
                npm install copy-webpack-plugin@5.1.2 --save-dev
            
    

        
    

    
    3.

2.最重要的地方 一定要把這個地方弄好 那就是在vue.config.js里面 



    

    
  1. 

        
    

            
    

            
    

        
    

        
    

            
    
                const CopyWebpackPlugin = require('copy-webpack-plugin')
            
    

        
    

    
    2. 

    
  2. 

        
    

            
    

            
    

        
    

        
    

            
    
                configureWebpack: {
            
    

        
    

    
    3. 

    
  3. 

        
    

            
    

            
    

        
    

        
    

            
    
                plugins:[
            
    

        
    

    
    4. 

    
  4. 

        
    

            
    

            
    

        
    

        
    

            
    
                new CopyWebpackPlugin([
            
    

        
    

    
    5. 

    
  5. 

        
    

            
    

            
    

        
    

        
    

            
    
                {
            
    

        
    

    
    6. 

    
  6. 

        
    

            
    

            
    

        
    

        
    

            
    
                from: 'node_modules/@easydarwin/easyplayer/dist/component/EasyPlayer.swf',
            
    

        
    

    
    7. 

    
  7. 

        
    

            
    

            
    

        
    

        
    

            
    
                to: './libs/EasyPlayer/'
            
    

        
    

    
    8. 

    
  8. 

        
    

            
    

            
    

        
    

        
    

            
    
                },
            
    

        
    

    
    9. 

    
  9. 

        
    

            
    

            
    

        
    

        
    

            
    
                {
            
    

        
    

    
    10. 

    
  10. 

        
    

            
    

            
    

        
    

        
    

            
    
                from: 'node_modules/@easydarwin/easyplayer/dist/component/crossdomain.xml',
            
    

        
    

    
    11. 

    
  11. 

        
    

            
    

            
    

        
    

        
    

            
    
                to: './libs/EasyPlayer/'
            
    

        
    

    
    12. 

    
  12. 

        
    

            
    

            
    

        
    

        
    

            
    
                },
            
    

        
    

    
    13. 

    
  13. 

        
    

            
    

            
    

        
    

        
    

            
    
                {
            
    

        
    

    
    14. 

    
  14. 

        
    

            
    

            
    

        
    

        
    

            
    
                from: 'node_modules/@easydarwin/easyplayer/dist/component/EasyPlayer-lib.min.js',
            
    

        
    

    
    15. 

    
  15. 

        
    

            
    

            
    

        
    

        
    

            
    
                to: './libs/EasyPlayer/'
            
    

        
    

    
    16. 

    
  16. 

        
    

            
    

            
    

        
    

        
    

            
    
                }
            
    

        
    

    
    17. 

    
  17. 

        
    

            
    

            
    

        
    

        
    

            
    
                ])
            
    

        
    

    
    18. 

    
  18. 

        
    

            
    

            
    

        
    

        
    

            
    
                ]
            
    

        
    

    
    19. 

    
  19. 

        
    

            
    

            
    

        
    

        
    

            
    
                }
            
    

        
    

    
    20.

3.還需要在public/index.html 引入EasyPlayer-lib.min.js，可以直接在node_modules里找到@easydarwin下的dist/compent/EasyPlayer-lib.min.js復(fù)制到pubilc目錄下,還有需要EasyPlayer.wasm同樣放到public目錄下

 4.引入組件使用

 最后效果



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

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

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

評論(0) 瀏覽(1924)

總結(jié)vue2.0與vue3.0的區(qū)別，讓你快速上手

前端達(dá)人

1:vue3.0和2.0的區(qū)別

2.0數(shù)據(jù)雙向綁定方面

Vue2.0使用Object.defineProperty

原理：通過使用 Object.defineProperty 來劫持對象屬性的 geter 和 seter 操作，當(dāng)數(shù)據(jù)發(fā)生改變發(fā)出通知 

// 數(shù)據(jù)
let data = {
    title: '',
    // 備份數(shù)據(jù)
    _data: {}
}
// 定義特性
Object.defineProperty(data, 'title', {
    // 定義特性屬性或者特性方法
    // 取值方法
    get() {
        // console.log('get')
        // 注意：不能通過自身屬性取值
        // return this.title
        // 返回備份的數(shù)據(jù)
        return this._data.title;
    },
    // 賦值方法
    set(value) {
        // this指向?qū)ο?        // 注意：不能為自身屬性賦值
        // this.title = value
        // 我們可以向備份數(shù)據(jù)中存儲
        this._data.title = value;
        // console.log('set')
        // 更新視圖
        updateView(this._data)
    }
})
// 視圖模板
let tpl = document.getElementById('app').innerHTML
// 實(shí)現(xiàn)更新視圖的方法
function updateView(data) {
    // 處理模板
    let html = tpl.replace(/{{(w+)}}/g, (match, $1) => {
        // 從data中獲取數(shù)據(jù)
        return data[$1] || ''
    })
    // 更新視圖
    document.getElementById('app').innerHTML = html;
} 


    




    

    
  • 
        1
    
    • 

    
  • 
        2
    
    • 

    
  • 
        3
    
    • 

    
  • 
        4
    
    • 

    
  • 
        5
    
    • 

    
  • 
        6
    
    • 

    
  • 
        7
    
    • 

    
  • 
        8
    
    • 

    
  • 
        9
    
    • 

    
  • 
        10
    
    • 

    
  • 
        11
    
    • 

    
  • 
        12
    
    • 

    
  • 
        13
    
    • 

    
  • 
        14
    
    • 

    
  • 
        15
    
    • 

    
  • 
        16
    
    • 

    
  • 
        17
    
    • 

    
  • 
        18
    
    • 

    
  • 
        19
    
    • 

    
  • 
        20
    
    • 

    
  • 
        21
    
    • 

    
  • 
        22
    
    • 

    
  • 
        23
    
    • 

    
  • 
        24
    
    • 

    
  • 
        25
    
    • 

    
  • 
        26
    
    • 

    
  • 
        27
    
    • 

    
  • 
        28
    
    • 

    
  • 
        29
    
    • 

    
  • 
        30
    
    • 

    
  • 
        31
    
    • 

    
  • 
        32
    
    • 

    
  • 
        33
    
    • 

    
  • 
        34
    
    • 

    
  • 
        35
    
    • 

    
  • 
        36
    
    • 

    
  • 
        37
    
    • 

    
  • 
        38
    
    • 

    
  • 
        39
    
    • 

    
  • 
        40
    
    • 

    
  • 
        41
    
    •

Vue3.0數(shù)據(jù)綁定

使用ES6的新特性porxy

原理：通過ES6的新特性proxy來劫持?jǐn)?shù)據(jù)，當(dāng)數(shù)據(jù)改變時發(fā)出通知 

 <!DOCTYPE html>
  <html lang="en">
  <head>
      <meta charset="UTF-8">
      <meta name="yingaxiang" content="width=device-width, initial-scale=1.0">
      <title>vue3.0數(shù)據(jù)雙向綁定</title>
  </head>
  <body>
      <div>
         <input type="text" id="input">
         <span id="text"></span>
     </div>
 </body>
 </html>
 <script>
     var obj = {};
     var obj1 = new Proxy(obj, {
         // target就是第一個參數(shù)obj, receive就是返回的obj(返回的proxy對象)
         get: function (target, key, receive) {
             // 返回該屬性值
             return target[key];
         },
         set: function (target, key, newVal, receive) {
             // 執(zhí)行賦值操作
             target[key] = newVal;
             document.getElementById('text').innerHTML = target[key];
         }
     })
     document.addEventListener('keyup', function (e) {
         obj1[0] = e.target.value;
     });
 </script> 


    




    

    
  • 
        1
    
    • 

    
  • 
        2
    
    • 

    
  • 
        3
    
    • 

    
  • 
        4
    
    • 

    
  • 
        5
    
    • 

    
  • 
        6
    
    • 

    
  • 
        7
    
    • 

    
  • 
        8
    
    • 

    
  • 
        9
    
    • 

    
  • 
        10
    
    • 

    
  • 
        11
    
    • 

    
  • 
        12
    
    • 

    
  • 
        13
    
    • 

    
  • 
        14
    
    • 

    
  • 
        15
    
    • 

    
  • 
        16
    
    • 

    
  • 
        17
    
    • 

    
  • 
        18
    
    • 

    
  • 
        19
    
    • 

    
  • 
        20
    
    • 

    
  • 
        21
    
    • 

    
  • 
        22
    
    • 

    
  • 
        23
    
    • 

    
  • 
        24
    
    • 

    
  • 
        25
    
    • 

    
  • 
        26
    
    • 

    
  • 
        27
    
    • 

    
  • 
        28
    
    • 

    
  • 
        29
    
    • 

    
  • 
        30
    
    • 

    
  • 
        31
    
    • 

    
  • 
        32
    
    •

總結(jié)：

Vue2.x版本中的雙向綁定不能檢測到下標(biāo)的變化
proxy可以劫持整個對象，并返回一個新對象

2: 創(chuàng)建項目

未創(chuàng)建過vue腳手架得同學(xué) 或者從線上拉項目下來得同學(xué) 可以首先 查一下 當(dāng)前版本

1：查看當(dāng)前版本，如果是2開頭說明當(dāng)前使用的是vue-cli2，3開頭的話就是vue-cli4 

vue --version 

    

    
  • 
        1
    
    •

2：如果無法識別vue命令說明沒有安裝vue-cli，使用以下說明進(jìn)行安裝
安裝3.0版本: 目前新項目搭建腳手架默認(rèn)安裝得是3.0版本 

npm install -g vue-cli 

    

    
  • 
        1
    
    •

如果是舊項目2.0版本到3.0切換得同學(xué)，即卸載當(dāng)前版本，安裝另外的版本
從2.0升級到3.0： 

npm uninstall -g vue-cli

npm install -g @vue/cli 

    

    
  • 
        1
    
    • 

    
  • 
        2
    
    • 

    
  • 
        3
    
    •

如果想從新版本降到舊版本得同學(xué) 看這里??！

從3.0降到2.0： 

npm uninstall -g @vue/cli
npm install -g vue-cli 

    

    
  • 
        1
    
    • 

    
  • 
        2
    
    •

項目初始化

初始化，vue init <模板名稱（webpack比較常用）> [項目名稱] 

vue init webpack cli2-test 

    

    
  • 
        1
    
    •

2.0項目初始化參數(shù)介紹 

//項目名稱

Project name ...

//作者的信息，會默認(rèn)從git中讀取信息

Project description ...

Author ...

//vue build的選項 1.runtime-compiler 2.runtime-only (一般選第一個就好)

vue build ...

//是否安裝vue-router，一般選用YES，省去手動創(chuàng)建路由

Install vue-router？ ..

//是否使用ESLint檢測代碼規(guī)范，規(guī)范可根據(jù)選項選擇不同的規(guī)范庫或者自己添加規(guī)范

use ESLint to link your code

//是否寫單元測試 （一般不使用）

Set up unit tests

//是否使用Nightwatch來進(jìn)行e2e測試 （2代表to e to e 點(diǎn)對點(diǎn)）

Setup e2e test with Nightwatch？

//使用npm或者yarn包管理工具

use npm

use yarn 


    




    

    
  • 
        1
    
    • 

    
  • 
        2
    
    • 

    
  • 
        3
    
    • 

    
  • 
        4
    
    • 

    
  • 
        5
    
    • 

    
  • 
        6
    
    • 

    
  • 
        7
    
    • 

    
  • 
        8
    
    • 

    
  • 
        9
    
    • 

    
  • 
        10
    
    • 

    
  • 
        11
    
    • 

    
  • 
        12
    
    • 

    
  • 
        13
    
    • 

    
  • 
        14
    
    • 

    
  • 
        15
    
    • 

    
  • 
        16
    
    • 

    
  • 
        17
    
    • 

    
  • 
        18
    
    • 

    
  • 
        19
    
    • 

    
  • 
        20
    
    • 

    
  • 
        21
    
    • 

    
  • 
        22
    
    • 

    
  • 
        23
    
    • 

    
  • 
        24
    
    • 

    
  • 
        25
    
    • 

    
  • 
        26
    
    • 

    
  • 
        27
    
    • 

    
  • 
        28
    
    • 

    
  • 
        29
    
    • 

    
  • 
        30
    
    • 

    
  • 
        31
    
    • 

    
  • 
        32
    
    • 

    
  • 
        33
    
    • 

    
  • 
        34
    
    • 

    
  • 
        35
    
    •

3.0初始化，vue create [項目名稱] 

vue create cli3-test

?項目初始化參數(shù)介紹

//選擇一個配置方式
 please pick a perset  (一般選最后一個Manually select features（手動選擇特性） )
 //選擇對于你的工程所需要的特性 （用空格選擇）
 check the features needed for your project
( ) Babel //轉(zhuǎn)碼器，可以將ES6代碼轉(zhuǎn)為ES5代碼，從而在現(xiàn)有環(huán)境執(zhí)行。 
( ) TypeScript// TypeScript是一個JavaScript（后綴.js）的超集（后綴.ts）包含并擴(kuò)展了 JavaScript 的語法，需要被編譯輸出為 JavaScript在瀏覽器運(yùn)行，目前較少人再用
( ) Progressive Web App (PWA) Support// 漸進(jìn)式Web應(yīng)用程序
( ) Router // vue-router（vue路由）
( ) Vuex // vuex（vue的狀態(tài)管理模式）
( ) CSS Pre-processors // CSS 預(yù)處理器（如：less、sass）
( ) Linter / Formatter // 代碼風(fēng)格檢查和格式化（如：ESlint）
( ) Unit Testing // 單元測試（unit tests）
( ) E2E Testing // e2e（end to end） 測試
 //對應(yīng)的配置文件單獨(dú)生成還是放在package.json里
 where do you prefer placing config for babel
 //要不要把剛才自己選擇的配置保存下來
 save this as a preset for future projects? 


    




    

    
  • 
        1
    
    • 

    
  • 
        2
    
    • 

    
  • 
        3
    
    • 

    
  • 
        4
    
    • 

    
  • 
        5
    
    • 

    
  • 
        6
    
    • 

    
  • 
        7
    
    • 

    
  • 
        8
    
    • 

    
  • 
        9
    
    • 

    
  • 
        10
    
    • 

    
  • 
        11
    
    • 

    
  • 
        12
    
    • 

    
  • 
        13
    
    • 

    
  • 
        14
    
    • 

    
  • 
        15
    
    • 

    
  • 
        16
    
    • 

    
  • 
        17
    
    • 

    
  • 
        18
    
    • 

    
  • 
        19
    
    • 

    
  • 
        20
    
    • 

    
  • 
        21
    
    •

3:項目的目錄

Vue2.0版本目錄

[這里是圖片001]

Vue3.x 版本目錄

[這里是圖片002]

總結(jié)：

  • vue-cli2.0與3.0在目錄結(jié)構(gòu)方面，有明顯的不同
  • vue-cli3.0移除了配置文件目錄，config 和 build 文件夾
  • 同時移除了 static 靜態(tài)文件夾，新增了 public 文件夾，打開層級目錄還會發(fā)現(xiàn)， index.html 移動到 public 中
  • 3.0 config文件已經(jīng)被移除，但是多了.env.production和env.development文件，除了文件位置，實(shí)際配置起來和2.0沒什么不同
  • 沒了config文件，跨域需要配置域名時，從config/index.js 挪到了vue.config.js中，配置方法不變
  • 移除了 static 文件夾，新增 public 文件夾，并且 index.html 移動到 public 中
    在 src 文件夾中新增了 views 文件夾，用于分類 視圖組件 和 公共組件

4: 3.0版本中項目環(huán)境變量配置文件沒有了（dev.env.js / prod.env.js）、

我們可以通過在項目根目錄下手動創(chuàng)建不同環(huán)境的配置文件，具體的環(huán)境變量名稱由package.json中運(yùn)行參數(shù)決定,下面舉個例子添加development、production和uat版本的環(huán)境變量： 

//  .env.delelopment
NODE_ENV=development
VUE_APP_MODE=development
BASE_URL=/develop
// .env.production
NODE_ENV=production
VUE_APP_MODE=production
BASE_URL=/api

// .env.uat
NODE_ENV=production
VUE_APP_MODE=uat
BASE_URL=/uat

不同得環(huán)境發(fā)不同的包 同學(xué)要配置得可以參考

// package.json
----
"scripts": {
   "serve": "vue-cli-service serve",
   "build:uat": "vue-cli-service build --mode uat", // 通過 --mode來運(yùn)行不同的環(huán)境，自動識別到.env.uat配置文件
   "build:production": "vue-cli-service build --mode production",
   "lint": "vue-cli-service lint"
 }, 


    




    

    
  • 
        1
    
    • 

    
  • 
        2
    
    • 

    
  • 
        3
    
    • 

    
  • 
        4
    
    • 

    
  • 
        5
    
    • 

    
  • 
        6
    
    • 

    
  • 
        7
    
    • 

    
  • 
        8
    
    • 

    
  • 
        9
    
    • 

    
  • 
        10
    
    • 

    
  • 
        11
    
    • 

    
  • 
        12
    
    • 

    
  • 
        13
    
    • 

    
  • 
        14
    
    • 

    
  • 
        15
    
    • 

    
  • 
        16
    
    • 

    
  • 
        17
    
    • 

    
  • 
        18
    
    • 

    
  • 
        19
    
    • 

    
  • 
        20
    
    • 

    
  • 
        21
    
    • 

    
  • 
        22
    
    • 

    
  • 
        23
    
    • 

    
  • 
        24
    
    • 

    
  • 
        25
    
    • 

    
  • 
        26
    
    •

3.0版本中不同環(huán)境的webpack配置文件也沒有了（webpack.base.conf.js / webpack.dev.conf.js / webpack.prod.conf.js）
同樣，我們也可以再根目錄中創(chuàng)建vue.config.js文件來進(jìn)行webpack和vue的一些配置 

const path = require('path')

module.exports = {
 publicPath: './', // 基本路徑,打包時加上.
 outputDir: process.env.outputDir, // 輸出文件目錄
 lintOnSave: false, // eslint-loader 是否在保存的時候檢查
 // see https://github.com/vuejs/vue-cli/blob/dev/docs/webpack.md
 // webpack配置
 chainWebpack: (config) => {
   config.resolve.symlinks(true)
 },
 configureWebpack: (config) => {
   if (process.env.VUE_APP_MODE === 'production') {
     // 為生產(chǎn)環(huán)境修改配置...
     config.mode = 'production'
   } else {
       // 為開發(fā)環(huán)境修改配置...
       config.mode = 'development'
   }
   Object.assign(config, {
     // 開發(fā)生產(chǎn)共同配置
     resolve: {
       alias: {
         '@': path.resolve(__dirname, './src'),
         '@c': path.resolve(__dirname, './src/components'),
         '@p': path.resolve(__dirname, './src/views')
       } // 別名配置
     }
   })
 },
 productionSourceMap: false, // 生產(chǎn)環(huán)境是否生成 sourceMap 文件
 // css相關(guān)配置
 css: {
   // extract: true, // 是否使用css分離插件 ExtractTextPlugin
   sourceMap: false, // 開啟 CSS source maps?
   loaderOptions: {
     css: {}, // 這里的選項會傳遞給 css-loader
     less: {
       modifyVars: {
         // less vars，customize ant design theme

         // 'primary-color': '#F5222D',
         // 'link-color': '#F5222D',
         // 'border-radius-base': '4px'
       },
       // DO NOT REMOVE THIS LINE
       javascriptEnabled: true
     },
     postcss: {
       plugins: [
         // 把px單位換算成rem單位
         require('postcss-pxtorem')({
           rootValue: 75, // 換算的基數(shù)(設(shè)計圖750的根字體為32)
           selectorBlackList: ['.van-'], // 要忽略的選擇器并保留為px。
           propList: ['*'], // 可以從px更改為rem的屬性。
           minPixelValue: 2 // 設(shè)置要替換的最小像素值。
         }),
         require('autoprefixer')
       ]
       // plugins: [
       //   require('autoprefixer')
       // ]
     } // 這里的選項會傳遞給 postcss-loader
   }, // css預(yù)設(shè)器配置項 詳見https://cli.vuejs.org/zh/config/#css-loaderoptions
   // modules: false, // 啟用 CSS modules for all css / pre-processor files.
   requireModuleExtension: true
 },
 parallel: require('os').cpus().length > 1, // 是否為 Babel 或 TypeScript 使用 thread-loader。該選項在系統(tǒng)的 CPU 有多于一個內(nèi)核時自動啟用，僅作用于生產(chǎn)構(gòu)建。
 pwa: {}, // PWA 插件相關(guān)配置 see https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-pwa
 // webpack-dev-server 相關(guān)配置
 devServer: {
   open: false, // 自動打開瀏覽器
   host: '0.0.0.0', // 允許外部ip訪問
   port: 8000, // 端口
   https: false, // 啟用https
   overlay: {
     warnings: true,
     errors: true
   }, // 錯誤、警告在頁面彈出
   // proxy: 'http://localhost:4000' // 配置跨域處理,只有一個代理
   proxy: {
       '/api': {
           target: '<url>',
           ws: true,
           changeOrigin: true
       },
       '/foo': {
           target: '<other_url>'
       }
   },  // 配置多個代理
 },
 // 第三方插件配置
 pluginOptions: {} 


    




    

    
  • 
        1
    
    • 

    
  • 
        2
    
    • 

    
  • 
        3
    
    • 

    
  • 
        4
    
    • 

    
  • 
        5
    
    • 

    
  • 
        6
    
    • 

    
  • 
        7
    
    • 

    
  • 
        8
    
    • 

    
  • 
        9
    
    • 

    
  • 
        10
    
    • 

    
  • 
        11
    
    • 

    
  • 
        12
    
    • 

    
  • 
        13
    
    • 

    
  • 
        14
    
    • 

    
  • 
        15
    
    • 

    
  • 
        16
    
    • 

    
  • 
        17
    
    • 

    
  • 
        18
    
    • 

    
  • 
        19
    
    • 

    
  • 
        20
    
    • 

    
  • 
        21
    
    • 

    
  • 
        22
    
    • 

    
  • 
        23
    
    • 

    
  • 
        24
    
    • 

    
  • 
        25
    
    • 

    
  • 
        26
    
    • 

    
  • 
        27
    
    • 

    
  • 
        28
    
    • 

    
  • 
        29
    
    • 

    
  • 
        30
    
    • 

    
  • 
        31
    
    • 

    
  • 
        32
    
    • 

    
  • 
        33
    
    • 

    
  • 
        34
    
    • 

    
  • 
        35
    
    • 

    
  • 
        36
    
    • 

    
  • 
        37
    
    • 

    
  • 
        38
    
    • 

    
  • 
        39
    
    • 

    
  • 
        40
    
    • 

    
  • 
        41
    
    • 

    
  • 
        42
    
    • 

    
  • 
        43
    
    • 

    
  • 
        44
    
    • 

    
  • 
        45
    
    • 

    
  • 
        46
    
    • 

    
  • 
        47
    
    • 

    
  • 
        48
    
    • 

    
  • 
        49
    
    • 

    
  • 
        50
    
    • 

    
  • 
        51
    
    • 

    
  • 
        52
    
    • 

    
  • 
        53
    
    • 

    
  • 
        54
    
    • 

    
  • 
        55
    
    • 

    
  • 
        56
    
    • 

    
  • 
        57
    
    • 

    
  • 
        58
    
    • 

    
  • 
        59
    
    • 

    
  • 
        60
    
    • 

    
  • 
        61
    
    • 

    
  • 
        62
    
    • 

    
  • 
        63
    
    • 

    
  • 
        64
    
    • 

    
  • 
        65
    
    • 

    
  • 
        66
    
    • 

    
  • 
        67
    
    • 

    
  • 
        68
    
    • 

    
  • 
        69
    
    • 

    
  • 
        70
    
    • 

    
  • 
        71
    
    • 

    
  • 
        72
    
    • 

    
  • 
        73
    
    • 

    
  • 
        74
    
    • 

    
  • 
        75
    
    • 

    
  • 
        76
    
    • 

    
  • 
        77
    
    • 

    
  • 
        78
    
    • 

    
  • 
        79
    
    • 

    
  • 
        80
    
    • 

    
  • 
        81
    
    • 

    
  • 
        82
    
    • 

    
  • 
        83
    
    • 

    
  • 
        84
    
    • 

    
  • 
        85
    
    • 

    
  • 
        86
    
    • 

    
  • 
        87
    
    • 

    
  • 
        88
    
    • 

    
  • 
        89
    
    • 

    
  • 
        90
    
    • 

    
  • 
        91
    
    • 

    
  • 
        92
    
    • 

    
  • 
        93
    
    •

5:steup()函數(shù) 參考另一篇文章

https://blog.csdn.net/qq_41328247/article/details/109286022

6:2.0與3.0生命周期函數(shù)比較：

2.0 周期名稱

3.0 周期名稱

說明

beforeCreate

setup

組件創(chuàng)建之前

created

setup

組件創(chuàng)建完成

beforeMount

onBeforeMount

組件掛載之前

mounted

onMounted

組件掛載完成

beforeUpdate

onBeforeUpdate

數(shù)據(jù)更新，虛擬 DOM 打補(bǔ)丁之前

updated

onUpdated

數(shù)據(jù)更新，虛擬 DOM 渲染完成

beforeDestroy

onBeforeUnmount

組件銷毀之前

destroyed

onUnmounted

組件銷毀后 

<template>

<router-link to="/">點(diǎn)這里去首頁</router-link>

<hr>

<div class="home">

這里是一個計數(shù)器 >>> <span class="red">{{count}}</span> <br>

<button @click="countAdd">點(diǎn)擊加數(shù)字</button>

</div>

</template>

<script>

// 你需要使用到什么生命周期，就引出來什么生命周期

import {

onBeforeMount,

onMounted,

onBeforeUpdate,

onUpdated,

onBeforeUnmount,

onUnmounted,

ref

} from 'vue'

export default {

// setup 函數(shù)，就相當(dāng)于 vue 2.0 中的 created

setup () {

const count = ref(0)

// 其他的生命周期都寫在這里

onBeforeMount (() => {

count.value++

console.log('onBeforeMount', count.value)

})

onMounted (() => {

count.value++

console.log('onMounted', count.value)

})

// 注意，onBeforeUpdate 和 onUpdated 里面不要修改值，會死循環(huán)的哦！

onBeforeUpdate (() => {

console.log('onBeforeUpdate', count.value)

})

onUpdated (() => {

console.log('onUpdated', count.value)

})

onBeforeUnmount (() => {

count.value++

console.log('onBeforeUnmount', count.value)

})

onUnmounted (() => {

count.value++

console.log('onUnmounted', count.value)

})

// 定義一個函數(shù)，修改 count 的值。

const countAdd = () => {

count.value++

}

return {

count,

countAdd

}

}

}

</script>

首先，在 vue 3.0 中，生命周期是從 vue 中導(dǎo)出的，我們需要用到哪些，就導(dǎo)出哪些。 


    




    

    
  • 
        1
    
    • 

    
  • 
        2
    
    • 

    
  • 
        3
    
    • 

    
  • 
        4
    
    • 

    
  • 
        5
    
    • 

    
  • 
        6
    
    • 

    
  • 
        7
    
    • 

    
  • 
        8
    
    • 

    
  • 
        9
    
    • 

    
  • 
        10
    
    • 

    
  • 
        11
    
    • 

    
  • 
        12
    
    • 

    
  • 
        13
    
    • 

    
  • 
        14
    
    • 

    
  • 
        15
    
    • 

    
  • 
        16
    
    • 

    
  • 
        17
    
    • 

    
  • 
        18
    
    • 

    
  • 
        19
    
    • 

    
  • 
        20
    
    • 

    
  • 
        21
    
    • 

    
  • 
        22
    
    • 

    
  • 
        23
    
    • 

    
  • 
        24
    
    • 

    
  • 
        25
    
    • 

    
  • 
        26
    
    • 

    
  • 
        27
    
    • 

    
  • 
        28
    
    • 

    
  • 
        29
    
    • 

    
  • 
        30
    
    • 

    
  • 
        31
    
    • 

    
  • 
        32
    
    • 

    
  • 
        33
    
    • 

    
  • 
        34
    
    • 

    
  • 
        35
    
    • 

    
  • 
        36
    
    • 

    
  • 
        37
    
    • 

    
  • 
        38
    
    • 

    
  • 
        39
    
    • 

    
  • 
        40
    
    • 

    
  • 
        41
    
    • 

    
  • 
        42
    
    • 

    
  • 
        43
    
    • 

    
  • 
        44
    
    • 

    
  • 
        45
    
    • 

    
  • 
        46
    
    • 

    
  • 
        47
    
    • 

    
  • 
        48
    
    • 

    
  • 
        49
    
    • 

    
  • 
        50
    
    • 

    
  • 
        51
    
    • 

    
  • 
        52
    
    • 

    
  • 
        53
    
    • 

    
  • 
        54
    
    • 

    
  • 
        55
    
    • 

    
  • 
        56
    
    • 

    
  • 
        57
    
    • 

    
  • 
        58
    
    • 

    
  • 
        59
    
    • 

    
  • 
        60
    
    • 

    
  • 
        61
    
    • 

    
  • 
        62
    
    • 

    
  • 
        63
    
    • 

    
  • 
        64
    
    • 

    
  • 
        65
    
    • 

    
  • 
        66
    
    • 

    
  • 
        67
    
    • 

    
  • 
        68
    
    • 

    
  • 
        69
    
    • 

    
  • 
        70
    
    • 

    
  • 
        71
    
    • 

    
  • 
        72
    
    • 

    
  • 
        73
    
    • 

    
  • 
        74
    
    • 

    
  • 
        75
    
    • 

    
  • 
        76
    
    • 

    
  • 
        77
    
    • 

    
  • 
        78
    
    • 

    
  • 
        79
    
    • 

    
  • 
        80
    
    • 

    
  • 
        81
    
    • 

    
  • 
        82
    
    • 

    
  • 
        83
    
    • 

    
  • 
        84
    
    • 

    
  • 
        85
    
    • 

    
  • 
        86
    
    • 

    
  • 
        87
    
    • 

    
  • 
        88
    
    • 

    
  • 
        89
    
    • 

    
  • 
        90
    
    • 

    
  • 
        91
    
    • 

    
  • 
        92
    
    • 

    
  • 
        93
    
    • 

    
  • 
        94
    
    • 

    
  • 
        95
    
    • 

    
  • 
        96
    
    • 

    
  • 
        97
    
    • 

    
  • 
        98
    
    • 

    
  • 
        99
    
    • 

    
  • 
        100
    
    • 

    
  • 
        101
    
    • 

    
  • 
        102
    
    • 

    
  • 
        103
    
    • 

    
  • 
        104
    
    • 

    
  • 
        105
    
    • 

    
  • 
        106
    
    • 

    
  • 
        107
    
    • 

    
  • 
        108
    
    • 

    
  • 
        109
    
    • 

    
  • 
        110
    
    • 

    
  • 
        111
    
    • 

    
  • 
        112
    
    • 

    
  • 
        113
    
    • 

    
  • 
        114
    
    • 

    
  • 
        115
    
    • 

    
  • 
        116
    
    • 

    
  • 
        117
    
    • 

    
  • 
        118
    
    •

可能不少看官會認(rèn)為多次一舉，但實(shí)則不然。vue 提供這么多的生命周期，有幾個是我們常用的？在大多數(shù)的組件中，我們用不到生命周期。即便是頁面級別的應(yīng)用，可能用到最多的是 onMounted 即可。

當(dāng)然，那些綁定時間的操作會用到解綁，因此會用到 onUnmounted。其它的生命周期，正常情況下是基本用不到的。所以，通過引入使用的這種設(shè)定，可以減少我們的最終編譯的項目的體積。而且，這樣的引入使用，更加的邏輯清晰。

其次，除 setup 之外，其他的生命周期函數(shù)，都是在 setup 里面直接書寫函數(shù)即可。

7.對文件的引用上

  • Vue2.x中new出的實(shí)例對象，所有的東西都在這個vue對象上，這樣其實(shí)無論你用到還是沒用到，都會跑一變。
  • vue3.0中可以用ES module imports按需引入，如：keep-alive內(nèi)置組件、v-model指令，等等。

8.項目的啟動

Vue2.x 版本啟動

npm run dev

Vue3.x 版本啟動

npm run serve

9.語法方面

1.v-model語法糖廢棄，改用modelValue 

<input v-model="value" />

<input modelValue="value" /> 

    

    
  • 
        1
    
    • 

    
  • 
        2
    
    • 

    
  • 
        3
    
    •

2.棄用全局APInew Vue,使用createApp 

const app =?Vue.createApp({}) 

    

    
  • 
        1
    
    •

3.棄用Vue.prototype,在Vue3中，我們可以使用如下定義方式 

const app = Vue.createApp({})
app.config.globalProperties.$http = () => {} 

    

    
  • 
        1
    
    • 

    
  • 
        2
    
    •

4.全局方法現(xiàn)在全部在app實(shí)例上，例如： 

`app.directive`,`app.use`等 

    

    
  • 
        1
    
    •

5.現(xiàn)在你需要手動掛載根節(jié)點(diǎn) 

main.js

import { createApp } from 'vue'

import App from './App.vue'

createApp(App).mount('#app') 

    

    
  • 
        1
    
    • 

    
  • 
        2
    
    • 

    
  • 
        3
    
    • 

    
  • 
        4
    
    • 

    
  • 
        5
    
    • 

    
  • 
        6
    
    • 

    
  • 
        7
    
    • 

    
  • 
        8
    
    • 

    
  • 
        9
    
    •

6.不能再使用Vue.nextTick/this.$nextTick，Vue3中你可以用： 

import { nextTick } from 'vue'
nextTick(() => {
  // something
}) 

    

    
  • 
        1
    
    • 

    
  • 
        2
    
    • 

    
  • 
        3
    
    • 

    
  • 
        4
    
    •

7.Vue3允許template設(shè)置key。

8.正式棄用scopedSlots正式棄用，舊的不去新的不來。

9.監(jiān)聽數(shù)組變化需要使用deep屬性，否則只能監(jiān)聽到整個數(shù)組被替換。

10.棄用$children，訪問子組件可以使用$ref

11.filter被移除，我X，不能再使用|了。

12.移除事件API，$on,$once,$off不再使用。EventBus方法也不再使用。

10 新加入了 TypeScript 以及 PWA 的支持

11：更精準(zhǔn)的變更通知

2.x 版本中，使用 Vue.set 來給對象新增一個屬性時，這個對象的所有 watcher 都會重新運(yùn)行
3.x 版本中，只有依賴那個屬性的 watcher 才會重新運(yùn)行。


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

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

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

評論(0) 瀏覽(1042)

前端基本知識介紹

前端達(dá)人

目錄

一.前端三劍客

1.前導(dǎo)

2.三劍客的分工

二.VsCode的介紹與配置

1.vscode的介紹

2.vscode的下載安裝

3.vscode的使用

3.1 圖形界面操作

3.3 常用插件

三.HTML基礎(chǔ)標(biāo)簽

HTML基礎(chǔ)知識

1.HTML為何物？

2.標(biāo)簽介紹

3.HTML屬性

4.HTML標(biāo)簽骨架

基本的HTML標(biāo)簽

1.HTML標(biāo)題標(biāo)簽

2.換行與空格

3.HTML段落

4.字體加粗與傾斜及刪除效果

5.圖片標(biāo)簽

6.超鏈接

7.列表

8.布局標(biāo)簽

9.表格標(biāo)簽

10.表單標(biāo)簽

四.CSS基礎(chǔ)選擇器

CSS介紹

CSS樣式表介紹

CSS基礎(chǔ)語法

CSS選擇器

選擇器介紹

基礎(chǔ)選擇器

復(fù)合選擇器

CSS引入方式

CSS引入方式介紹

內(nèi)部樣式表（嵌入式）

行內(nèi)樣式表

外部樣式表

五.JS基礎(chǔ)

Javascript介紹

1.js的介紹

2.js的由來

3.JavaScript組成

JavaScript基本語法

1.JavaScript的引入方式

2.js注釋

3.js的輸入輸出方法

4.變量 

5.數(shù)據(jù)類型

6.數(shù)據(jù)類型轉(zhuǎn)換

7.更多JS基礎(chǔ)

六.JS之DOM

1.DOM簡介

什么是DOM？

DOM樹

2.獲取元素

根據(jù)ID獲取

根據(jù)類名獲取

根據(jù)標(biāo)簽名獲取

通過選擇器獲取

通過選擇器獲?。ǘ鄠€）

定位body標(biāo)簽

定位html標(biāo)簽

3.事件基礎(chǔ)

事件基礎(chǔ)介紹

代碼實(shí)現(xiàn)

其它的鼠標(biāo)事件

4.操作元素

操作元素介紹

改變元素的內(nèi)容

操作元素屬性

操作表單元素

樣式屬性操作

更多js操作

一.前端三劍客

1.前導(dǎo)

（1）HTML,CSS,JS都是單獨(dú)的語言；

（2）HTML,CSS,JS構(gòu)成前端技術(shù)基礎(chǔ)；

2.三劍客的分工

（1）HTML：負(fù)責(zé)網(wǎng)頁的架構(gòu)；

（2）CSS：負(fù)責(zé)網(wǎng)頁的樣式，美化；

（3）JavaScript（JS）：負(fù)責(zé)網(wǎng)頁的行為；

二.VsCode的介紹與配置

1.vscode的介紹

vscode 全稱為 Visual Studio Code ，是?款免費(fèi)開源的現(xiàn)代化輕量級代碼編輯器，?持?乎所有主流的開發(fā)語?的語法?亮、智能代碼補(bǔ)全、?定義快捷鍵、括號匹配和顏?區(qū)分、代碼?段、代碼對? Diff、GIT命令 等特性，?持插件擴(kuò)展，并針對??開發(fā)和云端應(yīng)?開發(fā)做了優(yōu)化。

2.vscode的下載安裝

(110條消息) Python爬蟲編程11——JS反爬_彩色的泡沫的博客-CSDN博客https://blog.csdn.net/qq_52914337/article/details/123771663?spm=1001.2014.3001.5501

3.vscode的使用

3.1 圖形界面操作

3.3 常用插件

我們通常需要代碼提示我們輔助編寫，這個時候就涉及到VSCODE提供的一系列的插件插件安裝在 Extension 中，點(diǎn)擊即可看到一個搜索按鈕，可以輸入關(guān)鍵字搜索自己想要的插件。如圖：

前端開發(fā)推薦安裝的幾個插件：

1. jshint ： js 代碼規(guī)范檢查。
2. Beautify ：?鍵美化代碼的插件。
3. Javascript(ES6) code snippets ： ES6 語法提示。
4. Auto Rename Tag ：?動重命名標(biāo)簽。標(biāo)簽都是成對出現(xiàn)的，開始標(biāo)簽修改了，結(jié)束標(biāo)簽
也會跟著修改。
5. Auto Close Tag ：?動閉合標(biāo)簽。針對?些?標(biāo)準(zhǔn)的標(biāo)簽，這個插件還是很有?的。
6. vscode-icons ：可選。提供了很多類型的?件夾 icon ，不同類型的?件夾使?不同的
icon ，會讓?件查找更直觀。
7. open in browser ：可選。右鍵可以選擇在默認(rèn)瀏覽器中打開當(dāng)前??。

三.HTML基礎(chǔ)標(biāo)簽

HTML基礎(chǔ)知識

1.HTML為何物？

HTML是超文本標(biāo)記語言（Hyper Text Markup Language）是用來描述網(wǎng)頁的一種語言。

注意：HTML不是一種編程語言，而是一種標(biāo)記語言。

簡單來說，HTML文件也可以直接稱為網(wǎng)頁，瀏覽器的作用就是讀取HTML文件，并且以網(wǎng)頁的形式去展示它們。

2.標(biāo)簽介紹

HTML標(biāo)簽是由尖括號包圍起來的關(guān)鍵詞，如<html></html>。

單標(biāo)簽與雙標(biāo)簽

（1）雙標(biāo)簽書寫規(guī)則：<雙標(biāo)簽名稱>內(nèi)容</雙標(biāo)簽名稱>，例如<html>內(nèi)容</html>；

（2）單標(biāo)簽書寫規(guī)則：<單標(biāo)簽名稱/>，例如<br/>;

3.HTML屬性

HTML屬性指的是標(biāo)簽屬性，HTML標(biāo)簽可以擁有屬性，給相關(guān)的HTML元素提供更多的信息。

注意：

（1）一個HTML標(biāo)簽可有多個屬性；

（2）屬性寫在HTML元素的開始標(biāo)簽；

（3）屬性總是以名稱/鍵值對的形式出現(xiàn)，比如：class="method";

4.HTML標(biāo)簽骨架 

 

    

    
  1. 

        
    

            
    

            
    

        
    

        
    

            
    
                <!DOCTYPE html> 
            
    

        
    

    
    2. 

    
  2. 

        
    

            
    

            
    

        
    

        
    

            
    
                <html lang="en"> 
            
    

        
    

    
    3. 

    
  3. 

        
    

            
    

            
    

        
    

        
    

            
    
                   <head> 
            
    

        
    

    
    4. 

    
  4. 

        
    

            
    

            
    

        
    

        
    

            
    
                       <meta charset="UTF-8"> 
            
    

        
    

    
    5. 

    
  5. 

        
    

            
    

            
    

        
    

        
    

            
    
                       <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
            
    

        
    

    
    6. 

    
  6. 

        
    

            
    

            
    

        
    

        
    

            
    
                       <meta name="viewport" content="width=device-width, initialscale=1.0"> 
            
    

        
    

    
    7. 

    
  7. 

        
    

            
    

            
    

        
    

        
    

            
    
                       <title>Document</title> 
            
    

        
    

    
    8. 

    
  8. 

        
    

            
    

            
    

        
    

        
    

            
    
                   </head> 
            
    

        
    

    
    9. 

    
  9. 

        
    

            
    

            
    

        
    

        
    

            
    
                   <body> 
            
    

        
    

    
    10. 

    
  10. 

        
    

            
    

            
    

        
    

        
    

            
    
                   </body> 
            
    

        
    

    
    11. 

    
  11. 

        
    

            
    

            
    

        
    

        
    

            
    
                </html> 
            
    

        
    

    
    12.
<!DOCTYPE html> ：向瀏覽器聲明當(dāng)前的?檔類型是 html
<html></html> ：是??當(dāng)中最?的標(biāo)簽，我們稱之為根標(biāo)簽
<head></head> ：為??的頭部，它??的內(nèi)容主要?來定義??標(biāo)簽及給瀏覽器查看的
?些信息
<meta charset="UTF-8"> ： 定義??的編碼為UTF- 8
<title></title> ：為??標(biāo)題標(biāo)簽，它?的內(nèi)容會顯示在瀏覽器的標(biāo)簽?上
<body></body> ：為??主體標(biāo)簽，它??的內(nèi)容都會顯示在瀏覽器的??窗?區(qū)域

基本的HTML標(biāo)簽

1.HTML標(biāo)題標(biāo)簽

HTML的文章標(biāo)題標(biāo)簽，如：<h1></h1>~<h6></h6>分六個級別，效果一次減少，并且每個標(biāo)題都是獨(dú)占一行空間。

如： 

 

    

    
  1. 

        
    

            
    

            
    

        
    

        
    

            
    
                <h1>?號標(biāo)題</h1> 
            
    

        
    

    
    2. 

    
  2. 

        
    

            
    

            
    

        
    

        
    

            
    
                <h2>?號標(biāo)題</h2> 
            
    

        
    

    
    3. 

    
  3. 

        
    

            
    

            
    

        
    

        
    

            
    
                <h3>三號標(biāo)題</h3> 
            
    

        
    

    
    4. 

    
  4. 

        
    

            
    

            
    

        
    

        
    

            
    
                <h4>四號標(biāo)題</h4> 
            
    

        
    

    
    5. 

    
  5. 

        
    

            
    

            
    

        
    

        
    

            
    
                <h5>五號標(biāo)題</h5> 
            
    

        
    

    
    6. 

    
  6. 

        
    

            
    

            
    

        
    

        
    

            
    
                <h6>六號標(biāo)題</h6> 
            
    

        
    

    
    7.

注意：沒有<h7></h7>標(biāo)簽；

2.換行與空格

2.1空格問題

 ；表示一個空格；

如： 

hello&nbsp;world

2.2換行問題

<br/>表示換行；

如： 

 

    

    
  1. 

        
    

            
    

            
    

        
    

        
    

            
    
                hello
            
    

        
    

    
    2. 

    
  2. 

        
    

            
    

            
    

        
    

        
    

            
    
                <br/> 
            
    

        
    

    
    3. 

    
  3. 

        
    

            
    

            
    

        
    

        
    

            
    
                world
            
    

        
    

    
    4.

擴(kuò)展：對于HTML語言，沒有嚴(yán)格的語義，即<br>與<br/>或者<br    >瀏覽器都可以識別出來。

 html1.0~5.0  xhtml(嚴(yán)格) 五大瀏覽器聯(lián)合更新自己的版本HTML5(不嚴(yán)格)

3.HTML段落

3.1段落標(biāo)簽介紹

HTML段落是通過<p></p>標(biāo)簽進(jìn)行定義的。

如： 

 

    

    
  1. 

        
    

            
    

            
    

        
    

        
    

            
    
                <h2>今?學(xué)習(xí)內(nèi)容：</h2> 
            
    

        
    

    
    2. 

    
  2. 

        
    

            
    

            
    

        
    

        
    

            
    
                <p>學(xué)了標(biāo)題標(biāo)簽</p> 
            
    

        
    

    
    3.

作用：（1）雖然p標(biāo)簽的文字顯示外觀來看，和普通文字沒有區(qū)別，但是它獨(dú)占一行；

           （2）標(biāo)簽語義化，便于定位；

3.2標(biāo)簽語義化

在合適的地方顯示合理的標(biāo)簽，搜索引擎也偏好于標(biāo)簽語義化做的更好的頁面。

4.字體加粗與傾斜及刪除效果

4.1加粗標(biāo)簽

（1）<b></b>為加粗標(biāo)簽；

（2）<strong></strong>為加粗標(biāo)簽；

如： 

 

    

    
  1. 

        
    

            
    

            
    

        
    

        
    

            
    
                普通?字
            
    

        
    

    
    2. 

    
  2. 

        
    

            
    

            
    

        
    

        
    

            
    
                <b>我是加粗?字1</b> 
            
    

        
    

    
    3. 

    
  3. 

        
    

            
    

            
    

        
    

        
    

            
    
                <strong>我是加粗?字2</strong> 
            
    

        
    

    
    4.

區(qū)別：b標(biāo)簽為簡單加粗；strong為加粗效果+特別強(qiáng)調(diào)效果；

4.2傾斜

（1）<i></i> 為傾斜標(biāo)簽；

（2）<em></em>也可實(shí)現(xiàn)傾斜；

如： 

 

    

    
  1. 

        
    

            
    

            
    

        
    

        
    

            
    
                普通?字
            
    

        
    

    
    2. 

    
  2. 

        
    

            
    

            
    

        
    

        
    

            
    
                <i>我是i</i> 
            
    

        
    

    
    3. 

    
  3. 

        
    

            
    

            
    

        
    

        
    

            
    
                <em>我是em</em> 
            
    

        
    

    
    4.

區(qū)別：em標(biāo)簽的語義更強(qiáng)一些。i為傾斜了，em為又傾斜了。

4.3刪除

<s></s> 刪除效果；

<del></del> 刪除效果；

如： 

 

    

    
  1. 

        
    

            
    

            
    

        
    

        
    

            
    
                原價:<s>998</s> 
            
    

        
    

    
    2. 

    
  2. 

        
    

            
    

            
    

        
    

        
    

            
    
                現(xiàn)值:9.98
            
    

        
    

    
    3. 

    
  3. 

        
    

            
    

            
    

        
    

        
    

            
    
                <br> 
            
    

        
    

    
    4. 

    
  4. 

        
    

            
    

            
    

        
    

        
    

            
    
                原價:<del>999</del> 
            
    

        
    

    
    5. 

    
  5. 

        
    

            
    

            
    

        
    

        
    

            
    
                現(xiàn)價:9.98
            
    

        
    

    
    6.

注意：這兩個標(biāo)簽沒有任何語義區(qū)別，而w3c則說明s標(biāo)簽要被del標(biāo)簽替代；

5.圖片標(biāo)簽

<img scr="" alt="" width="" height="" title="">

（1）src:表示資源,圖?加載的名字
（2）width(寬),height(?):設(shè)置圖?的??。
（3）title:?標(biāo)懸停在圖?上的提示?字
（4）alt:
                圖?沒有被正常加載時顯示
                ??閱讀器讀取此內(nèi)容

如： 

<img src="Logo2.png" alt="加載中" width="500" height="500" title="?標(biāo)懸停在圖?上的提示?字">

6.超鏈接

6.1超鏈接使用

超鏈接：點(diǎn)擊頁面發(fā)生跳轉(zhuǎn)；

使用標(biāo)簽為：<a href=""></a>

其中href為：跳轉(zhuǎn)的網(wǎng)址；

如： 

<a href="https://www.baidu.com">點(diǎn)擊我可以打開百度</a>

target=”_blank"：在其它窗口打開新連接； 

<a href="https://www.baidu.com" target="_blank">點(diǎn)擊我可以打開百度,并且打開新 的窗?</a>

6.2空鏈接

空鏈接：在href中指定為#號即可；

作用：（1）暫時不知道點(diǎn)擊之后跳轉(zhuǎn)到哪里，使用空鏈接占位；

           （2）刷新界面； 

<a href="#"></a>

7.列表

列表標(biāo)簽可分為：無序列表和有序列表。

7.1無序列表

使用標(biāo)簽：<ul><li></li><li></li><li></li></ul>

注意：

（1）ul標(biāo)簽可以嵌套若干個li標(biāo)簽；

（2）每一個li標(biāo)簽代表著每一條數(shù)據(jù)；

（3）每個li標(biāo)簽之間沒有順序；

如： 

 

    

    
  1. 

        
    

            
    

            
    

        
    

        
    

            
    
                <ul> 
            
    

        
    

    
    2. 

    
  2. 

        
    

            
    

            
    

        
    

        
    

            
    
                   <li>python</li> 
            
    

        
    

    
    3. 

    
  3. 

        
    

            
    

            
    

        
    

        
    

            
    
                   <li>java</li> 
            
    

        
    

    
    4. 

    
  4. 

        
    

            
    

            
    

        
    

        
    

            
    
                   <li>go</li> 
            
    

        
    

    
    5. 

    
  5. 

        
    

            
    

            
    

        
    

        
    

            
    
                </ul> 
            
    

        
    

    
    6.

7.2有序列表

使用標(biāo)簽：<ol><li></li><li></li><li></li></ol>

注意：

（1）有序；

（2）且是ol開始的；

如： 

 

    

    
  1. 

        
    

            
    

            
    

        
    

        
    

            
    
                <ol> 
            
    

        
    

    
    2. 

    
  2. 

        
    

            
    

            
    

        
    

        
    

            
    
                   <li>基礎(chǔ)班級</li> 
            
    

        
    

    
    3. 

    
  3. 

        
    

            
    

            
    

        
    

        
    

            
    
                   <li>測試</li> 
            
    

        
    

    
    4. 

    
  4. 

        
    

            
    

            
    

        
    

        
    

            
    
                   <li>python</li> 
            
    

        
    

    
    5. 

    
  5. 

        
    

            
    

            
    

        
    

        
    

            
    
                </ol> 
            
    

        
    

    
    6.

8.布局標(biāo)簽

8.1布局標(biāo)簽的介紹

布局標(biāo)簽沒有任何的語義，也沒有所謂的應(yīng)用場景。

作用：劃分頁面區(qū)域，輔助頁面布局；

布局標(biāo)簽為：

div標(biāo)簽：<div></div> 大盒子，獨(dú)占一行；

span標(biāo)簽：<span></span>小盒子，一行可以放多個； 

 

    

    
  1. 

        
    

            
    

            
    

        
    

        
    

            
    
                <div>我是div</div> 
            
    

        
    

    
    2. 

    
  2. 

        
    

            
    

            
    

        
    

        
    

            
    
                <div>我是div</div> 
            
    

        
    

    
    3. 

    
  3. 

        
    

            
    

            
    

        
    

        
    

            
    
                <div>我是div</div> 
            
    

        
    

    
    4. 

    
  4. 

        
    

            
    

            
    

        
    

        
    

            
    
                <div>我是div</div> 
            
    

        
    

    
    5. 

    
  5. 

        
    

            
    

            
    

        
    

        
    

            
    
                <span>我是span</span> 
            
    

        
    

    
    6. 

    
  6. 

        
    

            
    

            
    

        
    

        
    

            
    
                <span>我是span</span> 
            
    

        
    

    
    7. 

    
  7. 

        
    

            
    

            
    

        
    

        
    

            
    
                <span>我是span</span> 
            
    

        
    

    
    8. 

    
  8. 

        
    

            
    

            
    

        
    

        
    

            
    
                <span>我是span</span> 
            
    

        
    

    
    9.

9.表格標(biāo)簽

9.1表格標(biāo)簽介紹

作用：展示數(shù)據(jù)非常整齊；

基本語法： 

 

    

    
  1. 

        
    

            
    

            
    

        
    

        
    

            
    
                <table> 
            
    

        
    

    
    2. 

    
  2. 

        
    

            
    

            
    

        
    

        
    

            
    
                   <tr> 
            
    

        
    

    
    3. 

    
  3. 

        
    

            
    

            
    

        
    

        
    

            
    
                       <td></td> 
            
    

        
    

    
    4. 

    
  4. 

        
    

            
    

            
    

        
    

        
    

            
    
                   </tr> 
            
    

        
    

    
    5. 

    
  5. 

        
    

            
    

            
    

        
    

        
    

            
    
                </table> 
            
    

        
    

    
    6.

（1）table標(biāo)簽：定義表格標(biāo)簽；

（2）tr標(biāo)簽：定義表格中的行；

                th標(biāo)簽：表格單元格；

                td標(biāo)簽：定義表格中的單元格，必須嵌套其中；

9.2表格標(biāo)簽的其他屬性

（1）align：表格對齊方式。如：left，center，right；

（2）border：表格邊框。如：1；

（3）cellpadding：單元邊沿與其內(nèi)容之間的空白，默認(rèn)為1像素；

（4）cellspacing：單元格與單元格之間的空白，默認(rèn)為2像素；

（5）width：設(shè)置表格寬度；

注意：需要寫在table標(biāo)簽里；

9.3表格結(jié)構(gòu)標(biāo)簽

表格結(jié)構(gòu)標(biāo)簽：表格頭部和表格主體兩大部分；

        （1）表格頭部區(qū)域：<thead>標(biāo)簽；

        （2）表格主體區(qū)域：<tbody>標(biāo)簽；

作用：結(jié)構(gòu)就更加清晰，讓表格有更好的語義；

9.4合并單元格

（1）合并單元格方式

        跨行合并：rowspan="合并單元格的個數(shù)"；

        跨列合并：colspan="合并單元格的個數(shù)"；

（2）目標(biāo)單元格

        跨行：最上冊單元格為目標(biāo)單元格，寫合并代碼；

        跨列：最左側(cè)單元格為目標(biāo)單元格，寫合并代碼；

（3）合并單元格步驟

        1.先確定是跨行還是跨列合并；

        2.找到目標(biāo)單元格；

        3.刪除多余單元格；

10.表單標(biāo)簽

10.1表單標(biāo)簽介紹

表單標(biāo)簽我們可以直接稱為 form 標(biāo)簽，標(biāo)簽書寫如下：

（1）表單標(biāo)簽：<form action=""></form>。form表單標(biāo)簽里面就是所有用戶填寫的表單數(shù)據(jù)；

（2）屬性 action：把表單數(shù)據(jù)交給指定后臺程序去處理；

（3）屬性 method：傳遞數(shù)據(jù)時方式方法。

                1.默認(rèn)為post請求（隱式提交數(shù)據(jù)）；

                2.get明文傳送數(shù)據(jù)；

如： 

 

    

    
  1. 

        
    

            
    

            
    

        
    

        
    

            
    
                <form action="***.py" method="POST"> 
            
    

        
    

    
    2. 

    
  2. 

        
    

            
    

            
    

        
    

        
    

            
    
                </form> 
            
    

        
    

    
    3.

10.2輸入框與單選多選框

輸入框標(biāo)簽（input標(biāo)簽）：<input type="text">

（1）type：屬性指定輸入框內(nèi)容；

（2）type="text"：則是最普通的文本輸入框。為單行；

（3）type="password"：則為密碼輸入框。為單行；

                placeholder：給用戶提示（提升用戶體驗感的屬性），并且在為本域中都可以使用；

（4）type="radio"：單選框；

（5）type="checkbox"：為多選框；

如： 

 

    

    
  1. 

        
    

            
    

            
    

        
    

        
    

            
    
                <!-- 填寫用戶名及密碼 --> 
            
    

        
    

    
    2. 

    
  2. 

        
    

            
    

            
    

        
    

        
    

            
    
                <span>用戶名：</span> 
            
    

        
    

    
    3. 

    
  3. 

        
    

            
    

            
    

        
    

        
    

            
    
                <input type="text" placeholder="請輸入用戶名"> 
            
    

        
    

    
    4. 

    
  4. 

        
    

            
    

            
    

        
    

        
    

            
    
                <br> 
            
    

        
    

    
    5. 

    
  5. 

        
    

            
    

            
    

        
    

        
    

            
    
                <span>密碼：</span>&nbsp;&nbsp;&nbsp; 
            
    

        
    

    
    6. 

    
  6. 

        
    

            
    

            
    

        
    

        
    

            
    
                <input type="password" placeholder="請輸入密碼"> 
            
    

        
    

    
    7. 

    
  7. 

        
    

            
    

            
    

        
    

        
    

            
    
                <br> 
            
    

        
    

    
    8. 

    
  8. 

        
    

            
    

            
    

        
    

        
    

            
    
                <!-- 選擇信息：選擇 性別 愛好 --> 
            
    

        
    

    
    9. 

    
  9. 

        
    

            
    

            
    

        
    

        
    

            
    
                <!-- 單選按鈕 --> 
            
    

        
    

    
    10. 

    
  10. 

        
    

            
    

            
    

        
    

        
    

            
    
                <!-- 一組按鈕：他們倆都是來控制性別的,添加name屬性 --> 
            
    

        
    

    
    11. 

    
  11. 

        
    

            
    

            
    

        
    

        
    

            
    
                <span>性別：</span> 
            
    

        
    

    
    12. 

    
  12. 

        
    

            
    

            
    

        
    

        
    

            
    
                <input type="radio" name="gender"> 
            
    

        
    

    
    13. 

    
  13. 

        
    

            
    

            
    

        
    

        
    

            
    
                <span>男</span> 
            
    

        
    

    
    14. 

    
  14. 

        
    

            
    

            
    

        
    

        
    

            
    

            
    

        
    

    
    15. 

    
  15. 

        
    

            
    

            
    

        
    

        
    

            
    
                <input type="radio" name="gender"> 
            
    

        
    

    
    16. 

    
  16. 

        
    

            
    

            
    

        
    

        
    

            
    
                <span>女</span> 
            
    

        
    

    
    17. 

    
  17. 

        
    

            
    

            
    

        
    

        
    

            
    
                <br> 
            
    

        
    

    
    18. 

    
  18. 

        
    

            
    

            
    

        
    

        
    

            
    
                <!-- 多選按鈕 --> 
            
    

        
    

    
    19. 

    
  19. 

        
    

            
    

            
    

        
    

        
    

            
    
                <span>興趣愛好：</span> 
            
    

        
    

    
    20. 

    
  20. 

        
    

            
    

            
    

        
    

        
    

            
    
                <!-- <input type="checkbox"> 睡覺 
            
    

        
    

    
    21. 

    
  21. 

        
    

            
    

            
    

        
    

        
    

            
    
                 <input type="checkbox"> 打游戲 
            
    

        
    

    
    22. 

    
  22. 

        
    

            
    

            
    

        
    

        
    

            
    
                 <input type="checkbox"> 女 
            
    

        
    

    
    23. 

    
  23. 

        
    

            
    

            
    

        
    

        
    

            
    
                 <input type="checkbox"> 羽毛球 --> 
            
    

        
    

    
    24. 

    
  24. 

        
    

            
    

            
    

        
    

        
    

            
    
                <!-- 優(yōu)化:點(diǎn)擊文字也可以選中多選框 --> 
            
    

        
    

    
    25. 

    
  25. 

        
    

            
    

            
    

        
    

        
    

            
    
                <input type="checkbox" id="sleep"> 
            
    

        
    

    
    26. 

    
  26. 

        
    

            
    

            
    

        
    

        
    

            
    
                <label for="sleep">睡覺</label> 
            
    

        
    

    
    27. 

    
  27. 

        
    

            
    

            
    

        
    

        
    

            
    
                <input type="checkbox" id="playgame"> 
            
    

        
    

    
    28. 

    
  28. 

        
    

            
    

            
    

        
    

        
    

            
    
                <label for="playgame">打游戲</label> 
            
    

        
    

    
    29. 

    
  29. 

        
    

            
    

            
    

        
    

        
    

            
    
                <input type="checkbox" id="liangnv"> 
            
    

        
    

    
    30. 

    
  30. 

        
    

            
    

            
    

        
    

        
    

            
    
                <label for="liangnv">女</label> 
            
    

        
    

    
    31. 

    
  31. 

        
    

            
    

            
    

        
    

        
    

            
    
                <input type="checkbox" id="yumaoqiu"> 
            
    

        
    

    
    32. 

    
  32. 

        
    

            
    

            
    

        
    

        
    

            
    
                <label for="yumaoqiu">羽毛球</label> 
            
    

        
    

    
    33. 

    
  33. 

        
    

            
    

            
    

        
    

        
    

            
    
                <br> 
            
    

        
    

    
    34.

10.3下拉框

使用標(biāo)簽：select為下拉框的標(biāo)簽，嵌套若干個option標(biāo)簽。其中每一個option為下拉框中的一個選項。

selected="selected"。表示默認(rèn)選中狀態(tài)； 

 

    

    
  1. 

        
    

            
    

            
    

        
    

        
    

            
    
                <select name="" id=""> 
            
    

        
    

    
    2. 

    
  2. 

        
    

            
    

            
    

        
    

        
    

            
    
                   <option value=""></option> 
            
    

        
    

    
    3. 

    
  3. 

        
    

            
    

            
    

        
    

        
    

            
    
                </select> 123
            
    

        
    

    
    4.

如： 

 

    

    
  1. 

        
    

            
    

            
    

        
    

        
    

            
    
                <select name="" id=""> 
            
    

        
    

    
    2. 

    
  2. 

        
    

            
    

            
    

        
    

        
    

            
    
                   <option value="">北京</option> 
            
    

        
    

    
    3. 

    
  3. 

        
    

            
    

            
    

        
    

        
    

            
    
                   <option value="">上海</option> 
            
    

        
    

    
    4. 

    
  4. 

        
    

            
    

            
    

        
    

        
    

            
    
                   <option value="">?州</option> 
            
    

        
    

    
    5. 

    
  5. 

        
    

            
    

            
    

        
    

        
    

            
    
                   <option value="" selected="selected">深圳</option> 
            
    

        
    

    
    6. 

    
  6. 

        
    

            
    

            
    

        
    

        
    

            
    
                </select> <br> 
            
    

        
    

    
    7.

10.4文本域

使用標(biāo)簽：<textarea name="", cols="30" rows="10"></textarea>

（1）cols：列；

（2）rows：行； 

 

    

    
  1. 

        
    

            
    

            
    

        
    

        
    

            
    
                建議：
            
    

        
    

    
    2. 

    
  2. 

        
    

            
    

            
    

        
    

        
    

            
    
                <textarea name="" id="" cols="30" rows="10"></textarea> 
            
    

        
    

    
    3. 

    
  3. 

        
    

            
    

            
    

        
    

        
    

            
    
                <br> 
            
    

        
    

    
    4.

10.5按鈕標(biāo)簽

（1）普通按鈕：

                標(biāo)簽：input指定type="button"；

                通過value屬性，指定按鈕的文字；

如： 

 

    

    
  1. 

        
    

            
    

            
    

        
    

        
    

            
    
                普通按鈕：
            
    

        
    

    
    2. 

    
  2. 

        
    

            
    

            
    

        
    

        
    

            
    
                <input type="button" value="按鈕"> 
            
    

        
    

    
    3. 

    
  3. 

        
    

            
    

            
    

        
    

        
    

            
    
                <br> 
            
    

        
    

    
    4.

（2）重置按鈕：點(diǎn)擊重置按鈕就會將數(shù)據(jù)恢復(fù)到默認(rèn)狀態(tài)；

                標(biāo)簽：input指定type="reset";

                注意：重置按鈕自動會有重置的文字；

                如果指定為value屬性，則顯示什么；

如： 

 

    

    
  1. 

        
    

            
    

            
    

        
    

        
    

            
    
                重置按鈕：
            
    

        
    

    
    2. 

    
  2. 

        
    

            
    

            
    

        
    

        
    

            
    
                <input type="reset" value="重置按鈕"> 
            
    

        
    

    
    3. 

    
  3. 

        
    

            
    

            
    

        
    

        
    

            
    
                <br> 
            
    

        
    

    
    4.

（3）提交按鈕：點(diǎn)擊提交按鈕可以讓表單提交給指定后臺處理；

                標(biāo)簽：input指定type="submit";

                注意：提交按鈕自動會有提交的文字；

如： 

 

    

    
  1. 

        
    

            
    

            
    

        
    

        
    

            
    
                提交按鈕：
            
    

        
    

    
    2. 

    
  2. 

        
    

            
    

            
    

        
    

        
    

            
    
                <input type="submit" value="我是提交"> 
            
    

        
    

    
    3.

          

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

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

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

評論(0) 瀏覽(708)

【前端】vue模板語法知識了解一下，是不是只知道用element-ui組件？

前端達(dá)人

寫在前面

上一篇總結(jié)了在實(shí)操過程中如果遇到了nodejs版本的問題，我們該如何去解決的，還有就是總結(jié)了vue2和vue3生命周期的區(qū)別，如果感興趣的可以去看看上一篇的內(nèi)容vue生命周期基礎(chǔ)知識了解一下。

那知道了vue的生命周期知識點(diǎn)，接下就開始vue模板語法吧，在Vue中，Vue模板對應(yīng)的就是Vue中的View（視圖）部分，也是Vue重中之一，而在Vue中要了解Vue模板我們就需要從兩個方面來著手，其一是Vue的模板語法，其二就是模板渲染。模板語法較簡單一點(diǎn)，但對于模板的渲染（模板編譯）就會更為復(fù)雜一些，如果需要了解模板渲染就需要對Vue的渲染函數(shù)，響應(yīng)式原理之類的要有所了解。

Vue模板語法 

<!-- App.vue --> <template> <div id="app"> {{ message }} </div> </template> 

    

    
  • 
        1
    
    • 

    
  • 
        2
    
    • 

    
  • 
        3
    
    • 

    
  • 
        4
    
    • 

    
  • 
        5
    
    • 

    
  • 
        6
    
    •

上面的代碼演示的僅僅Vue模板中的一種方式，也是最簡單和最常見的一種模板方式。
在Vue中，模板語法是邏輯和視圖之間的溝通橋梁，使用模板語法編寫的HTML會響應(yīng)Vue實(shí)例中的各種變化，簡單地說，Vue實(shí)例中的邏輯可以隨心所欲的渲染在頁面上。

Vue模板中插值常見的使用方法主要有：文本、原始HTML、屬性、JavaScript表達(dá)式、指令和修飾符**等。

文本

使用了v-once指令的話，那么該插值就是一次性地插值。也就是說，當(dāng)數(shù)據(jù)改變時，插值處的內(nèi)容不會更新。其使用如下所示： 

<!-- App.vue --> <template> <div id="app"> <span v-once>{{ message }}</span> </div> </template> 

    

    
  • 
        1
    
    • 

    
  • 
        2
    
    • 

    
  • 
        3
    
    • 

    
  • 
        4
    
    • 

    
  • 
        5
    
    • 

    
  • 
        6
    
    •

原始HTML

不能使用v-html來復(fù)合局部模板，因為Vue不是基于字符串的模板引擎。另外動態(tài)渲染任意的HTML會有一定的危險，因為它很容易導(dǎo)致XSS攻擊。
插值語法中（也就是{{}}）會將數(shù)據(jù)解釋為普通文本，而非HTML代碼，為了輸出真正的HTML，需要使用v-html指令，比如下面這個示例： 

<!-- App.vue --> <template> <div id="app"> <img alt="Vue logo" src="./assets/logo.png"> <div>{{rawHTML}}</div> <div v-html="rawHTML"></div> </div> </template> <script> export default { name: 'app', data () { return { rawHTML: '<span style="color:red;">原始HTML</span>' } } } </script> 


    




    

    
  • 
        1
    
    • 

    
  • 
        2
    
    • 

    
  • 
        3
    
    • 

    
  • 
        4
    
    • 

    
  • 
        5
    
    • 

    
  • 
        6
    
    • 

    
  • 
        7
    
    • 

    
  • 
        8
    
    • 

    
  • 
        9
    
    • 

    
  • 
        10
    
    • 

    
  • 
        11
    
    • 

    
  • 
        12
    
    • 

    
  • 
        13
    
    • 

    
  • 
        14
    
    • 

    
  • 
        15
    
    • 

    
  • 
        16
    
    • 

    
  • 
        17
    
    • 

    
  • 
        18
    
    • 

    
  • 
        19
    
    •

屬性

在布爾特性的情況下，它們的存在即暗示為true， v-bind 工作起來略有不同，比如： 

<button v-bind:disabled="isButDisabled">Button</button> 

    

    
  • 
        1
    
    •

開源Vue模板和主題框架集合

現(xiàn)在有很多項目vue項目都有很好用的vue模板，這里就總結(jié)一些常用的末班集合。

BootstrapVue

BootstrapVue 擁有85個以上的組件，45個以上的可用插件，多個指令和670+個圖標(biāo)， 它提供了可用于Vue.js v2.6的Bootstrap v4.5組件和網(wǎng)格系統(tǒng)的最全面的實(shí)現(xiàn)之一 ，并具有廣泛的功能和自動 WAI-ARIA 可訪問性標(biāo)記。

采用 BootstrapVue 構(gòu)建響應(yīng)式、移動優(yōu)先、ARIA項目（Accessible Rich Internet Application，可訪問的富媒體應(yīng)用，即無障礙友好應(yīng)用)，基于 Vue.js 和世界全球最受歡迎的 CSS 前端框架 — Bootstrap v4
在這里插入圖片描述
GitHub地址：BootstrapVue直接進(jìn)入
在這里插入圖片描述

element-ui

element-ui應(yīng)該常用了，使用 Element需要先引入整個 Element-ui
在 main.js 中寫入以下內(nèi)容： 

import Vue from 'vue'; import ElementUI from 'element-ui'; import 'element-ui/lib/theme-chalk/index.css'; import App from './App.vue'; Vue.use(ElementUI); new Vue({ el: '#app',
  render: h => h(App) }); 

    

    
  • 
        1
    
    • 

    
  • 
        2
    
    • 

    
  • 
        3
    
    • 

    
  • 
        4
    
    • 

    
  • 
        5
    
    • 

    
  • 
        6
    
    • 

    
  • 
        7
    
    • 

    
  • 
        8
    
    • 

    
  • 
        9
    
    • 

    
  • 
        10
    
    • 

    
  • 
        11
    
    •

在這里插入圖片描述點(diǎn)擊跳轉(zhuǎn)跳轉(zhuǎn)地址：Element-ui地址

還有一些開源的項目比如：

  • 基于Vue2.0和bulma0.2的后臺管理框架 - vue-admin
  • 人人開源 / renren-fast-vue

renren-fast-vue基于vue、element-ui構(gòu)建開發(fā)，實(shí)現(xiàn)renren-fast后臺管理前端功能，提供一套更優(yōu)的前端解決方案

前后端分離，通過token進(jìn)行數(shù)據(jù)交互，可獨(dú)立部署* 主題定制，通過scss變量統(tǒng)一一站式定制* 動態(tài)菜單，通過菜單管理統(tǒng)一管理訪問路由* 數(shù)據(jù)切換，通過mock配置對接口數(shù)據(jù)／mock模擬數(shù)據(jù)進(jìn)行切換* 發(fā)布時，可動態(tài)配置CDN靜態(tài)資源／切換新舊版本.

  • 若依 / RuoYi-Vue
  • VueJS Expo


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

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

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

使用react 開發(fā)一個左側(cè)三級菜單

前端達(dá)人

以下是一個使用React開發(fā)的左側(cè)三級菜單的基本示例： 








import React, { useState } from 'react';

const Menu = () => {
  const [menuItems, setMenuItems] = useState([
    {
      id: 1,
      name: 'Menu Item 1',
      subMenuItems: [
        { id: 1, name: 'Sub-menu Item 1' },
        { id: 2, name: 'Sub-menu Item 2' }
      ]
    },
    {
      id: 2,
      name: 'Menu Item 2',
      subMenuItems: [
        { id: 3, name: 'Sub-menu Item 3' },
        { id: 4, name: 'Sub-menu Item 4' }
      ]
    }
  ]);

  const [selectedMenuItem, setSelectedMenuItem] = useState(null);
  const [selectedSubMenu, setSelectedSubMenu] = useState(null);

  const handleMenuItemClick = (menuItem) => {
    setSelectedMenuItem(menuItem.id);
    setSelectedSubMenu(null);
  };

  const handleSubMenuClick = (subMenuItem) => {
    setSelectedSubMenu(subMenuItem.id);
  };

  return (
    <div className="menu">
      {menuItems.map((menuItem) => (
        <div key={menuItem.id}>
          <button onClick={() => handleMenuItemClick(menuItem)}>
            {menuItem.name}
          </button>
          {selectedMenuItem === menuItem.id && (
            <ul>
              {menuItem.subMenuItems.map((subMenuItem) => (
                <li key={subMenuItem.id}>
                  <button onClick={() => handleSubMenuClick(subMenuItem)}>
                    {subMenuItem.name}
                  </button>
                  {selectedSubMenu === subMenuItem.id && (
                    <ul>
                      <li>Sub-menu item details</li>
                    </ul>
                  )}
                </li>
              ))}
            </ul>
          )}
        </div>
      ))}
    </div>
  );
};

export default Menu;







藍(lán)藍(lán)設(shè)計建立了UI設(shè)計分享群，每天會分享國內(nèi)外的一些優(yōu)秀設(shè)計，如果有興趣的話，可以進(jìn)入一起成長學(xué)習(xí)，請加微信ban_lanlan，報下信息，藍(lán)小助會請您入群。歡迎您加入噢~~

希望得到建議咨詢、商務(wù)合作，也請與我們聯(lián)系01063334945。 



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



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

評論(0) 瀏覽(804)

使用layui 寫一個左側(cè)導(dǎo)航菜單 至三級目錄

前端達(dá)人

HTML代碼：

<div class="layui-side layui-bg-black">
  <div class="layui-side-scroll">
    <ul class="layui-nav layui-nav-tree" lay-filter="test">
      <li class="layui-nav-item">
        <a href="javascript:;">菜單1</a>
        <dl class="layui-nav-child">
          <dd><a href="javascript:;">子菜單1-1</a></dd>
          <dd><a href="javascript:;">子菜單1-2</a></dd>
          <dd><a href="javascript:;">子菜單1-3</a></dd>
        </dl>
      </li>
      <li class="layui-nav-item">
        <a href="javascript:;">菜單2</a>
        <dl class="layui-nav-child">
          <dd><a href="javascript:;">子菜單2-1</a></dd>
          <dd><a href="javascript:;">子菜單2-2</a></dd>
          <dd>
            <a href="javascript:;">子菜單2-3</a>
            <dl class="layui-nav-child">
              <dd><a href="javascript:;">子菜單2-3-1</a></dd>
              <dd><a href="javascript:;">子菜單2-3-2</a></dd>
              <dd><a href="javascript:;">子菜單2-3-3</a></dd>
            </dl>
          </dd>
        </dl>
      </li>
    </ul>
  </div>
</div>


    JavaScript代碼：













//JavaScript代碼需要引入layui.js文件
layui.use('element', function(){
  var element = layui.element;
});






藍(lán)藍(lán)設(shè)計建立了UI設(shè)計分享群，每天會分享國內(nèi)外的一些優(yōu)秀設(shè)計，如果有興趣的話，可以進(jìn)入一起成長學(xué)習(xí)，請加微信ban_lanlan，報下信息，藍(lán)小助會請您入群。歡迎您加入噢~~ 希望得到建議咨詢、商務(wù)合作，也請與我們聯(lián)系01063334945。  分享此文一切功德，皆悉回向給文章原作者及眾讀者. 免責(zé)聲明：藍(lán)藍(lán)設(shè)計尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請及時與我們?nèi)〉寐?lián)系，我們立即更正或刪除。  藍(lán)藍(lán)設(shè)計( sillybuy.com )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)、UI設(shè)計公司、界面設(shè)計公司、UI設(shè)計服務(wù)公司、數(shù)據(jù)可視化設(shè)計公司、UI交互設(shè)計公司、高端網(wǎng)站設(shè)計公司、UI咨詢、用戶體驗公司、軟件界面設(shè)計公司。 



            

              
                評論(0)
                瀏覽(770)
              
                          

          

                      

            
            
淺講一下 Label Studio

            

               前端達(dá)人                                            

            
Label Studio是一種基于Web的開源注釋工具，旨在幫助數(shù)據(jù)科學(xué)家和機(jī)器學(xué)習(xí)工程師更輕松地創(chuàng)建高質(zhì)量的標(biāo)簽數(shù)據(jù)集。它支持多種類型的注釋任務(wù)，如文本分類、實(shí)體識別、圖像分類等，并且可以集成到現(xiàn)有的機(jī)器學(xué)習(xí)流程中。Label Studio還具有可擴(kuò)展性和靈活性，可以適應(yīng)不同的數(shù)據(jù)類型和注釋需求。






    Label Studio的使用一般分為三個階段：部署、標(biāo)注和導(dǎo)出數(shù)據(jù)。



    
    
  1. 
        
    
            部署：可以通過下載源代碼進(jìn)行本地安裝，也可以使用Docker容器快速部署。此外，Label Studio還提供了在云端使用的選項，如Amazon Web Services（AWS）和Google Cloud Platform（GCP）。
        
    
    
    2. 
    
  2. 
        
    
            標(biāo)注：通過創(chuàng)建項目、上傳數(shù)據(jù)、定義任務(wù)類型和注釋模式等步驟，可以開始進(jìn)行標(biāo)注。Label Studio支持多種注釋任務(wù)，如文本分類、實(shí)體識別、圖像分類等。標(biāo)注人員可以在網(wǎng)頁上直接進(jìn)行標(biāo)注，也可以使用API或CLI工具進(jìn)行標(biāo)注。
        
    
    
    3. 
    
  3. 
        
    
            導(dǎo)出數(shù)據(jù)：標(biāo)注完成后，可以將標(biāo)注結(jié)果導(dǎo)出為不同格式的數(shù)據(jù)集，如JSON、CSV、TSV、YAML等，以供機(jī)器學(xué)習(xí)算法使用。
        
    
    
    4. 




    對于開發(fā)者而言，可以通過自定義插件和擴(kuò)展來定制化和豐富Label Studio的功能。Label Studio提供了完備的文檔和API參考，使得開發(fā)者可以更加便捷地進(jìn)行開發(fā)和調(diào)試工作。









藍(lán)藍(lán)設(shè)計建立了UI設(shè)計分享群，每天會分享國內(nèi)外的一些優(yōu)秀設(shè)計，如果有興趣的話，可以進(jìn)入一起成長學(xué)習(xí)，請加微信ban_lanlan，報下信息，藍(lán)小助會請您入群。歡迎您加入噢~~


希望得到建議咨詢、商務(wù)合作，也請與我們聯(lián)系01063334945。 





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





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

            

              
                評論(0)
                瀏覽(1811)
              
                          

          

                      

            
            
使用 react 寫一個基礎(chǔ)表單頁面

            

               前端達(dá)人                                            

            
import React, { useState } from 'react';

function BasicForm() {
  const [formData, setFormData] = useState({
    name: '',
    email: '',
    message: ''
  });

  const handleChange = (event) => {
    const { name, value } = event.target;
    setFormData({ ...formData, [name]: value });
  };

  const handleSubmit = (event) => {
    event.preventDefault();
    console.log(formData);
  };

  return (
    <form onSubmit={handleSubmit}>
      <label>
        Name:
        <input type="text" name="name" value={formData.name} onChange={handleChange} />
      </label>
      <label>
        Email:
        <input type="email" name="email" value={formData.email} onChange={handleChange} />
      </label>
      <label>
        Message:
        <textarea name="message" value={formData.message} onChange={handleChange} />
      </label>
      <button type="submit">Submit</button>
    </form>
  );
}

export default BasicForm;









此表單組件具有三個輸入字段：名稱、電子郵件和消息。useState Hook 用于存儲表單數(shù)據(jù)，并且 handleChange 函數(shù)處理輸入字段值的更改。handleSubmit 函數(shù)在提交表單時被調(diào)用并打印出表單數(shù)據(jù)至控制臺。


藍(lán)藍(lán)設(shè)計建立了UI設(shè)計分享群，每天會分享國內(nèi)外的一些優(yōu)秀設(shè)計，如果有興趣的話，可以進(jìn)入一起成長學(xué)習(xí)，請加微信ban_lanlan，報下信息，藍(lán)小助會請您入群。歡迎您加入噢~~


希望得到建議咨詢、商務(wù)合作，也請與我們聯(lián)系01063334945。 





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





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

            

              
                評論(0)
                瀏覽(700)
              
                          

          

              


  





    
  

    
日歷

    

        

        
    

  

    
    

      
鏈接

      
    
                

    

    

      
個人資料

      
    

    

      
存檔