亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

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

 更新時(shí)間：2022年05月27日 14:16:33   作者：??奔跑吧雞翅????  
這篇文章主要介紹了Vue.js自定義指令的基本使用詳情,文章圍繞主題展開詳細(xì)的內(nèi)容介紹，具有一定的參考價(jià)值需要的小伙伴可以參考一下

函數(shù)式

需求1：定義一個(gè)v-big指令，和v-text功能類似，但會(huì)把綁定的數(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++">點(diǎn)我n+1</button>
</div>
<script type="text/javascript">
    Vue.config.productionTip = false

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

對(duì)象式

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

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

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

使用時(shí)的一些坑

命名 如果指令是多個(gè)單詞：

<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
                }
            }
        }

全局指令：

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

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:{
		指令名:配置對(duì)象
	}
})

或：

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

(2).全局指令

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

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

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

三、備注:

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

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

相關(guān)文章

最新評(píng)論