单选框
v-model绑定一组单选框，每个单选框指定相同的属性
<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>
<script>
new Vue({
el:'#app',
data:{
sex:"女"
}
})
</script>
v-model绑定单个复选框，绑定一个boolean值
<div>
是否同意：<input type="checkbox" v-model="isOk">{{isOk}}
</div>
<script>
new Vue({
el:'#app',
data:{
isOk:false
}
})
</script>
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="敲代码">敲代码
<input v-model="hobbies" type="checkbox" value="睡觉">睡觉
<input v-model="hobbies" type="checkbox" value="看电影">看电影
<span style="color: red;">{{hobbies}}</span>
</div>
<script>
new Vue({
el:'#app',
data:{
hobbies:['吃饭','睡觉','打豆豆'],
}
})
</script>
绑定一组单选框，每个单选框指定相同的name属性。
<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: pink;">【{{sex}}】</span>
</div>
</div>
<script>
new Vue({
el:'#app',
data:{
sex:"女"
}
})
</script>
下拉框，绑定一个数组。
单选时：
<div id="app">
<div>
城市：
<select v-model="checkCity">
<option value="北京">北京</option>
<option value="上海">上海</option>
<option value="南京">南京</option>
<option value="武汉">武汉</option>
<option value="深圳">深圳</option>
</select>
<span style="color: pink;">{{checkCity}}</span>
</div>
</div>
<script>
new Vue({
el:'#app',
data:{
checkCity:'南京',
}
})
</script>
多选时 (绑定到一个数组)：
下拉框设置multiple属性后，按住ctrl就可以选择多个项
<div id="app">
<div>
喜欢的食物：
<select multiple v-model="checkFoods">
<option value="苹果">苹果</option>
<option value="香蕉">香蕉</option>
<option value="梨子">梨子</option>
<option value="汉堡">汉堡</option>
<option value="薯条">薯条</option>
<option value="咖啡">咖啡</option>
</select>
<span style="color: pink;">{{checkFoods}}</span>
</div>
</div>
<script>
new Vue({
el:'#app',
data:{
checkFoods:['苹果','香蕉','梨子','汉堡','薯条','咖啡']
}
})
</script>
修饰符/
1.添加了.lazy修饰符，可以将input事件转为change事件
在默认情况下，v-model在每次input事件触发后将输入框的值与数据进行同步。你可以添加 lazy修饰符，从而转为在 change事件之后进行同步：
姓名：<input type="text" v-model.lazy="name">{{name}}
2.添加了.number修饰符，会自动将你的输入转为number类型
年龄：<input type="text" v-model.number="age">{{age+20}}
3.添加了.trim修饰符，用于去掉内容的首位空格
姓名：<input type="text" v-model.lazy.trim="name">开始{{name}}结束
姓名：<input type="text" v-model.lazy.trim="name">开始{{name}}结束
二、绑定事件
@ 是v-on:的简写，通过v-on:指令绑定事件，指定一个methods选项里面的定义的方法。
调用方法时，不传参数，默认会将事件对象作为参数传递。
<div id="app">
<button @click="sayHi">sayHi</button>
</div>
<script>
new Vue({
el:'#app',
data:{
age:20
},
methods: {
sayHi(e){
console.log(e);
alert('Hi')
}
},
})
</script>
调用方法时，传的是什么参数，接的就是什么参数。
<div id="app">
<button @click="sayHello('hello')">sayHello</button>
</div>
<script>
new Vue({
el:'#app',
data:{
age:20
},
methods: {
sayHello(e){
console.log(e);
alert('Hello~')
}
},
})
</script>
调用方法时，传递一个$event参数，该参数就是事件对象。
<div id="app">
<button @click="sayNice('Nice',$event)">sayNice</button>
</div>
<script>
new Vue({
el:'#app',
data:{
age:20
},
methods: {
sayNice(msg,e){
console.log(e);
alert(msg)
}
},
})
</script>
当事件处理的代码比较简单时，可以将代码直接写在行内。
注意：只能操作Vue管理的数据。
<div>
年龄：{{age}}
</div>
<button @click="age++">年龄++</button>
<meta charset="utf-8">
事件修饰符
.stop用于阻止事件冒泡
.prevent 用于阻止默认行为
.self只能在自身元素上触发，不能在子元素身上触发触发的
.once点击事件将只会触发一次
按键修饰符/
.enter是回车键
.tab是tab键
.delete 是删除键和退格键
.esc是退出键
.space 是空格键
.up 是上箭头
.down 是下箭头
.left 是左箭头
.right是右箭头
<div>
<!-- 每次键盘弹起都会调用事件方法 -->
请输入搜索关键字：<input type="text" @keyup="keyup">
</div>
<div>
<!-- 只有在回车时，才会调用事件方法 -->
请输入搜索关键字：<input type="text" @keyup.enter="keyup1">
</div>
new Vue({
el:'#app',
data:{
age:20
},
methods: {
keyup(e){
let {keyCode} = e
// console.log(keyCode);
if (keyCode===13) {
alert('搜索指定的商品')
}
// console.log('111');
// console.log(e);
},
keyup1(){
alert('搜索指定的商品')
}
},
})
三、深度响应式
new Vue({
el:'#app',
data() {
return {
obj:{
name:'张三',
age:20,
},
arr:[11,22,33,44,55,66]
}
},
methods: {
addobj(){
this.$set(this.obj,'sex','男')
},
delobj(){
this.$delete(this.obj, 'age')
},
addarr(){
this.$set(this.arr, 3, 88)
},
delarr(){
this.$delete(this.arr,5)
}
}
})
Vue实例，在初始化的时候，会将对象身上的所有数据，做响应式处理，
之后再向对象中添加属性，这些属性就不再具备响应式能力了。
针对数组，只能通过以下方法，才能实现响应式：
push() pop() unshift() shift() splice() reverse() sort()
如何解决上面的问题？
通过Vue的set方法，更新指定的对象属性或数组成员；delete方法，删除指定对象的属性或数组的成员
学生信息：
<input type="text" v-model="obj.name">
<input type="text" v-model.number="obj.age"><br>
<button @click="addobj">添加性别</button><br>
<button @click="delobj">删除年龄</button>
<br>
{{obj}}
