分享興趣，傳播快樂，增長見聞，留下美好！親愛的您，這裡是LearningYard學苑。今天小編為大家帶來“話說前端47-vue常用指令”，歡迎您的通路。
Share interests, spread happiness, increase knowledge, and leave good! Dear you, this is LearningYard Academy. Today's editor brings you "Tuesday Share (47) | Implementation Principles of Total Quality Management". Welcome to visit.
指令是什麼：Vue 指令是以 v- 開頭的，作用在 HTML 上将指令綁定在元素上時，會給綁定的元素添加一些特殊行為，可将指令視作 特殊的 HTML 屬性 attribute。指令的職責是： 當表達式的值改變時，将其産生的連帶影響，響應式地作用于 DOM。
What is the instruction? Vue instruction starts with v-. When it acts on HTML to bind the instruction to an element, it will add some special behaviors to the bound element, and the instruction can be regarded as a special HTML attribute. The duty of the instruction is: when the value of the expression changes, it will affect the DOM responsively.
插值指令之v-text：v-text 通過設定元素的 textContent 屬性來工作，是以它将覆寫元素中所有現有的内容。如果你需要更新 textContent 的部分，應該使用 mustache 代替。
V-text of the interpolation instruction: V-text works by setting the textContent property of the element, so it will overwrite all existing contents in the element. If you need to update the part of textContent, you should use mustache instead.
v-html：雙大括号會将資料解釋為普通文本，而非 HTML 代碼。為了輸出真正的 HTML，你需要使用 v-html 指令：v-html類似innerHTML。
注意:在網站上動态渲染任意 HTML 是非常危險的，因為容易導緻 XSS 攻擊。隻在可信内容上使用 v-html，永不用在使用者送出的内容上。
V-html: Double braces will interpret the data as normal text, not HTML code. In order to output real HTML, you need to use the v-html command: v-html is similar to innerHTML.
Note: It is very dangerous to dynamically render arbitrary HTML on the website, because it will easily lead to XSS attacks. Use v-html only for trusted content, and never for content submitted by users.
XXS 攻擊：XSS是Cross Site Scripting的簡稱（為了區分CSS是以成為XSS），跨站腳本攻擊。通過在留言闆，評論，輸入框等使用者輸入的地方，前端僅進行html展示的地方。有些人利用這個特性，在輸入框中輸入一些惡意的腳本比如,通過這些腳本竊取網頁浏覽中的cookie值、劫持網頁流量實作惡意跳轉。
XXS attack: XSS is short for Cross Site Scripting (hence XSS for distinguishing CSS), and cross-site scripting attack. Through the message board, comments, input boxes and other places where users input, the front end only displays html. Some people use this feature to enter some malicious scripts in the input box, for example, stealing cookie values in web browsing and hijacking web traffic through these scripts to achieve malicious jumps.
XSS預防：1.過濾script img a等标簽，包括過濾大小寫（）、繞過利用過濾後的内容再次構成攻擊語句（<scrIPT>>）、繞過 img标簽的攻擊（<img src=‘....’/>）、a div等标簽添加觸發事件（） 2.将一些特殊的關鍵字進行編碼後輸出，如alert(1)編碼過後就是\u0061\u006c\u0065\u0072\u0074(1) 3.限制輸入框長度。
XSS prevention: 1. Filter scrIPT img a and other tags, including case filtering (), bypassing the filtered content to form attack statements again (< script > >), attacks bypassing the img tag (< img src =' ...'/>), adding trigger events to tags such as a div () 2. Encode some special keywords and output them, such as alert(1).
今天的分享就到這裡，如果您對今天的文章有獨到的見解，歡迎給我們留言，讓我們相約明天，祝您今天過得開心快樂！
Today's share is over here, if you have unique views on today's article, welcome to leave a message for us, let us meet tomorrow, I wish you a happy and happy today!
本文由learningyard新學苑原創，如有侵權，請聯系我們
翻譯來源：谷歌翻譯
文案&排版|李仕陽
稽核|闫慶紅