Vue數(shù)據(jù)與事件綁定以及Class和Style的綁定詳細(xì)講解

更新時(shí)間：2023年01月14日 11:30:46 作者：鳴鯛有柒

這篇文章主要介紹了Vue數(shù)據(jù)與事件綁定以及Class和Style的綁定，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)吧

一、Vue的數(shù)據(jù)綁定

1. 單向數(shù)據(jù)綁定：將Model綁定到View上，當(dāng)通過(guò)JavaScript代碼改變了Model時(shí)，View就會(huì)自動(dòng)刷新。不需要進(jìn)行額外的DOM操作就可以實(shí)現(xiàn)視圖和模型的聯(lián)動(dòng)

? a. 數(shù)據(jù)只保存一份

? b. data—->DOM

? （1）插值表達(dá)式：{{ 表達(dá)式 }}，將表達(dá)式的值在View中顯示出來(lái)

? （2）v-bind：將標(biāo)簽的屬性綁定到指定的變量上。簡(jiǎn)寫(xiě)方式：屬性名=“變量名”

2. 雙向數(shù)據(jù)綁定：是Vue的核心特征之一。將Model綁定到View上，同時(shí)將View和Model進(jìn)行綁定。即當(dāng)Model的數(shù)據(jù)發(fā)生改變時(shí)，View會(huì)自動(dòng)更新；當(dāng)View的數(shù)據(jù)發(fā)生改變時(shí)，Model的數(shù)據(jù)也會(huì)更新。

強(qiáng)調(diào)：在Vue中只有表單元素才能實(shí)現(xiàn)雙向綁定（input、textarea、select），實(shí)現(xiàn)指令是v-model

? （1）文本框(text’的綁定：和普通的變量進(jìn)行綁定

? （2）復(fù)選框(checkbox)的綁定：綁定的變量必須是數(shù)組

? （3）單選框(radio)的綁定：綁定普通的變量

? （4）下拉列表(select)的綁定：當(dāng)下拉列表為單選時(shí)，綁定的變量為普通變量；當(dāng)下拉列表為多選時(shí)，綁定的變量自動(dòng)轉(zhuǎn)換為數(shù)組

3. 值綁定的時(shí)機(jī)（數(shù)據(jù)同步的時(shí)機(jī)）：v-model指令可以實(shí)現(xiàn)Model和View的數(shù)據(jù)同步

? （1）.lazy（懶加載）：在input失去焦點(diǎn)或按下回車(chē)鍵時(shí)才進(jìn)行更新

            <label>
                用戶(hù)名：<input type="text" v-model.lazy="userName">
            </label>

（2）.number：將輸入的數(shù)據(jù)轉(zhuǎn)換成Number類(lèi)型。在input中輸入的雖然是數(shù)字，但實(shí)際是string，為了將字符串轉(zhuǎn)換為數(shù)字，加上該修飾符實(shí)現(xiàn)自動(dòng)轉(zhuǎn)換

            <label>
                年齡：<input type="number" v-model.number="userAge">
            </label>
        <p>年齡：{{userAge}},數(shù)據(jù)類(lèi)型：{{typeof(userAge)}}</p>

（3）.trim：會(huì)自動(dòng)過(guò)濾掉輸入的首尾空格

<label> 用戶(hù)名：<input type="text" v-model.trim="userName"> </label>

二、Vue的事件綁定

通過(guò)v-on指令綁定，v-on：原生的事件名(@原生事件名)

1. 方法處理器方式：v-on：原生事件名 = 函數(shù)名

    <script src="../js/vue.js"></script>
<body>
    <div id="app">
        <p>{{msg}}</p>
        <!-- <button @click="changeMsg">修改</button> -->
        <button v-on:click="changeMsg()">修改</button>
    </div>
    <script>
        const vm = new Vue({
            el:'#app',
            data:{
                msg:'Hello World!'
            },
            methods:{
                changeMsg(){
                  this.msg='曲江池'  
                }
            }
        })
    </script>
</body>

2. 內(nèi)聯(lián)語(yǔ)句處理器方式：本質(zhì)是內(nèi)聯(lián)了javascript語(yǔ)句

    <script src="../js/vue.js"></script>
<body>
    <div id="app">
        <p>{{msg}}</p>
        <button v-on:click="changeMsg('大雁塔')">修改</button>
    </div>
    <script>
        const vm = new Vue({
            el:'#app',
            data:{
                msg:'Hello World!'
            },
            methods:{
                changeMsg(info){
                  this.msg=info  
                }
            }
        })
    </script>
</body>

3. 在內(nèi)聯(lián)語(yǔ)句中訪問(wèn)原生的DOM事件

    <script src="../js/vue.js"></script>
<body>
    <div id="app">
        <p>{{msg}}</p>
        <!-- <button v-on:click="changeMsg('大雁塔')">修改</button> -->
        <br><br>
        <a  rel="external nofollow"  v-on:click="say($event)">百度一下</a>
    </div>
    <script>
        const vm = new Vue({
            el:'#app',
            data:{
                msg:'Hello World!'
            },
            methods:{
                changeMsg(){
                  this.msg='曲江池'  
                },
                // say(event){
                //     event.preventDefault()
                // },
                say:function(event){
                    event.preventDefault()
                }
            }
        })
    </script>
</body>

4. 事件綁定中的修飾符

? （1）.prevent：調(diào)用preventDefault()。阻止鏈接打開(kāi)URL

<a  rel="external nofollow"  v-on:click.prevent>bilibili</a>

（2）.stop：調(diào)用stopPropagation()。阻止事件傳播（阻止事件冒泡）

?（3）鍵值修飾符：在監(jiān)聽(tīng)鍵盤(pán)事件時(shí)，需要知道鍵的keyCode，記憶不方便，可以通過(guò)修飾符來(lái)記錄鍵值

? enter、tab、delete、esc、space、up、down、left、right

    <script src="../js/vue.js"></script>
<body>
    <div id="app">
        <button v-on:keyup.up="say">提交</button>
    </div>
    <script>
        const vm = new Vue({
            el:'#app',
            data:{
                msg:'鍵盤(pán)修飾符',
            },
            methods:{
                say(){
                    alert(this.msg)
                }
            }
        })
    </script>
</body>

三、Class和Style的綁定

1. 對(duì)象語(yǔ)法：給v-bind:class傳遞一個(gè)對(duì)象，來(lái)動(dòng)態(tài)地改變class屬性值

    <script src="../js/vue.js"></script>
<style>
    div {
        width: 100px;
        height: 100px;
    }
    .class1 {
        background-color: #ff0;
    }
    .class2 {
        background-color: #f00;
    }
</style>
<body>
    <div id="app" v-bind:class="colorName" v-on:click="changeColor"></div>
    <script>
        const vm = new Vue({
            el: '#app',
            data:{
                colorName:{
                    class1:true,
                    class2:false
                }
            },
            methods: {
                changeColor() {
                    this.colorName.class1 = !this.colorName.class1
                    this.colorName.class2 = !this.colorName.class2
                }
            }
        })
    </script>
</body>

2. 數(shù)組語(yǔ)法：可以把一個(gè)數(shù)組傳給v-bind:class，以應(yīng)用一個(gè)class列表

    <script src="../js/vue.js"></script>
<style>
    div {
        width: 100px;
        height: 100px;
    }
    .class1 {
        background-color: #ff0;
    }
    .class2 {
        background-color: #f00;
    }
</style>
<body>
    <div id="app" v-bind:class="[c1,c2]" v-on:click="changeColor"></div>
    <script>
        const vm = new Vue({
            el: '#app',
            data: {
                c1: 'class1',
                c2: '',
            },
            methods: {
                changeColor() {
                    this.c1 = (this.c1 == '' ? 'class1' : '')
                    this.c2 = (this.c2 == '' ? 'class2' : '')
                }
            }
        })
    </script>
</body>

3. 內(nèi)聯(lián)樣式綁定：直接綁定style（v-bind:style)

（1）對(duì)象表示法

    <script src="../js/vue.js"></script>
<style>
    div {
        width: 100px;
        height: 100px;
    }
    .class1 {
        background-color: #ff0;
    }
    .class2 {
        background-color: #f00;
    }
</style>
<body>
    <div id="app" v-bind:class="[c1,c2]" v-on:click="changeColor">
        <div v-bind:style="{color:fontColor,fontSize:mySize}">白樺林</div>
    </div>
    <script>
        const vm = new Vue({
            el: '#app',
            data: {
                c1: 'class1',
                c2: '',
                fontColor:'blue',
                mySize:'18px'
            },
            methods: {
                changeColor() {
                    this.c1 = (this.c1 == '' ? 'class1' : '')
                    this.c2 = (this.c2 == '' ? 'class2' : '')
                }
            }
        })
    </script>
</body>

（2）數(shù)組表示法

    <script src="../js/vue.js"></script>
<style>
    div {
        width: 100px;
        height: 100px;
    }
    .class1 {
        background-color: #ff0;
    }
    .class2 {
        background-color: #f00;
    }
</style>
<body>
    <div id="app" v-bind:class="[c1,c2]" v-on:click="changeColor">
        <div v-bind:style="[colorStyle,fontStyle]">白樺林</div>
    </div>
    <script>
        const vm = new Vue({
            el: '#app',
            data: {
                c1: 'class1',
                c2: '',
                colorStyle:{color:'red'},
                fontStyle:{fontSize:'32px'}
            },
            methods: {
                changeColor() {
                    this.c1 = (this.c1 == '' ? 'class1' : '')
                    this.c2 = (this.c2 == '' ? 'class2' : '')
                }
            }
        })
    </script>
</body>

到此這篇關(guān)于Vue數(shù)據(jù)與事件綁定以及Class和Style的綁定詳細(xì)講解的文章就介紹到這了,更多相關(guān)Vue數(shù)據(jù)與事件綁定內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: