Vue3.X學(xué)習(xí)筆記

引用

 <script src="https://unpkg.com/vue@next"></script>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>demo1</title>
    <script src="https://unpkg.com/vue@next"></script>
</head>
<body>
    <div id="app"></div>
</body>
<script>
    Vue.createApp({     //創(chuàng)建一個Vue實例，簡單理解就說，我要使用Vue了
        template:'<div>Hello world</div>'
    }).mount('#app') //這個模板需要放一個位置，也就是說掛載，掛載到`id=app`的DOM上
</script>
</html>

創(chuàng)建應(yīng)用app和掛載

//創(chuàng)建
 const app=Vue.createApp({})
//掛載到DOM
 const vm = app.mount("#app")

或者

 Vue.createApp({  
     ...
    }).mount('#app')

生命周期函數(shù)

生命周期函數(shù)，生命周期函數(shù)你可以這樣理解，就是在** 在某一時刻會自動執(zhí)行的函數(shù) **，這句話你可以注意兩個關(guān)鍵詞:
(1)某一時刻
(2)自動執(zhí)行

Vue3中有八個生命周期函數(shù)，

beforeCreate( ) ：在實例生成之前會自動執(zhí)行的函數(shù)
created( ) : 在實例生成之后會自動執(zhí)行的函數(shù)
beforeMount( ) : 在模板渲染完成之前執(zhí)行的函數(shù)
mounted( ) : 在模板渲染完成之后執(zhí)行的函數(shù)
beforeUpdate ：當(dāng)data中的數(shù)據(jù)變化時， 會立即自動執(zhí)行的函數(shù)
updated：當(dāng)data中的數(shù)據(jù)發(fā)生變化，頁面重新渲染完后，會自動執(zhí)行的函數(shù)
beforeUnmount( ) :當(dāng)Vue應(yīng)用失效時，會自動執(zhí)行的函數(shù)
unmounted() : 當(dāng)Vue應(yīng)用失效時，且DOM完全銷毀之后，會自動執(zhí)行

這樣就有四個關(guān)鍵節(jié)點了：創(chuàng)建、渲染、更新、銷毀。最主要的理解是他們是自動執(zhí)行的函數(shù)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>demo7</title>
    <script src="https://unpkg.com/vue@next"></script>
</head>
<body>
    <div id="app"></div>
</body>
<script>
    //生命周期函數(shù)，生命周期函數(shù)你可以這樣理解，就是在** 在某一時刻會自動執(zhí)行的函數(shù) **，這句話你可以注意兩個關(guān)鍵詞某一時刻和自動執(zhí)行

    //beforeCreate( ) ：在實例生成之前會自動執(zhí)行的函數(shù)
    //created( ) : 在實例生成之后會自動執(zhí)行的函數(shù)
    //beforeMount( ) : 在模板渲染完成之前執(zhí)行的函數(shù)
    //mounted( ) : 在模板渲染完成之后執(zhí)行的函數(shù)
    //beforeUpdate ：當(dāng)data中的數(shù)據(jù)變化時， 會立即自動執(zhí)行的函數(shù)
    //updated：當(dāng)data中的數(shù)據(jù)發(fā)生變化，頁面重新渲染完后，會自動執(zhí)行的函數(shù)
    //beforeUnmount( ) :當(dāng)Vue應(yīng)用失效時，會自動執(zhí)行的函數(shù)
    //unmounted() : 當(dāng)Vue應(yīng)用失效時，且DOM完全銷毀之后，會自動執(zhí)行
    const app=Vue.createApp({
        data() {
            return {
                message: 'com'
            }
        },
        methods: {
            handleItemClick() {
                this.message=this.message=='one'?'two':'one'
            }
        },
        beforeCreate() {
            console.log('在實例生成之前會自動執(zhí)行的函數(shù):beforeCreate')
        },
        created() {
            console.log('在實例生成之后會自動執(zhí)行的函數(shù):created')
        },
        beforeMount() {
            console.log('在模板渲染完成之前執(zhí)行的函數(shù):beforeMount')
        },
        mounted() {
            console.log('在模板渲染完成之后執(zhí)行的函數(shù):mounted')
        },
        beforeUpdate() {
            console.log('當(dāng)data中的數(shù)據(jù)變化時， 會立即自動執(zhí)行的函數(shù):beforeUpdate')
        },
        updated() {
            console.log('當(dāng)data中的數(shù)據(jù)發(fā)生變化，頁面重新渲染完后，會自動執(zhí)行的函數(shù):updated')
        },
        beforeUnmount() {
            console.log('當(dāng)Vue應(yīng)用失效時，會自動執(zhí)行的函數(shù):beforeUnmount')
        },
        unmounted() {
            console.log('當(dāng)Vue應(yīng)用失效時，且DOM完全銷毀之后，會自動執(zhí)行:unmounted')
        },
        template: `<h2 v-on:click="handleItemClick">{{message}}</h2>` 
    })

    const vm = app.mount("#app")
    console.log(vm)
</script>
</html>

插值表達(dá)式和v-bind綁定數(shù)據(jù)

插值表達(dá)式就是經(jīng)?？吹降膡{xxxx}}這樣的東西

插值表達(dá)式輸出html標(biāo)簽：v-html

return {
    message: '<i>jspang.com</i>'
}
...

template: `<h2 v-html="message"> </h2>`

[ 插值表達(dá)式只作一次渲染-v-once]

只有在第一次渲染去data中的值，而以后不再跟隨data變化，這時候就要用到v-once指令。

<script>
    const app = Vue.createApp({
        data() {
            return {
                message: '<i>jspang.com</i>'
            }
        },
        methods: {
            handleItemClick() {
                this.message = this.message == 'jspang.com' ? "技術(shù)胖" : "jspang.com"
            }
        },
        template:`<h2 
                    v-on:click="handleItemClick" 
                    v-html="message"
                    v-once
                    ></h2>`
    })
    const vm = app.mount("#app")

</script>

插值表達(dá)式中是可以使用JS表達(dá)式的，最常用的表達(dá)式是三元運算符

<div>{{count>2?'大':'小'}}</div>

也可以這樣：

<div>{{'jspang'+'.com'}}</div>
<div>{{1+2}}</div>

v-bind使用

現(xiàn)在我們給h2標(biāo)簽加入一個title屬性，屬性的值也想使用message

<h2 
  v-on:click="handleItemClick" 
  v-html="message"
  v-once
  title="message"
> </h2>`

這時候瀏覽器中鼠標(biāo)放上時顯示的確實message這個單詞，而并沒有出現(xiàn)我們想要的結(jié)果。這時候就可以使用v-bind標(biāo)簽了。寫成下面的樣式就可以了

v-bind:title="message"

v-bind的簡寫方式：

<h2 v-bind:title="message">{{message}}</h2>
<h2 :title="message">{{message}}</h2>

v-on基本用法

methods:{
    hanldClick(){
        alert('歡迎光臨紅浪漫')
    }
},
template:`
<h2 v-on:click="hanldClick">{{message}}</h2>
`

v-on還有一個簡寫方法，就是可以不屑v-on:用@代替，

template:`
<h2 @click="hanldClick">{{message}}</h2>
`

模板動態(tài)參數(shù)

這里v-bind:title中的title是來自data中的，就可以這樣寫。

const app=Vue.createApp({ 
    data(){
        return{
            message:'jspang.com' ,
            name:'title'
        }
    },
    //.........
    template:`
        <h2 
            @click="hanldClick"
            :[name]="message"
        >
        {{message}}
        </h2>
    `

})

可以看到我們在data中，定義了一個name的變量，值是一個字符串，然后在綁定屬性時我們使用了[]方括號加上data中變量名的形式。這時候綁定的屬性就變的靈活了，這種形式就是模板動態(tài)參數(shù)，也稱為動態(tài)屬性。

可以在瀏覽器中使用檢查的方式，查看此時綁定屬性的名稱，如果進行修改，比如改成title1,瀏覽器中也會跟隨改變，形成動態(tài)效果，這就是動態(tài)屬性了

return{
    message:'jspang.com' ,
    name:'title',
    event:'click'
}

template:`
    <h2 
        @[event]="hanldClick"
        :[name]="message"
    >
    {{message}}
    </h2>
`

這時候就實現(xiàn)了動態(tài)綁定方法，可以打開瀏覽器，看一下效果。當(dāng)點擊<h2>標(biāo)簽時，也會彈出對應(yīng)的alert效果。當(dāng)然你還可以幫click改成其他相應(yīng)事件，比如改成event:'mouseenter'，這樣，當(dāng)鼠標(biāo)滑入時就可以相應(yīng)彈出效果了。

阻止默認(rèn)事件

最常見的默認(rèn)事件就是表單的默認(rèn)提交事件，比如我們這里寫一個表單，然后寫一個屬性為submit的按鈕，當(dāng)點擊按鈕時，表單就會默認(rèn)提交到對應(yīng)的網(wǎng)址。

<form action="https://baidu.com">
    <button type="submit">默認(rèn)提交</button>
</form>

這時候在瀏覽器中預(yù)覽，點擊“默認(rèn)提交”按鈕，就會立即跳轉(zhuǎn)到百度上去，這就是默認(rèn)響應(yīng)事件。但是在開發(fā)中我們經(jīng)常需要阻止這種默認(rèn)響應(yīng)事件。比如寫出下面的代碼。

methods:{
    hanldeClick(){
        alert('歡迎光臨紅浪漫')
    },
    hanldeButton(e){
        e.preventDefault()   //阻止默認(rèn)事件
    }
},
//...
template:`
      //....
<form action="https://baidu.com" @click="hanldeButton">
    <button type="submit">默認(rèn)提交</button>
</form>
`

或者 使用prevent修飾符

<form 
    action="https://jspang.com" 
    @click.prevent="hanldeButton">
    <button type="submit">默認(rèn)提交</button>
</form>
`

methods中的寫法

hanldeButton(){
    alert('jspang.com') 
}

這樣就可以阻止默認(rèn)事件，直接響應(yīng)對應(yīng)事件的內(nèi)容了。prevent就是阻止默認(rèn)事件的修飾符。修飾符可以見簡化一些代碼的編寫，也是比較常用的一個操作。

v-if判斷

<h2  v-if="message=='com'" class="one" > {{message}} </h2>

template: `
<h2  v-if="message=='com'" class="one" > {{message}} </h2>
<h2  v-else  class="three"> {{message}} </h2>
    `

計算屬性computed

計算屬性的特性是：當(dāng)計算屬性依賴的內(nèi)容發(fā)生變更時，才會重新執(zhí)行計算

data(){
    return{
        message:'jspang.com' , 
        price:10,
        count:2
    }
},

template:` <h2> {{price * count}}</h2>`

寫一個getTotal的方法。

methods:{
        getTotal(){
            return this.price * (this.count++);
        }
    },
    template:` <h2> {{getTotal()}}</h2>`

methods無法滿足計算需求
比如：

methods:{
    getTotal(){
        return Date.now()
    }
},

這時候打開瀏覽器的控制臺console，然后在里邊通過手都的方式修改message的值vm.message='1111'。這時候問題產(chǎn)生了，你會發(fā)現(xiàn)getTotal( )方法被重新執(zhí)行了。這就是這個問題的所在，這個問題其實可以用今天的主角coumputed計算屬性來解決。

編寫計算屬性

computed:{
    total(){
        return Date.now()
    }
},

template:` 
    <h2>{{message}}</h2>
    <h2> {{total}}</h2>
`

這時候到瀏覽器中，用手動的方法，修改message的值，total的值就不會進行改變了。

vm.message='1111'

通過這個例子，你會對普通方法和計算屬性的區(qū)別有所了解。這時候我們作一下總結(jié)：
(1)方法methods：只要頁面重新渲染，就會重新執(zhí)行方法
(2)計算屬性computed: 當(dāng)計算屬性依賴的內(nèi)容發(fā)生變更時，才會重新執(zhí)行計算

完整例子

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Demo12-Vue中的計算屬性</title>
    <script src="https://unpkg.com/vue@next" ></script>
</head>
<body>
    <div id="app"></div>
</body>
<script>

    const app=Vue.createApp({ 
        data(){
            return{
                message:'jspang.com' , 
                price:10,
                count:2
            }
        },
        methods:{
            getTotal(){
                return Date.now()
            },
            addCount(){
                this.count++
            }
        },
        computed:{   //計算屬性
            total(){
                return this.price * this.count
            }
        },
        template:`
            <h2> {{message}}</h2>
            <h2> {{getTotal()}}</h2>
            <h2> {{total}}</h2>
            <button @click="addCount">再買一個</button>
        `
    }) 
    const vm=app.mount("#app")
</script>

</html>

watch偵聽器

watch偵聽器的作用就是偵聽一個data中的值的變化，變化后可以寫一個方法，讓其進行一些操作（業(yè)務(wù)邏輯的編寫）。


data(){
            return{
                ...
                count:2
            }
        }
...
watch:{
    count(){  //監(jiān)聽data中的count值變化
            console.log('count changed')
    }
},

偵聽器中的方法還可以接收兩個參數(shù)，一個是現(xiàn)在的值（current），一個是變化之前的值（prev）。我們分別接收這兩個值，并打印在控制臺，看一下效果。

watch:{
    count(current,prev){
        console.log('watch changed')
        console.log('現(xiàn)在的值：',current)
        console.log('變化前的值：',prev)
    }
}
監(jiān)聽器watch和計算屬性computed的區(qū)別

計算屬性computed必須要返回一個值，而且在頁面渲染的同時就會執(zhí)行里邊的業(yè)務(wù)邏輯，也就是會先執(zhí)行一遍你寫的業(yè)務(wù)邏輯，而watch只有發(fā)生變化時才會執(zhí)行，也就是說值沒有變化，它是不執(zhí)行里邊業(yè)務(wù)邏輯的。

method,watch,computed三者優(yōu)先級

現(xiàn)在總結(jié)一下method、watch和computed三者如果都能實現(xiàn)相同的功能，它們之間的取舍和使用優(yōu)先級。
（1）computed 和 method都能實現(xiàn)的功能，建議使用computed,因為有緩存，不用渲染頁面就刷新。
（2）computed 和 watch 都能實現(xiàn)的功能，建議使用 computed，因為更加簡潔。

模板樣式綁定

         data(){
            return {
                classString:'red',
            }
        },
        template:`
            <h2 :class="classString">JSPang.com</h2>   //綁定同樣使用v-bind，你也可以使用簡寫:
        ` 
....
//定義三個樣式
<style>
    .red{color:red;}
    .green{color:green;}
    .background{ background-color: orange;}
</style>
對象的綁定方式
data(){
    return {
        classString:'red',
        classObject:{red:true,background:true}
    }
},
...
template:`
    <h2 :class="classObject">JSPang.com</h2>  
`

這時候再到瀏覽器中查看效果，就會有兩個樣式被綁定了red和background。如果你這首把red改為false，那效果就是只有背景顏色，沒有字體顏色了。

數(shù)組的綁定方式
data(){
    return {
        classString:'red',
        classObject:{red:true,background:true},
        classArray:['green','background'],
    }
},

...
template:`
    <h2 :class="classArray">JSPang.com</h2>  
`
行內(nèi)樣式綁定
 const app=Vue.createApp({ 

        data(){
            return {
                styleString:'color:orange;',   
                styleObject:{
                    color:'red',
                    background:'yellow'
                }
            }
        },
        template:`
            <h2 :style="styleObject">JSPang.com</h2>  
        ` 
    }) 
    const vm=app.mount("#app")

v-if和v-show區(qū)別

data(){
    return{
        show:true,
    }
},

template:`
    <h2 v-show="show">JSPang.com</h2>  
`

這時候打開瀏覽器進行預(yù)覽，是可以看到JSPang.com這個h2的DOM元素的。如果把數(shù)據(jù)項show改成false就看不到了。

v-if更加靈活，可以增加多個判斷，比如v-else-iif和else，而v-show不具備這樣的靈活性。

v-show控制DOM元素顯示，其實控制的是css樣式，也就是display:noe?，F(xiàn)在你可以把data的值修改為false，然后刷新瀏覽器，打開瀏覽器調(diào)試器的Elements選項卡，就可以清楚的看到，這時候<h2>標(biāo)簽上的style樣式就是display:none。

v-for循環(huán)

v-for循環(huán)數(shù)組方法
 const app=Vue.createApp({ 
        data(){
            return{   
                listArray:['謝大腳','劉英','曉紅']
            }
        },
        methods:{
        },
        template:`
            <ul>
                <li v-for="(item,index) in listArray" :key="index+item">[{{index}}]{{item}}</li>
            </ul>
        `

    }) 
    const vm=app.mount("#app")

關(guān)于循環(huán)是key值
為了提高循環(huán)時性能，在數(shù)組其中一項變化后，整個數(shù)組不進行全部重新渲染，Vue提供了綁定key值的使用方法，目的就是增加渲染性能，避免重復(fù)渲染。
加唯一性key值，增加后vue就會辨認(rèn)出哪些內(nèi)容被渲染后并沒有變化，而只渲染新變化的內(nèi)容。

:key="index+item"

官方不建議使用索引index為key值，但此時又為了保持唯一性，所以這里使用了index+item進行綁定key值

v-for 循環(huán)對象
data(){
    return{  
        //......
        listObject:{
            GirlOne:'謝大腳',
            GirlTwo:'劉英',
            GirlThree:'曉紅'
        }
    }
},

在模板中進行循環(huán)的時候，為了更好的語義化，我們把參數(shù)改為了value,key和index。然后進行循環(huán)。

<ul>
    <li v-for="(value,key,index)  in listObject" :key="key">
        [{{index}}]{{value}}-{{key}}
    </li>
</ul>
v-for循環(huán)數(shù)字
 <span v-for="count in 99">{{count}}|</span>
v-for循環(huán)中使用判斷v-if

Vue給我們提供了<template>模版標(biāo)簽，也就是一個空的占位符，目的就是解決模板中為完成業(yè)務(wù)邏輯，而使用的無用html標(biāo)簽的現(xiàn)象。

template:`
            <ul>
                <template v-for="(value,key,index) in listObject">

                    <li v-if="index!=0">{{index}}[{{key}}]:{{value}}</li>

                </template>
               
            </ul>
           
        `

按鈕綁定事件

methods:{
    addCountClick(){
        this.count++;
    },
},

...
template:`
    <div>目前已點佳麗數(shù)量{{count}}.</div>
    <button @click="addCountClick">增加一位佳麗</button>
    ` 
})

還可以用直接表達(dá)式

<button @click="count++">增加一位佳麗</button>

在編寫響應(yīng)事件事，是可以接受一個event參數(shù)的，這個參數(shù)就是關(guān)于響應(yīng)事件的一些內(nèi)容。我們直接打印出event，你會發(fā)現(xiàn)內(nèi)容比較多，其實這些參數(shù)還是值得一看的，在工作中有時真的會用到

methods:{
    addCountClick(event){
        this.count++;
        console.log(event)
    },
},
多參數(shù)
methods:{
    addCountClick(num){
        this.count+=num
    },
},
template:`
        //.....
    <button @click="addCountClick(2)">增加一位佳麗</button>
    ` 
})

有參數(shù)的情況下使用event
方法是參數(shù)增加$event。

methods:{
    addCountClick(num,event){
        this.count+=num;
        console.log(event.target)
    },
},
template:`
    <div>目前已點佳麗數(shù)量{{count}}.</div>
    <button @click="addCountClick(2,$event)">增加一位佳麗</button>
    ` 
})
一個按鈕調(diào)傭2個方法
methods:{
    //...
    handleBtnClick1(){
        alert(1)
    },
    handleBtnClick2(){
        alert(2)
    },
},
...
<button @click="handleBtnClick1(),handleBtnClick2()">增加一位佳麗</button>

事件修飾符

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Demo19</title>
    <script src="https://unpkg.com/vue@next" ></script>
</head>
<body>
    <div id="app"></div>
</body>
<script>
    const app=Vue.createApp({ 
    data(){
        return{
            count:0
        }
    },
    methods:{
        addCountClick(){
            this.count++
        },
        handleBtnClick1(){
            alert(1)
        },
    },
    template:`
        <div @click="handleBtnClick1">
            <div>目前已點佳麗數(shù)量{{count}}.</div>
            <button @click=" addCountClick()">增加一位佳麗</button>
       </div>
        ` 
    }) 
    const vm=app.mount("#app")

</script>

</html>
(1)stop修飾符

在Vue中要停止冒泡是非常簡單的，只要加加一個事件修飾符stop就可以了。

<button @click.stop=" addCountClick()">增加一位佳麗</button>
(2)self修飾符

除了使用.stop修飾符，還有一種修飾符self，意思是只有點擊自己的時候才會被執(zhí)行。 只不過加的位置要在家外層DOM元素的事件上。

template:`
        <div @click.self="handleBtnClick1">
            <div>目前已點佳麗數(shù)量{{count}}.</div>
            <button @click=" addCountClick()">增加一位佳麗</button>
       </div>
        `

這時候你會發(fā)現(xiàn)點擊那里，都沒辦法觸發(fā)hanldeBtnClick1方法了，這是因為目前最外層div下都是獨立的DOM元素，就是都有成對標(biāo)簽出現(xiàn)，都不屬于最外自己，都是他們的子元素。

可以編寫一段專屬最外層DIV的文字。

template:`
        <div @click.self="handleBtnClick1">
            我是最外層的DIV文字
            <div>目前已點佳麗數(shù)量{{count}}.</div>
            <button @click=" addCountClick()">增加一位佳麗</button>
       </div>
        `

這樣當(dāng)點擊我是最外層的DIV文字時，就會觸犯handleBtnClick1方法了。

(3)prevent修飾符：

阻止默然行為的修飾符，這個以前講過，例如阻止form表單的默認(rèn)提交行為。

(4)capture修飾符

改成捕獲模式，默認(rèn)的模式都是冒泡模式，也就是從下到上，但是你用capture后，是從上到下的。

methods:{
    addCountClick(){
        this.count++
        alert(0)  //修改了此處
    },
    handleBtnClick1(){
        alert(1)
    },
},
template:`
    <div @click.capture="handleBtnClick1">  //修改了此處
        我是最外層的DIV文字
        <div>目前已點佳麗數(shù)量{{count}}.</div>
        <button @click=" addCountClick()">增加一位佳麗</button>
    </div>
    `
(5)once修飾符

事件只執(zhí)行一次（視頻中作演示）。

template:`
    <div @click.self="handleBtnClick1">
        我是最外層的DIV文字
        <div>目前已點佳麗數(shù)量{{count}}.</div>
        <button @click.once=" addCountClick()">增加一位佳麗</button>
    </div>
    `
(6)passive修飾符：解決滾動時性能的修飾符

按鍵鼠標(biāo)修飾符

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Demo21</title>
    <script src="https://unpkg.com/vue@next" ></script>
</head>
<body>
    <div id="app"></div>
</body>
<script>
    const app=Vue.createApp({ 
    data(){
        return{}
    },
    methods:{
    },
    template:`
        <div">
            <input />
        </div>
        ` 
    }) 
    const vm=app.mount("#app")

</script>

</html>

然后在methods部分加入一個方法handleKeyDwon( )，具體內(nèi)容只是在控制臺打印出來keydown。

methods:{
    handleKeyDown(){
        console.log('keydow....')
    }
},

然后在模板中的<input />中綁定鍵盤(任何按鍵)按下時響應(yīng)keydown。

template:`
    <div">
        <input @keydown="handleKeyDown"/>
    </div>
    `
單個按鍵

就是指定鍵盤上某個特殊的按鍵時才會響應(yīng)事件方法
如果現(xiàn)在的需求是，上面的代碼只有在按下回車時，才在控制臺進行打印，這時候就需要按鍵修飾符了。我們學(xué)的第一個按鍵修飾符enter

template:`
    <div">
        <input @keydown.enter="handleKeyDown"/>
    </div>
    ` 
    })

類似這樣只響應(yīng)單個按鍵的修飾符有很多:
enter 、tab、delete、esc、up 、down、left、right

鼠標(biāo)修飾符

除了按鍵修飾符，還有鼠標(biāo)修飾符，就是按下鼠標(biāo)上的某個鍵時，才會響應(yīng)。

最常用的就是: left、right、middle

現(xiàn)在的需求是在頁面上作一行文字JSPang.com，然后只有用鼠標(biāo)右鍵點擊時，才會彈出alert( )。

先在methods里編寫一個handleClick方法。

methods:{
   //...
    handleClick(){
        alert('click')
    }
},

然后在模板中使用鼠標(biāo)修飾符，確定只有點擊鼠標(biāo)右鍵時才會響應(yīng)。

<div @click.right="handleClick">JSPang.com</div>

表單數(shù)據(jù)雙向綁定

<script>
    const app=Vue.createApp({ 
    data(){
        return{
            name:''
        }
    },
    template:`
        <div>
            <div>{{name}}</div>
            <input v-model="name" />  //雙向綁定
        </div>
        ` 
    }) 
    const vm=app.mount("#app")
</script>

data中的變量改變時，綁定的數(shù)據(jù)會跟隨變化，此為一項修改；當(dāng)通過頁面修改數(shù)據(jù)，data中的變量也隨之改變，這就是另一項修改。兩個彼此依存改變，就為雙向數(shù)據(jù)綁定。

目前這種就完成了<input />的雙向數(shù)據(jù)綁定。

textarea數(shù)據(jù)雙向綁定

以前我們寫HTML的時候，寫textarea標(biāo)簽都是成對出現(xiàn)的，比如這樣<textarea></textarea>，如果想在Vue中實現(xiàn)textarea的雙向數(shù)據(jù)綁定，這時候只要寫單標(biāo)簽就可以了，剩下的事情Vue底層就幫你完成了。

template:`
    <div>
        <div>{{name}}</div>
        <div><input v-model="name" /></div>
        <div><textarea v-model="name" /></div>  
    </div>
    `
checkbox數(shù)據(jù)雙向綁定

checkbox是一個勾選框（復(fù)選框），如果只有一個選項時，我們可以給<checkbox />一個布爾值，也就是true或者false。

現(xiàn)在data中新聲明一個變量checked.

data(){
    return{
        name:'',
        checked:false
    }
},
...

<div>{{checked}}<input type="checkbox" v-model="checked" /></div>

checkbox還有一個功能就是復(fù)選，可以選擇多個。

比如還是象牙山三大美女的例子，現(xiàn)在勾選誰，誰就可以顯示在頁面上。

這時候要先定義一個變量，這個變量是一個空數(shù)組。

data(){
    return{
        name:'',
        checked:false,
        girls:[]
    }
},
...
<div>
    {{girls}}
    大腳<input type="checkbox" v-model="girls" value="大腳" />
    劉英<input type="checkbox" v-model="girls" value="劉英" />
    曉紅<input type="checkbox" v-model="girls" value="曉紅" />
</div>
radio數(shù)據(jù)綁定

會了checkbox的雙向數(shù)據(jù)綁定，radio單選按鈕就簡單了。但是需要注意的是，既然是單選，這時候data中的變量就不能是一個數(shù)字了，一般是一個字符串。比如我們這里新定義了一個girl的變量。

data(){
    return{
        name:'',
        checked:false,
        girls:[],
        girl:'',
    }
},
...
<div>
    {{girl}}
    大腳<input type="radio" v-model="girl" value="大腳" />
    劉英<input type="radio" v-model="girl" value="劉英" />
    曉紅<input type="radio" v-model="girl" value="曉紅" />
</div>
綁定修飾符
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Demo23</title>
    <script src="https://unpkg.com/vue@next"></script>
</head>

<body>
    <div id="app"></div>
</body>
<script>
    const app = Vue.createApp({
        data() {
            return {
                checked: true,
            }
        },

        template: `
        <div>{{checked}}<input type="checkbox" v-model="checked" /></div>
        `

    })
    const vm = app.mount("#app")

</script>

</html>

在瀏覽器中預(yù)覽時，當(dāng)選擇復(fù)選框時，會顯示true，沒選中顯示false。

現(xiàn)在的需求是，我選中的時候顯示JSPang.com，沒選中的時候顯示技術(shù)胖。這時候要如何處理那？

Vue給我們提供了這樣兩個屬性true-value和false-value。我們在Data中新聲明一個變量name,值為空字符串。

data() {
    return {
        checked: true,
        name: '',
    }
},
...
template: `
<div>{{name}}
    <input 
        type="checkbox" 
        v-model="name"  
        true-value="JSPang.com"
        false-value="技術(shù)胖"
        /></div>
`
v-model 數(shù)據(jù)修飾符--lazy修飾符

v-model也有很多實用的修飾符，現(xiàn)在就學(xué)習(xí)一下。第一個修飾符lazy，這個也叫做懶更新修飾符。

我們作一個input的綁定效果,現(xiàn)在data中聲明一個message變量，值為空。然后在模板中寫一個<input />并和message進行雙向數(shù)據(jù)綁定。

data() {
    return {
        checked: true,
        name: '',
        message:'',
    }
},
...
<div>
    {{message}}<input v-model.lazy="message" />
</div>

這時候當(dāng)你在文本框中輸入任何內(nèi)容的時候，插值表達(dá)式會跟著改變。如果你不想馬上顯示，就可以用lazy修飾符，這樣就可以實現(xiàn)當(dāng)輸入完成后，失去焦點再進行改變。

number修飾符

<div>
    {{typeof message}}<input v-model.number="message" />
</div>

trim修飾
trim修飾符大家一定不陌生，它是用來消除input框輸入內(nèi)容前后的空格的?，F(xiàn)在我們再字符串上輸入空格，其實它會在DOM元素上進行增加空格的，這個可以在控制臺清楚的看出(詳細(xì)請看視頻操作)。 加入trim修飾符后，Vue就會自動給我們?nèi)コ昂蟮目崭瘛?/p> 

<div>
    {{message1}}<input v-model.trim="message1" />
</div>
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點，簡書系信息發(fā)布平臺，僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容