V-model指令

v-model 指令在表单 <input>、<textarea> 及 <select> 元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。

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

v-model设置复选框按钮

  <div>
            <!-- v-model绑定单个复选框，绑定一个boolean值 -->
            是否同意：<input type="checkbox" v-model="isOk">{{isOk}}
        </div>
        <div>
            <!-- v-model绑定多个个复选框，绑定同一个数组-->
            爱好：
            <input v-model="hobbies" type="checkbox" value="抽烟">抽烟
            <input v-model="hobbies" type="checkbox" value="喝酒">喝酒
            <input v-model="hobbies" type="checkbox" value="烫头">烫头
         // 并且输出出来，会根据数值变化所展示出来
            <span style="color: red;">{{hobbies}}</span>
        </div>

修饰符

.lazy .trim

v-model指令默认触发的是input事件，当文本框的值发生变化后，离开同步给数据，
添加了.lazy修饰符，可以将input事件转为change事件 （change事件当元素的值发生改变时，会发生 change 事件。）
添加了.trim修饰符，用于去掉内容的首尾空格

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

.number

如果想自动将用户的输入值转为数值类型，可以给 v-model 添加 number 修饰符：

// .number修饰符，会自动将你的输入转为number 
            年龄：<input type="text" v-model.number="age">{{age+20}}

内联处理器中的方法

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

  <button @click="sayHi">sayHi</button>

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

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

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

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

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

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

事件修饰符

.prevent - 用于阻止默认行为

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

.once - 用只绑定一次事件方法 ，.stop，用于阻止事件冒泡

 <div class="one" @click.once="one">
            <!-- .stop，用于阻止事件冒泡 -->
            <div class="two" @click.stop="two"></div>
        </div>

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

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

按键修饰符

共有：.enter(回车) ，.tab（切换） ， .delete（shanchu ） ， .esc(取消) ， .space（空格） , .up（方向上） ， .down（方向下） ， .left（方向下） ， .right （方向右）

   请输入搜索关键字：<input type="text" @keyup.enter="keyup1">

深度响应式

<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>
  addSex(){
                    // obj对象里面的每一个属性，都会采用Object.defineProperty去封装，实现响应式
                    // 所谓响应式，指的是，数据发生变化后，页面自动更新。
                    // 给对象后添加的数据不会采用Object.defineProperty去封装，所以，就失去了响应式。
                    // this.obj.sex = '男'
                    // vue通过$set方法，给对象添加响应式属性
                    this.$set(this.obj,'sex','男')
                },
                //删除年龄
                delAge(){
                    // 采用delete关键字删除对象的属性后，也没有触发页面更新
                    // delete this.obj.age
                    // vue通过$delete方法，删除对象的属性，并触发响应式
                    this.$delete(this.obj,'age')
                }