[Vue] 專案雜項總結

阿新 • • 發佈：2020-12-27

效果展示：
水波載入動畫
直接上完整程式碼：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>水波載入動畫</title>
    <style> 

        * {
            padding: 0;
            margin: 0;
            box-sizing: border-box;
        }
        
        body {
            height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
            background-color: rgb(240, 228, 228);
        } 

        
        .quan {
            position: relative;
            width: 180px;
            height: 180px;
            border-radius: 50%;
            border: 3px solid rgb(246, 247, 248);
            box-shadow: 0 0 0 3px rgb(41, 134, 196);
        }
        
        .shui {
            position: absolute; 

            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgb(23, 106, 201);
            border-radius: 50%;
            overflow: hidden;
        }
        
        .shui::after {
            content: '';
            position: absolute;
            top: 0;
            left: 50%;
            width: 150%;
            height: 150%;
            border-radius: 40%;
            background-color: rgb(240, 228, 228);
            animation: shi 5s linear infinite;
        }
        
        @keyframes shi {
            0% {
                transform: translate(-50%, -65%) rotate(0deg);
            }
            100% {
                transform: translate(-50%, -65%) rotate(360deg);
            }
        }
        
        .shui::before {
            content: '';
            position: absolute;
            top: 0;
            left: 50%;
            width: 150%;
            height: 150%;
            border-radius: 42%;
            background-color: rgba(240, 228, 228, 0.2);
            animation: xu 7s linear infinite;
        }
        
        @keyframes xu {
            0% {
                transform: translate(-50%, -60%) rotate(0deg);
            }
            100% {
                transform: translate(-50%, -60%) rotate(360deg);
            }
        }
    </style>
</head>

<body>
    <div class="quan">
        <div class="shui"></div>
    </div>
</body>

</html>

生活不止眼前的苟且，還有詩和遠方的田野~
原文地址

[Vue] 專案雜項總結

技術標籤：筆記目錄標題 1. 路徑中 @ 的用處2. 文字框驗證規則自定義規則 1. 路徑中 @ 的用處

1：vue專案優化總結

1：永遠不要再同一行使用v-for 跟 v-if。因為v-for的迴圈優先執行。寫在同一行造成效能的浪費，先迴圈建立dom再銷燬dom。如果遇到這種情況，用計算屬性過濾掉v-if為false的條件。

vue 介面 header_前端Vue專案架構總結

技術標籤：vue 介面 header 工欲善其事必先利其器，對前端框架Vue有了一定的瞭解和熟悉，總結如下：

Vue 電商後臺管理專案階段性總結(推薦)

一、階段總結該專案偏向前端更多一點，後端 API 服務是已經搭建好了的，我們只需要用既可以，（但是作為一個全棧開發人員，它的資料庫的表設計，Restful API 的設計是我們要著重學習的！！！）

Vue專案開發常見問題和解決方案總結

Vue Cli 打包之後靜態資源路徑不對的解決方法 cli2版本：將 config/index.js 裡的 assetsPublicPath 的值改為 \'./\' 。

docker部署vue專案總結

1、安裝docker desktop win10 2、安裝docker machine及配置 https://blog.csdn.net/acherson/article/details/101441753

移動端vue專案總結（Echarts折線圖+熱力圖）

移動端vue專案總結一、日期資料處理需求：把資料按天作為分類，父集為當天日期（如果是日期是當天，就顯示今天），子集為時間。

vue-element-admin專案核心總結

1、搭建專案按照官方文件把整個專案下載下來，安裝依賴包npm install，然後npm run dev 啟動專案。

vue 專案中一些技巧總結

技術標籤：個人總結javascript 根據欄位長度，返回相應的資料使用方式： <text style="font-size: 28px;">{{ addLabel(listItem.label) }}</text>

Vue專案如何提高效率？來看大廠實踐總結

Vue專案如何提高效率？來看大廠實踐總結對於從事前端工作的小夥伴，掌握Vue，React這樣的框架可以說是前端基本功了。人人都會用，那我們怎樣才能寫得比別人優雅？比別人漂亮？

react和vue專案總結

一、react專案-好客租房這個專案學會了很多，元件封裝，頁面拆分，使用地圖API畫地圖，登陸攔截等

Vue專案中常用的工具函式總結

目錄前言一、自定義聚焦指令1、方式一2、方式二3、方式三二、輸入框防抖1、需求2、思路3、程式碼實現三、關鍵字高亮1、需求2、思路3、程式碼演示四、格式化Excel表格中儲存的時間1、需求2、程式碼演示總結前言

餓了麼--vue專案總結

餓了麼--vue專案總結餓了麼--vue專案總結 github原始碼地址：餓了麼專案原始碼餓了麼專案包含以下三個方面的技術點，以及所瞭解的知識。1.流程及開發方法：

簡單使用持續整合jenkins 快速部署springboot和vue專案(面向開發者)

1-前言作為個人開發者,往往想把springboot專案部署到伺服器總要經過一些很麻煩的步驟,比如springboot專案要在本地編譯打包成jar包,然後上傳jar包檔案到伺服器,再然後使用一些命令去啟動這個jar包,這樣你每修改一

nginx反向代理、負載均衡配置及vue專案部署

nginx配置檔案結構 Nginx的配置檔案是一個純文字檔案，它一般位於Nginx安裝目錄的conf目錄下，整個配置檔案是以block的形式組織的。每個block一般以一個大括號“{”來表示。block可以分為幾個層次，整個配置檔案中Ma

vue專案中在可編輯div游標位置插入內容的實現程式碼

vue專案中在可編輯div游標位置插入內容 html： <div class=\"mouse-move fl f12 h22 lh22 mg-r5 sms-item\"

vue專案中使用eslint+prettier規範與檢查程式碼的方法

1.前言在團隊協作中，為避免低階 Bug、以及團隊協作時不同程式碼風格對彼此造成的困擾與影響，會預先制定編碼規範。使用 Lint 工具和程式碼風格檢測工具，則可以輔助編碼規範執行，有效控制程式碼質量

vue專案中監聽手機物理返回鍵的實現

背景：專案中有一個場景要監聽android手機物理返回鍵，但是app和js的中介軟體又沒提供這個事件的監聽，只能百度純js實現了

如何在vue專案中嵌入jsp頁面的方法(2種)

今日一個專案中一塊功能模組是其他系統使用jsp已經開發好的頁面，想著直接將其嵌入到當前的vue專案中節約開發成本；但是發現並非想象的那麼簡單

解決vue[email protected]安裝不成功的問題及搭建ts-vue專案

今天嘗試了下安裝vue[email protected]，但是安裝了很多遍都失敗了。最後訪問了一下vue-cli的官方安裝指南網站https://cli.vuejs.org/zh/guide/installation.html嘗試找出些原因。

[Vue] 專案雜項總結

相關推薦