<!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. (转)Linux系统排查4——网络篇

    原文:http://www.cnblogs.com/Security-Darren/p/4700387.html 用于排查Linux系统的网络故障. 网络排查一般是有一定的思路和顺序的,其实排查的思路 ...

  2. 搭建mysql集群，使用Percona XtraDB Cluster搭建

    Percona XtraDB Cluster提供的特性有:1.同步复制,事务要么在所有节点提交或不提交.2.多主复制,可以在任意节点进行写操作.3.在从服务器上并行应用事件,真正意义上的并行复制.4. ...

  3. Apache和PHP的相关配置

      一.Apache2.4的配置和安装a. 打开Apache24/conf/httpd.conf文件进行编辑.1).38行改为Define SRVROOT "D:/myphp2017/Apa ...

  4. [转]在离线环境中发布.NET Core至Windows Server 2008

    本文转自:http://www.cnblogs.com/durow/p/5765145.html 0x00 写在开始 之前一篇博客中写了在离线环境中使用.NET Core,之后一边学习一边写了一些页面 ...

  5. Design Pattern ->Adaptor

    Layering & Contract Philosophy With additional indirection Adaptee object just is as a member. A ...

  6. Android getRunningTasks和getRunningAppProcesses失效

    Android 5.0以上的getRunningTasks失效,该方法可以获得在前台运行的系统进程.可以用getRunningAppProcesses方法暂时替代. android6.0以上的getR ...

  7. Android基础Activity篇——其他隐式Intent

    1.使用隐式Intent调用浏览器 修改FirstActivity中的按钮点击事件代码. Intent intent=new Intent(Intent.ACTION_VIEW); intent.se ...

  8. Swift自适应布局（Adaptive Layout）教程（一）

    通用的stroyboard文件是通向自适应布局光明大道的第一步.在一个storyboard文件中适配iPad和iPhone的布局在iOS8中已不再是梦想.我们不必再为不同尺寸的Apple移动设备创建不 ...

  9. 厌烦了写findViewById 试试ButterKnife吧

    先上官网 http://jakewharton.github.io/butterknife/  和 https://github.com/JakeWharton/butterknife 配置开发环境 ...

  10. TP5.1：实现分页

    前提: (1)为了让分页变得更加好看,我的案例加载了bootstrap和jq的文件,具体操作请参考:http://www.cnblogs.com/finalanddistance/p/9033916. ...