Vue.js自定義指令的基本使用詳情

Posted on by

函數式

需求1：定義一個v-big指令，和v-text功能類似，但會把綁定的數值放大10倍

<div id="root">
    <h2>當前的n值是<span v-text="n"></span></h2>
    <h2>放大10倍後的n值是：<span v-big="n"></span></h2>
    <button @click="n++">點我n+1</button>
</div>
<script type="text/javascript">
    Vue.config.productionTip = false

    //創建vue實例
    new Vue({
        el: "#root",
        data: {
            n:1
        },
        directives:{
            /*big:function () {
            }*/
            //big函數合適會被調用？
            //1、指令與函數成功綁定時（一上來）
            //2、指令所在的模板被重新解析時
            big(element,binding){
                element.innerHTML = binding.value * 10
            }
        }
    })
</script>

對象式

需求2：定義一個v-fbind指令，和v-bind功能類似，但可以讓其所綁定的input元素默認獲取焦點

<div id="root">
    <input type="text" v-bind:value="n"><br/>
    <input type="text" v-fbind:value="n"><br/>
    <button @click="n++">點我n+1</button>
</div>
<script type="text/javascript">
    Vue.config.productionTip = false

    //創建vue實例
    new Vue({
        el: "#root",
        data: {
            n:1
        },
        directives:{
            fbind:{
                bind(element,binding){
                    //指令與函數成功綁定時（一上來）
                    console.log("bind");
                    element.value = binding.value
                },
                inserted(element,binding){
                    //指令所在元素被插入頁面時
                    console.log("inserted");
                    element.focus()
                },
                update(element,binding){
                    //指令所在元素被重新解析時
                    console.log("update");
                    element.value = binding.value
                }
            }
        }
    })
</script>

使用時的一些坑

命名 如果指令是多個單詞：

<h2>放大10倍後的n值是：<span v-big-number="n"></span></h2>

那麼需要這樣寫：

'big-number':function (element,binding){
	element.innerHTML = binding.value * 10
}

或者：

'big-number' (element,binding){
	element.innerHTML = binding.value * 10
}

this

directives:{
            fbind:{
                bind(element,binding){
                   	//此處的this是window
                    console.log("bind");
                    element.value = binding.value
                }
            }
        }

全局指令：

像過濾器一樣，我們把剛才的兩個指令改為全局指令

Vue.directive('big', function (element, binding) {
        element.innerHTML = binding.value * 10
    })
Vue.directive('fbind',{
        bind(element,binding){
            element.value = binding.value
        },
        inserted(element,binding){
            element.focus()
        },
        update(element,binding){
            element.value = binding.value
        }
    })

總結

一、定義語法:

(1).局部指令

new Vue({
	directives:{
		指令名:配置對象
	}
})

或：

new Vue({
	directives:{
		指令名:回調函數
	}
})

(2).全局指令

Vue.directive(指令名,配置對象)或 Vue.directive(指令名,回調函數)

二、配置對象中常用的3個回調:

  • (1).bind：指令與元素成功綁定時調用
  • (2).inserted：指令所在元素被插入頁面時調用
  • (3).update：指令所在模板結構被重新解析時調用

三、備註:

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

到此這篇關於Vue 自定義指令的基本使用詳情的文章就介紹到這瞭,更多相關Vue 自定義指令內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet！

推薦閱讀：