第一章 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>

本文作者：何以之

本文链接：https://www.cnblogs.com/serendipity-echo/articles/15408096.html

posted @ 2021-10-14 19:13 何以之阅读(226) 评论(0) 编辑收藏举报

刷新页面返回顶部

登录后才能查看或发表评论，立即登录或者逛逛博客园首页

何以之

第一章 Vue核心第十二节数据监测

12.1 列表渲染

12.2 key的原理&列表过滤

12.3 Vue.set的使用

12.4 总结Vue数据监测

公告

常用链接

最新随笔

积分与排名

随笔分类 (10)

随笔档案 (15)

文章分类 (19)

文章档案 (20)

阅读排行榜

评论排行榜

推荐排行榜

最新评论

何以之

第一章 Vue核心 第十二节 数据监测

12.1 列表渲染

12.2 key的原理&列表过滤

12.3 Vue.set的使用

12.4 总结Vue数据监测

公告

常用链接

最新随笔

积分与排名

随笔分类 (10)

随笔档案 (15)

文章分类 (19)

文章档案 (20)

阅读排行榜

评论排行榜

推荐排行榜

最新评论

第一章 Vue核心第十二节数据监测