(Vue -05) v-model指令 + 绑定事件 + 深度响应式

Vue官方-表单输入绑定

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

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

绑定一组单选框，每个单选框指定相同的name属性。

下拉框，绑定一个数组。

单选时：

多选时 (绑定到一个数组)：

下拉框设置multiple属性后，按住ctrl就可以选择多个项

在默认情况下， v-model 在每次 input 事件触发后将输入框的值与数据进行同步。你可以添加 lazy 修饰符，从而转为在 change 事件之后进行同步：

@ 是 v-on: 的简写，通过 v-on: 指令绑定事件，指定一个， methods 选项，里面的，定义的，方法。

Vue官方-事件修饰符

在事件处理程序中调用 event.preventDefault() 或 event.stopPropagation() 是非常常见的需求。尽管我们可以在方法中轻松实现这点，但更好的方式是：方法只有纯粹的数据逻辑，而不是去处理 DOM 事件细节。

为了解决这个问题，Vue.js 为 v-on 提供了事件修饰符。之前提过，修饰符是由点开头的指令后缀来表示的。

.stop 用于阻止事件冒泡

.prevent 用于阻止默认行为

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

.once 点击事件将只会触发一次

在监听键盘事件时，我们经常需要检查详细的按键。Vue 允许为 v-on 在监听键盘事件时添加按键修饰符：

.enter 只有在回车时，才会调用事件方法

.tab

.delete (捕获“删除”和“退格”键)

.esc

.space

.up

.down

.left

.right

obj对象里面的每一个属性，都会采用Object.defineProperty去封装，实现响应式。

所谓响应式，指的是，数据发生变化后，页面自动更新。

给对象，后添加的数据不会采用Object.defineProperty去封装，所以，就失去了响应式。

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

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

在vue中， *** 作数组，并触发页面更新只能使用数组的以下方法：

push，pop，unshift，shift，splice，resolve，sort

=>>> this.arr.push(66) this.arr.splice(2,1)

如果想通过下标 *** 作数组，也必须要使用 $set 和 $delete 方法，

=>>>this.$set(this.arr,5,66) this.$delete(this.arr,2)

    在表单标签中，v-model双向绑定的用法有所区别。

首先在data中定义好数据：

    在默认情况下，v-model在每次input 事件触发后将输入框的值与数据进行同步(除了上述输入法组合文字时)。可以添加lazy 修饰符,从而转为在change事件之后进行同步:

    如果想自动将用户的输入值转为数值类型，可以给 v-model 添加 number 修饰符,因为即使在 type="number" 时，HTML 输入元素的值也总会返回字符串。如果这个值无法被 parseFloat() 解析，则会返回原始的值。

    如果要自动过滤用户输入的首尾空白字符，可以给 v-model 添加 trim 修饰符：

     v-on:指令用来绑定事件，简写为 @ 可以指定一个事件方法，事件方法要在methods里面定义。

指定事件方法时，如果没有给方法传递参数，默认会传递一个事件对象参数

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

如果事件处理的逻辑比较简单，可以直接在行内编写：

    在监听键盘事件时，我们经常需要检查详细的按键。Vue 允许为 v-on 在监听键盘事件时添加按键修饰符：

可以直接将  KeyboardEvent.key  暴露的任意有效按键名转换为 kebab-case 来作为修饰符：

为了在必要的情况下支持旧浏览器，Vue 提供了绝大多数常用的按键码的别名：

Vue 无法检测 property 的添加或移除。由于 Vue 会在初始化实例时对 property 执行 getter/setter 转化，所以 property 必须在 data 对象上存在才能让 Vue 将它转换为响应式的。

对于已经创建的实例，Vue 不允许动态添加根级别的响应式 property。但是，可以使用 Vue.set(object, propertyName, value) 方法向嵌套对象添加响应式 property。例如：

您还可以使用 vm.$set 实例方法，这也是全局 Vue.set 方法的别名：

用delete方法，删除指定对象的属性或数组的成员

您还可以使用 vm.$delete实例方法，这也是全局 Vue.delete方法的别名：

// 针对数组，只能通过以下方法，才能实现响应式：push() pop() unshift() shift() splice() reverse() sort()

如果不使用以上方法，那么也可以使用set和delete方法

1.input绑定

2.多行文本域的绑定

3.单选框的绑定：在标签中绑定new Vue内命名的属性名称  例如下方的sex

4.复选框的绑定：v-model绑定单个复选框，绑定一个布尔值

5.绑定选择框，同理

v-model指令的修饰符

v-model指令默认触发的是input事件，当文本框的值发生变化后，立刻同步数据。

.lazy 修饰符，可以将input事件转换为change事件，当文本框失去焦点后，同步数据

    v-model.lazy=" name "   

.number 修饰符，会自动将你的输入转换为数字

 v-model.number=" name "

.trim修饰符，用于去除内容将首尾的空格

 v-model.lazy.trim=" name "

@是v-on的缩写，通过v-on:指令绑定事件，指定一个methods选项里面定义的方法

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

鼠标左键单击 @click =" 方法 " ；鼠标右键单击 @contextmenu =" 方法 " ；鼠标左键双击 @dblclick =" 方法 " ；

一般我们在方法中通过 e.preventdefault( ) 来 阻止默认行为 ，在vue中，通过事件修饰符 .prevent 来阻止默认行为，如下图

一般我们在方法中通过  e.stopProgation( )  来 阻止默认行为 ，在vue中，通过事件修饰符 .stop 来阻止默认行为，如下图

.once 修饰符，用只绑定一次事件方法，即点击效果只执行一次，后面再点击就没有效果。

.self 修饰符，只能在自身元素上触发，不能再子元素上触发。（和阻止冒泡.prevent相似）

keyup与keydown键盘事件

.enter 修饰符，回车时，调用事件方法 

同理      .enter   .tab    .delete   .esc   .space   .up   .down   .left   .right

1.obj对象里面的每一个属性，都会采用  Object.defineProperty  去封装， 实现响应式 。所谓响应式，指的是数据发生变化后，页面自动更新。给对象后添加的数据不会采用Object.Property去封装，所以，就失去了响应式。如下文

this.obj.sex=" 男 "

vue 通过   $ set  方法，给对象添加响应式属性，如下文

this.$set ( this.obj , 'sex' , ' 男 ' )    ，使用这种方法给对象后添加的属性可以再页面中响应式显示。

2. 删除属性同理 ： this.delete( this.obj , 'age')

3. 添加数组的数据   在vue中， *** 作数据，并触发页面更新只能使用数组的以下方法：

    push,pop,unshift,shift,splice,resolve,sort

---