<!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. GitKraken使用教程-基础部分(3)

    5. 克隆服务器上的项目 首先,返回主界面,点击File => Clone Repo,选择 Clone with URL,如下图: 图 5‑1 SSH方式克隆仓库界面 1) SSH 方式连接仓库 ...

  2. C#中 计时器用法 运行时间

    有时候我们会需要计算某段代码运行的时间 比如一个sql查询,记录一段代码所花费的时间等等代码如下: System.Diagnostics.Stopwatch watch = new System.Di ...

  3. 设计模式之工厂模式详细读后感TT!(五)

    一如既往:原文 工厂方法(factory method)模式的意义是定义一个创建产品对象的工厂接口, 将实际创建工作推迟到子类当中. 核心工厂的创建, 这样核心类成为一个抽象工厂角色, 仅仅复制工厂子 ...

  4. Sass基础（一）

    一.Sass语法规范 1.Sass老版本:通过tab键严格控制缩进:不带有任何分号和大括号:以“.sass”为扩展名. 2.Sass新语法格式(Scss):外形和css无差,以“.scss”为扩展名. ...

  5. 1.字符串池化(intern)机制及拓展学习

    1.字符串intern机制 用了这么久的python,时刻和字符串打交道,直到遇到下面的情况: a = "hello" b = "hello" print(a ...

  6. Oracle笔记4-pl/sql-分支/循环/游标/异常/存储/调用/触发器

    一.pl/sql(Procedure Language/SQL)编程语言 1.概念 PL/SQL是Oracle数据库对SQL语句的扩展.在普通SQL语句的使用上增加了编程语言的特点,所以PL/SQL把 ...

  7. 【JavaScript】JavaScript赋值语句中的逻辑与&&和逻辑或||

    在其他语言中,我们往往看到逻辑符号出现在判断语句当中,如 if(a||b){} 但在一些js相关的面试题或者书中,我们有时会看到逻辑与&&和逻辑或||符号出现在赋值语句或者返回语句中, ...

  8. 也谈ThreadLocal

    欢迎赐教博客地址(http://www.cnblogs.com/shizhongtao/p/5358411.html) 对于ThreadLocal使用,网上一堆一堆的.什么内存泄露,什么线程不安全.这 ...

  9. Cocos2d-x v3.1项目创建（三）

    Cocos2d-x v3.1项目创建(三) Cocos2d-x官方为我们提供了用于创建.编译.运行和部署的一套命令行的工具集,也就是上篇文章中我们所提到的Cocos2d-Console,它位于我们的引 ...

  10. pure-ftp 修改用户信息

    1.修改用户test的密码 [root@localhost bin]# ./pure-pw passwd test #修改密码 Password: Enter it again: [root@loca ...