快捷導(dǎo)航

vue中v-model、v-bind和v-on三大指令的區(qū)別詳解

更新時間：2022年11月28日 10:27:25 作者：靜Yu

v-model和v-bind都是數(shù)據(jù)綁定的方式,下面這篇文章主要給大家介紹了關(guān)于vue中v-model、v-bind和v-on三大指令的區(qū)別,文中通過實例代碼介紹的非常詳細(xì),需要的朋友可以參考下

v-model指令

v-model指令用于在表單控件或者組件上創(chuàng)建雙向綁定。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Vue 測試實例</title>
    <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
</head>
<body>
<div id="app">
    {{msg}}
    <input type="text" v-model="msg">
</div>

<script>
    var vm=new Vue({
        el:"#app",
        data:{

            msg:'hello world',
        }
    })
</script>
</body>
</html>

v-model默認(rèn)是綁定在value屬性上的，所以上述代碼中，v-model后面加“:value”也是可以的，即v-model:value，但一般情況下直接寫v-model。

這是上面代碼的運行結(jié)果，接下來我們對數(shù)據(jù)雙向綁定進行測試。

（1）改變Model的值看View的值如何變化？

通過控制臺手動改變，，在瀏覽器打開開發(fā)者模式，在控制臺輸入vm.msg=“JingYu”,然后按下【Enter】鍵，觀察頁面中的msg是否會改變。通過測試，我們可以清楚地看到，msg的值會立即跟著改變。

（2）改變View的值看Model的值如何變化？

這是直接通過View修改框中的值，然后在控制臺輸入vm.msg，觀察輸出的值。還是可以很清楚的觀察到View和Model中的值保持一致。

因為只有表單元素可以與用戶進行交互，所以v-model指令一般只用于表單控件或者是一些組件中。

補充：model的修飾符：

（1）.lazy: 在默認(rèn)情況下，v-model 在每次 input 事件觸發(fā)后將輸入框的值與數(shù)據(jù)進行同步 (除了輸入法組合文字時)。你可以添加 lazy 修飾符，從而轉(zhuǎn)變?yōu)槭褂?onchange 事件進行同步，當(dāng)在輸入框輸入數(shù)據(jù)時，數(shù)據(jù)并不會立即改變，當(dāng)光標(biāo)離開輸入框以后，數(shù)據(jù)才會實現(xiàn)同步改變，示例代碼如下：

v-model.lazy="msg"

(2). .number: 如果想自動將用戶的輸入值轉(zhuǎn)為數(shù)值類型，把type定義為number類型，給 v-model 添加 number 修飾符，當(dāng)用戶輸入數(shù)值類型的數(shù)據(jù)時，v-model.number會自動把輸入的數(shù)據(jù)轉(zhuǎn)換為數(shù)值類型，注意如果用戶輸入特殊字母e，number屬性不能識別。

（3）.trim: 如果要自動過濾用戶輸入的首尾空白字符，可以給 v-model 添加 trim 修飾符，在輸入框起始時候多添加幾個空格，當(dāng)光標(biāo)離開之后，trim屬性會自動過濾收尾空格。

v-bind指令

v-bind指令可以用來綁定標(biāo)簽的屬性和樣式。要綁定的內(nèi)容是作為一個JS變量，因此只需要對該內(nèi)容編寫合法的JS表達(dá)式。
基礎(chǔ)的語法格式為：v-bind:屬性=“值”。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Vue 測試實例</title>
    <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
</head>
<body>
<div id="app">
   <a v-bind:href="url" rel="external nofollow" >我的博客主頁</a>
</div>

<script>
    var vm=new Vue({
        el:"#app",
        data:{
            url:"https://juejin.cn/user/2225839800062215",
        }
    })
</script>
</body>
</html>

運行結(jié)果就是一個超鏈接，點擊之后就可以跳轉(zhuǎn)到我的博客主頁，因為在代碼中，我的url地址就是我的博客主頁。

[外鏈圖片轉(zhuǎn)存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-LiGRPiEH-1661514729318)(https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/625b4e3447d841d492b0b8b65283b9fd~tplv-k3u1fbpfcp-watermark.image?)]

v-on指令

在傳統(tǒng)前端開發(fā)中，相對一個按鈕綁定事件時，需要獲取到這個按鈕的DOM元素，再對這個獲取到的元素進行事件的綁定。在vue中，對于DOM元素的操作全部由vue完成，我們只關(guān)注業(yè)務(wù)代碼的實現(xiàn)。因此我們可以使用vue內(nèi)置的v-on指令來完成事件的綁定。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Vue 測試實例</title>
    <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
</head>
<body>
<div id="app">
   <input type="button" value="單擊我" v-on:click="message">
</div>

<script>
    var vm=new Vue({
        el:"#app",
        data:{

        },
        methods: {
            message(){
                alert("v-on綁定的單擊事件")
            }
        }
    })
</script>
</body>
</html>

[外鏈圖片轉(zhuǎn)存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-UcU18mJV-1661514729318)(https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/22c739a8751b47488f5f1d5bf239b17e~tplv-k3u1fbpfcp-watermark.image?)]