快捷導(dǎo)航

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

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

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

v-model指令

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

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Vue 測(cè)試實(shí)例</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。

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

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

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

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

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

因?yàn)橹挥斜韱卧乜梢耘c用戶進(jìn)行交互，所以v-model指令一般只用于表單控件或者是一些組件中。

補(bǔ)充：model的修飾符：

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

v-model.lazy="msg"

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

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

v-bind指令

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

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Vue 測(cè)試實(shí)例</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" >我的博客主頁(yè)</a>
</div>

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

運(yùn)行結(jié)果就是一個(gè)超鏈接，點(diǎn)擊之后就可以跳轉(zhuǎn)到我的博客主頁(yè)，因?yàn)樵诖a中，我的url地址就是我的博客主頁(yè)。

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

v-on指令

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

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Vue 測(cè)試實(shí)例</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)存失敗,源站可能有防盜鏈機(jī)制,建議將圖片保存下來直接上傳(img-UcU18mJV-1661514729318)(https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/22c739a8751b47488f5f1d5bf239b17e~tplv-k3u1fbpfcp-watermark.image?)]

我們是不可以直接把JavaScript代碼寫在v-on指令中的，需要自己去定義方法/函數(shù)。那么如何去定義呢？在實(shí)例化vue中提供了一個(gè)methods選項(xiàng)，通過這個(gè)選項(xiàng)可以定義方法。

總結(jié)

1.v-model用來進(jìn)行data數(shù)據(jù)與頁(yè)面數(shù)據(jù)的雙向綁定。主要用于表單控件，被稱為雙向綁定

2.v-bind是data數(shù)據(jù)對(duì)頁(yè)面標(biāo)簽中屬性的綁定。被稱為單向綁定

3.v-on是methods對(duì)頁(yè)面事件的綁定。

到此這篇關(guān)于vue中v-model、v-bind和v-on三大指令區(qū)別的文章就介紹到這了,更多相關(guān)v-model、v-bind和v-on指令區(qū)別內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: