<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title></title>

<style type="text/css">

    li{

        height:30px;

        line-height:30px

    }

    li:not([data-key]){

        color:red;

        font-size:16px

    }

</style>

</head>

<body>

    <div id="example-1">

        <div>这是一个v-for的示范</div>

        <div>

            <ul>

                <li>第一个v-for</li>

                <li v-for="(item,index) in list" :key="id">

                  {{ item.message }}

                </li>

                <li>第二个v-for</li>

                <li v-for="(student,no) in students" :key="no">

                  {{ student.name }}

                </li>

                <li>下面是数组v-for</li>

                <li v-for="(n,m) in arr" :key="m">

                  {{ n }}

                </li>

            </ul>

        </div>

    </div>

</body>

</html>

<script>

    class Vue{

        constructor(obj){

            this.mountEl = document.querySelector(obj.el);

            this.data = obj.data;

            this.hasChild(this.mountEl);

        }

        hasChild(el){

            if(el.children){

           //        类数组转为数组四种方法

                //        Array.prototype.call(arr)

                //        [].slice.call(arr)

                //        Array.from(arr)

                //        [...arr].forEach(item=>{

                //            console.log(item)

                //        })

                　  let nodeList = mountEl.children;

                [...el.children].forEach(el=>{

                //在这里处理v-for

                    let vF_val = el.getAttribute('v-for');

                    if(vF_val){

                      //v-for的dataList

                      　　　　let todoList = null;

                      // key绑定的名称  id

                     　　　　 let keyName = el.getAttribute('v-bind:key') || el.getAttribute(':key');

                      //li标签内部的大胡子括号中的 item.message

                      　　　　let textName = el.innerText.replace('{{','').replace('}}','').trim();

                        let regex="\\((.+?)\\)";

                      //匹配小括号中的内容，不包括小括号 ,结果为item,index

                      　　　　let item_index = vF_val.match(regex)[1];//item,index

                      　　　　let item = item_index.split(',')[0]// item

                      　　　　let index = item_index.split(',')[1]// index

                      　　　　let num = vF_val.lastIndexOf('in');

                        let datListName = vF_val.substr(num+2).trim();//list

                      　　  　for(let i in this.data){

                          if(i == datListName){

                              todoList = this.data[i]

                          }

                        }

                        const fragment = document.createDocumentFragment();

                      　for(let i = 0;i<todoList.length;i++){

                          let tab = null;

                          if(todoList[i] instanceof Array){

                              tab = false

                          }else if(todoList[i] instanceof Object){

                              tab = true

                          }

                          let todoItem = todoList[i]

                          let li = document.createElement(el.tagName)

                          if(!tab){

                              li.dataset.key = i;

                              li.innerText = todoItem;

                              fragment.appendChild(li);

                          }else{

                              li.dataset.key = todoItem[keyName]

                              if(textName.split('.')[0] === item){// v-for的item和item.message相同变量名

                                  　　　　 let k = textName.split('.')[1] //message

                                  　　　　 li.innerText = todoItem[k];

                                  fragment.appendChild(li);

                              }

                          }

                      }

                      el.parentNode.replaceChild(fragment,el)

                    }

                    if(el.children){//递归查询元素

                        this.hasChild(el)

                    }

                })

            }

        }

    }

    var example1 = new Vue({

      el: '#example-1',

      data:{

          msg:1,

        list: [

          { message: 'Foo' ,id:'0'},

          { message: 'Bar' ,id:'1'},

          { message: 'Ace' ,id:'2'},

          { message: 'Mvp' ,id:'3'},

        ],

        students: [

          { name: '李雷雷' ,no:'0'},

          { name: '韩梅梅' ,no:'1'},

          { name: 'poly' ,no:'2'},

        ],

        arr:[11111,222222,333333]

      }

    })

</script>

运行结果如下：

总结：真正的vue是会处理得到虚拟dom再去render生成dom的，并且实例中维护的数据都是具有setter,getter属性以及watch监察者的，以此达到响应式，这里只是简单的模拟实现一下。

v-for的简单实现的更多相关文章

  1. make V=1 查看完整的gcc编译信息

    Linux内核make命令选项 2012年5月28日lenky发表评论阅读评论6,289 次浏览   升级Linux内核的操作已经变得很简单,基本的几个命令即可搞定:make menuconfig.m ...

  2. npm的简单应用

    1.安装node 2.旧版node升级 (1)linux系统 sudo npm install npm -g (2)window系统 npm install npm -g 3.安装淘宝镜像cnpm(以 ...

  3. 半小时学会V语言

    半小时学会V语言 1. V语言简介 V是一个静态类型.编译型的编程语言,目标是构建可维护软件.与Go语言相似,并受Oberon,Rust和Swift语言影响.V语言非常简单,只需要半小时就能学会这门语 ...

  4. spring boot V部落 V人事项目

    公司倒闭 1 年多了,而我在公司倒闭时候做的开源项目,最近却上了 GitHub Trending,看着这个数据,真是不胜唏嘘. 缘起 2017 年 11 月份的时候,松哥所在的公司因为经营不善要关门了 ...

  5. 一起来作画吧「GitHub 热点速览 v.22.14」

    作者:HelloGitHub-小鱼干 又一个现象级.火爆社交媒体的项目--多人作画,把你想要放置的元素添加到某一个画布上,Reddit Place 便有了你的痕迹.在本周特推中 reddit-plac ...

  6. JavaScript进阶之路——认识和使用Promise，重构你的Js代码

    一转眼,这2015年上半年就过去了,差不多一个月没有写博客了,"罪过罪过"啊~~.进入了七月份,也就意味着我们上半年苦逼的单身生活结束了,从此刻起,我们要打起十二分的精神,开始下半 ...

  7. PHP新的垃圾回收机制:Zend GC详解

    概述 在5.2及更早版本的PHP中,没有专门的垃圾回收器GC(Garbage Collection),引擎在判断一个变量空间是否能够被释放的时候是依据这个变量的zval的refcount的值,如果re ...

  8. centos6安装python3.4和pip3

    在安装了epel源的情况下,直接yum就可以安装python3.4 yum install python34 -ypython3 --version 没有自带pip3,从官网安装 wget --no- ...

  9. iOS - Regex 正则表达式

    1.Regex 定义 正则表达式又称正规表示法.常规表示法(英语:Regular Expression,在代码中常简写为 regex.regexp 或 RE),计算机科学的一个概念.正则表达式使用单个 ...

  10. 短视频APP+不同类型社交应用发展分析+化妆品电商

    短视频APP——昙花一现还是发展趋势? 在这个互联网与科技并行且飞速发展的时代,各种app不断涌入市场,其中短视频app便是一个典型,美拍,就成功入围2014年十大最火app.而短视频app也势必要成 ...

随机推荐

  1. UGUI Image血条或者进度条效果

    把图片的Image组件中的image type选成Filled,下面就出现了Fill Amount,通过GetComponent<Image>().fillAmount; 就可以拿到flo ...

  2. c++ 和 matlab 下的caffe模型输入差异

    在向一个caffe模型传递输入数据的时候,要注意以下两点: 1. opencv中Mat数据在内存中的存放方式是按行存储,matlab中图像在内存中的存放方式是按列存储. 2. opencv中Mat数据 ...

  3. ArrayList代码分析

    集合算是java中最常用的部分了,阅读该部分jdk代码可以让我们更加清楚的了解其实现原理,在使用时也能心中有数,有利于写出高质量的代码. ArrayList 底层数组实现,初始长度10,超过长度后的自 ...

  4. Windows Server 2012 R2

    Windows Server 2012 R2 历史上的Server有2003 server, 2008 server, 2012 server windows server 2012 r2对计算机的消 ...

  5. Powershell(3)

    Powershell 可以使用powershell管理的服务 share point, exchange, lync, windows azure, window server, system cen ...

  6. HDU 5416——CRB and Tree——————【DFS搜树】

    CRB and Tree Time Limit: 8000/4000 MS (Java/Others)    Memory Limit: 65536/65536 K (Java/Others)Tota ...

  7. 基础10 多进程、协程（multiprocessing、greenlet、gevent、gevent.monkey、select、selector）

    1.多进程实现方式(类似于多线程) import multiprocessing import time,threading def thread_run():#定义一个线程函数 print(&quo ...

  8. 初学者配置第一个spring mvc Demo

    1.web.xml的配置 <?xml version="1.0" encoding="UTF-8"?> <web-app xmlns:xsi= ...

  9. C# 多线程之线程同步

    多线程间应尽量避免同步问题,最好不要线程间共享数据.如果必须要共享数据,就需要使用同步技术,确保一次只有一个线程访问和改变共享状态. 一::lock语句 lock语句事设置锁定和接触锁定的一种简单方法 ...

  10. 创建Graphics对象与Pen对象

    Graphics对象表示GDI+绘图表面,是用于创建图形图像的对象,所以要通过GDI+创建绘图,必须先创建Graphics对象,然后才可以使用GDI+的笔.刷等结合颜色.字体等对象进行绘制线条形状.填 ...