一、v-model指令的详细用法

1、定义vue对象里面的内容

 <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.14/vue.js"></script>
    <script>
        new Vue({
            el:'#app',
            data:{
               name:"张三",
               sex:'男',
               age:20,
               isOK:true,
               address:'江苏省南京市雨花台区赛虹桥街道小行路125号',
               hobbies:['唱歌','写词','看书','画画'],
               citys:'南京',
               foods:['梨子','苹果','香蕉','草莓','葡萄']
            }
        })
    </script>

2、v-model绑定一组单选框，每个单选框指定相同的属性

 <div>
          <!-- v-model绑定一组单选框，每个单选框指定相同的属性 -->
          性别：
          <input v-model='sex' type="radio" value="男" name="sex">男
          <input v-model='sex' type="radio" value="女" name="sex">女
          <span style="color: blue;">{{sex}}</span>
      </div>

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

 <!-- v-model指令，绑定多行文本框的内容，实现双向数据绑定 -->
      <div>
          地址：
          <textarea v-model='address' id="" cols="30" rows="10">{{address}}</textarea>
          <span style="color: blue;">{{address}}</span>
      </div>

4、v-medel绑定单个复选框，绑定一个Boolean值

 <div>
          <!-- v-medel绑定单个复选框，绑定一个Boolean值 -->
          是否同意：
          <input type="checkbox" v-model='isOK'>{{isOK}}
      </div>

5、v-model绑定多个复选框，绑定同一个数组

<!-- v-model绑定多个复选框，绑定同一个数组 -->
      <div>
          爱好：
          <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="看电影">看电影
          <span style="color: blue;">{{hobbies}}</span>
        </div>

6、通过v-model可以给下拉框绑定一个属性

<!-- 通过v-model可以给下拉框绑定一个属性 -->
        <div>
            城市：
            <select name="" id="" v-model='citys'>
                <option value="北京">北京</option>
                <option value="南京">南京</option>
                <option value="上海">上海</option>
                <option value="成都">成都</option>
            </select>
            <span style="color: blue;">{{citys}}</span>
        </div>

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

 <!--下拉框设置multiple属性后，就可以选择多个项,通过v-model可以给下拉框绑定一个数组 -->
        <div>
            喜欢的水果：
            <select name="" id="" multiple v-model='foods'>
                <option value="香蕉">香蕉</option>
                <option value="苹果">苹果</option>
                <option value="草莓">草莓</option>
                <option value="樱桃">樱桃</option>
                <option value="橘子">橘子</option>
                <option value="葡萄">葡萄</option>
                <option value="柚子">柚子</option>
            </select>
            <span style="color: blue;">{{foods}}</span>
        </div>

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

 <!-- v-model指令，添加.number修饰符，在修改文本框内容时，会将修改后的内容转为number类型 -->
      <div>
          年龄：
          <input type="text" v-model.number='age'>{{age+20}}
      </div>

9、v-model指令默认触发的是input事件，当文本框的值发生变化时，实现双向数据绑定。添加.lazy修饰符，可以input事件转为change事件。.trim用于去掉内容的首尾空格。

  <!-- v-model指令默认触发的是input事件，当文本框的值发生变化时，实现双向数据绑定 -->
        <!-- 添加.lazy修饰符，可以input事件转为change事件 -->
        <!-- .trim用于去掉内容的首尾空格 -->
      <div>
          姓名：
          <input type="text" v-model.lazy.trim='name'>
          <span style="color: blue;">开始{{name}}结束</span>
      </div>

二、绑定事件

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

 <!-- @是v-on的简写，通过v-on指令绑定事件，指定一个methods选项里面定义的方法，调用方法时不传参数，默认将事件对象作为参数。-->
       <button @click='sayHi'>sayHi</button>

 methods: {
                sayHi(e){
                    console.log(e)
                    alert('Hi')
                },
}

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

 <!-- 调用方法时，传的什么参数，接的就是什么参数 -->
       <button @click="sayHello('Hello')">sayHello</button>

methods:{
        sayHello(e){
                    console.log(e);
                    alert('Hello')
                },
}

3、调用方法时，传递一个$event参数，该参数就是事件对象

 <!-- 调用方法时，传递一个$event参数，该参数就是事件对象 -->
       <button @click="sayNice('Nice',$event)">sayNice</button>

methods:{
      sayNice(msg,e){
                    console.log(e);
                    alert(msg)
                },
}

4、当前时间处理代码比较简单时，可以将代码直接写在行内，注意：只能操作Vue管理的数据

<div>
           年龄：{{age}}
       </div>
       <!-- 当前时间处理代码比较简单时，可以将代码直接写在行内，注意：只能操作Vue管理的数据。 -->
       <button @click='age++'>年领++</button>

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

5、事件修饰符.prevent,用于阻止事件默认行为

<!-- 事件修饰符.prevent,用于阻止事件默认行为 -->
       <div class="box" @contextmenu.prevent="showbox">
           box
       </div>

methods:{
      showbox(e){
                   console.log('你好box！');
                },

6、事件修饰符.once，用于只绑定一次事件方法。.stop，用于阻止事件冒泡。

 <!-- 事件修饰符.once，用于只绑定一次事件方法 -->
       <div class="one" @click.once='one'>
           <!-- .stop，用于阻止事件冒泡 -->
           <div class="two" @click.stop='two'></div>
       </div>

 .one{
            width: 100px;
            height: 100px;
            background-color: burlywood;
        }
        .two{
            width: 50px;
            height: 50px;
            background-color: chartreuse;
        }

methods:{
     one(){
                    console.log('你好，我是one');
                },
                two(){
                    console.log('你好，我是two');
                },
}

7、.self，只能在自身元素上触发，不能在子元素上触发

<!-- .self，只能在自身元素上触发，不能在子元素上触发 -->
       <div class="box2" @click.self='showbox2'>
           <div class="box3"></div>
       </div>

 .box2{
            width: 100px;
            height: 100px;
            background-color: cyan;
        }
        .box3{
            width: 50px;
            height: 50px;
            background-color: darkmagenta;
        }

methods:{
      showbox2(){
                    console.log('你好，我是box2');
                },
}

8、每次键盘弹起都会调用事件方法

 <!-- 每次键盘弹起都会调用事件方法 -->
       <div>
           搜索指定关键字：<input type="text" @keyup='keyup'>
       </div>

methods:{
      keyup(e){
                    let {keyCode}=e
                    if(keyCode===13){
                       alert('按回车键啦')
                    }
                },
}

9、只在回车时，才会调用事件方法

 <!-- 只在回车时，才会调用事件方法 -->
       <div>
           搜索指定关键字：<input type="text" @keyup.enter='keyup1'>
       </div>

methods:{
      keyup1(){
                    alert('按回车键啦啦！')
                }
}

三、深度响应式

Vue实例，在初始化的时候，会将对象身上的所有数据，做响应式处理，
之后再向对象中添加属性，这些属性就不再具备响应式能力了。
针对数组，只能通过以下方法，才能实现响应式：push() pop() unshift() shift() splice() reverse() sort()
如何解决上面的问题？
方式1：通过Vue的set方法，更新指定的对象属性或数组成员；delete方法，删除指定对象的属性或数组的成员
方式2：通过Vue实例的delete方法，删除指定对象的属性或数组的成员

1、创建vue容器

<div id="app">
       <div>
          姓名：<input type="text" v-model="name">{{name}}
       </div>
       <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>
           数组：{{arr}}
        <button @click='addArr'>添加数据</button>
        <button @click='delArr'>删除数据</button>
       </div>
    </div>

2、创建vue对象

 new Vue({
            el:'#app',
            data:{
                //基本类型数据
                name:"张三",
                //对象类型数据
                obj:{
                    name:'张三',
                    age:22
                },
                arr:[11,22,33,44,55]
            },

3、方法

methods: {
                //添加性别
                addSex(){
                    //obj对象里面的每一个属性，都会采用object.defineProperty去封装，实现响应式。
                    //所谓响应式，指的是，数据发生变化后，页面自动更新。
                    //给对象后添加的数据不会采用object.defineProperty去封装，所以就失去了响应式。
                    // this.obj.sex='男'
                    //vue通过$set方法，给对象添加响应式属性
                    // Vue.set(this.obj,'sex','女')
                    this.$set(this.obj,'sex','男')
                },
                //删除年龄
                delAge(){
                    //采用delete关键字删除对象的属性后，也没有触发页面更新
                    // delete this.obj.age
                    //vue通过$delete方法，删除对象的属性，并触发响应式
                    // Vue.delete(this.obj,'age')
                    this.$delete(this.obj,'age')
                },
                //添加数组的数据
                addArr(){
                    //this.arr[5]=66
                    //注意：采用这种方法，不会触发页面更新
                    //在vue中，操作数组，并触发页面更新只能使用数组的一下方法：
                    //push,pop,unshift,shift,splice,reverse,sort
                    //this.arr.push(66)
                    //如果想通过下标操作数组，也必须要使用$set和$delete方法
                    // Vue.set(this.arr,1,99)
                    this.$set(this.arr,5,66)
                },
                //删除数组的数据
                delArr(){
                    // this.arr.splice(2,1)
                    // Vue.delete(this.arr,0)
                    this.$delete(this.arr,2)
                }
            },