v-for的简单实现
<!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的简单实现的更多相关文章
- make V=1 查看完整的gcc编译信息
Linux内核make命令选项 2012年5月28日lenky发表评论阅读评论6,289 次浏览 升级Linux内核的操作已经变得很简单,基本的几个命令即可搞定:make menuconfig.m ...
- npm的简单应用
1.安装node 2.旧版node升级 (1)linux系统 sudo npm install npm -g (2)window系统 npm install npm -g 3.安装淘宝镜像cnpm(以 ...
- 半小时学会V语言
半小时学会V语言 1. V语言简介 V是一个静态类型.编译型的编程语言,目标是构建可维护软件.与Go语言相似,并受Oberon,Rust和Swift语言影响.V语言非常简单,只需要半小时就能学会这门语 ...
- spring boot V部落 V人事项目
公司倒闭 1 年多了,而我在公司倒闭时候做的开源项目,最近却上了 GitHub Trending,看着这个数据,真是不胜唏嘘. 缘起 2017 年 11 月份的时候,松哥所在的公司因为经营不善要关门了 ...
- 一起来作画吧「GitHub 热点速览 v.22.14」
作者:HelloGitHub-小鱼干 又一个现象级.火爆社交媒体的项目--多人作画,把你想要放置的元素添加到某一个画布上,Reddit Place 便有了你的痕迹.在本周特推中 reddit-plac ...
- JavaScript进阶之路——认识和使用Promise，重构你的Js代码
一转眼,这2015年上半年就过去了,差不多一个月没有写博客了,"罪过罪过"啊~~.进入了七月份,也就意味着我们上半年苦逼的单身生活结束了,从此刻起,我们要打起十二分的精神,开始下半 ...
- PHP新的垃圾回收机制:Zend GC详解
概述 在5.2及更早版本的PHP中,没有专门的垃圾回收器GC(Garbage Collection),引擎在判断一个变量空间是否能够被释放的时候是依据这个变量的zval的refcount的值,如果re ...
- centos6安装python3.4和pip3
在安装了epel源的情况下,直接yum就可以安装python3.4 yum install python34 -ypython3 --version 没有自带pip3,从官网安装 wget --no- ...
- iOS - Regex 正则表达式
1.Regex 定义 正则表达式又称正规表示法.常规表示法(英语:Regular Expression,在代码中常简写为 regex.regexp 或 RE),计算机科学的一个概念.正则表达式使用单个 ...
- 短视频APP+不同类型社交应用发展分析+化妆品电商
短视频APP——昙花一现还是发展趋势? 在这个互联网与科技并行且飞速发展的时代,各种app不断涌入市场,其中短视频app便是一个典型,美拍,就成功入围2014年十大最火app.而短视频app也势必要成 ...
随机推荐
- 牛客网Java刷题知识点之泛型概念的提出、什么是泛型、泛型在集合中的应用、泛型类、泛型方法、泛型接口、泛型限定上限、泛型限定下限、 什么时候使用上限？泛型限定通配符的体现
不多说,直接上干货! 先来看个泛型概念提出的背景的例子. GenericDemo.java package zhouls.bigdata.DataFeatureSelection; import ja ...
- Mvc内建功能（DefaultModelBinder）自动绑定。
在做Asp.Net MVC项目中,都知道View负责页面展示数据或者提供页面收集数据,而所展示的数据或者收集的数据都是从Controller的Action中获取或提交到Controller的Actio ...
- SQL Server 2008 报错：已成功与服务器建立连接，但是在登录前的握手期间发生错误
今天SqlServer 2008连接数据库时报错:已成功与服务器建立连接,但是在登录前的握手期间发生错误.在连接到 SQL Server 2008 时,在默认的设置下 SQL Server 不允许远程 ...
- MySQL GROUP_CONCAT长度限制引发的一场灾难
GROUP_CONCAT函数是对查处的分组数据对于分组列相同的数据合并成一列用逗号隔开的函数. 但是该函数的长度有个默认限制,默认是1024个字符,超过就会截断,从而导致用count统计GROUP_C ...
- springmvc+spring+mybatis+sqlserver----查询sqlserver----有返回参数
<resultMap type="java.util.HashMap" id="resultMap"> <result column=&quo ...
- 基于百度ai,图灵机器人,Flask 实现的网站语音智能问答
准备以下模块中的函数 from aip import AipSpeech import time import os import requests APP_ID = '15420654' API_K ...
- Flask-Script-Migrate
Flask-Script 从字面意思上来看就是 Flask 的脚本 是的,熟悉Django的同学是否还记得Django的启动命令呢? python manager.py runserver 大概是这样 ...
- jQ中css()和addClass的区别之优先级
笔者在实现点击表格中某行添加高亮的效果时,发现一个css()和addClassd()的冲突,具体代码如下: <style> .se { background:#FF6500; color: ...
- bai_du 采集代码（已过期）
<?php $url = "http://www.baidu.com/s?wd=site:www.xxxxxx.com+inurl:hot&tn=baidulaonian&am ...
- (转)ArcEngine读取数据（数据访问）
读取和访问数据是进行任何复杂的空间分析及空间可视化表达的前提,ArcGIS支持的数据格式比较丰富,下面就这些格式Shapefile.Coverage.Personal Geodatabase.Ente ...