一、v-model指令的詳細(xì)用法

基礎(chǔ)用法/

Vue官方-表單輸入綁定

你可以用 v-model 指令在表單 <input>、<textarea> 及 <select> 元素上創(chuàng)建雙向數(shù)據(jù)綁定。它會根據(jù)控件類型自動選取正確的方法來更新元素。盡管有些神奇，但 v-model 本質(zhì)上不過是語法糖。它負(fù)責(zé)監(jiān)聽用戶的輸入事件以更新數(shù)據(jù)，并對一些極端場景進(jìn)行一些特殊處理。
v-model 會忽略所有表單元素的 value、checked、selected attribute 的初始值而總是將 Vue 實例的數(shù)據(jù)作為數(shù)據(jù)來源。你應(yīng)該通過 JavaScript 在組件的 data 選項中聲明初始值。
v-model 指令，可以實現(xiàn)對數(shù)據(jù)的雙向綁定，v-model指令是 v-bind:value 和 v-on:input 的簡寫。

1.文本

v-model指令，綁定文本框的內(nèi)容，實現(xiàn)雙向數(shù)據(jù)綁定。

    <div id="app">
        <div>
            姓名：<input type="text" v-model="name">開始{{name}}結(jié)束
        </div>
    </div>

    <script>
        new Vue({
            el:'#app',
            data:{
                name:'張三',
            }
        })
    </script>

2.多行文本

v-model指令，綁定多行文本框的內(nèi)容，實現(xiàn)雙向數(shù)據(jù)綁定。

    <div id="app">
        <div>
            地址：<textarea cols="30" rows="10" v-model="address"></textarea> {{address}}
        </div>
    </div>

    <script>
        new Vue({
            el:'#app',
            data:{
                address:"江蘇省，南京市，雨花臺區(qū)，賽虹橋街道，小行路125號",
            }
        })
    </script>

3.復(fù)選框

• 單個復(fù)選框，綁定到布爾值：

    <div id="app">
        <div>
            是否同意： <input type="checkbox" v-model="isOk">
            <span style="color: pink;">【{{isOk}}】</span>
        </div>
    </div>

    <script>
        new Vue({
            el:'#app',
            data:{
                isOk:false
            }
        })
    </script>

• 多個復(fù)選框，綁定到同一個數(shù)組：

<div id="app">
        <div>
            <!-- v-model綁定多個復(fù)選框，綁定同一個數(shù)組 -->
            愛好：
            <input v-model="hobbies" type="checkbox" value="吃飯">吃飯
            <input v-model="hobbies" type="checkbox" value="打游戲">打游戲
            <input v-model="hobbies" type="checkbox" value="睡覺">睡覺
            <input v-model="hobbies" type="checkbox" value="打豆豆">打豆豆
            <input v-model="hobbies" type="checkbox" value="看電視">看電視
            <input v-model="hobbies" type="checkbox" value="學(xué)習(xí)">學(xué)習(xí)
            <span style="color: pink;">{{hobbies}}</span>
        </div>
    </div>

   <script>
        new Vue({
            el:'#app',
            data:{
                hobbies:['吃飯','睡覺','打豆豆'],
            }
        })
    </script>

4.單選按鈕

綁定一組單選框，每個單選框指定相同的name屬性。

    <div id="app">
        <div>
            性別：
            <input v-model="sex" type="radio" value="男" name="sex">男
            <input v-model="sex" type="radio" value="女" name="sex">女
            <span style="color: pink;">【{{sex}}】</span>
        </div>
    </div>

   <script>
        new Vue({
            el:'#app',
            data:{
                sex:"女"
            }
        })
    </script>

5.選擇框

下拉框，綁定一個數(shù)組。
單選時：

    <div id="app">
        <div>
            城市：
            <select v-model="checkCity">
                <option value="北京">北京</option>
                <option value="上海">上海</option>
                <option value="南京">南京</option>
                <option value="武漢">武漢</option>
                <option value="深圳">深圳</option>
            </select>
            <span style="color: pink;">{{checkCity}}</span>
        </div>
    </div>

    <script>
        new Vue({
            el:'#app',
            data:{
                checkCity:'南京',
            }
        })
    </script>

多選時 (綁定到一個數(shù)組)：
下拉框設(shè)置multiple屬性后，按住ctrl就可以選擇多個項

    <div id="app">
        <div>
            喜歡的食物：
            <select multiple v-model="checkFoods">
                <option value="蘋果">蘋果</option>
                <option value="香蕉">香蕉</option>
                <option value="梨子">梨子</option>
                <option value="漢堡">漢堡</option>
                <option value="薯條">薯條</option>
                <option value="咖啡">咖啡</option>
            </select>
            <span style="color: pink;">{{checkFoods}}</span>
        </div>
    </div>

    <script>
        new Vue({
            el:'#app',
            data:{
                checkFoods:['蘋果','香蕉','梨子','漢堡','薯條','咖啡']
            }
        })
    </script>

修飾符/

1.添加了.lazy修飾符，可以將input事件轉(zhuǎn)為change事件

在默認(rèn)情況下，v-model 在每次 input 事件觸發(fā)后將輸入框的值與數(shù)據(jù)進(jìn)行同步。你可以添加 lazy 修飾符，從而轉(zhuǎn)為在 change 事件之后進(jìn)行同步：

     姓名：<input type="text" v-model.lazy="name">{{name}}

2.添加了.number修飾符，會自動將你的輸入轉(zhuǎn)為number類型

    年齡：<input type="text" v-model.number="age">{{age+20}}

3.添加了.trim修飾符，用于去掉內(nèi)容的首位空格

    姓名：<input type="text" v-model.lazy.trim="name">開始{{name}}結(jié)束

二、綁定事件

@ 是v-on: 的簡寫，通過v-on: 指令綁定事件，指定一個，methods選項，里面的，定義的，方法。

• 調(diào)用方法時，不傳參數(shù)，默認(rèn)會將事件對象作為參數(shù)傳遞。
  打印的e就是事件對象。

    <div id="app">
        <button @click="sayHi">sayHi</button>
    </div>

    <script>
        new Vue({
            el:'#app',
            data:{
                age:20
            },
            methods: {
                sayHi(e){
                    console.log(e);
                    alert('Hi')
                }
            },
        })
    </script>

• 調(diào)用方法時，傳的是什么參數(shù)，接的就是什么參數(shù)。
  打印的e就是傳的hello。

    <div id="app">
        <button @click="sayHello('hello')">sayHello</button>
    </div>

    <script>
        new Vue({
            el:'#app',
            data:{
                age:20
            },
            methods: {
                sayHello(e){
                    console.log(e);
                    alert('Hello~')
                }
            },
        })
    </script>

• 調(diào)用方法時，傳遞一個$event參數(shù)，該參數(shù)就是事件對象。

    <div id="app">
        <button @click="sayNice('Nice',$event)">sayNice</button>
    </div>

    <script>
        new Vue({
            el:'#app',
            data:{
                age:20
            },
            methods: {
                sayNice(msg,e){
                    console.log(e);
                    alert(msg)
                }
            },
        })
    </script>

• 當(dāng)事件處理的代碼比較簡單時，可以將代碼直接寫在行內(nèi)。
  注意：只能操作Vue管理的數(shù)據(jù)。

    <div>
        年齡：{{age}}
    </div>
    <button @click="age++">年齡++</button>

事件修飾符/

Vue官方-事件修飾符
在事件處理程序中調(diào)用 event.preventDefault() 或 event.stopPropagation() 是非常常見的需求。盡管我們可以在方法中輕松實現(xiàn)這點，但更好的方式是：方法只有純粹的數(shù)據(jù)邏輯，而不是去處理 DOM 事件細(xì)節(jié)。
為了解決這個問題，Vue.js 為 v-on 提供了事件修飾符。之前提過，修飾符是由點開頭的指令后綴來表示的。

.stop用于阻止事件冒泡
.prevent 用于阻止默認(rèn)行為
.self只能在自身元素上觸發(fā)，不能在子元素身上觸發(fā)觸發(fā)的
.once點擊事件將只會觸發(fā)一次

按鍵修飾符/

在監(jiān)聽鍵盤事件時，我們經(jīng)常需要檢查詳細(xì)的按鍵。Vue 允許為 v-on 在監(jiān)聽鍵盤事件時添加按鍵修飾符：
.enter 只有在回車時，才會調(diào)用事件方法
.tab
.delete (捕獲“刪除”和“退格”鍵)
.esc
.space
.up
.down
.left
.right

    <div>
        <!-- 每次鍵盤彈起都會調(diào)用事件方法 -->
        請輸入搜索關(guān)鍵字：<input type="text" @keyup="keyup">
    </div>
    <div>
        <!-- 只有在回車時，才會調(diào)用事件方法 -->
        請輸入搜索關(guān)鍵字：<input type="text" @keyup.enter="keyup1">
    </div>

new Vue({
            el:'#app',
            data:{
                age:20
            },
            methods: {
                keyup(e){
                    let {keyCode} = e
                    // console.log(keyCode);
                    if (keyCode===13) {
                        alert('搜索指定的商品')
                    }
                    // console.log('111');
                    // console.log(e);
                },
                keyup1(){
                    alert('搜索指定的商品')
                }
            },
        })

三、深度響應(yīng)式

obj對象里面的每一個屬性，都會采用Object.defineProperty去封裝，實現(xiàn)響應(yīng)式。
所謂響應(yīng)式，指的是，數(shù)據(jù)發(fā)生變化后，頁面自動更新。
給對象，后添加的數(shù)據(jù)不會采用Object.defineProperty去封裝，所以，就失去了響應(yīng)式。
vue通過$set方法，給對象添加響應(yīng)式屬性 this.$set(this.obj,'sex','男')
vue通過$delete方法，刪除對象的屬性，并觸發(fā)響應(yīng)式 this.$delete(this.obj,'age')
在vue中，操作數(shù)組，并觸發(fā)頁面更新只能使用數(shù)組的以下方法：
push，pop，unshift，shift，splice，resolve，sort
=>>> this.arr.push(66) this.arr.splice(2,1)
如果想通過下標(biāo)操作數(shù)組，也必須要使用$set和 $delete方法，
=>>>this.$set(this.arr,5,66) this.$delete(this.arr,2)

    <div id="app">
        <div>
            姓名：<input type="text" v-model="name">{{name}}
        </div>
        <div>
            學(xué)生信息：
            <input type="text" v-model="obj.name">
            <input type="text" v-model="obj.age">
            <button @click="addSex">添加性別</button>
            <button @click="delAge">刪除年齡</button>
            <br>
            {{obj}}

            <br>
            
            <input type="text" v-model="arr">
            {{arr}}
            <button @click="addArr">添加數(shù)組</button>
            <button @click="delArr">刪除數(shù)組</button>
        </div>
    </div>

    <script>
        Vue.config.productionTip = false
        new Vue({
            el:'#app',
            data:{
                //基本類型數(shù)據(jù)
                name:'張三',
                //對象類型數(shù)據(jù)
                obj:{
                    name:'張三',
                    age:20
                },
                arr:[11,22,33,44,55]
            },
            methods: {
                //添加性別
                addSex(){
                    // obj對象里面的每一個屬性，都會采用Object.defineProperty去封裝，實現(xiàn)響應(yīng)式
                    // 所謂響應(yīng)式，指的是，數(shù)據(jù)發(fā)生變化后，頁面自動更新。
                    // 給對象后添加的數(shù)據(jù)不會采用Object.defineProperty去封裝，所以，就失去了響應(yīng)式。
                    // this.obj.sex='男'
                    // vue通過$set方法，給對象添加響應(yīng)式屬性
                    this.$set(this.obj,'sex','男')
                },
                delAge(){
                    // 采用delete關(guān)鍵字刪除對象的屬性后，也沒有觸發(fā)頁面更新
                    // delete this.obj.age
                    // vue通過$delete方法，刪除對象的屬性，并觸發(fā)響應(yīng)式
                    this.$delete(this.obj,'age')
                },
                addArr(){
                    // this.arr[5] = 66 //注意：采用這種方式，不會觸發(fā)
                    // 在vue中，操作數(shù)組，并觸發(fā)頁面更新只能使用數(shù)組的以下方法：
                    // push，pop，unshift，shift，splice，resolve，sort
                    // this.arr.push(66)
                    // 如果想通過下標(biāo)操作數(shù)組，也必須要使用$set和 $delete方法
                    this.$set(this.arr,5,66)
                },
                delArr(){
                    // this.arr.splice(2,1)
                    this.$delete(this.arr,2)
                }
            },
        })
    </script>