一、v-model指令

v-model 指令在表单 <input>、<textarea> 及 <select> 元素上创建双向数据绑定。
v-model 会忽略所有表单元素的value、checked、selected属性的初始值而总是将 Vue 实例的数据作为数据来源；需要通过JavaScript 在组件的 data 选项中声明初始值。

1、文本框

v-model指令，绑定文本框的内容，实现双向数据绑定。

    <div id="app">
        <div>
            姓名：<input type="text" v-model="name">{{name}}
        </div>
    </div>

        new Vue({
            el:'#app',
            data:{
                name:"张三"
            }
        })

2、多行文本框

v-model指令，绑定多行文本框的内容，实现双向数据绑定。

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

        new Vue({
            el:'#app',
            data:{
                address:'江苏省，南京市，雨花台区'
            }
        })

3、单选按钮

绑定一组单选按钮，每个单选按钮通过v-model绑定相同的属性。

    <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: red">{{sex}}</span>
        </div>
    </div>

        new Vue({
            el:'#app',
            data:{
                sex:'男'
            }
        })

4、复选框

（1）单个复选框

单个复选框，通过v-model绑定一个布尔值。

    <div id="app">
        <div>
            是否同意：<input type="checkbox" v-model="isOk">{{isOk}}
        </div>
    </div>

        new Vue({
            el:'#app',
            data:{
                isOk: false
            }
        })

（2）多个复选框

多个复选框，通过v-model绑定到同一个数组。

    <div id="app">
        <div>
          爱好：
          <input type="checkbox" v-model="hobbies" value="吃饭">吃饭
          <input type="checkbox" v-model="hobbies" value="睡觉">睡觉
          <input type="checkbox" v-model="hobbies" value="打豆豆">打豆豆
          <input type="checkbox" v-model="hobbies" value="唱歌">唱歌
          <input type="checkbox" v-model="hobbies" value="跳舞">跳舞
            <span style="color: red;">{{hobbies}}</span>
        </div>
    </div>

        new Vue({
            el:'#app',
            data:{
                hobbies:['吃饭','睡觉','打豆豆']
            }
        })

5、选择框（下拉框）

（1）单选

单选时，通过v-model可以给下拉框绑定一个属性。

    <div id="app">
        <div>
            城市：
            <select v-model="city">
                <option value="北京">北京</option>
                <option value="上海">上海</option>
                <option value="广州">广州</option>
                <option value="深圳">深圳</option>
            </select>
            <span style="color: red;">{{city}}</span>
        </div>
    </div>

        new Vue({
            el:'#app',
            data:{
                 city: '广州'
            }
        })

（2）多选

多选时，通过v-mode给下拉框绑定一个数组。
下拉框设置multiple属性后，就可以选择多个项。

    <div id="app">
        <div>
            喜欢的食物：
            <select multiple v-model="foods">
                <option value="苹果">苹果</option>
                <option value="面包">面包</option>
                <option value="香蕉">香蕉</option>
                <option value="蛋糕">蛋糕</option>
                <option value="草莓">草莓</option>
                <option value="咖啡">咖啡</option>
            </select>
            {{foods}}
        </div>
    </div>

        new Vue({
            el:'#app',
            data:{
                 foods: ['苹果', '香蕉', '草莓']
            }
        })

6、修饰符

（1）.lazy

v-model指令默认触发的是input事件，当文本框的值发生变化后，立刻同步给数据。
v-model指令，添加.lazy修饰符，可以将input事件转为change事件，在文本框失去焦点后再更新数据。

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

        new Vue({
            el:'#app',
            data:{
                name:"张三"
            }
        })

（2）.number

v-model指令，添加.number修饰符，在修改文本框内容时，会将修改后的内容转为number类型。

    <div id="app">
        <div>
            年龄：<input type="text" v-model.number="age">{{age+20}}
        </div>
    </div>

        new Vue({
            el:'#app',
            data:{
                age: 18
            }
        })

（3）.trim

v-model指令，添加.trim修饰符，在修改文本框内容时，会自动过滤内容的首尾空格。

   <div id="app">
      <div>
         姓名：<input type="text" v-model.trim="name">开始{{name}}结束
      </div>
  </div>

        new Vue({
            el:'#app',
            data:{
                name:"张三"
            }
        })

二、事件处理

通过v-on:指令绑定事件，@是v-on:的简写。

1、事件绑定方法

（1）绑定事件方法不传参

通过v-on:指令绑定事件，指定一个methods选项里面的定义的方法。调用方法时，不传参数，默认会将事件对象作为参数传递。

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

        new Vue({
            el:'#app',
            methods: {
                sayHi(e){
                    console.log(e);     // 事件对象
                    alert('Hi！')
                }
            }
        })

（2）绑定事件方法传参

调用方法时，传的是什么参数，接的就是什么参数。

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

        new Vue({
            el:'#app',
            methods: {
                sayHello(e){
                    console.log(e);     // hello
                    alert('Hello！')
                }
            }
        })

（3）绑定事件方法传参+传递事件对象

如果我们传递了一个参数，还想再传递事件对象参数，就要通过$event关键字设置参数，该参数就是事件对象。

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

        new Vue({
            el:'#app',
            methods: {
                sayNice(msg,e){
                    console.log(e);     // 事件对象
                    alert(msg)
                }
            }
        })

2、行内编写方法

如果事件处理的逻辑比较简单，可以将代码直接写在行内。
注意：只能操作Vue管理的数据。

    <div id="app">
        <button @click="age++">年龄++</button>
    </div>

        new Vue({
            el:'#app',
            data:{
                age:20
            }
        })

3、事件修饰符

（1）.prevent

在事件处理程序中调用 event.preventDefault() 阻止默认行为。
Vue中可以通过.prevent事件修饰符，阻止默认行为。

    <div id="app">
        <div class="box" @contextmenu.prevent="showbox">
            box
        </div>
    </div>

        new Vue({
            el:'#app',
            methods: {  
                showbox(e){
                    // 阻止默认行为
                    // e.preventDefault()
                    console.log('你好！我是box');
                }
        })

（2）.stop

在事件处理程序中调用 event.stopPropagation() 阻止事件冒泡。
Vue中可以通过.stop事件修饰符，阻止事件冒泡。（绑定给子元素）

    <div id="app">
        <div class="one" @click="one">
            <div class="two" @click.stop="two"></div>
        </div>
    </div>

        new Vue({
            el:'#app',
            methods: {  
                one(){
                    console.log('你好！我是one');
                },
                two(e){
                    // 阻止事件冒泡
                    // e.stopPropagation();
                    console.log('你好！我是two');
                }
        })

（3）.once

通过.once事件修饰符，让事件方法只执行一次。

    <div id="app">
        <div class="one" @click.once="one"> </div>
    </div>

        new Vue({
            el:'#app',
            methods: {  
                one(){
                    console.log('你好！我是one');
                }
        })

（4）.self

通过.self事件修饰符，控制事件在当前元素自身触发，不在内部元素身上触发。（效果类似于.stop，但区别于是绑定给父元素）

    <div id="app">        
        <div class="box2" @click.self="showbox2">
            <div class="box3"></div>
        </div>
    </div>

        new Vue({
            el:'#app',
            data:{
                age:20
            }
        })

（5）.capture

默认情况下，事件的捕获模式是，从内部往外部挨个执行。如果外部事件添加.capture修饰符，此时事件的捕获模式就变成了，从外部往内部挨个执行。

    <div id="app">
        <div class="e" @click.capture="e">
             <div class="f" @click="f"></div>
        </div>
    </div>

    new Vue({
       el:'#app',
       methods: {  
          e(){
              alert('大家好！我是e')
           },
          f(){
              alert('大家好！我是f')
           }
       })

（6）.passive

.passive就是为了告诉浏览器，不用查询了，我们没用preventDefault阻止默认动作。
注意：不要把 .passive 和 .prevent 一起使用，因为 .prevent 将会被忽略，同时浏览器可能会向你展示一个警告。.passive 会告诉浏览器你不想阻止事件的默认行为。

   <div id="app">
       <div class="g" @scroll.passive="g">
           <div class="h"></div>
       </div>
   </div>

    new Vue({
       el:'#app',
       methods: {  
           g(){
               console.log(11);
           }
       })

4、按键修饰符

Vue针对键盘事件，提供了按键修饰符。按键修饰符也可以用按键码（keyCode）代替，例如.enter可以用.13代替。（注意：Vue3中取消了按键码）
一共有9个按键修饰符，分别是：
.enter 是回车键
.tab 是tab键
.delete 是删除键和退格键
.esc 是退出键
.space 是空格键
.up 是上箭头
.down 是下箭头
.left 是左箭头
.right 是右箭头

    <div id="app">        
        <div>
            <!-- 每次键盘弹起都会调用事件方法 -->
            请输入搜索关键字：<input type="text" @keyup="keyup">
        </div>
        <div>
            <!-- 只在回车时，才会调用事件方法 -->
            请输入搜索关键字：<input type="text" @keyup.enter="keyup1">
            <!-- 请输入搜索关键字：<input type="text" @keyup.13="keyup1"> -->
        </div>
    </div>

        new Vue({
            el:'#app',
            methods: {
                keyup(e){
                    let {keyCode} = e
                    if(keyCode===13){
                        alert('搜索指定的商品')
                    }
                },
                keyup1(){
                    alert('搜索指定的商品')
                }
            }
        })

三、深度响应式

Vue实例在初始化的时候，会将obj对象身上的所有数据，采用Object.defineProperty去封装，做响应式处理。所谓响应式，指的是数据发生变化后，页面自动更新。
但是给对象后添加的数据不会采用Object.defineProperty去封装，所以就不再具备响应式能力了。

实现后添加的数据也具备响应式能力，有以下两种方式:
① 通过Vue的set方法，更新指定的对象属性或数组成员；delete方法，删除指定对象的属性或数组的成员。
② 通过Vue实例的$set方法，更新指定的对象属性或数组成员；$delete方法，删除指定对象的属性或数组的成员。

1、更新对象

set方法的参数分别是：指定的对象，对象的属性，属性值。
delete方法的参数分别是：指定的对象，对象的属性。

    <div id="app">
        <div>
            学生信息：
            <input type="text" v-model="obj.name">
            <input type="text" v-model.number="obj.age">
            <button @click="addSex">添加性别</button>
            <button @click="delAge">删除年龄</button>
            <br>
            {{obj}}
        </div>
    </div>

        let vm = new Vue({
            el:'#app',
            data:{
                obj:{
                    name:'张三',
                    age:20,
                }
            },
            methods: {
                // 添加性别
                addSex(){
                    // 使用普通方法给对象后添加的属性，失去了响应式
                    // this.obj.sex = '男'

                    // vue通过set方法，给对象添加响应式属性
                    // Vue.set(this.obj,'sex','男')

                    // vue实例通过$set方法，给对象添加响应式属性
                    this.$set(this.obj,'sex','男')
                },
                // 删除年龄
                delAge(){
                    // 采用delete关键字删除对象的属性后，没有触发页面更新
                    // delete this.obj.age

                    // Vue的delete方法，删除对象的属性，并触发响应式
                    // Vue.delete(this.obj,'age')

                    // vue实例通过$delete方法，删除对象的属性，并触发响应式
                    this.$delete(this.obj,'age')
                }
            },
        })

2、更新数组

在vue中，操作数组只能通过以下方法，才能实现响应式：push()、pop()、unshift() 、shift()、splice()、reverse()、sort()。
如果想通过下标直接操作数组，也必须要使用Vue的sett和delete方法或者Vue实例的$set和$delete方法。
set方法的参数分别是：指定的数组，数组的下标，对应的数据。
delete方法的参数分别是：指定的数组，数组的下标。

    <div id="app">
        <div>
            数组：{{arr}}
            <button @click="updateArr">修改数据</button>
            <button @click="addArr">添加数据</button>
            <button @click="delArr">删除数据</button>
        </div>
    </div>

        let vm = new Vue({
            el:'#app',
            data:{
                arr:[11,22,33,44,55]
            },
            methods: {
                // 修改数组身上的成员
                updateArr(){
                    // 注意：直接利用索引设置数组项，不会触发页面更新
                    // this.arr[1] = 32

                    // vue通过set方法，可以利用索引直接设置一个数组项
                    // Vue.set(this.arr,1,32)

                    // vue实例通过$set方法，可以利用索引直接设置一个数组项
                    this.$set(this.arr,1,32)
                },
                // 添加数组的数据
                addArr(){
                    // this.arr[5] = 66    // 注意：采用这种方式，不会触发页面更新

                    // vue通过set方法，给数组添加响应式数据
                    // Vue.set(this.arr,5,66)

                    // vue实例通过$set方法，给数组添加响应式数据
                    this.$set(this.arr,5,66)
                },
                // 删除数组的数据
                delArr(){
                    // 采用delete关键字删除数组下标为2的元素后，没有触发页面更新
                    // delete this.arr[2]

                    // vue通过delete方法，给数组删除数据，并触发响应式
                    // Vue.delete(this.arr,2)

                    // vue实例通过$delete方法，给数组删除数据，并触发响应式
                    this.$delete(this.arr,2)
                }
            },
        })