文章目錄

區別

v-bind:屬性綁定(簡寫:), v-on:事件綁定(簡寫@), v-model:雙向綁定(簡寫v-model,看下方的代碼你就知道簡寫在哪了)。
v-bind與v-model都是綁定vue中data中的屬性的,他們最主要的區別是v-bind的綁定只是單向的,他會將data中的數據投影到綁定的地方,在被綁定的地方對數據修改時,data中的原始數據是不會改變的,而v-model的綁定是雙向的,不僅將data中的數據對標籤內進行綁定,還會將標籤中的數據反向綁定到data中,標籤數據改變後data中的數據也會同步改變。
v-on綁定的是事件(函數)是vue中methods中的數據,觸發v-on綁定,就會執行其所綁定的事件。

<!DOCTYPE html>
<html lang="zh_CN">
<head>
    <meta charset="UTF-8">
    <title>dome6</title>
</head>

<body>
    <div id="dome">
        <!-- 屬性綁定 -->
        <input type="text" v-bind:value="bind"><br>
        v-bind的簡寫:<input type="text" :value="bind">
        <p>{{bind}}</p>
        <!-- 雙向綁定 -->
        <input type="text" v-model:value="model"><br>
        v-model的簡寫:<input type="text" v-model="model">
        <p>{{model}}</p>
        <!-- 事件綁定 -->
        <button v-on:click="von">我被點了{{on}}次</button>
        <button @click="von">簡寫版被點了{{on}}次</button>
    </div>    
</body>

<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script>
    new Vue({
        el: "#dome",
        data: {
            bind : '我是屬性綁定',
            model : '我是雙向綁定', 
            on : 0
        },
        methods: {
            von(){
                this.on += 1
            }
        }
        
    })
</script>
</html>

詳細用法

屬性綁定(`v-bind:`或`:`)

這裏我們使用class和style做演示進行綁定。

單值綁定

上述我們在渲染模板時都是在標籤中進行渲染,而如果我們想將數據渲染進入標籤內使用雙大括號則無法識別{{}},需要在屬性前加入v-bind: 或者簡寫爲:

<!DOCTYPE html>
<html lang="zh_CN">
<head>
    <meta charset="UTF-8">
    <style>
        .color{
            color: burlywood;
        }
    </style>
    <title>Vue測試1</title>
</head>
<body>
    <!-- <div id="dome"></div> 簡寫-> div#dome -->
    <div id="dome">
        <!-- 使用大括號"{{vclass}}"無法渲染屬性 -->
        <p class="{{vclass}}">{{vdata}}</p>
        <!-- 使用v-bind:進行綁定後,即可渲染無需添加大括號 -->
        <p v-bind:class="vclass">{{vdata}}</p>
        <!-- : 是 v-bind: 的簡寫 -->
        <p :class="vclass">{{vdata}}</p>
    </div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script>
    // new Vue({}) 簡寫-> vnew
    new Vue({
        el: "#dome",
        data:{
            vdata: "我修改了字體顏色",
            vclass: "color"
        }
    })
</script>
</html>

多值綁定

多值綁定有多種方式,我們可以使用數組的形式(可以看成Python中的列表形式)一次綁定多個vue中的值, 比如<p :class="[vclass, vbc]">{{vdata}}</p> 或者可以在Vue對象的data屬性中的一個值中放入多個屬性,中間用空格隔開即可,還可以使用類似Python中的字典格式, 其中鍵直接放入需要進行判定的屬性,值可以放入Vue對象的data屬性中的值,當值爲真,則此條數據生效,假則不生效。

<!DOCTYPE html>
<html lang="zh_CN">
<head>
    <meta charset="UTF-8">
    <style>
        .color{
            color: burlywood;
        }
        .backcolor{
            background: chartreuse;
        }
    </style>
    <title>Vue測試1</title>
</head>
<body>
    <!-- <div id="dome"></div> 簡寫-> div#dome -->
    <div id="dome">
        <!-- 使用數組形式進行多值綁定 -->
        <p :class="[vcolor, vbc]">{{vdata}}</p>
        <!-- 多值在Vue的data屬性中已經進行綁定 -->
        <p :class="vclass">{{vdata}}</p>
        <!-- 根據真假渲染 -->
        <p :class="{color:class1, backcolor:class2}">{{vdata}}</p>
    </div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script>
    // new Vue({}) 簡寫-> vnew
    new Vue({
        el: "#dome",
        data:{
            vdata: "我修改了字體顏色",
            vcolor: "color",
            vbc: "backcolor",
            vclass: 'color backcolor',
            class1: false,
            class2: true
        }
    })
</script>
</html>

綁定style

我們直接使用style配置樣式時進行屬性綁定,可能會碰到一個屬性名不符合規範的報錯問題,一些樣式屬性的名稱會出現中橫線,而據博主所知在個主流編程語言的變量名中均不支持中橫線所以就會導致如下報錯

如何解決這種報錯,其實也很簡單,主要方法有兩種,

給不合法的變量名加上引號,在vue的data屬性中,鍵名加不加引號效果都一樣,如果你想可以把所有鍵名都加上引號。比如:'font-size': '30px'
==將不合法變量名改爲駝峯命名模式,==Vue會自動將駝峯命名的變量名轉換爲我們需要的變量名,比如:fontSize: '25px'

除此之外,style還可能遇到綁定後無法生效的問題,這裏必須要加上大括號才能生效。

<!DOCTYPE html>
<html lang="zh_CN">
<head>
    <meta charset="UTF-8">
    <title>Vue測試</title>
</head>
<body>
    <div id="dome">
        <p :style="pclass1">{{vdata}}</p>
        <p v-bind:style="pclass2">{{vdata}}</p>
        <p>{{vdata}}</p>
        <!-- 這裏我踩過的坑大家可以注意一下 -->
        <!-- style屬性綁定時候需要加上一個大括號{} -->
        <!-- style屬性原本比如我想要一個紅色字體可以直接寫成style="color:red" -->
        <!-- 這時如果你想把red換成一個Vue中的數據,直接進行綁定:style="color:Vue元素"會導致頁面所以顯示都消失,且不會有任何報錯,如下 -->
        <!-- <p :style="color:vblue">我是藍色字體</p> -->
        <!-- 正確的寫法應該需要給屬性的值添加上一個大括號綁定才能生效:style="{color:Vue元素}" -->
        <p :style="{color:vred}">我是紅色字體</p>
    </div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script>
    new Vue({
        el: "#dome",
        data:{
            vdata: '[]~(￣▽￣)~*', 
            pclass1: {
                color: 'burlywood',
                background: 'chartreuse',
                'font-size': '30px'
            },
            pclass2: {
                color: 'beige',
                background: 'blue',
                fontSize: '25px'
            },
            vred : "red",
            vblue : "blue"
        }
    })
</script>
</html>

雙向綁定(`v-model`)

因爲雙向綁定的特性,導致其常用於表單輸入綁定。即綁定元素中更改了值會自動更新屬性中的值,屬性中的值更新了也會同步到綁定元素中。

元素綁定

v-model在內部爲不同的輸入元素使用不同的屬性並拋出不同的事件:

input標籤text(文本框)與textarea標籤(文本域)時綁定value屬性,並且同步value中的值,使用input事件(每次輸入都會觸發事件)
input標籤的radio(單選框)與checkbox(多選框,多選框綁定的值必須是一個數組)時綁定checked屬性,但會同步value中的值,使用change(每次改變選擇都會觸發事件)
select標籤(多選框)比較特殊,綁定值雖然在select標籤中執行,但最終獲取值卻是獲取的 option標籤中的值,默認優先獲取標籤中value屬性中的值,如果標籤中沒有value屬性則會獲取標籤中的元素。

<!DOCTYPE html>
<html lang="zh_CN">
<head>
    <meta charset="UTF-8">
    <title>dome7</title>
</head>

<body>

    <div id="dome">
        <!-- 文本框 -->
        文本框:<input type="text" v-model:value='vtext' placeholder="我是文本框, 請輸入..."><br>
        <!-- 文本域 -->
        文本域:<textarea v-model:value='vtextarea' placeholder="我是文本域,請輸入..." cols="30" rows="3"></textarea><br>
        <!-- 單選框 -->
        單選框:
        <input type="radio" v-model:checked='vradio' value="男"><label>男</label>
        <input type="radio" v-model:checked='vradio' value="女"><label>女</label>
        <input type="radio" v-model:checked='vradio' value="中性"><label>中性</label><br>
        <!-- 多選框 -->
        多選框:
        <input type="checkbox" v-model:checked='vchoice' value="真香定理"><label>真香</label>
        <input type="checkbox" v-model:checked='vchoice' value="人類本質"><label>復讀機</label>
        <input type="checkbox" v-model:checked='vchoice' value="咯咯咯"><label>今晚一定</label><br>
        <!-- 下拉菜單 -->
        下拉菜單:
        <select v-model:value="vselect">
            <option value="1">A</option>
            <option>B</option>
        </select>
        <!-- 數據 -->
        <p>文本框:{{vtext}}</p>
        <p>文本域:{{vtextarea}}</p>
        <p>單選框:{{vradio}}</p>
        <!-- 三元表達式,.length方法用於查看數組長度,可以用於判斷是否爲空,爲空則輸出空字符串 -->
        <p>多選框:{{vchoice.length==0?'':vchoice}}</p>
        <p>下拉菜單:{{vselect}}</p>
    </div>

</body>

    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
    <script>
     //創建Vue實例
     new Vue({
        el: "#dome",
        data: {
            vtext: "",
            vtextarea: "",
            vradio: "",
            vchoice: [],
            vselect: ""
        }
     })
    </script>
</html>

修飾符

v-model有幾個修飾符非常好用,這裏推薦給大家

.lazy:一種非同步修改,默認情況下,我們將文本框雙向綁定後,我們的任何改變都會被立即同步進入數據,但這種同步在大多數時候是沒有必要的,我們可以等待用戶全部輸入結束後在進行同步,可以節省資源。
.number:可以看成強制類型轉換,將用戶輸入的內容強制轉換成爲數字。
.trim:去除空格(去除文本開頭和結尾的所有空格,文本中間如果出現空格則不會去除)

<!DOCTYPE html>
<html lang="zh_CN">
<head>
    <meta charset="UTF-8">
    <title>dome8</title>
</head>

<body>

    <div id ="app">
        <!-- 非同步更新 -->
        <input type="text" v-model.lazy='lazy'>
        <!-- 如果不用簡寫,方法必須加在屬性value之後才能生效,如果直接寫在v-model之後像下方一樣是無效的 -->
        <input type="text" v-model.lazy:value='lazy'>
        <p>非同步更新: {{lazy}}</p>

        <!-- 數值轉換 -->
        未轉換: <input type="text" v-model='number'>
        已轉換: <input type="text" v-model.number='number'>
        <p>(未轉換時爲字符型,爲兩字符相加,轉換後爲數值,爲數值相加)</p>
        <p>{{number}}+{{number}}={{number+number}}</p>

        <!-- 去空格 -->
        未去空格版: <input type="text" v-model='trim'>
        已去空格版: <input type="text" v-model.trim='trim'>
        <p>'{{trim}}'</p>
    </div>

</body>

    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
    <script>
     //創建Vue實例
     var vm = new Vue({
        el: '#app',
        data: {
            lazy: '',
            number: '',
            trim: '',
        }
     });
    </script>
</html>

事件綁定(`v-on`或`@`)

事件綁定我們可以看成在HTML頁面中觸發一個事件(這裏的事件可以理解爲一個函數)。
經過v-on綁定的屬性可以直接執行js代碼,也可以去vue中methods中尋找函數執行。

<!DOCTYPE html>
<html lang="zh_CN">
<head>
    <meta charset="UTF-8">
    <title>dome9</title>
</head>

<body>

    <div id ="app">
        <!-- 'v-on==@'  直接執行js代碼 -->
        <button v-on:click='count-=1'>每次點擊-1</button>
        <!-- '@是v-on的簡寫' methods中尋找add函數執行 -->
        <button @click='add(10)'>每次點擊+10</button>
        <p>當前數值爲:{{count}}</p>
    </div>

</body>

    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
    <script>
     //創建Vue實例
     var vm = new Vue({
        el: '#app',
        data: {
            count: 0
        },
        methods: {
            add(num){
                this.count += num
            }
        }
     });
    </script>
</html>

傳入event

如果在事件處理函數中,想要獲取原生的DOM事件,那麼在html代碼中,調用的時候,可以傳遞一個$event參數。

<!DOCTYPE html>
<html lang="zh_CN">
<head>
    <meta charset="UTF-8">
    <title>dome9</title>
</head>

<body>

    <div id ="app">
        <!-- 'v-on==@'  直接執行js代碼 -->
        <button v-on:click='count-=1'>每次點擊-1</button>
        <!-- '@是v-on的簡寫' methods中尋找add函數執行 -->
        <button @click='add(10,$event)'>每次點擊+10</button>
        <p>當前數值爲:{{count}}</p>
    </div>

</body>

    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
    <script>
     //創建Vue實例
     var vm = new Vue({
        el: '#app',
        data: {
            count: 0
        },
        methods: {
            add(num){
                this.count += num
                console.log(event)
            }
        }
     });
    </script>
</html>

當我點擊一下第二個按鈕時候,在控制檯中就能看到原生DOM事件的輸出

Vue中v-bind,v-modle,v-on都是幹什麼的(區別以及詳細用法)?自制動圖,一看就懂 ∠( °ω°)／前端知識

文章目錄

區別

詳細用法

屬性綁定(`v-bind:`或`:`)

單值綁定

多值綁定

綁定style

雙向綁定(`v-model`)

元素綁定

修飾符

事件綁定(`v-on`或`@`)

傳入event

druid數據源 xml配置

Vue生命週期函數是什麼?Vue生命週期函數有什麼用? ∠( °ω°)／前端知識

Vue如何自定義組件?超詳細Vue自定義組件指南!使用自定義組件減少重複造輪子! ∠( °ω°)／前端知識

從Django後端(python)角度學習前端VUE框架基礎-下(觸發視圖更新,計算屬性,監聽器,過濾器) ∠( °ω°)／前端知識

Vue中v-bind,v-modle,v-on都是幹什麼的(區別以及詳細用法)?自制動圖,一看就懂 ∠( °ω°)／前端知識

從Django後端(python)角度學習前端VUE框架基礎-上(配置環境,綁定屬性,條件判斷,循環) ∠( °ω°)／前端知識

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結

Vue中v-bind,v-modle,v-on都是幹什麼的(區別以及詳細用法)?自制動圖,一看就懂 ∠( °ω°)／ 前端知識

文章目錄

區別

詳細用法

屬性綁定(v-bind:或:)

單值綁定

多值綁定

綁定style

雙向綁定(v-model)

元素綁定

修飾符

事件綁定(v-on或@)

傳入event

Vue中v-bind,v-modle,v-on都是幹什麼的(區別以及詳細用法)?自制動圖,一看就懂 ∠( °ω°)／前端知識

屬性綁定(`v-bind:`或`:`)

雙向綁定(`v-model`)

事件綁定(`v-on`或`@`)