指令
- 什么是指令
- v-cloak指令的用法
- 資料系結指令
- v-text指令——填充純文本
- v-html指令——填充**HTML**片段
- v-pre指令——填充原始資訊
- v-once指令——只編譯一次
- 雙向資料系結
什么是指令
-
在了解指令之前，我們先了解什么是自定義屬性？
在html5中，我們可以通過data-開頭來設定我們需要的自定義屬性（比如data-index）
-
指令的本質就是自定義屬性
-
指令的格式：以v- 開頭（比如：v-cloak）
v-cloak指令的用法
-
作用
保持在元素上直到關聯實體結束編譯，可以用于解決插值運算式存在的“閃動”問題，
-
原理
先隱藏標簽，替換好值之后再顯示最終的值
-
用法
-
css檔案
[v-cloak] { display: none; } -
html檔案
<div v-cloak> {{ message }} </div>
-
資料系結指令
v-text指令——填充純文本
相比插值運算式更加簡潔，沒有“閃動”的問題，
-
用法
-
html檔案
<div id="app"> <div v-text='message'></div> </div> -
JavaScript檔案
var vm = new Vue({ el: '#app', data: { message: 'Hello Vue', } });
-
v-html指令——填充HTML片段
-
缺陷
①存在安全問題
? 在網站上動態渲染任意 HTML 是非常危險的，因為容易導致 XSS攻擊，只在可信內容上使用v-html，永不用在用戶提交的內容上，②通過Ajax訪問本網站的資料可以使用，來自第三方資料不可以使用，
-
用法
-
html檔案
<div id="app"> <div v-html='html'></div> </div> -
JavaScript檔案
var vm = new Vue({ el: '#app', data: { html: '<h3>HTML</h3>', } });
-
v-pre指令——填充原始資訊
顯示原始資訊，跳過編譯程序
-
用法
<div v-pre>{{ localInfo }}</div>
v-once指令——只編譯一次
顯示內容之后不再具有回應式功能
-
如何理解回應式
① html5中的回應式（螢屏尺寸的變化導致樣式的變化）
② 資料的回應式（資料的變化導致頁面內容的變化）
-
什么是資料系結
將資料填充到標簽中
-
用法
-
html檔案
<div id="app"> <div v-once>{{info}}</div> </div> -
JavaScript檔案
var vm = new Vue({ el: '#app', data: { info: 'once', } });當info屬性值后續改變時，標簽里的內容不會跟著改變
-
-
應用場景
如果顯示的資訊后續不需要修改，則可以使用
v-once，這樣可以提高性能
雙向資料系結
-
什么是雙向資料系結
假定有一個input標簽系結data里的屬性
info，當標簽的值改變時，info的值也會隨之改變，當info的值改變時，input標簽的值也會改變， -
用法
使用
v-model指令-
html檔案
<div id="app"> <div>{{info}}</div> <input type="text" v-model='info'> </div> -
JavaScript檔案
var vm = new Vue({ el: '#app', data: { info: 'model', } });
-
轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/258364.html
標籤：其他
上一篇：用戶注冊密碼加密和后端校驗的權衡