快捷導(dǎo)航

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

更新時間：2022年05月27日 14:16:33 作者：??奔跑吧雞翅????

這篇文章主要介紹了Vue.js自定義指令的基本使用詳情,文章圍繞主題展開詳細的內(nèi)容介紹，具有一定的參考價值需要的小伙伴可以參考一下

函數(shù)式

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

<div id="root">
    <h2>當(dāng)前的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

    //創(chuàng)建vue實例
    new Vue({
        el: "#root",
        data: {
            n:1
        },
        directives:{
            /*big:function () {
            }*/
            //big函數(shù)合適會被調(diào)用？
            //1、指令與函數(shù)成功綁定時（一上來）
            //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

    //創(chuàng)建vue實例
    new Vue({
        el: "#root",
        data: {
            n:1
        },
        directives:{
            fbind:{
                bind(element,binding){
                    //指令與函數(shù)成功綁定時（一上來）
                    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
        }
    })

總結(jié)

一、定義語法:

(1).局部指令

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

或：

new Vue({
	directives:{
		指令名:回調(diào)函數(shù)
	}
})

(2).全局指令

Vue.directive(指令名,配置對象)或 Vue.directive(指令名,回調(diào)函數(shù))

二、配置對象中常用的3個回調(diào):

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

三、備注:

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

到此這篇關(guān)于Vue 自定義指令的基本使用詳情的文章就介紹到這了,更多相關(guān)Vue 自定義指令內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章:

最新国产好看的视频,伊人天堂AV在线,国产Aaaaaa视频,蜜臀视频在线观看一区,人妻av色图,密臀久久久精品影片,青青视频免费观看毛片,久草在线观看视,国产三级精品色情在线

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

目錄

函數(shù)式

對象式

使用時的一些坑

總結(jié)

相關(guān)文章

最新評論

大家感興趣的內(nèi)容

最近更新的內(nèi)容

常用在線小工具