Vue中內(nèi)置指令與自定義指令語法詳解

更新時(shí)間：2023年08月31日 14:43:34 作者：你懷中的貓

這篇文章主要為大家介紹了Vue中內(nèi)置指令與自定義指令語法詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪

一、內(nèi)置指令

1、v-text指令：向標(biāo)簽中添加文本

2、v-html指令：向指定恒點(diǎn)中渲染包含html結(jié)構(gòu)的內(nèi)容。

2-1、與插值語法的區(qū)別:

(1).v-html會(huì)替換掉節(jié)點(diǎn)中所有的內(nèi)容，{{xx}}則不會(huì) 。
(2).v-html可以識(shí)別html結(jié)構(gòu)。

2-2、嚴(yán)重注意: v-html有安全性問題?。?！

(1).在網(wǎng)站上動(dòng)態(tài)演染任查HTML是非常危險(xiǎn)的，容易導(dǎo)致XSS攻擊。
(2).定要在可信的內(nèi)容上使用v-html.永遠(yuǎn)不要用在用戶提交的內(nèi)容上!

3、v-cloak指令：本質(zhì)是一個(gè)特殊屬性。Vue實(shí)側(cè)創(chuàng)建完畢并接管容器后。會(huì)制掉v-cloak屬性，使用css配合v-cloak間以解決網(wǎng)速設(shè)時(shí)頁面展示出{{xxx}}的問題

4、v-once指令：v-once所在節(jié)點(diǎn)在初次動(dòng)態(tài)渲染后。就視為靜態(tài)內(nèi)容了，以后數(shù)據(jù)的改動(dòng)不會(huì)引起v-once所在結(jié)構(gòu)的更新?？梢杂闷鋬?yōu)化性能。

5、v-pre指令:跳過其所在節(jié)點(diǎn)的編譯過程。可利用它跳過:沒有使用指令語法、沒有使用插值語法的節(jié)點(diǎn)。會(huì)加快編譯。

二、自定義指令

1、定義語法

(1).局部指令:

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

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

(2).全局指令:

Vue.directive(指令名,配置對(duì)象)

Vue.directive(指令名回調(diào)兩數(shù))

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

(1)、bind:指令與元素成功綁定時(shí)調(diào)用。

(2)、inserted:指令所在元素被插入頁面時(shí)調(diào)用.

(3)、update:指令所在模板結(jié)構(gòu)被重新解析時(shí)調(diào)用。

3、備注

1.指令定義時(shí)不加v-。但使用時(shí)要加v-;

2.指令名如果是多個(gè)單詞，要使用kebab-case命名方式，不要用camelCase命名。

<div id="root">
        <h1>正常值 : <span v-text="num"></span></h1>
        <h1>放大10倍 : <span v-big="num"></span></h1>
        <button @click="num++">點(diǎn)我num+1</button>
        <hr />
        <input type="text" v-bind:value="num" />
        <input type="text" v-fbind:value="num" />
    </div>
<script>
    Vue.config.productionTip = false; //阻止vue在啟動(dòng)時(shí)生成生產(chǎn)提示
    // 全局指令
    Vue.directive("fbind", {
        // 指令與元素成功綁定時(shí)
        bind(element, binding) {
            console.log("bind");
            element.value = binding.value;
        },
        // 指令所在元素插入頁面時(shí)
        inserted(element, binding) {
            console.log("inserted");
            element.focus();
        },
        // 指令所在模板被重新解析時(shí)
        update(element, binding) {
            console.log("ipdate");
            element.value = binding.value;
        },
    });
    //創(chuàng)建Vue實(shí)例
    const vm = new Vue({
        //ViewModel
        el: "#root",
        data: {
            num: 1,
        },
        methods: {},
        directives: {
            // big何時(shí)會(huì)被調(diào)用？ 1、指令與元素成功綁定時(shí)；2、指令所在的模板被重新解析時(shí)
            big(element, binding) {
                element.innerText = binding.value * 10;
                console.log(element, binding.value, this);
                // !!!注意  此處的this指向 window
            },
             fbind:{
                 // 指令與元素成功綁定時(shí)
                 bind(element,binding){
                     console.log('bind');
                     element.value = binding.value;
                 },
                 // 指令所在元素插入頁面時(shí)
                 inserted(element,binding){
                     console.log('inserted');
                     element.focus();
                 },
                 // 指令所在模板被重新解析時(shí)
                 update(element,binding){
                     console.log('ipdate');
                     element.value = binding.value;
                 }
             }
        },
    });
    // console.log(vm);
</script>

以上就是Vue中內(nèi)置指令與自定義指令語法詳解的詳細(xì)內(nèi)容，更多關(guān)于Vue內(nèi)置指令自定義指令的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！

您可能感興趣的文章: