第一章 Vue核心 第十二节 数据监测
12.1 列表渲染
v-for指令
1.用于展示列表数据
2.语法：v-for="(item, index) in xxx" :key="yyy" 其中yyy为唯一值，item为值，index为对象key 或 索引
3.可遍历：数组、对象、字符串（用得少）、指定次数（用得少）
示例代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>列表渲染</title>
<script src="../lib/vue.js"></script>
<link rel="stylesheet" href="../../鼠标指针样式.css"/>
</head>
<body>
<!--准备好一个容器-->
<div id="root">
<h2>测试遍历数组</h2>
<ul>
<li v-for="(p,index) in persons" :key="index">
{{index}} - {{p.id}} - {{p.name}} - {{p.age}}
</li>
</ul>
<h2>测试遍历对象</h2>
<ul>
<li v-for="(value,key) in car" :key="key">
{{key}} - {{value}}
</li>
</ul>
<h2>测试遍历字符串（用得少）</h2>
<ul>
<li v-for="(ch,index) in str" :key="index">
{{index}} - {{ch}}
</li>
</ul>
<h2>测试遍历指定次数（用得少）</h2>
<ul>
<li v-for="(number, index) in 8" :key="index">
{{index}} - {{number}}
</li>
</ul>
</div>
<script type="text/javascript">
Vue.config.productionTip = false;
new Vue({
el:'#root',
data:{
persons:[
{id:'001',name:'赵开',age:20},
{id:'002',name:'钱天',age:19},
{id:'003',name:'孙辟',age:23},
{id:'004',name:'李地',age:22},
{id:'005',name:'何以',age:21}
],
car:{
name:'audios',
price:'80w',
color:'black'
},
str:'abcdefghijklmnopqrstuvwxyz'
}
});
</script>
</body>
</html>
12.2 key的原理&列表过滤
示例代码：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>key的原理&列表过滤</title> <script src="../lib/vue.js"></script> <link rel="stylesheet" href="../../鼠标指针样式.css"/> </head> <body> <!--准备一个容器--> <div id="root"> <input type="text" placeholder="请输名字..." v-model="keyWord"/> <button @click="sortType = 2">年龄升序</button> <button @click="sortType = 1">年龄降序</button> <button @click="sortType = 0">原顺序</button> <ul> <li v-for="p in filPersons" :key="p.id"> {{p.id}} ---- {{p.name}} ---- {{p.age}} ---- {{p.sex}} </li> </ul> </div> <script type="text/javascript"> Vue.config.productionTip = false; //汉字常用字unicode吗表 487个 let base = "\u7684\u4e00\u4e86\u662f\u6211\u4e0d\u5728\u4eba\u4eec\u6709\u6765\u4ed6\u8fd9\u4e0a\u7740" + "\u4e2a\u5730\u5230\u5927\u91cc\u8bf4\u5c31\u53bb\u5b50\u5f97\u4e5f\u548c\u90a3\u8981\u4e0b" + "\u770b\u5929\u65f6\u8fc7\u51fa\u5c0f\u4e48\u8d77\u4f60\u90fd\u628a\u597d\u8fd8\u591a\u6ca1" + "\u4e3a\u53c8\u53ef\u5bb6\u5b66\u53ea\u4ee5\u4e3b\u4f1a\u6837\u5e74\u60f3\u751f\u540c\u8001" + "\u4e2d\u5341\u4ece\u81ea\u9762\u524d\u5934\u9053\u5b83\u540e\u7136\u8d70\u5f88\u50cf\u89c1" + "\u4e24\u7528\u5979\u56fd\u52a8\u8fdb\u6210\u56de\u4ec0\u8fb9\u4f5c\u5bf9\u5f00\u800c\u5df1" + "\u4e9b\u73b0\u5c71\u6c11\u5019\u7ecf\u53d1\u5de5\u5411\u4e8b\u547d\u7ed9\u957f\u6c34\u51e0" + "\u4e49\u4e09\u58f0\u4e8e\u9ad8\u624b\u77e5\u7406\u773c\u5fd7\u70b9\u5fc3\u6218\u4e8c\u95ee" + "\u4f46\u8eab\u65b9\u5b9e\u5403\u505a\u53eb\u5f53\u4f4f\u542c\u9769\u6253\u5462\u771f\u5168" + "\u624d\u56db\u5df2\u6240\u654c\u4e4b\u6700\u5149\u4ea7\u60c5\u8def\u5206\u603b\u6761\u767d" + "\u8bdd\u4e1c\u5e2d\u6b21\u4eb2\u5982\u88ab\u82b1\u53e3\u653e\u513f\u5e38\u6c14\u4e94\u7b2c" + "\u4f7f\u5199\u519b\u5427\u6587\u8fd0\u518d\u679c\u600e\u5b9a\u8bb8\u5feb\u660e\u884c\u56e0" + "\u522b\u98de\u5916\u6811\u7269\u6d3b\u90e8\u95e8\u65e0\u5f80\u8239\u671b\u65b0\u5e26\u961f" + "\u5148\u529b\u5b8c\u5374\u7ad9\u4ee3\u5458\u673a\u66f4\u4e5d\u60a8\u6bcf\u98ce\u7ea7\u8ddf" + "\u7b11\u554a\u5b69\u4e07\u5c11\u76f4\u610f\u591c\u6bd4\u9636\u8fde\u8f66\u91cd\u4fbf\u6597" + "\u9a6c\u54ea\u5316\u592a\u6307\u53d8\u793e\u4f3c\u58eb\u8005\u5e72\u77f3\u6ee1\u65e5\u51b3" + "\u767e\u539f\u62ff\u7fa4\u7a76\u5404\u516d\u672c\u601d\u89e3\u7acb\u6cb3\u6751\u516b\u96be" + "\u65e9\u8bba\u5417\u6839\u5171\u8ba9\u76f8\u7814\u4eca\u5176\u4e66\u5750\u63a5\u5e94\u5173" + "\u4fe1\u89c9\u6b65\u53cd\u5904\u8bb0\u5c06\u5343\u627e\u4e89\u9886\u6216\u5e08\u7ed3\u5757" + "\u8dd1\u8c01\u8349\u8d8a\u5b57\u52a0\u811a\u7d27\u7231\u7b49\u4e60\u9635\u6015\u6708\u9752" + "\u534a\u706b\u6cd5\u9898\u5efa\u8d76\u4f4d\u5531\u6d77\u4e03\u5973\u4efb\u4ef6\u611f\u51c6" + "\u5f20\u56e2\u5c4b\u79bb\u8272\u8138\u7247\u79d1\u5012\u775b\u5229\u4e16\u521a\u4e14\u7531" + "\u9001\u5207\u661f\u5bfc\u665a\u8868\u591f\u6574\u8ba4\u54cd\u96ea\u6d41\u672a\u573a\u8be5" + "\u5e76\u5e95\u6df1\u523b\u5e73\u4f1f\u5fd9\u63d0\u786e\u8fd1\u4eae\u8f7b\u8bb2\u519c\u53e4" + "\u9ed1\u544a\u754c\u62c9\u540d\u5440\u571f\u6e05\u9633\u7167\u529e\u53f2\u6539\u5386\u8f6c" + "\u753b\u9020\u5634\u6b64\u6cbb\u5317\u5fc5\u670d\u96e8\u7a7f\u5185\u8bc6\u9a8c\u4f20\u4e1a" + "\u83dc\u722c\u7761\u5174\u5f62\u91cf\u54b1\u89c2\u82e6\u4f53\u4f17\u901a\u51b2\u5408\u7834" + "\u53cb\u5ea6\u672f\u996d\u516c\u65c1\u623f\u6781\u5357\u67aa\u8bfb\u6c99\u5c81\u7ebf\u91ce" + "\u575a\u7a7a\u6536\u7b97\u81f3\u653f\u57ce\u52b3\u843d\u94b1\u7279\u56f4\u5f1f\u80dc\u6559" + "\u70ed\u5c55\u5305\u6b4c\u7c7b\u6e10\u5f3a\u6570\u4e61\u547c\u6027\u97f3\u7b54\u54e5\u9645" + "\u65e7\u795e\u5ea7\u7ae0\u5e2e\u5566\u53d7\u7cfb\u4ee4\u8df3\u975e\u4f55\u725b\u53d6\u5165" + "\u5cb8\u6562\u6389\u5ffd\u79cd\u88c5\u9876\u6025\u6797\u505c\u606f\u53e5\u533a\u8863\u822c" + "\u62a5\u53f6\u538b\u6162\u53d4\u80cc\u7ec6"; let persons = [{id:'000',name:'何以之',age:20,sex:'男'}]; for(let i=0;i<99;i++){ let id = ((i+1).toString().length === 1 ? '00':'0')+(i+1); let name = ''; while(true){ let n = base.charAt(randomNum(0,487)); if(n !== ' ') name += n; if(name.length===3) break; } let p = {id:id,name:name,age:randomNum(10,99),sex:Math.floor(Math.random())===1 ? '男' : '女'}; persons.push(p); } new Vue({ el:'#root', data:{ persons, keyWord:'', //filPersons:[], sortType:0 //0 原顺序，1 降序，2 升序 }, //watch实现 /*watch:{ keyWord: { immediate:true, handler(val) { this.filPersons = this.persons.filter((p)=>{ return p.name.indexOf(val) !== -1; }); } } }*/ //computed实现 computed:{ filPersons(){ let result = this.persons.filter((p)=>{ return p.name.indexOf(this.keyWord) !== -1; }); if(this.sortType){ result = result.sort((p1,p2)=>{ return this.sortType === 1 ? p2.age - p1.age : p1.age - p2.age; }); } return result; } } }); //生成从minNum到maxNum的随机数 function randomNum(minNum,maxNum){ switch(arguments.length){ case 1: return parseInt(Math.random()*minNum+1,10); break; case 2: return parseInt(Math.random()*(maxNum-minNum+1)+minNum,10); break; default: return 0; break; } } </script> </body> </html>
12.3 Vue.set的使用
示例代码：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Vue.set 的使用</title> <script src="../lib/vue.js"></script> <link rel="stylesheet" href="../../鼠标指针样式.css"/> <style> .box{ font-weight: bold; } .box1{ float: left; padding: 10px; } ul{ float:left; width:auto; min-width:113px; } ul li{ overflow:hidden; border-top: 1px solid lightgray; border-bottom: 1px solid lightgray; width: auto; white-space:nowrap; } </style> </head> <body> <!--准备一个容器--> <div id="root"> <h1>学校信息</h1> <h2>名称：{{school.name}}</h2> <h2>地址：{{school.address}}</h2> <h2>校长：{{school.leader}}</h2> <hr/> <h1>学生信息</h1> <h2>姓名：{{student.name}}</h2> <button @click="addSex" v-if="show">点击添加性别信息</button> <h2 v-if="student.sex">性别：{{student.sex}}</h2> <h2>年龄：{{student.age}}</h2> <h2>考试记录</h2> <ul style="list-style: none;"> <li> <div style="width: 150px;" class="box box1">考试id</div> <div style="width: 300px;" class="box box1">考试名称</div> <div style="width: 150px;" class="box box1">分数</div> <div style="width: 150px;" class="box box1">考试时间</div> </li> <li v-for="r in student.record" :key="r.id"> <div style="width: 150px;" class="box1">{{r.id}}</div> <div style="width: 300px;" class="box1">{{r.name}}</div> <div style="width: 150px;" class="box1">{{r.score}}</div> <div style="width: 150px;" class="box1">{{r.date}}</div> </li> </ul> </div> <script type="text/javascript"> Vue.config.productionTip = false; const vm = new Vue({ el:'#root', data:{ school:{ name:'湖南科技大学', address:'湘潭市雨湖区', leader:'朱川曲' }, student:{ name:'retrace', age:21, record:[ { id:'hnust031401A', name:'计算机网络期中考试(A卷)', score:99, date:'2017.02.08' }, { id:'hnust031202A', name:'Java基础入门期末考试(A卷)', score:100, date:'2018.01.07' }, { id:'hnust021002B', name:'概率论与数理统计期末考试(A卷)', score:100, date:'2019.07.07' } ] }, show:true }, methods:{ addSex(){ Vue.set(this.student,'sex','女'); this.show = false; } } }); </script> </body> </html>
12.4 总结Vue数据监测
Vue监视数据的原理：
1.Vue会监视data中所有层次的数据
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：push()、pop()、shift()、unshift()、splice()、sort()、reverse()
2.Vue.set() 或 vm.$set()
特别注意：Vue.set() 和 vm.$set() 不能给vm 或vm的根数据对象添加属性！！！
示例代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>总结Vue数据监测</title>
<script src="../lib/vue.js"></script>
<link rel="stylesheet" href="../../鼠标指针样式.css"/>
<style>
.box{
font-weight: bold;
}
.box1{
float: left;
padding: 10px;
}
.list{
overflow:hidden;
border-top: 1px solid lightgray;
border-bottom: 1px solid lightgray;
width: auto;
white-space:nowrap;
}
</style>
</head>
<body>
<!--准备一个容器-->
<div id="root">
<h1>学生信息</h1>
<h2>姓名：{{student.name}}</h2>
<h2>年龄：{{student.age}}</h2>
<button @click="student.age++">年龄+1岁</button>
<br/>
<br/>
<button @click="addSex" v-if="show">点击添加性别信息</button>
<br/>
<button @click="student.sex = student.sex === '男' ? '女':'男' " v-if="!show">点击切换性别</button>
<h2 v-if="student.sex">性别：{{student.sex}}</h2>
<br/>
<button @click="addCourse">添加课程</button>
<button @click="updateCourse">修改课程</button>
<button @click="deleteCourse">删除课程</button>
<h2>主修课程</h2>
<ul style="list-style: none;">
<li v-for="(c,index) in student.course" :key="index">
{{c}}
</li>
</ul>
<button @click="addRecord">添加记录</button>
<button @click="updateRecord">修改记录</button>
<button @click="deleteRecord">删除记录</button>
<button @click="sortType = 2">升序</button>
<button @click="sortType = 1">降序</button>
<button @click="sortType = 0">默认</button>
<input type="text" placeholder="请输入考试名称..." v-model="keyWord"/>
<h2>考试记录</h2>
<ul style="list-style: none;width:850px;height:245px;overflow-y: auto;">
<li class="list">
<div style="width: 150px;" class="box box1">考试id</div>
<div style="width: 300px;" class="box box1">考试名称</div>
<div style="width: 150px;" class="box box1">分数</div>
<div style="width: 150px;" class="box box1">考试时间</div>
</li>
<li v-for="r in filRecord" :key="r.id" class="list">
<div style="width: 150px;" class="box1">{{r.id}}</div>
<div style="width: 300px;" class="box1">{{r.name}}</div>
<div style="width: 150px;" class="box1">{{r.score}}</div>
<div style="width: 150px;" class="box1">{{r.date}}</div>
</li>
</ul>
</div>
<script type="text/javascript">
Vue.config.productionTip = false;
const vm = new Vue({
el:'#root',
data:{
student:{
name:'retrace',
age:21,
course:['计算机网络','Java基础入门','概率论与数理统计'],
record:[
{
id:'hnust031401A',
name:'计算机网络期中考试(A卷)',
score:100,
date:'2017.02.08'
},
{
id:'hnust031202A',
name:'Java基础入门期末考试(A卷)',
score:98,
date:'2018.01.07'
},
{
id:'hnust021002B',
name:'概率论与数理统计期末考试(B卷)',
score:99,
date:'2019.07.07'
}
]
},
show:true,
sortType:0,
keyWord:''
},
methods:{
addSex(){
this.$set(this.student,'sex','女');
//或者 Vue.set(this.student,'sex','女');
this.show = false;
},
addCourse(){
this.student.course.unshift('add name'+Math.floor(Math.random()*1000));
},
updateCourse(){
if(this.student.course.length!==0)this.student.course.splice(0,1,'update name'+Math.floor(Math.random()*1000));
},
deleteCourse(){
this.student.course.shift();
},
addRecord(){
const rid = 'hnust'+'0'+Math.floor(Math.random()*10)+Math.floor(Math.random()*10)+Math.floor(Math.random()*10)+'0'+(Math.round(Math.random())+1)+(Math.round(Math.random())===0?'A':'B');
let date = (new Date()).toString();//Sun Oct 10 2021 20:19:22 GMT+0800 (中国标准时间)
date = date.split(" ");//["Sun", "Oct", "10", "2021", "20:22:26", "GMT+0800", "(中国标准时间)"]
let month = "January，February，March，April，May，June，July，August，September，October，November，December";
month = month.split('，');
for(let i=0;i<month.length;i++){
if(month[i].indexOf(date[1])!==-1) date[1]=date[3]+'.'+(i>=10?'':'0')+i+'.'+date[2];
}
const r = {id:rid,name:'add name'+Math.floor(Math.random()*1000),score:(Math.ceil(Math.random()*40)+60),date:date[1]};
this.student.record.push(r);
},
updateRecord(){
this.student.record[this.student.record.length-1].name = 'update name'+Math.floor(Math.random()*1000);
},
deleteRecord(){
this.student.record.pop();
}
},
computed:{
filRecord(){
let result = this.student.record.filter((r)=>{
return r.name.indexOf(this.keyWord) !== -1;
});
if(this.sortType){
result = result.sort((r1,r2)=>{
return this.sortType === 1 ? r2.score - r1.score : r1.score - r2.score;
});
}
return result;
}
}
});
</script>
</body>
</html>
浙公网安备 33010602011771号