目录
一、Vue监视数据的原理
1.Vue监视数据范围
Vue会监视data中所有层次的数据
data:{
student:{
name:'Tom',
age:11,
hobby:['吃饭','睡觉','打游戏'],
friends:[
{name:'Jerry',age:22},
{name:'Tong',age:11}
]
}
},
2.如何监测对象中的数据
通过setter实现监视，且要在new Vue时就传入要监测的数据
（1）对象中后追加的属性，Vue默认不做响应式处理
（2）如需给后添加的属性做响应式，请使用如下API：
Vue.set(target,propertyName/index,value)或
vm.$set(target,propertyName/index,value)
3.如何监测数组中的数据
通过包裹数组更新元素的方法实现，本质就是做了两件事：
（1）调用原生对应的方法对数组进行更新
（2）重新解析模板，进而更新页面
4.在Vue修改数组中的某个元素一定要用如下的方法：
1.使用这些API：（以下表格中的API都会修改原数组）
| push() | 将一个或多个元素添加到数组的末尾 |
| shift() | 从数组中删除第一个元素 |
| unshift() | 将一个或多个元素添加到数组的开头 |
| splice() | 通过删除或替换现有元素或者原地添加新的元素来修改数组 |
| sort() | 对数组的元素进行排序 |
| reverse() | 将数组中元素的位置颠倒 |
2.Vue.set()或vm.$set()
特别注意：Vue.set() 和 vm.$set() 不能给vm 或 vm的根数据对象 添加属性！！！
5.案例展示
<body>
<div id="root">
<h1>学生信息</h1>
<button @click="student.age++">年龄+1岁</button><br>
<button @click="addSex">添加性别属性，默认值：男</button><br>
<button @click="student.sex='未知'">修改性别</button><br>
<button @click="addFriend">在列表首位添加一个朋友</button><br>
<button @click="updateFristFridendName">修改第一个朋友的名字为：张三</button><br>
<button @click="addHobby">添加一个爱好</button><br>
<button @click="updateFirstHobby">修改第一个爱好为：开车</button><br>
<button @click="removeEat">过滤掉爱好中的吃饭</button><br>
<h2>学生姓名：{
{student.name}}</h2>
<h2>学生年龄：{
{student.age}}</h2>
<h2 v-if="student.sex">学生性别：{
{student.sex}}</h2>
<h2>爱好</h2>
<ul>
<li v-for='(h,index) in student.hobby' :key='index'>
{
{h}}
</li>
</ul>
<h2>朋友们</h2>
<ul>
<li v-for="(f,index) in student.friends" :key="index">
{
{f.name}}--{
{f.age}}
</li>
</ul>
</div>
</body>
<script>
Vue.config.productionTip = false
const vm = new Vue({
el:'#root',
data:{
student:{
name:'Tom',
age:11,
hobby:['吃饭','睡觉','打游戏'],
friends:[
{name:'Jerry',age:22},
{name:'Tong',age:11}
]
}
},
methods: {
addSex(){
//Vue.set(vm.student,'sex','男')
this.$set(vm.student,'sex','男')
},
addFriend(){
this.student.friends.unshift({name:'Jack',age:99})
},
updateFristFridendName(){
this.student.friends[0].name = '张三'
this.student.friends[0].age = 2
},
addHobby(){
this.student.hobby.push('学习')
},
updateFirstHobby(){
//this.student.hobby.splice(0,1,'开车')
//Vue.set(this.student.hobby,0,'开车')
this.$set(this.student.hobby,0,'开车')
},
removeEat(){
this.student.hobby=this.student.hobby.filter((h)=>{
return h!=='吃饭'
})
}
},
})
</script>二、收集表单数据
若：<input type="text"/> 则v-model收集的是value值，用户输入的就是value值。
若：<input type="radio"/> 则v-model收集的是value值，且要给标签配置value值。
若：<input type="checkbox"/>
1.没有配置input的value属性，那么收集的就是checked(勾选 or 未勾选，是布尔值)
2.配置input的value属性：
(1)v-model的初始值是非数组，那么收集的就是checked(勾选 or 未勾选，是布尔值)
(2)v-model的初始值是数组，那么收集的就是value组成的数组
备注：
| lazy | 失去焦点再收集数据 |
| number | 输入字符串转为有效的数字 |
| trim | 输入首位空格过滤 |
案例：
<body>
<div id="root">
<form @submit.prevent='demo'>
账号：<input type="text" v-model.trim='userInfo.account'><br><br>
密码：<input type="text" v-model='userInfo.password'><br><br>
年龄：<input type="number" v-model.number='userInfo.age'><br><br>
性别：
男<input type="radio" name="sex" v-model='userInfo.sex' value='male'>
女<input type="radio" name="sex" v-model='userInfo.sex' value='female'><br><br>
爱好：
学习<input type="checkbox" v-model='userInfo.hobby' value='study'>
打游戏<input type="checkbox" v-model='userInfo.hobby' value='game'>
吃饭<input type="checkbox" v-model='userInfo.hobby' value='eat'>
<br><br>
所属校区
<select v-model='userInfo.area'>
<option>请选择校区</option>
<option value="yanta">雁塔校区</option>
<option value="changan">长安校区</option>
</select><br><br>
其他信息：
<textarea v-model.lazy='userInfo.other'></textarea><br><br>
<input type="checkbox" v-model='userInfo.agree'> 阅读并接受<a href="www.baidu.com">《用户协议》</a>
<button>提交</button>
</form>
</div>
</body>
<script>
Vue.config.productionTip = false
new Vue({
el: "#root",
data: {
userInfo: {
account: '',
password: '',
age:1,
sex: 'female',
hobby: [],
area: 'changan',
other: '',
agree: ''
}
},
methods: {
demo() {
console.log(JSON.stringify(this.userInfo));
}
},
})
</script>账号密码输入框中的 type="text" ，收集到的数据就是输入的值；
年龄输入框中的 type="number"，输入框内只能输入数字，v-model.number又使输入框内的内容转为了有效的数字；
性别选项框中的 type="radio"，需要配置value值分别为“male”和“female”，v-model收集到的是value值；
爱好选项框中的 type="checkbox" ，需要配置value属性并且使v-model的初始值为一个空数组，则收集到的数据就是value的值所组成的数组。