<!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. PHP会话管理

    Session使用 在每个页面中使用session之前,必须使用session_start() 在每个session中都可以使用$_SESSION这个全局数组,在页面必须调用session_start ...

  2. 020-pom.xml配置文件模板

    1 Maven 整合SSH框架之pom.xml 1 版本一 <project xmlns="http://maven.apache.org/POM/4.0.0" xmlns: ...

  3. 切图技巧——PS篇

    1.选框工具这里可以选择增加选区.减少选区 ==> 2.存储为web格式 1)JPG:一般用于大图 2)gif:可作动图,与png-8基本一样,不支持半透明 3)png-8:不支持动图,不支持半 ...

  4. phpcms v9 安装

    把文件放到根目录下install文件夹下, 打开127.0.0.1:89/install/index.html

  5. GDI+图形图像处理技术——GDIPlus绘图基础

    GDI+概述 GDI在windows中定义为Graphis Device interface,及图形设备接口,是Windows API(application Programming Interfac ...

  6. 树莓派WLAN连接PC（不通过路由器）

    上一篇博文捣鼓了一下树莓派直连线连接PC.吃完午饭心血来潮,树莓派既然能用直连线连接PC,曾经也试过拿PC当作热点,为何不尝试一下用WLAN将树莓派与PC互连呢?果断搞起. 首先,我当前笔记本是用WL ...

  7. Spring课程 Spring入门篇 4-1 Spring bean装配（下）之bean定义及作用域注解实现

    课程链接: 1 概述 2 代码演练 3 代码解析 1 概述 1.1 bean注解相关 a context:component-scan标签使用 问:该标签的作用是什么? 答:该标签作用是支持注解,在x ...

  8. intellijidea课程 intellijidea神器使用技巧 5-2 localhistory

    Ctrl shift A  ==>localhistory ==> show history 查看文件本地历史记录(idea每次修改在本地会生成历史记录) Ctrl shift A  == ...

  9. 《ArcGIS Runtime SDK for Android开发笔记》——（3）、ArcGIS Runtime SDK概述

    1.前言 ArcGIS Runtime SDK是一整套用于构建原生及跨平台的地图应用程序的开发包,包括移动设备的Android.iOS.Windows Phone,针对桌面的.Net.Java.OSX ...

  10. 构建跨平台APP开发的两本书，这里重点推荐下

    第一本是<构建跨平台:jquery Mobile移动应用实战> 是目前jqm开发写的比较入门的一本书,上手很快,但是高手我觉得就没有必要学习了,因为写的比较浅显. 第二本是<构建跨平 ...