當前位置：首頁 > 前端技术 > vue >内容正文

vue

Vue011_ 内置指令与自定义指令

發布時間：2024/2/28 vue 27 豆豆

生活随笔收集整理的這篇文章主要介紹了 Vue011_ 内置指令与自定义指令小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

內置指令與自定義指令

? 常用內置指令

1) v:text : 更新元素的 textContent
2) v-html : 更新元素的 innerHTML
3) v-if : 如果為 true, 當前標簽才會輸出到頁面

4) v-else: 如果為 false, 當前標簽才會輸出到頁面
5) v-show : 通過控制 display 樣式來控制顯示/隱藏
6) v-for : 遍歷數組/對象
7) v-on : 綁定事件監聽, 一般簡寫為@
8) v-bind : 強制綁定解析表達式, 可以省略 v-bind
9) v-model : 雙向數據綁定
10) ref : 指定唯一標識, vue 對象通過$els 屬性訪問這個元素對象
11) v-cloak : 防止閃現, 與 css 配合: [v-cloak] { display: none }

? 自定義指令

1) 注冊全局指令
Vue.directive('my-directive', function(el, binding){
el.innerHTML = binding.value.toupperCase()
})
2) 注冊局部指令

directives : {'my-directive' : {bind (el, binding) {el.innerHTML = binding.value.toupperCase()}} }

3) 使用指令
?

v-my-directive='xxx'

代碼展示

<!DOCTYPE html> <html><head><meta charset="utf-8"><title></title><style>[v-cloak]{display: none;}</style></head><body><div id="example"><p v-text="url"></p><p v-html="url"></p><img :id='myid' :src="imageSrc" /><p><span ref="message">jd.com</span><button @click="showMsg">顯示左側文本</button></p><p v-cloak>{{ url }}</p></div><script type="text/javascript" src="js/vue.js"></script><script>alert('模擬加載慢')new Vue({el: '#example',data: {url: '<a href = "https://www.jd.com/">京東</a>',myid: 'abc123',imageSrc: 'http://cn.vuejs.org/images/logo.png'},methods:{showMsg() {//$refs -> 一個對象，持有注冊過 ref 特性的所有 DOM 元素和組件實例。alert(this.$refs.message.textContent)}}})</script></body> </html>

?結果展示

代碼展示

<!DOCTYPE html> <html><head><meta charset="utf-8"><title></title></head><body><div id="demo1"><p v-upper-text="msg"></p><p v-lower-text="msg"></p></div><div id="demo2"><p v-upper-text="msg2"></p><p v-lower-text="msg2"></p> </div><script type="text/javascript" src="js/vue.js"></script><script>//注冊全局指令Vue.directive('upper-text',function(el,binding){el.innerHTML = binding.value.toUpperCase()})new Vue({el: '#demo1',data: {msg: 'GeorgeDage AoliGei'},//包含 Vue 實例可用指令的哈希表。directives: {//注冊局部指令'lower-text': {bind (el,binding) {el.innerHTML = binding.value.toLowerCase()}}}})new Vue({el: '#demo2',data: {msg2: 'I love kangkang'}})</script></body> </html>

?結果展示

超強干貨來襲云風專訪：近40年碼齡，通宵達旦的技術人生

總結

以上是生活随笔為你收集整理的Vue011_ 内置指令与自定义指令的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。