Vue3.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({     //創建一個Vue實例，簡單理解就說，我要使用Vue了
        template:'<div>Hello world</div>'
    }).mount('#app') //這個模板需要放一個位置，也就是說掛載，掛載到`id=app`的DOM上
</script>
</html>

創建應用app和掛載

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

或者

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

生命周期函數

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

Vue3中有八個生命周期函數，

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

這樣就有四個關鍵節點了：創建、渲染、更新、銷毀。最主要的理解是他們是自動執行的函數

<!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>
    //生命周期函數，生命周期函數你可以這樣理解，就是在** 在某一時刻會自動執行的函數 **，這句話你可以注意兩個關鍵詞某一時刻和自動執行

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

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

插值表達式和v-bind綁定數據

插值表達式就是經常看到的{{xxxx}}這樣的東西

插值表達式輸出html標簽：v-html

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

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

[ 插值表達式只作一次渲染-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' ? "技術胖" : "jspang.com"
            }
        },
        template:`<h2 
                    v-on:click="handleItemClick" 
                    v-html="message"
                    v-once
                    ></h2>`
    })
    const vm = app.mount("#app")

</script>

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

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

也可以這樣：

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

v-bind使用

現在我們給h2標簽加入一個title屬性，屬性的值也想使用message

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

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

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>
`

模板動態參數

這里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中變量名的形式。這時候綁定的屬性就變的靈活了，這種形式就是模板動態參數，也稱為動態屬性。

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

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

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

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

阻止默認事件

最常見的默認事件就是表單的默認提交事件，比如我們這里寫一個表單，然后寫一個屬性為submit的按鈕，當點擊按鈕時，表單就會默認提交到對應的網址。

<form action="https://baidu.com">
    <button type="submit">默認提交</button>
</form>

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

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

或者 使用prevent修飾符

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

methods中的寫法

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

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

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

計算屬性的特性是：當計算屬性依賴的內容發生變更時，才會重新執行計算

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'。這時候問題產生了，你會發現getTotal( )方法被重新執行了。這就是這個問題的所在，這個問題其實可以用今天的主角coumputed計算屬性來解決。

編寫計算屬性

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

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

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

vm.message='1111'

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

完整例子

<!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中的值的變化，變化后可以寫一個方法，讓其進行一些操作（業務邏輯的編寫）。


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

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

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

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

method,watch,computed三者優先級

現在總結一下method、watch和computed三者如果都能實現相同的功能，它們之間的取舍和使用優先級。
（1）computed 和 method都能實現的功能，建議使用computed,因為有緩存，不用渲染頁面就刷新。
（2）computed 和 watch 都能實現的功能，建議使用 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，那效果就是只有背景顏色，沒有字體顏色了。

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

...
template:`
    <h2 :class="classArray">JSPang.com</h2>  
`
行內樣式綁定
 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區別

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

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

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

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

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

v-for循環

v-for循環數組方法
 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")

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

:key="index+item"

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

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

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

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

Vue給我們提供了<template>模版標簽，也就是一個空的占位符，目的就是解決模板中為完成業務邏輯，而使用的無用html標簽的現象。

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>目前已點佳麗數量{{count}}.</div>
    <button @click="addCountClick">增加一位佳麗</button>
    ` 
})

還可以用直接表達式

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

在編寫響應事件事，是可以接受一個event參數的，這個參數就是關于響應事件的一些內容。我們直接打印出event，你會發現內容比較多，其實這些參數還是值得一看的，在工作中有時真的會用到

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

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

methods:{
    addCountClick(num,event){
        this.count+=num;
        console.log(event.target)
    },
},
template:`
    <div>目前已點佳麗數量{{count}}.</div>
    <button @click="addCountClick(2,$event)">增加一位佳麗</button>
    ` 
})
一個按鈕調傭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>目前已點佳麗數量{{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，意思是只有點擊自己的時候才會被執行。 只不過加的位置要在家外層DOM元素的事件上。

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

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

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

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

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

(3)prevent修飾符：

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

(4)capture修飾符

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

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

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

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

按鍵鼠標修飾符

<!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( )，具體內容只是在控制臺打印出來keydown。

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

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

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

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

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

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

鼠標修飾符

除了按鍵修飾符，還有鼠標修飾符，就是按下鼠標上的某個鍵時，才會響應。

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

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

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

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

然后在模板中使用鼠標修飾符，確定只有點擊鼠標右鍵時才會響應。

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

表單數據雙向綁定

<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中的變量改變時，綁定的數據會跟隨變化，此為一項修改；當通過頁面修改數據，data中的變量也隨之改變，這就是另一項修改。兩個彼此依存改變，就為雙向數據綁定。

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

textarea數據雙向綁定

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

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

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

現在data中新聲明一個變量checked.

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

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

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

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

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

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數據綁定

會了checkbox的雙向數據綁定，radio單選按鈕就簡單了。但是需要注意的是，既然是單選，這時候data中的變量就不能是一個數字了，一般是一個字符串。比如我們這里新定義了一個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>

在瀏覽器中預覽時，當選擇復選框時，會顯示true，沒選中顯示false。

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

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="技術胖"
        /></div>
`
v-model 數據修飾符--lazy修飾符

v-model也有很多實用的修飾符，現在就學習一下。第一個修飾符lazy，這個也叫做懶更新修飾符。

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

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

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

number修飾符

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

trim修飾
trim修飾符大家一定不陌生，它是用來消除input框輸入內容前后的空格的。現在我們再字符串上輸入空格，其實它會在DOM元素上進行增加空格的，這個可以在控制臺清楚的看出(詳細請看視頻操作)。 加入trim修飾符后，Vue就會自動給我們去除前后的空格。

<div>
    {{message1}}<input v-model.trim="message1" />
</div>
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明：文章內容（如有圖片或視頻亦包括在內）由作者上傳并發布，文章內容僅代表作者本人觀點，簡書系信息發布平臺，僅提供信息存儲服務。
  • 人面猴
    序言：七十年代末，一起剝皮案震驚了整個濱河市，隨后出現的幾起案子，更是在濱河造成了極大的恐慌，老刑警劉巖，帶你破解...
    沈念sama閱讀 228,363評論 6贊 532
  • 死咒
    序言：濱河連續發生了三起死亡事件，死亡現場離奇詭異，居然都是意外死亡，警方通過查閱死者的電腦和手機，發現死者居然都...
    沈念sama閱讀 98,497評論 3贊 416
  • 救了他兩次的神仙讓他今天三更去死
    文/潘曉璐 我一進店門，熙熙樓的掌柜王于貴愁眉苦臉地迎上來，“玉大人，你說我怎么就攤上這事。” “怎么了？”我有些...
    開封第一講書人閱讀 176,305評論 0贊 374
  • 道士緝兇錄：失蹤的賣姜人
    文/不壞的土叔 我叫張陵，是天一觀的道長。 經常有香客問我，道長，這世上最難降的妖魔是什么？ 我笑而不...
    開封第一講書人閱讀 62,962評論 1贊 311
  • ?港島之戀（遺憾婚禮）
    正文 為了忘掉前任，我火速辦了婚禮，結果婚禮上，老公的妹妹穿的比我還像新娘。我一直安慰自己，他們只是感情好，可當我...
    茶點故事閱讀 71,727評論 6贊 410
  • 惡毒庶女頂嫁案：這布局不是一般人想出來的
    文/花漫 我一把揭開白布。 她就那樣靜靜地躺著，像睡著了一般。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發上，一...
    開封第一講書人閱讀 55,193評論 1贊 324
  • 城市分裂傳說
    那天，我揣著相機與錄音，去河邊找鬼。 笑死，一個胖子當著我的面吹牛，可吹牛的內容都是我干的。 我是一名探鬼主播，決...
    沈念sama閱讀 43,257評論 3贊 441
  • 雙鴛鴦連環套：你想象不到人心有多黑
    文/蒼蘭香墨 我猛地睜開眼，長吁一口氣：“原來是場噩夢啊……” “哼！你這毒婦竟也來了？” 一聲冷哼從身側響起，我...
    開封第一講書人閱讀 42,411評論 0贊 288
  • 萬榮殺人案實錄
    序言：老撾萬榮一對情侶失蹤，失蹤者是張志新（化名）和其女友劉穎，沒想到半個月后，有當地人在樹林里發現了一具尸體，經...
    沈念sama閱讀 48,945評論 1贊 335
  • ?護林員之死
    正文 獨居荒郊野嶺守林人離奇死亡，尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內容為張勛視角 年9月15日...
    茶點故事閱讀 40,777評論 3贊 354
  • ?白月光啟示錄
    正文 我和宋清朗相戀三年，在試婚紗的時候發現自己被綠了。 大學時的朋友給我發了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 42,978評論 1贊 369
  • 活死人
    序言：一個原本活蹦亂跳的男人離奇死亡，死狀恐怖，靈堂內的尸體忽然破棺而出，到底是詐尸還是另有隱情，我是刑警寧澤，帶...
    沈念sama閱讀 38,519評論 5贊 359
  • ?日本核電站爆炸內幕
    正文 年R本政府宣布，位于F島的核電站，受9級特大地震影響，放射性物質發生泄漏。R本人自食惡果不足惜，卻給世界環境...
    茶點故事閱讀 44,216評論 3贊 347
  • 男人毒藥：我在死后第九天來索命
    文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧，春花似錦、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 34,642評論 0贊 26
  • 一樁弒父案，背后竟有這般陰謀
    文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至，卻和暖如春，著一層夾襖步出監牢的瞬間，已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 35,878評論 1贊 286
  • 情欲美人皮
    我被黑心中介騙來泰國打工， 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留，地道東北人。 一個月前我還...
    沈念sama閱讀 51,657評論 3贊 391
  • 代替公主和親
    正文 我出身青樓，卻偏偏與公主長得像，于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子，可洞房花燭夜當晚...
    茶點故事閱讀 47,960評論 2贊 373

推薦閱讀更多精彩內容

  • Vue一文學會? Vue大家都知道就是一個國內非常流行的框架，最近因為過了許久沒用Vue對于Vue的許多早已淡忘，...
    看物看霧閱讀 615評論 0贊 3
  • [TOC] Vue 學習筆記 Vue 源碼解析 - 主線流程 Vue 源碼解析 - 模板編譯 Vue 源碼解析 -...
    Whyn閱讀 627評論 0贊 1
  • 序言：亂七八糟一鍋粥！ 基于Vue.js 教程、介紹— Vue.js 心得： 在vue中，推薦始終使用 kebab...
    苦苦修行閱讀 653評論 0贊 1
  • 下載安裝搭建環境 可以選npm安裝，或者簡單下載一個開發版的vue.js文件 瀏覽器打開加載有vue的文檔時，控制...
    冥冥2017閱讀 6,072評論 0贊 42
  • 前言 接觸 Vue 也有一段時間了，很多時候在項目里面會用，但是由于對整個 Vue 的了解比較片面，讓我不得不一次...
    你的肖同學閱讀 955評論 0贊 12