<!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. derby

    /** * @Title: T.java * @Package test * @Description: TODO please write your description <BR> * ...

  2. 【LDAP】LDAP介绍

    原文:http://ldapman.org/articles/intro_to_ldap.html原文作者:Michael Donnelly 什么是LDAP? LDAP的英文全称是Lightweigh ...

  3. JavaScript 函数 (function)

    //声明(有参数.有返回值) function fun() { var name = '小黑'; ) { name = arguments[]; //接受参数 } alert(name); retur ...

  4. [JAVA][Liferay] Duplicate key value violates unique constraint for resourcepermissionid in Liferay

    Unexpected exception thrown when create new site: 09:47:10,114 ERROR [ajp-bio-8009-exec-113][JDBCExc ...

  5. html学习笔记（一）div的透明设置

    要使得div的透明度设置,有两种方法. 第一种:使用opacity属性,单词的意思是不透明性,你可以设置它的值,范围是0到1,1为不透明,0为全透明.具体使用如下: css代码: #div01{ ba ...

  6. Python函数(1)

    一.Python函数介绍 函数时组织好的,可重复的,用来实现单一,或相关联功能的代码段. 函数的使用原则时先定义,后调用:事先准备工具的过程即函数的定义,遇到应用场景拿来当工具用即函数的调用. 函数的 ...

  7. codevs 1213 解的个数

    1213 解的个数 时间限制: 1 s 空间限制: 128000 KB 题目等级 : 黄金 Gold       题目描述 Description 已知整数x,y满足如下面的条件: ax+by+c = ...

  8. Android无需权限显示悬浮窗

    TYPE_TOAST一直都可以显示, 但是用TYPE_TOAST显示出来的在2.3上无法接收点击事件, 因此还是无法随意使用. 下面是我之前研究后台线程显示对话框的时候记得笔记, 大家可以看看我们项目 ...

  9. C#变量、常量

    变量 一.命名变量:标识符 为变量命名时要遵循C#语言的命名规范: 1.变量名只能由字母.数字和下划线组成,而不能包含空格.标点符号.运算符等其他符号 2.变量名不能与C#中的关键字名称相同   二. ...

  10. 【MATLAB】画信号频谱的子函数

    输入信号序列和采样率,该子函数可以画出该信号的频谱图. function [f,spec,NFFT]=spec_fft_plot(sample,L,Fs) % 输入数据说明: % sample:信号序 ...