【Vue】基礎系列(十一)Vue指令-常用內建指令-自定義指令-全域性指令-區域性指令

語言: CN / TW / HK

theme: vue-pro highlight: a11y-dark


嗨!~ 大家好,我是YK菌 🐷 ,一個微系前端 ✨,愛思考,愛總結,愛記錄,愛分享 🏹,歡迎關注我呀 😘 ~ [微訊號: yk2012yk2012,微信公眾號:ykyk2012]

「這是我參與11月更文挑戰的第23天,活動詳情檢視:2021最後一次更文挑戰

今天我們主要來學習Vue中的指令,除了那些內建指令,我們也可以自定義一些指令~

1. 常用內建指令

  • v-text : 更新元素的 textContent
  • v-html : 更新元素的 innerHTML
  • v-if : 如果為true, 當前標籤才會輸出到頁面
  • v-else: 如果為false, 當前標籤才會輸出到頁面
  • v-show : 通過控制display樣式來控制顯示/隱藏
  • v-for : 遍歷陣列/物件
  • v-on : 繫結事件監聽, 一般簡寫為@
  • v-bind : 強制繫結解析表示式, 可以省略v-bind
  • v-model : 雙向資料繫結

  • v-text : 更新元素的 textContent
  • 作用:向其所在的節點中渲染文字內容。
  • 與插值語法的區別:v-text會替換掉節點中的內容,{{xx}}則不會。


  • v-html : 更新元素的 innerHTML

  • 作用:向指定節點中渲染包含html結構的內容。
  • 與插值語法的區別: (1). v-html會替換掉節點中所有的內容,{{xx}}則不會。 (2). v-html可以識別html結構。
  • 嚴重注意:v-html有安全性問題!!!! (1). 在網站上動態渲染任意HTML是非常危險的,容易導致XSS攻擊。 (2). 一定要在可信的內容上使用v-html,永不要用在使用者提交的內容上!

  • v-once指令:
  • v-once所在節點在初次動態渲染後,就視為靜態內容了。
  • 以後資料的改變不會引起v-once所在結構的更新,可以用於優化效能。

  • v-pre指令:
  • 跳過其所在節點的編譯過程。
  • 可利用它跳過:沒有使用指令語法、沒有使用插值語法的節點,會加快編譯。

  • ref : 為某個元素註冊一個唯一標識, vue物件通過$refs屬性訪問這個元素物件

  • v-cloak : 使用它防止閃現表示式, 與css配合: [v-cloak] { display: none }

  • 本質是一個特殊屬性,Vue例項建立完畢並接管容器後,會刪掉v-cloak屬性。
  • 使用css配合v-cloak可以解決網速慢時頁面展示出{{xxx}}的問題。

css [v-clock] { display: none; }

```html

baidu.com

{{msg}}

``` 在這裡插入圖片描述

2. 自定義指令

需求1:定義一個v-big指令,和v-text功能類似,但會把繫結的數值放大10倍。 需求2:定義一個v-fbind指令,和v-bind功能類似,但可以讓其所繫結的input元素預設獲取焦點。

2.1 定義語法

(1) 區域性指令

javascript new Vue({ directives:{指令名:配置物件} })

javascript new Vue({ directives{指令名:回撥函式} })

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

(2) 全域性指令

javascript Vue.directive(指令名,配置物件)

javascript Vue.directive(指令名,回撥函式)

例子 javascript Vue.directive('my-directive', function(el, binding){ el.innerHTML = binding.value.toupperCase() })

2.2 配置物件中常用的3個回撥

  • bind:指令與元素成功繫結時呼叫。
  • inserted:指令所在元素被插入頁面時呼叫。
  • update:指令所在模板結構被重新解析時呼叫。

2.3 備註

  1. 指令定義時不加v-,但使用時要加v-
  2. 指令名如果是多個單詞,要使用kebab-case命名方式,不要用camelCase命名。

2.4 使用指令

```html

自定義指令

{{name}}

當前的n值是:

放大10倍後的n值是:


<script type="text/javascript">
    Vue.config.productionTip = false

    //定義全域性指令
    /* Vue.directive('fbind',{
        //指令與元素成功繫結時(一上來)
        bind(element,binding){
            element.value = binding.value
        },
        //指令所在元素被插入頁面時
        inserted(element,binding){
            element.focus()
        },
        //指令所在的模板被重新解析時
        update(element,binding){
            element.value = binding.value
        }
    }) */

    new Vue({
        el:'#root',
        data:{
            name:'尚矽谷',
            n:1
        },
        directives:{
            //big函式何時會被呼叫?1.指令與元素成功繫結時(一上來)。2.指令所在的模板被重新解析時。
            /* 'big-number'(element,binding){
                    // console.log('big')
                    element.innerText = binding.value * 10
                }, */
            big(element,binding){
                    console.log('big',this) //注意此處的this是window
                    // console.log('big')
                    element.innerText = binding.value * 10
            },
            fbind:{
                //指令與元素成功繫結時(一上來)
                bind(element,binding){
                    element.value = binding.value
                },
                //指令所在元素被插入頁面時
                inserted(element,binding){
                    element.focus()
                },
                //指令所在的模板被重新解析時
                update(element,binding){
                    element.value = binding.value
                }
            }
        }
    })
</script>

``` 在這裡插入圖片描述

最後,歡迎關注我的專欄,和YK菌做好朋友

「其他文章」