上篇：VUE从入门到入坑—03.样式绑定 / 计算属性 / 监听|侦听器 / 局部|全局过滤器
一、v-model指令
Vue中经常使用到和{{address}}
VUE从入门到入坑—04.v-model指令 / 事件绑定指令 / 修饰符 / 深度响应式
上篇：VUE从入门到入坑—03.样式绑定 / 计算属性 / 监听|侦听器 / 局部|全局过滤器
new Vue({
el:'#app',
data:{
addrsess:'江苏省，南京市，雨花台区'
}
})
3.绑定一组单选按钮，每个单选按钮通过v-model绑定相同的属性。
性别：
男
女
{{sex}}
new Vue({
el:'#app',
data:{
sex:'g'
}
})
4.单个复选框，通过v-model绑定一个布尔值。
是否同意：{{isOk}}
new Vue({
el:'#app',
data:{
isOk: false
}
})
5.多个复选框，通过v-model绑定到同一个数组。
喜好：
吃饭
睡觉
打泡泡
唱歌
喝酒
{{hobbies}}
new Vue({
el:'#app',
data:{
hobbies:['吃饭','睡觉','打泡泡']
}
})
6.单选择下拉框时，下拉框绑定一个属性。
城市：
{{city}}
new Vue({
el:'#app',
data:{
city: '南京'
}
})
7.多选择下拉框时，给下拉框绑定一个数组，下拉框设置multiple属性后，选择多个项。
喜欢的食物：
下拉框设置multiple属性后，就可以选择多个项。
{{foods}}
new Vue({
el:'#app',
data:{
foods:['苹果','草莓','蛋糕']
}
})
二、v-model修饰符
1..lazy修饰符
添加了.lazy修饰符，可以将input事件转为change事件，在文本框失去焦点后再更新数据。
姓名：{{name}}
new Vue({
el:'#app',
data:{
name:"萌新"
}
})
2..number修饰符
.number修饰符，在修改文本框内容时，会将修改后的内容转为number类型。
年龄：{{age+20}}
new Vue({
el:'#app',
data:{
age: 18
}
})
3..trim修饰符
trim修饰符，在修改文本框内容时，会自动过滤内容的首尾空格。
姓名：开始{{name}}结束
new Vue({
el:'#app',
data:{
name:"萌新"
}
})
三、事件处理
@是v-on:的简写，通过v-on:指令绑定事件。
1.事件绑定方法不传参
通过v-on:指令绑定事件，指定一个methods选项里面的定义的方法，调用方法时，不传参数，默认会将事件对象作为参数传递。
new Vue({
el:'#app',
methods: {
sayHi(e){
console.log(e); 打印事件对象
alert('Hi！')
}
}
})
2.事件绑定方法传参
调用方法时，传的是什么参数，接的就是什么参数。
new Vue({
el:'#app',
methods: {
sayHello(e){
console.log(e); 打印‘hello’
alert('Hello！')
}
}
})
3.事件绑定方法既传参又传递事件对象
如果传递了一个参数，又想再传递事件对象参数，就要通过$event关键字设置参数，该参数就是事件对象。
new Vue({
el:'#app',
methods: {
sayNice(msg,e){
console.log(e); 打印事件对象
alert(msg) 弹出消息‘Nice’
}
}
})
4.行内方法
当事件梳理的代码比较简单时，可以将代码直接写在行内，注意：只能操作vue管理的数据。
new Vue({
el:'#app',
data:{
age:18
}
})
四、事件修饰符
1..prevent修饰符，在事件处理程序中调用 event.preventDefault() 阻止默认行为，可以通过.prevent事件修饰符，阻止默认行为。
new Vue({
el:'#app',
methods: {
showbox(e){
// e.preventDefault() 阻止默认行为
console.log('你好,我是box');
}
},
})
2..stop修饰符，在事件处理程序中调用 event.stopPropagation() 阻止事件冒泡，可以通过.stop事件修饰符绑定给子元素，阻止事件冒泡。
new Vue({
el:'#app',
methods: {
one(){
console.log('你好，我是one');
},
two(e){
// e.stopPropagation() 阻止事件冒泡
console.log('你好，我是two');
}
},
})
3.once修饰符，让事件方法只执行一次。
new Vue({
el:'#app',
methods: {
one(){
console.log('你好，我是once');
},
two(e){
// e.stopPropagation() 阻止事件冒泡;
console.log('你好，我是two');
}
},
})
4..self修饰符，控制事件在当前元素自身触发，不在内部元素身上触发，和.stop修饰符有点相像，区别就是self是绑定给父元素的。
new Vue({
el:'#app',
methods: {
one(){
console.log('你好，我是self');
},
two(){
console.log('你好，我是two');
}
},
})
五、按键修饰符
Vue针对键盘事件，提供了按键修饰符。按键修饰符也可以用按键码（keyCode）代替，例如：enter可以用.13代替。注意：Vue3中取消了按键码。
一共有9个按键修饰符，分别是：.enter 是回车键，.tab 是tab键，.delete 是删除键和退格键，.esc 是退出键，.space 是空格键，.up 是上箭头，.down 是下箭头，.left 是左箭头，.right 是右箭头
请输入搜索关键字：
请输入搜索关键字：
new Vue({
el:'#app',
methods: {
keyup(e){
let {keyCode} = e
if(keyCode===13){
alert('搜索指定的商品')
}
},
keyup1(){
alert('搜索指定的商品')
}
}
})
六、深度响应式
1.Vue实例在初始化的时候，会将obj对象身上的所有数据，采用Object.defineProperty去封装，做响应式处理。所谓响应式，指的是数据发生变化后，页面自动更新。
2.但是给对象后添加的数据不会采用Object.defineProperty去封装，所以就不再具备响应式能力了。
3.实现后添加的数据也具备响应式能力，有以下两种方式：
(1)通过Vue的set方法，更新指定的对象属性或数组成员；delete方法，删除指定对象的属性或数组的成员。
(2)通过Vue实例的$set方法，更新指定的对象属性或数组成员，$delete方法，删除指定对象的属性或数组的成员。
4.更新对象例子
set方法的参数分别是：指定的对象，对象的属性，属性值。
delete方法的参数分别是：指定的对象，对象的属性。
学生信息：
{{obj}}
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')
}
},
})
5.更新数组例子
(1)在Vue中，操作数组只能通过以下方法，才能实现响应式：push()、pop()、unshift() 、shift()、splice()、reverse()、sort()。
(2)如果想通过下标直接操作数组，也必须要使用Vue的sett和delete方法或者Vue实例的$set和$delete方法。
set方法的参数分别是：指定的数组，数组的下标，对应的数据。
delete方法的参数分别是：指定的数组，数组的下标。
数组：{{arr}}
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)
}
},
})