本內(nèi)容為系列內(nèi)容吭露，全部?jī)?nèi)容請(qǐng)看我的vue教程分類

• 我的個(gè)人博客
• 本節(jié)倉(cāng)庫(kù)地址
• 視頻教程地址

v-bind

上面講了頁(yè)面怎么渲染數(shù)據(jù)捞蛋，那么vue如何給一些空間綁定數(shù)據(jù)呢孝冒？

比如 圖片鏈接、單選框襟交、樣式等等 這里就要使用到 v-bind

首先初始化一個(gè) vue項(xiàng)目迈倍，定義一個(gè)圖片鏈接字符串

<script>
    let vm = new Vue({
        el: '#app',
        data() {
            return {
                avatar: 'https://www.baidu.com/img/bd_logo1.png',
            }
        },
        created() {

        },
    })
</script>

先回想一下我們?cè)陧?yè)面中是如何使用圖片地址的

<img src="https://www.baidu.com/img/bd_logo1.png" alt="">

但是我們這里 這個(gè)圖片地址是定義在 data中的那么如何使用呢？使用 v-bind命令并且指明是綁定 src 屬性

<img v-bind:src="avatar" alt="">

打開(kāi)瀏覽器看下效果為了方便展示我們給全頁(yè)面的img都指定一個(gè)樣式

<style>
    img {
        height: 100px;
        width: 100px;
    }
</style>

vue教程-lookroot

是完全可以的 而且這個(gè) v-bind是可以簡(jiǎn)寫(xiě)的捣域，直接寫(xiě) :就可以了

<img :src="avatar" alt="">

那么這里你就疑問(wèn)了啼染？這個(gè)綁定到底有啥用啊焕梅？我不如直接把鏈接寫(xiě)到頁(yè)面中啊

我們還是在data里面定義這個(gè)userlist這個(gè)數(shù)據(jù)迹鹅，然后每個(gè)用戶我們都添加一個(gè) avatar屬性

data() {
    return {
        avatar: 'https://www.baidu.com/img/bd_logo1.png',
        userlist: [
            { name: 'lookroot', age: 20, sex: 1, avatar: 'https://dss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=218375221,1552855610&fm=111&gp=0.jpg' },
            { name: 'lili', age: 21, sex: 2, avatar: 'https://dss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=1305353222,2352820043&fm=26&gp=0.jpg' }
        ]
    }
},

那么現(xiàn)在我要在頁(yè)面中展示這個(gè)userlist數(shù)據(jù) 并展示頭像該怎么做？這個(gè)時(shí)候就要用到 v-bind了

<ul>
    <li v-for="(user,index) in userlist" :key="index">
        <img :src="user.avatar" alt="">
        {{user.name+'-'+user.age}}
    </li>
</ul>

誒你上面說(shuō)的綁定單選框是怎么回事罢暄浴斜棚？那么我們這里就在循環(huán)中給添加一個(gè)節(jié)點(diǎn)，性別為1的用戶，單選框?yàn)檫x中狀態(tài)

使用:checked

 <ul>
     <li v-for="(user,index) in userlist" :key="index">
         <img :src="user.avatar" alt="">
         {{user.name+'-'+user.age}}
         <input type="checkbox" name="" id="" :checked="user.sex===1">
     </li>
 </ul>

來(lái)我們到瀏覽器看下效果

vue教程-lookroot

當(dāng)然 v-bind還可以綁定其他弟蚀，我們?cè)诤竺鏁?huì)提到

v-model

v-model就是數(shù)據(jù)的雙向綁定蚤霞， 是:value和v-on的結(jié)合，這個(gè)v-on下一節(jié)會(huì)講到义钉，反正通俗點(diǎn)說(shuō)既可以綁定數(shù)據(jù)昧绣，又可以監(jiān)控?cái)?shù)據(jù)的變化同步到 data中，常用在表單中

首先我們?cè)谶@個(gè) data中定義一個(gè)字符串

title: 'lookroot',

然后在頁(yè)面中使用 v-model將title綁定一個(gè)input輸入框捶闸，并且同時(shí)在頁(yè)面上渲染這個(gè) title字符串

輸入<input type="text" v-model="title">輸出:<span>{{title}}</span>

打開(kāi)瀏覽器查看效果我們可以發(fā)現(xiàn)夜畴，當(dāng)修改input框的值的時(shí)候，dev-tools插件里面顯示 data中的title在發(fā)生變化删壮，同時(shí)頁(yè)面中的輸出渲染也跟著變化了贪绘，這就是v-model的雙向綁定

vue教程-lookroot

說(shuō)好的綁定表單呢？來(lái)一個(gè)吧

首先表單不可能是一個(gè)一個(gè)字符串的定義吧央碟，我們直接定義一個(gè) user對(duì)象來(lái)當(dāng)做表單税灌，你說(shuō)你這個(gè)對(duì)象里面有些字段怎么還有值啊，這個(gè)就是表單的初始化，你看很多地方叫你填寫(xiě)表單都有個(gè)默認(rèn)值吧！

user: {
    name: 'lookroot',
    age: 12,
    sex: 2,
    avatar: ''
},

然后來(lái)到頁(yè)面中赶袄，這里有個(gè)問(wèn)題啊挟憔，加入我們使用 select來(lái)選擇性別，還得一個(gè)一個(gè)寫(xiě)男女嗎墩朦？學(xué)以致用芭魅稀！上面不是學(xué)了循環(huán)和綁定數(shù)據(jù)了嗎氓涣！

定義一個(gè)性別數(shù)組,這個(gè)count就是對(duì)應(yīng)上面 user中的 sex 因?yàn)樽罱K綁定的是這個(gè)數(shù)字牛哺，而不是字符串啊

sexlist: [
    { count: 1, name: '男' },
    { count: 2, name: '女' },
]

我們來(lái)到頁(yè)面中 綁定這個(gè)表單對(duì)象，這里要注意性別使用了循環(huán)和綁定哦劳吠！

 <form action="">
     <input type="text" v-model="user.name">
     <input type="text" v-model="user.age">
     //循環(huán)出 性別的選項(xiàng)
     <select v-model="user.sex">
         <option :value="sex.count" v-for="(sex,index) in sexlist">{{sex.name}}</option>
     </select>
     <button >存儲(chǔ)</button>
 </form>

打開(kāi)瀏覽器查看效果引润，這就完成綁定了！

vue教程-lookroot

哎呀你說(shuō)搞這些有個(gè)啥用把魍妗淳附？以前表單直接一個(gè) name屬性 就直接提交后臺(tái)了，但是現(xiàn)在前后端分離蠢古，前端就需要收集這些數(shù)據(jù)奴曙，然后將這些數(shù)據(jù)傳遞給后臺(tái)，如果綁定了這些表單數(shù)據(jù)的話草讶，我是不是觸發(fā)點(diǎn)擊事件的時(shí)候洽糟，直接就把data中的數(shù)據(jù)傳遞給后臺(tái)就行了啊！

v-if和v-show

還記得jquery里面的 show()和hide()用來(lái)控制顯示與隱藏的方法嗎坤溃？

vue同樣有用來(lái)控制顯示的方法就是 v-if和v-show

示例

我們初始化一個(gè)vue項(xiàng)目,定義一個(gè)屬性isShow值為false

<script>
    let vm = new Vue({
        el: '#app',
        data() {
            return {
                //是否顯示
                isShow: false,
            }
        },
        created() {

        },
    })
</script>

我們來(lái)到頁(yè)面中拍霜，兩個(gè)div分別綁定了 v-if 和 v-show 綁定的屬性都是 isShow，也就是都是綁定的 false當(dāng)前兩個(gè)盒子默認(rèn)不顯示

<div id="app">
    <div v-if="isShow">v-if isShow</div>
    <div v-show="isShow">v-show isShow</div>
</div>

然后打開(kāi)瀏覽器查看效果薪介，發(fā)現(xiàn)一片空白祠饺，

vue教程-lookroot

我們打開(kāi)dev-tools，修改isshow的值為true昭灵，發(fā)現(xiàn)盒子展示出來(lái)了

vue教程-lookroot

那么你說(shuō)這個(gè) v-if和 v-show都能控制它顯示和隱藏吠裆，那么有什么區(qū)別呢？

我們來(lái)到瀏覽器的elements頁(yè)面烂完，通過(guò)切換顯示與隱藏试疙，然后截圖可以發(fā)現(xiàn)，v-show的切換顯示與隱藏知識(shí)加了一個(gè)display:none,而v-if是刪除掉了這個(gè)節(jié)點(diǎn)

vue教程-lookroot

那么分別用在什么場(chǎng)景呢抠蚣？

v-if有更高的切換消耗祝旷，v-show有更高的初始渲染消耗,

所以經(jīng)常切換顯示與隱藏的使用 v-show；初始化頁(yè)面的時(shí)候就控制是否顯示與隱藏的使用 v-if,減輕渲染壓力

這里舉一個(gè)例子嘶窄，我們添加一個(gè) loginUser 對(duì)象怀跛，sex性別為2

data() {
    return {
        //是否顯示
        isShow: false,
        //用戶
        loginUser: { name: 'lookroot', sex: 2 }
    }
},

那么我們?cè)陧?yè)面中定義好，只顯示性別為1的用戶柄冲，這樣做頁(yè)面一開(kāi)始就不會(huì)渲染了吻谋，減輕了渲染壓力

<!-- 性別為1的才顯示 -->
<div v-if="loginUser.sex===1">{{loginUser.name+'-'+loginUser.sex}}</div>

v-if和v-for不建議在一起使用

為什么？因?yàn)?strong>v-if和v-for在同一個(gè)節(jié)點(diǎn)上使用现横，v-for具有更高的優(yōu)先級(jí)漓拾，也就是循環(huán)一個(gè)元素就要進(jìn)行一次判斷

比如我們定義一個(gè)新的數(shù)據(jù)

userlist: [
    { name: 'lookroot', sex: 2 },
    { name: 'lili', sex: 1 }
]

然后我們?cè)陧?yè)面中使用 v-for循環(huán)渲染出用戶數(shù)據(jù)，并且使用 v-if來(lái)判斷 sex===1的人才顯示

 <ul>
     <li v-for="(loginUser,index) in userlist" v-if="loginUser.sex===1">{{loginUser.name+'-'+loginUser.sex}}</li>
 </ul>

打開(kāi)瀏覽器查看效果戒祠，是完全可以的

vue教程-lookroot

但是這里就有一個(gè)問(wèn)題如果修改了 userlist的數(shù)據(jù)骇两，頁(yè)面會(huì)重新渲染，哪怕你只修改了一個(gè)用戶的數(shù)據(jù)姜盈，頁(yè)面都要重新渲染一次低千，每次都要循環(huán)再判斷性別，很大的性能消耗

那么正確的方式應(yīng)該是怎么做呢馏颂？

官方推薦是使用 計(jì)算屬性這個(gè)我們后面會(huì)講示血，但是這里我可以先講思路，就是這個(gè)v-for循環(huán)的數(shù)據(jù)我們給它的就是處理過(guò)后的饱亮，不給它完整的數(shù)組

比如修改一下剛剛的 data中定義的userlist矾芙，這樣v-for在循環(huán)的時(shí)候就已經(jīng)是只有sex===1的用戶數(shù)組了，也就用不上 v-if了

userlist: [
    { name: 'lookroot', sex: 2 },
    { name: 'lili', sex: 1 }
].filter(function (user) {
    return user.sex === 1;
})

watch監(jiān)聽(tīng)器

顧名思義近上，就是監(jiān)聽(tīng)剔宪，那么監(jiān)聽(tīng)什么呢？就是監(jiān)聽(tīng)data中的屬性，就好比網(wǎng)警葱绒，你出界了可不行

我們來(lái)簡(jiǎn)單實(shí)踐一下吧 定義一個(gè) fontsize 屬性

<script>
    let vm = new Vue({
        el: '#app',
        data() {
            return {
                fontSize: 24,
            }
        },
    })
</script>

這個(gè)監(jiān)聽(tīng)器怎么寫(xiě)呢感帅，它是vue的一個(gè)屬性，所以要傳遞到實(shí)例化vue的屬性中,然后他可以定義多個(gè)監(jiān)聽(tīng)器地淀，監(jiān)聽(tīng)器的名稱就是你要監(jiān)聽(tīng)data中哪個(gè)屬性的名稱失球，這里我們監(jiān)聽(tīng) fontSize 括號(hào)兩個(gè)參數(shù)，第一個(gè)是當(dāng)前最新數(shù)據(jù)帮毁，第二個(gè)是上一次的數(shù)據(jù)实苞，每當(dāng)這個(gè) fontsize數(shù)據(jù)變化的時(shí)候 監(jiān)聽(tīng)器就會(huì)執(zhí)行 ，這里我們先打印一下

 let vm = new Vue({
        el: '#app',
        data() {
            return {
                fontSize: 24,
            }
        },
        //監(jiān)聽(tīng)器
        watch: {
            fontSize(newval, oldval) {
                console.log(newval,oldval);
            }
        },
    })

那么怎么去修改這個(gè) fontsize的值呢烈疚，我們?cè)陧?yè)面中使用 v-model綁定給一個(gè)拖動(dòng)條

<input type="range" v-model="fontSize" min="0" max="100" step="5" />

瀏覽器查看一下效果

vue教程-lookroot

那你說(shuō)這個(gè)有啥用扒！？這個(gè)比如這個(gè)字體太大了我們就阻止它修改

 watch: {
     fontSize(newval, oldval) {
         // console.log(newval,oldval);
         if (newval > 50) {
             alert('字體太大了耙巍猾浦！');
             //同時(shí)把舊的值又賦值給fontsize 這樣就阻止它拖動(dòng)了
             this.fontSize = oldval;
             return;
         }
     }
 },

查看一下效果

vue教程-lookroot

computed計(jì)算屬性

這個(gè)也是顧明思議，就是計(jì)算嘛那么怎么個(gè)計(jì)算法呢灯抛？

在data中定義兩個(gè)數(shù)字

count1: null,
count2: null,

并在頁(yè)面中使用 v-model綁定

 <input type="text" v-model.number="count1">
 <input type="text" v-model.number="count2">

那么我現(xiàn)在想我輸入這兩個(gè)輸入框的時(shí)候就計(jì)算出他們的和該怎么做金赦？使用 computed計(jì)算屬性，他和監(jiān)聽(tīng)器一樣也是vue的屬性对嚼，所以需要在vue屬性中定義,這里我們定義一個(gè) num的計(jì)算屬性夹抗，我們不需要在data中定義，因?yàn)樗旧砭褪且粋€(gè)屬性纵竖，可以直接使用

let vm = new Vue({
        el: '#app',
        data() {
            return {
                count1: null,
                count2: null,
            }
        },
        // 計(jì)算屬性
        computed: {
            //計(jì)算和
            num() {
                //計(jì)算和
                return this.count1 + this.count2;
            },
        },
    })

我們?cè)陧?yè)面中渲染出這個(gè) num

<div>輸出:{{num}}</div>

打開(kāi)瀏覽器看下效果

vue教程-lookroot

還記得在講 v-if的時(shí)候說(shuō)過(guò) v-if和 v-for不建議一起使用嗎兔朦？官方推薦先處理數(shù)據(jù)，當(dāng)時(shí)我提過(guò)使用計(jì)算屬性來(lái)處理

我們來(lái)實(shí)踐一下磨确，我們把userlist復(fù)制過(guò)來(lái)

 userlist: [
     { name: 'lookroot', sex: 2 },
     { name: 'lili', sex: 1 }
 ],

然后新增一個(gè)計(jì)算屬性showuserlist 那么他的值就是處理過(guò)的 userlist

 // 計(jì)算屬性
 computed: {
     //計(jì)算和
     num() {
         return this.count1 + this.count2;
     },
     //返回應(yīng)該渲染的數(shù)組
     showuserlist() {
         return this.userlist.filter((user) => {
             return user.sex === 1;
         })
     }
 },

我們?cè)陧?yè)面中就可以直接渲染這個(gè)計(jì)算屬性了

<ul>
    <li v-for="(loginUser,index) in showuserlist">{{loginUser.name+'-'+loginUser.sex}}</li>
</ul>

看下效果

vue教程-lookroot