Vue.js各指令、事件整理

Vue基礎常用指令循環v-for數組v-for="name in arr" , json格式v-for="name in jason", v-for="(k,v) in json"； {{$index}} , {{$key}}
事件v-on:click/mouseout/mouseover/...,如： v-on:click="函數"，該指令可以簡寫為@click="函數"
顯示隱藏： v-show="true|false"
事件對象 @click="func($event)", 參數$event相當于js中的event
事件冒泡，阻止冒泡：js的方式:event.cancleBubble=true或@click.stop
事件默認行為，阻止默認行為：js的方式： event.preventDefault()或contextmenu.prevent
鍵盤事件：@keydown ，@keyup等等
屬性v-bind，如v-bind:src="", 簡寫:src=""
樣式clsaa和style:class="" 或 v-bind:class="":style="" 或 v-bind:style=""
模板文本{{msg}}}，指令v-text=""只輸出一次 {{*msg}}html轉義輸出 {{{msg}}}，指令v-html=""
過濾器：{{msg | filterA}} ，{{msg | filterA, filterB}}
計算屬性computed：里面可以放置一些復雜的業務邏輯代碼
動畫效果transitions：可以結合第三方 CSS 動畫庫，如 Animate.css 結合使用十分有用

vue實例簡單方法（var vm=new Vue(...)）

vm.$el：vue實例掛載的結點元素
vm.$data：就是data
vm.$mount：手動掛載vue
vm.$options：獲取自定義屬性
vm.destroy：銷毀vue實例
vm.$log：查看vue實例現在數據的狀態
vm.$watch：數據監聽

webpack配置認識

entry：配置入口js：main.js
output：配置打包后的信息
path：輸出文件的路徑(_dirname：文件當前所在目錄地址)
filename：輸出的文件名稱：build.js
loaders：下載編譯相關文件的loader，如：vue-loader、css-loader、vue-style-loader，vue-html-loader、vue-hot-reload-api等

vue-cli 腳手架安裝：

npm install vue-cli -g

父子組件通信

子組件獲取父組件數據：props
父組件獲取子組件的數據：父組件可以在使用子組件的地方直接用 v-on 來監聽子組件觸發的事件使用
$on(eventName) 監聽事件使用 $emit(eventName) 觸發事件

支持Vue的UI組件

ElementUI（PC端）MintUI（移動端）

Vue自定義組件的寫法

自定義組件可以使用

Vue.use(componentName)方法引用，如編寫loading.vue組件：目錄結構：

|- components/|- loading/ |- loading.vue |- index.js

在loading.vue中按照一般組件的方式定義組件功能及樣式模板，然后在index.js中導出組件:index.js

監聽路由變化 (使用vue-router) watch(){ $route(to, from){ ... } }

見Web安全攻擊手段

一、XSS攻擊

名詞解釋：

XSS攻擊是跨站腳本攻擊(Cross Site Scripting)的簡稱，為了不和層疊樣式表(Cascading Style Sheets, CSS)的縮寫混淆，故將跨站腳本攻擊縮寫為XSS，是最常見的攻擊手段之一。

基本原理：

攻擊者在網頁中嵌入惡意腳本程序，當用戶打開該網頁時，惡意腳本就開始在瀏覽器執行，得以竊取用戶cookie、用戶名密碼、執行下載木馬程序等。

防范措施：

1.對用戶輸入的數據進行HTML轉義處理,將其中的<，!-，>,單引號等進行轉義編碼。

2.利用現有的一些工具或者框架特性自動做轉義處理。例如jstl。

二、CRSF攻擊

名詞解釋：

CSRF（Cross-site request forgery）是跨站請求偽造，也被稱為“One Click Attack”或者Session Riding，通常縮寫為CSRF或者XSRF，是一種對網站的惡意利用。也是非常常見的一種攻擊手段。跟XSS的有很明顯的區別，XSS是利用站內信任用戶，CRSF是通過站外偽造信任用戶，盜用用戶身份，進行攻擊。

基本原理

攻擊者通過盜用你的身份，偽造成你，以你的名義向網站發送惡意的請求，例如利用你的身份發送郵件、發短信、進行交易轉賬等等。

防范措施

1.將cookie設置為httpOnly，這樣就無法通過js腳本或者其他程序獲取用戶cookie，從而讓攻擊者無法盜取你的身份。

2.每次請求都需要先獲取服務器端一個隨機token值，會話結束該隨機token就失效。

3.通過http頭的referer來識別。服務器端驗證請求來源地址。

三、惡意sql注入

名詞解釋：

所謂SQL注入，就是通過把SQL命令插入到Web表單提交或輸入域名或頁面請求的查詢字符串，最終達到欺騙服務器執行惡意的SQL命令。

基本原理：

把有攻擊目的的sql命令偽裝成表單或者接口參數，傳入服務器，欺騙服務器執行惡意的sql腳本，以達到入侵服務的目的。利用這一漏洞，攻擊者可以修改服務器上數據庫的表數據、修改表結構、甚至獲取用戶數據等等。目前大多數數據泄露事故都是通過sql注入實施的。

防范措施：

1.使用預編譯語句。利用sql中接口PreparedStatement來進行。原理是預編譯把sql進行轉義了。

2.使用ORM框架進行數據庫操作。例如hibernate\ibaties。

3.避免脫敏字段明文儲存，萬一真被盜了。破解明文可能也非常困難。

4.后端關于數據庫的異常不要返回給用戶端。讓惡意用戶沒有了解數據庫結構的門路。

四、文件上傳漏洞

名詞解釋：

文件上傳攻擊是指攻擊者利用WEB應用對上傳文件過濾不嚴，導致可以上傳應用程序定義類型范圍之外的文件到Web服務器。

基本原理：

由于服務器端沒有對用戶上傳的文件進行正確的處理（格式校驗），導致攻擊者可以向某個可通過 Web 訪問的目錄上傳惡意文件，并且該文件可以被Web服務器解析執行。

防范措施：

1.對上傳的文件類型做白名單校驗（不是黑名單，最小原則）。

2.針對簡單的文件后綴無法正確校驗文件類型，可以根據文件內容里的魔數進行判斷文件類型，從而達到正真校驗文件類型的目的。

3.對于圖片類型的文件，對圖片進行適當的縮放壓縮處理，從而改變惡意圖片里的二進制結構。也可以防止一些惡意文件上傳。例如可以利用imagemagick工具包。

五、DDos攻擊

名詞解釋：

是一種分布式拒絕服務攻擊，是目前最強大、最難防范的攻擊方式之一。理解DDos，首先理解Dos攻擊，Dos攻擊是利用合理客戶端的請求來占用過多的服務器資源，從而使得服務器無法響應。是一對一的方式，傳統服務器資源不足的情況下，效果很明顯。DDos是Dos基礎上產生的一類攻擊手段，當分布式架構出現后，服務器的資源處理能力變強，DDos就將數量龐大的計算機聯合起來作為攻擊平臺，對一個或者多個目標發起攻擊，從而達到是的目標主機癱瘓的目的。

基本原理：

攻擊者會提前控制大量的用戶計算機（肉雞），并通過指令使得大量的肉雞在同一個時刻對某個主機進行攻擊，從而達到癱瘓目標主機的目的。

常見手段：

1.SYN Flood

利用tcp的三次握手機制，偽造大量ip,發送syn報文請求，由于都是虛假的ip，導致服務器端收不到客戶端ip的確認回應消息，導致服務器維護一個非常大的半鏈接等待列表，占用服務器資源。

2.DNS Query Flood

攻擊者隨機生成大量不存在域名地址，對DNS服務器發起域名解析請求，這就導致dns服務器大量的無用域名解析，從而耗費DNS服務器資源，達到癱瘓DNS服務器的目的。

3.CC攻擊

是一種屬于DDos攻擊，是基于http協議發起的DDos攻擊，也成為http Flood，攻擊者通過控制大量的肉雞，從互聯網上搜索大量的匿名http代理，模擬正常用戶給網站發送請求，直到該網站拒絕服務為止。

六、其他攻擊方法

利用其他一些平臺或者具體軟件漏洞的攻擊，但是可以肯定的是：攻擊的手段永遠比防御的手段多。例如：

DNS域名劫持
CDN回源攻擊
服務器權限升級
緩沖區溢出

具體的名詞解釋大家可以網上查閱。

好了。以上就是關于互聯網安全架構中常見的web安全攻擊手段，以此大家在系統架構考慮安全方面時可以參考。

本文由 @程序員研習社原創，發布于頭條，未經許可，禁止轉載

ikuTools - - miku.tools/

作為工具網站大佬MikuTools ，想想很多資深操作黨都使用過。光這一個網站就匯聚了50多個操作，分為媒體類、圖片處理類、文字處理類、編程類等，其中媒體類是主打功能。

玩Instagram的朋友都知道，這里的圖片是無法直接下載的，這個時候你就需要一些工具來輔助下載。MikuTools 就是這些工具的合集網站。一鍵幫你完成Instagram圖片下載、YouTube/TikTok/微博/抖音等視頻下載、嗶哩嗶哩封面獲取，甚至可以做到無水印獲取哦。操作起來特別簡單，電腦小白也會用。選擇你需要的工具，然后輸入對應鏈接，就能得到想要的結果。

腳本之家在線工具- -tools.jb51.net/

腳本之家更偏向開發者提供一些工具服務，懂網站開發、編程的人基本一看就懂。這里主要提供HTTP狀態碼/HTML/XML轉義字符、UI尺寸規范對照表、格式化工具（C語言、php代碼在線格式化、JSON格式化美化工具等）。同時還有一些站長工具、生活工具，多達300個操作工具。

蛙蛙在線工具- -www.iamwawa.cn/

蛙蛙也是一個實用故居合集網站，開發編程類也有涉及，可以說是前面2個網站的熱門共功能合集版。常見的生活工具比如二維碼轉化、號碼歸屬地查詢、繁體字轉換器，其他的網絡技術類，比如域名查詢、CSS格式化、MD5加密等，在這里統統能找到。

以上三個網站，一鍵就能即可免費使用，比下載N個軟件工具要方便得多。400多個操作合集，總有你想要的功能。再不趕緊收藏一份就要錯過了！

在線咨詢

上一篇：好程序員JavaScript分享ES6相關知識
下一篇：ArcGIS Pro 2.7 的新特性

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商