出現這個錯誤是因為 node.js V17版本中最近發布的OpenSSL3.0, 而OpenSSL3.0對允許算法和密鑰大小增加了嚴格的限制，可能會對生態系統造成一些影響.
Linux & Mac OS (windows git bash)
export NODE_OPTIONS=--openssl-legacy-provider
windows命令提示符:
set NODE_OPTIONS=--openssl-legacy-provider
(1) 鼠標雙擊nvm-setup.exe文件，選擇“我接受…”那一行，點擊next
(2) 可以根據自身情況自定義選擇路徑盤，路徑不要出現空格或中文符號（路徑最好是在路徑盤的根目錄下，如C盤、D盤下的根目錄），選好后點擊next
(3) 選擇node.js的安裝位置，可以根據自身情況自定義選擇路徑盤，路徑不要出現空格或中文符號（路徑最好是在路徑盤的根目錄下新建一個文件夾，如C盤、D盤下的根目錄）,選好后點擊next。(若系統中已經安裝node.js，則cmd打開終端，輸入where node，查看node的位置，選擇此文件目錄)
(4) 最后一步，點擊install即可安裝完成
進入命令控制行窗口（win+R,輸入cmd），
輸入nvm -v,出現版本號即成功。
(1) 輸入命令行nvm ls available查看可用的node.js版本號
若報錯：Could not retrieve https://nodejs.org/dist/latest/.....
則打開nvm的安裝目錄，打開settings.txt文件，增加2行,然后保存
node_mirror:https://npm.taobao.org/mirrors/node/
npm_mirror:https://npm.taobao.org/mirrors/npm/
(2) 輸入命令行nvm install node版本號(例如：nvm install 16.17.0)
(3) 安裝成功后，輸入命令行nvm use node版本號（nvm use 16.17.0）
若報錯exit status 1: ??????????????д??????
則權限不夠，以管理員身份運行cmd
具體方法：點擊電腦左下方搜索->輸入cmd->以管理員身份運行（命令提示符）->重新輸入nvm use
(4) 驗證是否成功
分別輸入命令行node -v和npm -v，檢驗node.js以及對應npm是否安裝成功，如果可以顯示版本號這說明安裝成功。
小竅門：
1.輸入命令行nvm ls可查看你安裝的所有node.js版本號，以及你當前所選擇的node.js運行版本
(2) 如果想刪除某node.js版本的話，輸入命令行nvm uninstall node版本號（例如：nvm uninstall 18.10.0）即可刪除對應版本
npm run dev
來源：csdn
藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請加微信ban_lanlan，報下信息，藍小助會請您入群。歡迎您加入噢~~
希望得到建議咨詢、商務合作，也請與我們聯系01063334945。
分享此文一切功德，皆悉回向給文章原作者及眾讀者. 免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司
TypeScript從入門到實踐專欄是博主在學習和工作過程中的總結，實用性非常強，歡迎訂閱哦，學會TS不迷路。
| TS系列 | 標題 |
|---|---|
| 基礎篇 | TS入門（一） |
| 基礎篇 | TS類型聲明（二） |
| 基礎篇 | TS接口類型（三） |
| 基礎篇 | TS交叉類型&聯合類型（四） |
| 基礎篇 | TS類型斷言（五） |
| 基礎篇 | TS類型守衛（六） |
| 進階篇 | TS函數重載（七） |
| 進階篇 | TS泛型（八） |
| 進階篇 | TS裝飾器（九） |
對于同一個函數我們在不同場景下傳參，參數有時候全部需要，有時候部分需要，定義多個同名函數就會報錯，那么該怎么實現這個操作呢？我們可以為函數設置默認參數和可選參數。
給每個參數添加類型之后，可以不用給函數本身添加返回值類型，因為TS能根據返回語句自動推斷出返回值類型
function start(name:string,age:number,phone?:number,sex?:string):string{ if(phone&&sex){ return `name:${name},age:${age},phone:${phone},sex:${sex}` }else{ return `name:${name},age:${age}` } } start('zhangsan','14')//name:zhangsan,age:14 start('zhangsan','14',15678777777,'男')//name:zhangsan,age:14,phone:15678777777,sex:男
另外我們看它編譯后的樣子，其中返回值使用了concat來連接字符串，也讓我們學習到模版字符串的實現原理。
function start(name, age, phone, sex) { if (phone && sex) { return "name:".concat(name, ",age:").concat(age, ",phone:").concat(phone, ",sex:").concat(sex); } else { return "name:".concat(name, ",age:").concat(age); } } start('zhangsan', 14); //name:zhangsan,age:14 start('zhangsan', 14, 15678777777, '男'); //name:zhangsan,age:14,phone:15678777777,sex:男
但是我們要是有很多場景，參數類型也都不一致，我們這樣寫很難維護，并且定義的規范很難適用于實際多個場景，那么我們可以使用函數重載來處理。
什么事函數重載呢？當我們多次調用函數時傳遞不同參數數量或者類型，函數會做出不同處理。
這里介紹個名次「函數簽名」，顧名思義，函數簽名主要定義了參數及參數類型，返回值及返回值類型。函數簽名不同，函數會做出不同的處理，這是我對函數重載的理解。
舉個例子，聲明一個類Course，里面寫一個start的方法，我們調用 start時傳入不同參數類型已經參數個數，start方法會做出不同處理，那么怎么實現呢？具體如下：
type Combinable = number | string; class Course { //定義重載簽名 begin(name: number, score: number): string; begin(name: string, score: string): string; begin(name: string, score: number): string; begin(name: number, score: string): string; //定義實現簽名 begin(name: Combinable, score: Combinable) { if (typeof name === 'string' || typeof score === 'string') { return 'student:' + name + ':' + score; } } } const course = new Course(); course.begin(111, 5);//沒有輸出 course.begin('zhangsan', 5);//student:zhangsan:5 course.begin(5, 'zhangsan');//student:5:zhangsan
以上代碼中定義了4個重載前面和1個實現簽名。
聲明一個函數arithmetic，參數類型為聯合類型，返回值也是聯合類型，但是如下代碼卻報錯了。
function arithmetic(x: number | string): number | string { if (typeof x === 'number') { return x; } else { return x+'是字符串'; } } arithmetic(1).length;
原因是沒有明確函數string類型沒有toFixed屬性`，那么怎么用函數重載解決這個報錯問題呢？
我們可以可以根據傳參的類型和函數返回值聲明多個同名的函數，只是類型和返回值不同而已。
function arithmetic(x: number): number; function arithmetic(x: string): string; function arithmetic(x: number | string): number | string { if (typeof x === 'number') { return x; } else { return x+'是字符串'; } } arithmetic(1).toFixed(1);
這樣就不會報錯啦，因為已經識別到arithmetic(1)的返回值是number類型。
JS中函數重載怎么實現呢？
var arr = [1,2,3,4,5]; //注意:這里不能寫成箭頭函數，否則this指向的是window對象 Array.prototype.search = function() { var len = arguments.length; switch(len){ case 0: return this; case 1: return `${arguments[0]}`; case 2: return `${arguments[0]},${arguments[1]}`; } } console.log(arr.search()) //[1,2,3,4,5] console.log(arr.search(1)) //1 console.log(arr.search(1,2)) //1,2
function addMethod (obj, name, fn) { var old = obj[name]; obj[name] = function () { if (fn.length === arguments.length) { return fn.apply(this, arguments) } else if (typeof old === 'function') { return old.apply(this, arguments) } } } var person = {name: 'zhangsan'} addMethod(person, 'getName', function () { console.log(this.name + '---->' + 'getName1') }) addMethod(person, 'getName', function (str) { console.log(this.name + '---->' + str) }) addMethod(person, 'getName', function (a, b) { console.log(this.name + '---->' + (a + b)) }) person.getName() person.getName('zhangsan') person.getName(10, 20)來源：csdn 藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請加微信ban_lanlan，報下信息，藍小助會請您入群。歡迎您加入噢~~ 希望得到建議咨詢、商務合作，也請與我們聯系01063334945。 分享此文一切功德，皆悉回向給文章原作者及眾讀者. 免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。 藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司
目錄
1、基本介紹
? 概述
Vue 是一套前端框架，免除原生JavaScript中的DOM操作，簡化書寫。
我們之前也學習過后端的框架 `Mybatis` ，`Mybatis` 是用來簡化 `jdbc` 代碼編寫的；而 `VUE` 是前端的框架，是用來簡化 `JavaScript` 代碼編寫的。前面的綜合性案例，里面進行了大量的DOM操作，如下
使用 `VUE` 后，這部分代碼我們就不需要再寫了。那么 `VUE` 是如何簡化 DOM 書寫呢？基于MVVM(Model-View-ViewModel)思想，實現數據的雙向綁定，將編程的關注點放在數據上。之前我們是將關注點放在了 DOM 操作上；而要了解 `MVVM` 思想，必須先了解 `MVC` 思想，如下圖就是 `MVC` 思想圖解
其中的C 就是咱們 js 代碼，M 就是數據，而 V 是頁面上展示的內容，如下圖：
`MVC` 思想是沒法進行雙向綁定的。雙向綁定是指當數據模型數據發生變化時，頁面展示的會隨之發生變化，而如果表單數據發生變化，綁定的模型數據也隨之發生變化。接下來了解`MVVM` 思想，如下圖是三個組件圖解：
圖中的 `Model` 就是我們的數據，`View` 是視圖，也就是頁面標簽，用戶可以通過瀏覽器看到的內容；`Model` 和 `View` 是通過 `ViewModel` 對象進行雙向綁定的，而 `ViewModel` 對象是 `Vue` 提供的。雙向綁定的效果：下圖是提前準備的代碼寫出來的，輸入框綁定了 `username` 模型數據，而在頁面上也使用 `{{}}` 綁定了 `username` 模型數據
通過瀏覽器打開該頁面可以看到如下頁面
當我們在輸入框中輸入內容，而輸入框后面隨之實時的展示我們輸入的內容，這就是雙向綁定的效果。
? 快速入門
Vue 使用起來是比較簡單的，總共分為如下三步：
1. 新建 HTML 頁面，引入 Vue.js文件
<script src="js/vue.js"></scrip>2. 在JS代碼區域，創建Vue核心對象，進行數據綁定
創建 Vue 對象時，需要傳遞一個 js 對象，而該對象中需要如下屬性：
● `el` ： 用來指定哪個地方的標簽受 Vue 管理。 該屬性取值 `#app` 中的 `app` 需要是受管理的標簽的id屬性值
● `data` ：用來定義數據模型
● `methods` ：用來定義函數。這個我們在后面就會用到3. 編寫視圖
`{{}}` 是 Vue 中定義的 `插值表達式` ，在里面寫數據模型，到時候會將該模型的數據值展示在這個位置。
? 整體代碼如下：
2、Vue 指令
指令：HTML 標簽上帶有 v- 前綴的特殊屬性，不同指令具有不同含義。例如：v-if，v-for…
? v-bind & v-model 指令
? v-bind
該指令可以給標簽原有屬性綁定模型數據。這樣模型數據發生變化，標簽屬性值也隨之發生變化，例如：
<a v-bind:href="url">百度一下</a>上面的 `v-bind:"` 可以簡化寫成 `:` ，如下：
? v-model
該指令可以給表單項標簽綁定模型數據。這樣就能實現雙向綁定效果。例如：
<input name="username" v-model="username">? 代碼演示：
通過瀏覽器打開上面頁面，并且使用檢查查看超鏈接的路徑，該路徑會根據輸入框輸入的路徑變化而變化，這是因為超鏈接和輸入框綁定的是同一個模型數據
? v-on 指令
我們在頁面定義一個按鈕，并給該按鈕使用 `v-on` 指令綁定單擊事件，html代碼如下：
<input type="button" value="一個按鈕" v-on:click="show()">而使用 `v-on` 時還可以使用簡化的寫法，將 `v-on:` 替換成 `@`，html代碼如下
<input type="button" value="一個按鈕" @click="show()">上面代碼綁定的 `show()` 需要在 Vue 對象中的 `methods` 屬性中定義出來
注意：`v-on:` 后面的事件名稱是之前原生事件屬性名去掉on。
例如：
● 單擊事件 ： 事件屬性名是 onclick，而在vue中使用是 `v-on:click`
● 失去焦點事件：事件屬性名是 onblur，而在vue中使用時 `v-on:blur`? 整體頁面代碼如下：
? 條件判斷指令
接下來通過代碼演示一下。在 Vue中定義一個 `count` 的數據模型，如下
現在要實現，當 `count` 模型的數據是3時，在頁面上展示 `div1` 內容；當 `count` 模型的數據是4時，在頁面上展示 `div2` 內容；`count` 模型數據是其他值時，在頁面上展示 `div3`。這里為了動態改變模型數據 `count` 的值，再定義一個輸入框綁定 `count` 模型數據。html 代碼如下：
? 整體頁面代碼如下：
通過瀏覽器打開頁面并在輸入框輸入不同的值，效果如下
然后我們在看看 `v-show` 指令的效果，如果模型數據 `count ` 的值是3時，展示 `div v-show` 內容，否則不展示，html頁面代碼如下
瀏覽器打開效果如下：
通過上面的演示，發現 `v-show` 和 `v-if` 效果一樣，那它們到底有什么區別呢？我們根據瀏覽器的檢查功能查看源代碼：
通過上圖可以看出 `v-show` 不展示的原理是給對應的標簽添加 `display` css屬性，并將該屬性值設置為 `none` ，這樣就達到了隱藏的效果。而 `v-if` 指令是條件不滿足時根本就不會渲染。
? v-for 指令
這個指令看到名字就知道是用來遍歷的，該指令使用的格式如下：
注意：需要循環那個標簽，`v-for` 指令就寫在那個標簽上。
如果在頁面需要使用到集合模型數據的索引，就需要使用如下格式：
? 代碼演示：
通過瀏覽器打開效果如下
3、生命周期
生命周期的八個階段：每觸發一個生命周期事件，會自動執行一個生命周期方法，這些生命周期方法也被稱為鉤子方法。
下圖是 Vue 官網提供的從創建 Vue 到效果 Vue 對象的整個過程及各個階段對應的鉤子函數
看到上面的圖，大家無需過多的關注這張圖。這些鉤子方法我們只關注 `mounted` 就行了。
`mounted`：掛載完成，Vue初始化成功，HTML頁面渲染成功。而以后我們會在該方法中發送異步請求，加載數據。
1、基本介紹
? 概述
Element：是餓了么公司前端開發團隊提供的一套基于 Vue 的網站組件庫，用于快速構建網頁。
Element 提供了很多組件（組成網頁的部件）供我們使用。例如 超鏈接、按鈕、圖片、表格等等~
如下圖左邊的是我們編寫頁面看到的按鈕，上圖右邊的是 Element 提供的頁面效果，效果一目了然。
我們學習 Element 其實就是學習怎么從官網拷貝組件到我們自己的頁面并進行修改，官網網址是：元素 - 全球最受歡迎的 Vue UI 框架 (eleme.cn)
進入官網能看到如下頁面
接下來直接點擊 `組件` ，頁面如下
2、Element 布局
Element 提供了兩種布局方式，分別是：
● Layout 布局
● Container 布局容器? Layout 局部
通過基礎的 24 分欄，迅速簡便地創建布局。也就是默認將一行分為 24 欄，根據頁面要求給每一列設置所占的欄數。
在左菜單欄找到 `Layout 布局` ，然后找到自己喜歡的按鈕樣式，點擊 `顯示代碼` ，在下面就會展示出對應的代碼，顯示出的代碼中有樣式，有html標簽。將樣式拷貝我們自己頁面的 `head` 標簽內，將html標簽拷貝到 `<div id="app"></div>` 標簽內。
? 整體頁面代碼如下：
現在需要添加一行，要求該行顯示8個格子，通過計算每個格子占 3 欄，具體的html 代碼如下
? Container 布局容器
用于布局的容器組件，方便快速搭建頁面的基本結構。如下圖就是布局容器效果。
如下圖是官網提供的 Container 布局容器實例：
該效果代碼中包含了樣式、頁面標簽、模型數據。將里面的樣式 `<style>` 拷貝到我們自己頁面的 `head` 標簽中；將html標簽拷貝到 `<div id="app"></div>` 標簽中，再將數據模型拷貝到 `vue` 對象的 `data()` 中。
? 整體頁面代碼如下：
? 完成分頁條展示
在 Element 官網找到 `Pagination 分頁` ，在頁面主體部分找到我們需要的效果，如下
點擊 `顯示代碼` ，找到 `完整功能` 對應的代碼，接下來對該代碼進行分析
? 上面代碼屬性說明：
● `page-size` ：每頁顯示的條目數
● `page-sizes` ： 每頁顯示個數選擇器的選項設置。
`:page-sizes="[100,200,300,400]"` 對應的頁面效果如下：
● `currentPage` ：當前頁碼。我們點擊那個頁碼，此屬性值就是幾。
● `total` ：總記錄數。用來設置總的數據條目數，該屬性設置后， Element 會自動計算出需分多少頁并給我們展示對應的頁碼。? 事件說明：
● `size-change` ：pageSize 改變時會觸發。也就是當我們改變了每頁顯示的條目數后，該事件會觸發。
● `current-change` ：currentPage 改變時會觸發。也就是當我們點擊了其他的頁碼后，該事件會觸發。
來源：csdn
藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請加微信ban_lanlan，報下信息，藍小助會請您入群。歡迎您加入噢~~
希望得到建議咨詢、商務合作，也請與我們聯系01063334945。
分享此文一切功德，皆悉回向給文章原作者及眾讀者. 免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司
云WAF主要利用DNS技術，通過移交域名解析權來實現安全防護，用戶的請求首先發送到云端節點進行檢測，如存在異常請求則進行攔截否則將請求轉發至真實服務器。
http://aliyunyd.com/
https://cloud.tencent.com/product/waf
https://www.huaweicloud.com/product/waf.html
https://www.dbappsecurity.com.cn/product/cloud119.html
https://cloud.baidu.com/product/waf.html
https://www.huaweicloud.com/product/cfw.html
https://www.safedog.cn/index/wafIndex.html
https://defense.yunaq.com/cyd/
https://www.f5.com.cn/cloud/products/distributed-cloud-waf
https://wangzhan.qianxin.com/
https://wangzhan.#/panyun
https://www.wangsu.com/product/52
https://www.qianxin.com/product/detail/pid/400
https://www.nsfocus.com.cn/html/2020/458_0107/108.html
https://www.venustech.com.cn/new_type/xnWAF/
https://www.sangfor.com.cn/product-and-solution/sangfor-security/yun-web
https://www.riversecurity.com/product-Safeplus.shtml
硬件WAF通常部署在Web服務器之前，過濾所有外部訪問流量，并對請求包進行解析，通過安全規則庫的攻擊規則進行匹配，識別異常并進行請求阻斷。
常見產品：
https://www.dbappsecurity.com.cn/product/cloud150.html
https://www.chaitin.cn/zh/safeline
https://www.yxlink.com/index_product_index.html
https://www.nsfocus.com.cn/html/2019/206_0911/6.html
https://www.webray.com.cn/channel/RayWAF.html
https://www.topsec.com.cn/product/25.html
https://www.sangfor.com.cn/product-and-solution/sangfor-security/waf
https://www.venustech.com.cn/new_type/Webyyfhq/
https://www.f5.com.cn/products/security/advanced-waf
軟件WAF安裝在需要防護的服務器上，通過監聽端口或以Web容器擴展方式進行請求檢測和阻斷。
https://www.safedog.cn/
https://yunsuo.qianxin.com/
https://d99net.net/
https://www.gov110.cn/
https://www.hws.com/
https://www.zcnt.com/
https://www.upupw.net/versions/
https://www.bt.cn/
https://www.xmirror.cn/
https://help.aliyun.com/product/28449.html
Web 開發是設計、開發和維護網站的數字過程。SEO，搜索引擎優化，是一種優化網站內容和元數據的做法，以提高其在 Google 等搜索引擎中的可見度或排名。在本文中，您將獲得決定走哪條路線所需的所有信息！
在搜索引擎優化 (SEO) 中，對網站或網頁進行優化以提高其可見性。SEO 可以被認為是在線成功的“秘密武器”。它可以幫助您的網站在搜索結果中排名更高，為您的網站帶來更多流量并增加您的底線。
?基本上有兩種類型的搜索引擎優化：內容營銷和搜索引擎優化。內容營銷就是創造有價值的、高質量的內容，這些內容將被其他人共享和鏈接。這種類型的優化側重于提高網站上單個頁面的可見性和排名，而不是整個網站。
?搜索引擎優化：這 是使您的網站或網頁在搜索引擎中盡可能可見和相關的過程，編寫出色的內容并向網站添加 SEO 關鍵字。目標是為您的網站帶來更多流量，以便您可以從廣告收入或通過這些訪問者產生的銷售中獲利。
有許多不同的技術可用于 SEO，但最終歸結為確保您的網站經過充分研究和設計，使其在任何給定搜索引擎中看起來都不錯并且排名靠前。
“搜索引擎優化”(SEO) 和“網頁開發”這兩個術語可能會讓很多人感到不解。那么，兩者有什么區別呢？SEO 是改進網站以使其在搜索引擎結果頁面(SERP) 中顯示更高的做法。這意味著搜索特定主題信息的人會更頻繁地找到您的網站。
另一方面，Web 開發是設計、創建和維護網站的過程。雖然 SEO 專注于改善網站在搜索引擎上的外觀和性能，但 Web 開發不僅僅包含設計和布局。
它包括確保網站在各種設備上正常工作，優化社交媒體平臺的內容，以及開發電子商務商店或 CRM 解決方案等自定義功能。
最終， SEO 和 Web 開發之間的區別 歸結為目的。SEO 主要側重于增加網站的訪問量；而網絡開發旨在確保用戶一旦到達那里就可以真正找到他們正在尋找的東西。在大多數情況下，最好將這兩種做法結合起來以達到您想要的結果。
如果您正在考慮 Web 開發或搜索引擎優化 (SEO)，在做出選擇之前需要考慮一些事項。下面比較了每種方法及其優缺點。
優點：您可以從頭開始構建自己的網站或博客，或者使用 WordPress 等現有平臺。如果您想自定義網站的外觀，或者不想自己托管和維護網站，這是一個多功能選項。
此外，在大多數情況下，Web 開發成本低于 SEO，如果您不確定將來是否需要它，這可能是一個因素。
缺點：如果您沒有任何構建網站的經驗或不熟悉編碼，則 Web 開發可能具有挑戰性。
此外，Web 開發并不總是與所有類型的內容兼容——例如，某些博客使用的視頻內容無法輕松轉換為文本。最后，一些在線流行的網站——如福布斯——是使用網絡開發技術構建的，但他們的 SEO 工作是密集且昂貴的。
優點： SEO 可以幫助您的網站或博客在與您的主題相關的特定關鍵字的搜索結果中排名更高。這可能會導致流量和轉化率增加，從而可以通過兩種方式提高您的底線：
首先，隨著越來越多的人通過 Google 搜索找到您的網站，廣告收入可能會增加；其次，某些網站（如 Netflix）提供的高級會員服務需要在搜索引擎結果中獲得較高的排名。
缺點： SEO 是一個密集且耗時的過程，從長遠來看可能很難獲得一致的結果。此外，某些網站內容（例如產品說明或博客文章）可能更難通過 SEO 技術進行改進，因此如果您想要獲得更好的結果，則可能需要考慮其他策略。最后，SEO 可能很昂貴，尤其是當您針對高流量關鍵字時。
Web 開發和搜索引擎優化 (SEO) 各有利弊。但在你做出決定之前，你需要了解你的優先事項。這里有四種策略可以幫助您決定哪一種適合您：
如果 Web 開發更符合您的風格，那就去做吧。看到您的辛勤工作在搜索引擎結果頁面 (SERP) 上獲得更好的排名，您會感到滿意。
但是，如果您更喜歡 SEO，請準備好長時間投入大量精力。您可能更愿意與顧問一起工作，他們將逐步指導您完成整個過程，但這也意味著要為他們的服務支付額外費用。
如果您知道您的行業或地區流行什么類型的網站，那么 SEO 可能更適合您。搜索引擎會獎勵針對相關關鍵字進行了優化的網站，因此以這些術語為目標將使您的網站在競爭中更具優勢。
如果您不確定從哪里開始，請嘗試使用Google 的 AdWords 工具查看相關頁面上最常搜索的關鍵字。這會給你一些關于從哪里開始優化你的網站內容和設計的想法。
許多初學者在沒有先學習如何優化他們的網站的情況下直接進行全面的 SEO 計劃。這可能會很快適得其反，因為搜索引擎會懲罰包含不正確或過時信息的頁面。
更好的方法是從快速提示和技巧開始，然后逐步采用更全面的策略。這樣，您將有更好的機會獲得預期的結果，而無需預先花費太多時間和金錢。
如果您不確定哪種方法適合您，請考慮將每種方法中的一部分結合起來的混合策略。
例如，您可以定位網站上的關鍵關鍵字，但也要確保您的網站針對搜索引擎結果頁面 (SERP) 進行了優化。這將為您帶來兩全其美的效果——增加流量和提高排名。
來源：csdn
藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請加微信ban_lanlan，報下信息，藍小助會請您入群。歡迎您加入噢~~
希望得到建議咨詢、商務合作，也請與我們聯系01063334945。
分享此文一切功德，皆悉回向給文章原作者及眾讀者. 免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司
目錄
監測機制的變化、Fragments（碎片）的更新、API模式的變更、數據的存放、生命周期鉤子、父子傳參等。。
來源：csdn
藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請加微信ban_lanlan，報下信息，藍小助會請您入群。歡迎您加入噢~~
希望得到建議咨詢、商務合作，也請與我們聯系01063334945。
分享此文一切功德，皆悉回向給文章原作者及眾讀者. 免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司
/* JS的輸出語句 */ alert("彈出") document.write("直接在寫頁面上面") console.log("打印在控制臺上面")
效果:
confirm:
var msg1 = confirm("你好!") //我可以將我們點擊確定和取消的結果當做變量的值 console.log(msg1); //當我們點擊確定時候得到值是一個true,當我們點擊取消的時候得到的結果是false
效果如下:
prompt:
var msg = prompt("你可以在這上面輸入一句話") //我們可以把這一句話當中一個變量值,賦值給一個變量 alert(msg) //將變量的值直接彈出來
效果如下:
舉例:
var a = 10; //合法 var name = "張颯" //合法 var var = "李四" //不合法,不能使用關鍵字 var 1name = "王八" //不合法,不能以數字開頭 var alert = "老劉" //合法 var name% = "美麗姐" //不合法,變量的命名要以數字,字母,下劃線,$組成
注意:常見的關鍵字,有var ,break, for ,if …
比如:
var userName = "張三" //遵守了小駝峰的命名規范
比如:
console.log(isNaN("張三")) //true console.log(isNaN(10)) //false
比如:
// 因為他判斷是不是數字 // 如果是一個數字,那結果直接是false // 如果不是一個數字,那么他會判斷這個值能不能轉換成數值,如果可以,那么結果是false,如果不可以,那么結果是true // boolean與number其實就是相通的 // boolean類型的true 代表數值類型的一切非0的值 // boolean類型的false 代表數值類型的0 console.log(isNaN("123"));//false console.log(isNaN("123a"));//true console.log(isNaN(11));//false console.log(isNaN(true));//false
parseInt先看第一位的值,能不能轉,如果可以轉,那么就轉,如果不能轉,那么就NaN
parseInt再看第二位的值,能不能轉,如果可以,那么轉,如果不能轉,那就停止了
parseFloat 他比parseInt 多認識了一個小數點 .
console.log(parseInt(“12a2”))
Stringvar res = String(變量)toString()+var a = 10; var a1 = String(a) console.log(a1, typeof a1); var b1 = a.toString() console.log(b1, typeof b1); console.log(a + "~~", typeof (a + ""));
""
來源：csdn
藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請加微信ban_lanlan，報下信息，藍小助會請您入群。歡迎您加入噢~~
希望得到建議咨詢、商務合作，也請與我們聯系01063334945。
分享此文一切功德，皆悉回向給文章原作者及眾讀者. 免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司
目錄
動態組件指的是動態切換組件的顯示與隱藏，vue提供了一個內置的<component>組件，專門用來實現動態組件的渲染。什么意思呢？接著往下看：
那么內置的<component>組件是什么情況呢？component 是可以作為標簽使用的，其作用：組件的占位符。當然其作為標簽直接使用是會報錯的，還需要搭配屬性值 is ，其表示要渲染的組件的名字。如下：
那么如何去動態的切換組件呢？寫一個簡單的button按鈕實現即可，如下：
當我們動態的去創建組件時，這一點和 v-if 很相似，改變組件會直接將改變之前的組件的數據銷毀掉。如下：
我們給Left組件設置 +1 按鈕，來表示其數據：
用生命周期函數來監聽組件的創建和銷毀：
那我們如何在動態創建組件的同時還能暴露組件之前的數據呢？這里就需要借助keep-alive。
keep-alive對應的生命周期函數：
當組件被緩存時，會自動觸發組件的deactivated生命周期函數。
當組件被激活時，會自動觸發組件的activated生命周期函數。
-
created(){
-
console.log('Left組件被"創建"了');
-
},
-
destroyed(){
-
console.log('Left組件被"銷毀"了');
-
},
-
-
// 當組件第一次被創建的時候，既會創建created生命周期，也會執行activated生命周期
-
// 當組件被激活時，只會觸發activated生命周期，不再觸發created。因為組件沒有被重新創建
-
activated(){
-
console.log('組件被激活了，activated');
-
},
-
deactivated() {
-
console.log('組件被緩存了，deactivated');
-
},
include屬性用來指定：只有名稱匹配的組件會被緩存。多個組件名之間使用英文的逗號分隔：
exclude屬性用來指定：只有名稱匹配的組件“不“會被緩存。多個組件名之間使用英文的逗號分隔：
插槽（Slot）是 vue 為組件的封裝者提供的能力。允許開發者在封裝組件時，把不確定的、希望由用戶指定的部分定義為插槽。其操作如下：
vue官方規定：每一個slot插槽，都要有一個name名稱，如果省略了slot的name屬性，則有一個默認名稱叫做 default ，默認情況下，在使用組件的時候，提供的內容都會被填充到名字為default的插槽之中。
如果要把內容填充到指定名稱的插槽中，需要使用 v-slot：這個指令，v-slot：后面要跟上插槽的名字，注意：v-slot：指令不能直接用在元素身上，必須用在template標簽上。當然這個指令也是有簡寫形式：# 即可。template：這個標簽是一個虛擬標簽，只其到包裹性質的作用，不會被渲染為任何實質性的 html 元素。
后備內容：封裝組件時，可以為預留的<slot>插槽提供后備內容(默認內容)。如果組件的使用者沒有為插槽提供任何內容，則后備內容會生效。
作用域插槽：在封裝組件時，為預留的<slot>提供屬性對應的值。如下：
當然上面的作用域插槽數據明顯是寫死了，那么可以將數據動態存儲在data里面嗎？答案是可以的
來源：csdn
藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請加微信ban_lanlan，報下信息，藍小助會請您入群。歡迎您加入噢~~
希望得到建議咨詢、商務合作，也請與我們聯系01063334945。
分享此文一切功德，皆悉回向給文章原作者及眾讀者. 免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司
編寫程序是為了讓我們更高效的處理問題，但在生活中我們常常遇到一些重復性的動作，也就是當我們希望一遍又一遍的執行多次代碼，但是每一次執行代碼的值有不同的時候我們就可以使用循環語句來解決問題。
JavaScript支持不同類型的循環:
循環：具備的四個條件
do...while語句可以在某個條件表達式為真的前提下，循環執行指定的一段代碼，直到那個表達式不為真時結束循環。
語法:
while(條件){
需要執行的代碼
}
比如:
//打印0~3
let n = 0;
while (n < 3) {
n++;
}
do...while語句創建一個執行指定語句的循環，直到condition值為 false。在執行statement 后檢測condition，所以指定的statement至少執行一次，理論上,所有的while循環都可以使用doWhile
語法:
//初始化條件
var index = 0;
do{
//遞歸條件
index++;
//循環體;
}while(條件);//同樣的這個條件是一個Boolean
比如:
//列出1~10之間的所有奇數
var index = 0;
do{
index++;
if(index % 2 == 1){
console.log(index);
}
}while(index<10);
比如:
var a = 10;
//while循環
while(a<4){
console.log("執行while循環");
}
//dowhile循環
do{
console.log("這是doWhile循環");
}while(a<4)
for 語句用于創建一個循環，它包含了三個可選的表達式，這三個表達式被包圍在圓括號之中，使用分號分隔，后跟一個用于在循環中執行的語句（通常是一個塊語句）。
語法:
for(初始條件;循環條件;迭代條件){
//循環體
}
比如:
for(var i = 0 ; i < 10 ; i++){
console.log("輸出第"+i+"次循環");
}
上面的執行順序如下：
for...in語句以任意順序迭代一個對象的除Symbol以外的可枚舉屬性，包括繼承的可枚舉屬性。
語法:
var 對象名 = {}
for(屬性名 in 對象名){
//循環體
}
比如:
var info={name:"xiaoming",sex:"man",age:18};
for (x in info){
txt=txt + person[x];
}
for...of語句在可迭代對象（包括 Array，Map，Set，String，TypedArray，arguments對象等等）上創建一個迭代循環，調用自定義迭代鉤子，并為每個不同屬性的值執行語句
語法:
for (屬性名 of 對象名) {
//statements
}
比如:
var arr = ['nick','freddy','mike','james'];
for(var item of arr){
console.log(item);
}
拓展
- 拓展1 數組的長度 數組的名字.length
- 拓展2 數組的元素當中 可以是不同的數據類型
來源：csdn
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司
前言：
本次案例是一個基于 Vue2 的全局事件總線通信的仿 Github 用戶搜索模塊，使用的接口是 Github 官方提供的搜索接口： https://api.github.com/search/users?q=xxx（發送請求時需要將輸入的用戶名稱綁定替換掉xxx），如果對全局事件總線不太熟練的小伙伴可以看這篇文章：http://t.csdn.cn/oHEOW
http://t.csdn.cn/oHEOW
代碼共分為了兩個子組件，一個是搜索組件（Search），另一個是列表組件（List），其次search組件中輸入框v-model雙向數據綁定，點擊搜索后開始查詢，其中過程分為了四步：第一是未搜索的歡迎頁面背景，第二是請求未加載出來的loading背景，第三是渲染用戶列表，第四是請求失敗的報錯提示頁面背景。
綁定自定義事件在List組件中，data中的數據是定義了userinfo對象來存放其四個狀態的布爾值，后續的數據傳遞是直接傳遞userinfo這個對象，使用 $on 綁定自定義事件 getuserinfo，當這個事件觸發時執行后面的箭頭回調函數，將傳遞來的對象接收并覆蓋掉data中原有的四個狀態布爾值。
-
<script>
-
export default {
-
name:'List',
-
data() {
-
return {
-
UserInfo:{
-
iswelcome:true,
-
isloading:false,
-
users:'',
-
error:''
-
}
-
}
-
},
-
mounted(){
-
this.$bus.$on('getUserInfo',(datas)=>{
-
// console.log('list組件收到了傳來的用戶數據',res);
-
this.UserInfo=datas
-
console.log(datas);
-
})
-
}
-
}
-
</script>
點擊搜索按鈕即可使用 $emit 觸發自定義事件，在請求成功前會將 isloading 改為true，其余改為false進行數據傳遞，傳遞給 list 組件后期就會顯示出loading的背景頁面，其余同理
-
<script>
-
export default {
-
name:'Search',
-
data(){
-
return {
-
ipt_value:'',
-
}
-
},
-
methods:{
-
search(){
-
this.$bus.$emit('getUserInfo',{iswelcome:false,isloading:true,users:'',error:''})
-
this.$axios.get(`https://api.github.com/search/users?q=${this.ipt_value}`).then(
-
response => {
-
this.$bus.$emit('getUserInfo',{iswelcome:false,isloading:false,users:response.data.items,error:''})
-
},
-
error => {
-
console.log(error);
-
this.$bus.$emit('getUserInfo',{iswelcome:false,isloading:false,users:'',error:error})
-
}
-
)
-
this.ipt_value=''
-
}
-
}
-
}
-
</script>
-
前言：
本次案例是一個基于 Vue2 的全局事件總線通信的仿 Github 用戶搜索模塊，使用的接口是 Github 官方提供的搜索接口： https://api.github.com/search/users?q=xxx（發送請求時需要將輸入的用戶名稱綁定替換掉xxx），如果對全局事件總線不太熟練的小伙伴可以看這篇文章：http://t.csdn.cn/oHEOW
代碼共分為了兩個子組件，一個是搜索組件（Search），另一個是列表組件（List），其次search組件中輸入框v-model雙向數據綁定，點擊搜索后開始查詢，其中過程分為了四步：第一是未搜索的歡迎頁面背景，第二是請求未加載出來的loading背景，第三是渲染用戶列表，第四是請求失敗的報錯提示頁面背景。
綁定自定義事件在List組件中，data中的數據是定義了userinfo對象來存放其四個狀態的布爾值，后續的數據傳遞是直接傳遞userinfo這個對象，使用 $on 綁定自定義事件 getuserinfo，當這個事件觸發時執行后面的箭頭回調函數，將傳遞來的對象接收并覆蓋掉data中原有的四個狀態布爾值。
-
<script>
-
export default {
-
name:'List',
-
data() {
-
return {
-
UserInfo:{
-
iswelcome:true,
-
isloading:false,
-
users:'',
-
error:''
-
}
-
}
-
},
-
mounted(){
-
this.$bus.$on('getUserInfo',(datas)=>{
-
// console.log('list組件收到了傳來的用戶數據',res);
-
this.UserInfo=datas
-
console.log(datas);
-
})
-
}
-
}
-
</script>
點擊搜索按鈕即可使用 $emit 觸發自定義事件，在請求成功前會將 isloading 改為true，其余改為false進行數據傳遞，傳遞給 list 組件后期就會顯示出loading的背景頁面，其余同理
-
<script>
-
export default {
-
name:'Search',
-
data(){
-
return {
-
ipt_value:'',
-
}
-
},
-
methods:{
-
search(){
-
this.$bus.$emit('getUserInfo',{iswelcome:false,isloading:true,users:'',error:''})
-
this.$axios.get(`https://api.github.com/search/users?q=${this.ipt_value}`).then(
-
response => {
-
this.$bus.$emit('getUserInfo',{iswelcome:false,isloading:false,users:response.data.items,error:''})
-
},
-
error => {
-
console.log(error);
-
this.$bus.$emit('getUserInfo',{iswelcome:false,isloading:false,users:'',error:error})
-
}
-
)
-
this.ipt_value=''
-
}
-
}
-
}
-
</script>
來源：csdn 藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請加微信ban_lanlan，報下信息，藍小助會請您入群。歡迎您加入噢~~ 希望得到建議咨詢、商務合作，也請與我們聯系01063334945。 分享此文一切功德，皆悉回向給文章原作者及眾讀者. 免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。 藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司
藍藍設計的小編 http://www.syprn.cn