日本免费高清视频-国产福利视频导航-黄色在线播放国产-天天操天天操天天操天天操|www.shdianci.com

學無先后，達者為師

網站首頁 編程語言 正文

內置指令、自定義指令（詳細）、全局指令與局部指令

作者：我愛布朗熊 更新時間： 2022-09-05 編程語言

目錄

一、v-on

二、v-bind、v-model

三、v-if、v-else、v-show、v-for

四、v-text、v-big

五、v-html

六、v-cloak

七、v-once

八、v-pre

九、自定義指令_函數式

十、自定義指令_對象式

十一、自定義指令_總結

???? 1.指令名的問題

2.directives配置中this指向

3.將指令變成全局指令

4.備注

一、v-on

?綁定事件監聽，可以簡寫為@

具體信息可參照鏈接：

z http://t.csdn.cn/tLu8B

二、v-bind、v-model

v-bind：單向綁定解析表達式? ：xxx

v-model：雙向數據綁定

具體信息可參照鏈接：

http://t.csdn.cn/B03jQ

三、v-if、v-else、v-show、v-for

v-if、v-else:條件渲染，動態控制結點是否存在

v-for：遍歷數組、對象、字符串

v-show:條件渲染（動態控制結點是否展示）

具體信息可參照鏈接：

http://t.csdn.cn/wpAm5

四、v-text、v-big

?

? 但是我們更經常使用插值語法，插值語法更靈活

?? 1.作用：向其所在的節點中渲染文本內容

?? 2.與插值語法的區別：v-text會替換掉節點中的內容，{{xx}}則不會

?? 備注：v-text不支持結構的解析！

????????????

五、v-html

?? 支持結構的解析

?作用：向指定節點中渲染包含html結構的內容

?與插值語法的區別：

????? v-html會替換掉節點中所有的內容，{{xx}}則不會

???? v-html可以識別html結構

注意：

? v-html有安全性問題！！！！

?在網站上動態渲染任意HTML是非常危險的，容易導致XSS攻擊

?一定要在可信的內容上使用v-html，永遠不要在用戶提交的內容上

?

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title> 初識vue</title>
        <!--引入vue    引入之后，全局就多了一個vue這個構造函數-->
        <script type="text/javascript" src="../js/vue.js"></script> 
    </head>
    <body>
        <div id="root">
           <div>你好，{{name}}</div>
           <div v-text="name">你好，</div>
           <div v-html="str"></div>
        </div>

        <script type="text/javascript">
            //阻止vue在啟動時生成生產提示
            Vue.config.productionTip=false
            
            new Vue({
                el:'#root',
                data:{
                    name:'尚硅谷',
                    str:'<h3>你好啊！</h3>'
                },

            })

        </script>   
    </body>
</html>

?

六、v-cloak

???? v-cloak指令（沒有值）

?????? 1.本質是一個特殊屬性，vue實例創建完畢并接管容器后，會刪掉v-cloak屬性

?????? 2.使用css配合v-cloak可以解決網速慢時頁面展示出{{xxx}}的問題

下面這個案例，我們把<script>放到body的底部，并且延遲五秒鐘

?? 當我們打開頁面的時候，就會出現{{name}}

?為了預防這種情況，我們設計了以下案例， 當【v-cloak】這個屬性存在的時候，我們就對有這個屬性的變遷進行display，當vue接管實例之后，就會刪除v-cloak屬性，然后頁面中所有有關vue的內容就會顯示出來

?

七、v-once

???? v-once 是沒有值的

? v-once所在節點在初次動態渲染后，就是視為靜態內容了

? 以后數據的該表不會引起v-once所在結構的更新，可以用于優化性能

比如下面我們用了之后，點擊按鈕，我們發現有v-once屬性的那個{{n}}是不會變得，只有下面當前的n會做出改變

?

八、v-pre

?跳過其所在節點的編譯過程

?可利用它跳過：沒有使用指令語法、沒有使用插值語法的節點，會加快編譯（其實就是vue不會解析他們了）

?

九、自定義指令_函數式

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

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title> 初識vue</title>
        <!--引入vue    引入之后，全局就多了一個vue這個構造函數-->
        <script type="text/javascript" src="../js/vue.js"></script> 
    </head>
    <body>
       
      
        <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>


    </body>
    <script type="text/javascript">
        //阻止vue在啟動時生成生產提示
        Vue.config.productionTip=false
        
        new Vue({
            el:'#root',
            data:{
               n:1,
            },
            directives:{
                // big函數何時會被調用？
                // 指令與元素成功綁定時（一開始）
                //指令所在的模板被重新解析時（data里面的內容，就算不是修改的n，也會調用 

                // 自定義指令的時候，不用寫v-
                // 第一個參數是DOM元素（我們可以隨意更改了）
                // 第二個參數是我們綁定的數據，比如說我們這個時候綁定的就是n
                big(element,binding){
                    // binding.value 就是指令綁定的n的數值
                  element.innerText =binding.value*10
                  console.log(element,binding.value)
                }
 
            }

        })

    </script>   
</html>

十、自定義指令_對象式

??? 配置對象中常用的三個回調

?????? bind：指令與元素成功綁定時調用

?????? inserted：指令所在元素被插入頁面時調用

?????? update指令所在模板結構被重新解析時調用：

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

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title> 初識vue</title>
        <!--引入vue    引入之后，全局就多了一個vue這個構造函數-->
        <script type="text/javascript" src="../js/vue.js"></script> 
    </head>
    <body>

        <div id="root">
           <h2>當前的n值是：<span v-text="n"></span></h2>

           <button @click="n++">點我n+1</button>

           <input type="text" v-fbind:value="n">
        </div>


    </body>
    <script type="text/javascript">
        //阻止vue在啟動時生成生產提示
        Vue.config.productionTip=false
        
        new Vue({
            el:'#root',
            data:{
               n:1,
            },
            directives:{

                fbind:{
                    // 指令與元素成功綁定時（一開始）,執行下面這個
                    bind(element,binding){
                      element.value = binding.value
                    },
                    // 指令所在元素被插入頁面時被調用
                    inserted(element,binding){
                      element.focus()
                    },
                    // 指令所在的模板被重新解析時（data里面的內容，就算不是修改的n，也會調用 
                    update(element,binding){
                        element.value = binding.value
                    }

                }
 
            }

        })

    </script>   
</html>

?

十一、自定義指令_總結

???? 1.指令名的問題

??? 加入我們定義一個指令v-bigNumber，駝峰命名法，其實在Vue中是不對的，不能這樣寫

??? 在Vue中，多個單詞之間需要用“-”隔開，就和倆面截圖中一樣

??? 除此之外，當我們用“-”隔開之后，下面寫函數的時候，一定要寫完整（以前我們是簡寫的方式）

?????? 'big-number'（element,binding）{}

2.directives配置中this指向

?? 指向Window，而不是vm

3.將指令變成全局指令

與過濾器類似

?

?

4.備注

?? 指令定義時不加 v-? 但是在使用 時記得添加

原文鏈接：https://blog.csdn.net/weixin_51351637/article/details/126689030

欄目分類
最近更新