view_blue

v1.1.2

Published

4 years ago

mvvm小型库

0High
0Medium
0Low

_blue

View

文档更新时间：2017-5-5 22:20:51

创建实例对象

new View(options);

####options参数: el:为需要解析的element对象的id（如果绑定的为template节点，只能存在一个顶层的节点，当然，el的参数也是一个顶层的节点）

var app = new View({
	el:'app'
});

有关template的使用:

先定义模板格式，使用:

<div id="app"></div>
<template id="template">
	<div @click="hello">
		{{templateData.id}}-{{templateData.name}}-{{templateData.src}}
	</div>
</template>

先假设数据是

var data = {
	list: [{
			id: 1,
			name: 'blue',
			src:'src1' 
		}, {
			id: 2,
			name: 'blue2',
			src:'src2'
		}, {
			id: 3,
			name: 'blue3',
			src:'src3'
		}
	]
}
var app = new View({
	el:'templateId', //绑定模板
	methods:{
		hello:function(){
			//todo
		}
	}
});
app.createTemplate(data['list'], 'app');

这里说一下createTemplate方法(实例对象上的方法)第一个参数为需要遍历添加的数据对象,第二个为app为append进去的dom对象id

运行上面的代码,结果如下

1-blue-src1
2-blue2-src2
3-blue3-src3

PS:当前添加循环数据是通过Object.key来实现的，支持对象和数字字符串的循环，所有的当前循环项都是在templateData中作为数据代理，

如:


let data = [
	{value:1,type:'text'},
	{value:2,type:'radio'},
	{value:3,type:'checkbox'}
];

/*在使用createTemplate则第一次数据代理templateData === {value:1,type:'text'}*/
/*在使用createTemplate则第二次数据代理templateData === {value:2,type:'radio'}*/
/*在使用createTemplate则第三次数据代理templateData === {value:2,type:'checkbox'}*/
/*以此类推*/

PS:模板内也是可以使用View属性初始化，支持事件绑定。

模板中不支持数据流更新以及属性绑定更新。（可以在更新后添加到真实的dom节点上）

data:绑定的数据

<div id="app">
	{{msg}}    <!--这里通过数据绑定变为msg的值1-->
</div>

var app = new View({
	el:'app',
	data:{
		msg:'hello View'
	}
});

也可以通过多层绑定

<div id="app">
	{{msg.someMsg}}    <!--这里通过数据绑定变为 hello View -->
</div>

	
var app = new View({
	el:'app',
	data:{
		msg:{
			someMsg:'hello View'
		}
	}
});

methods:为实例对象上的方法,methods中的this永远指向的都是View的实例对象

<div id="app" @click='hello'> 	<!--这里通过@加事件名可以绑定事件,对应的val为methods中的方法-->
	{{msg.someMsg}}    <!--这里通过数据绑定变为 hello View -->
</div>
var app = new View({
	el:'app',
	data:{
		msg:{
			someMsg:'hello View'
		}
	},
	methods:{
		hello:function(){
			alert('hello View');
		}
	}
});

####watch：用来监听数据流中数据链流变化,回调函数有个参数值，为当前设置的新值；

var app = new View({
	el:'app',
	data:{
		msg:{
			someMsg:'hello View',
			someData:{
				data:{
					data1:1
				}
			}
		}
	},
	watch:{
		'someMsg':function(newVal){
			console.log(newVal);
		},
		'somgData':function(newVal){
			console.log(newVal);
		}
	}
});

app.data.someData = 12; //     12

####事件绑定: 通过@加上事件名绑定事件，DOM2的事件绑定，支持绑定多个事件，绑定事件的处理函数指methods中的方法（方法中的this指向View中的实例对象），相同事件只能绑定一次,只限于@属性绑定上）, 事件方法中可以传递参数$index和$event以及其他的参数值(数值都会转化为字符串)，这两个对应的是当前时间对象的所在父级中对应的索引，以及event对象；

<div id="app" @click='clickHandler' @change="changeHandler"> 	<!--这里通过@加事件名可以绑定事件,对应的val为methods中的方法-->
	{{msg.someMsg}} 
</div>
var app = new View({
	el:'app',
	data:{
		msg:{
			someMsg:'hello View'
		}
	},
	methods:{
		clickHandler:function(){
			//todo
		},
		changeHandler:function(){
			//todo
		}
	}
});

_v-属性

_v-for属性，循环遍历element，遍历次数为数据的长度， _v-for中的值为"item in {{data}}",item为遍历到当前的值，data为需要遍历的数据对象，在dom中绑定需要以for开始绑定数据，如：{{item.id}};

<div id="app">
	<div View-for="item in msg.list">
		{{item.id}}-{{item.name}}
	</div>
</div>

<script>
var app = new View({
	el:'app',
	data:{
		msg:{
			list:[
				{id:123456,name:blue},
				{id:456789,name:blue1}
			]
		}
	}
});
</script>

结果为：

123456-blue
456789-blue1

这样使用也是可以的，循环的只是对应的

PS:$index是当前循环中的索引值

<div id="app">
	<!--for操作只允许有一个绑定值存在:-->
	<div View-for="key in forData">{{key.id}}</div>
	<!--遍历直接量的数值:-->
	<div View-for="key in 5">{{key}}</div>
</div>
<script type="text/javascript">
	let app = new View({
		el:"app", 
		data:{
			forData:[
				{id:1},
				{id:2},
				{id:3},
				{id:4},
				{id:5}
			],
			forData_0:{
				id:1,
				id_0:2,
				ds:3
			},
			forData_1:[1,3,4,7,8,9]
		}
	});
</script>

_v-if : 属性，绑定_if中的值，如果_v-if绑定的值为true，则会设置为渲染出来，同时也支持_v-elseif语法，如果_v-if为false，则判定_v-elseif的值，如果也是false，则不显示，再来页支持_v-else，只有一个_v-else存在，如果_v-if和_v-elseif都不是true则显示_v-else的内容，页支持修改data中的值，更新状态。

<div id="app">
	<div _v-if="ifData[0]">1</div>
	<div _v-elseif="ifData[1]">2</div>
	<div _v-else>3</div>
	
	<div _v-if="ifData_1[0] == 2">1</div>
	<div _v-elseif="ifData[1] === 1">2</div>
	<div _v-else>3</div>
</div>

<script>
var app = new View({
	el:'app',
	data:{
		ifData:[true,false,false],
		ifData_1:['1','2','3']
	}
});
</script>

结果为：

修改ifData中的值改为

[false,true,true]

结果为：

修改ifData中的值改为

[false,false,true]

结果为：

_v-show属性，绑定_v-show中的值，_v-show中的值为'none','no'.false则为隐藏， 'block',true,'ok'为显示；

<div id="app">
	<div _v-show="status.0">1</div>
	<div _v-show="status.1">2</div>
	<div _v-show="status.2">3</div>
</div>

<script>
var app = new View({
	el:'app',
	data:{
		status:['block','none','block']
	}
});
</script>

结果为：

1
3

####组件通过components来定义组件，object类型，key为在dom中定义为自定义dom组件的名称(写法为my-comp这种类型的写法)，而value为组件的dom内容，value有两种使用方法:

可以通过来定义组件，在components中绑定template中的id;

<div id="app">
	<my-comp></my-comp>
</div>
<template id="app_comp">
	<div>
		{{msg.name}}--{{msg.id}}
	</div>
</template>
<script>
var app = new View({
	el:'app',
	data:{
		mag:{
			name:'blue',
			id:9527
		}
	},
	components:{
		'my-comp':"app_comp"
	}
});
</script>

结果为：

blue--9527

可以通过字符串的dom来使用;

<div id="app">
	<my-comp></my-comp>
</div>
<script>
var app = new View({
	el:'app',
	data:{
		mag:{
			name:'blue',
			id:9527
		}
	},
	components:{
		'my-comp':"<div>{{msg.name}}--{{msg.id}}</div>"
	}
});
</script>

结果为：

blue--9527

两种使用方法都是相同的，适用方式由你自己决定。 PS:组件内也是可以使用View-属性，以及事件绑定。

####过滤器通过 **View.setFilter(filterName, handler)**设置新的逻辑过滤器;每个过滤器都是返回值，返回过滤后的数据；内部常用过滤器：

trim ：清空前后字符串的空格

upper ：全部大写

lower ：全部小写

length ：获取字符的长度

html ：转化为dom节点

sequence ：模板中的索引 + 1

####使用：在dom数据绑定中使用 | 来定义过滤器 | 后可以带多个过滤器.如果下（除了html的过滤器不要再使用其他的内容过器）：

	{{data | trim length}}

特别说明一下html的过滤器，因为默认的数据绑定都是指向textNode的节点，所以html的过滤器会把指定的dom字符串转化为dom节点进行渲染更新；

当然，如果默认使用过滤器生成的dom，在更新这个dom字符串的时候变为节点字符也是可以的；
还有一种插入dom的数据可以为[domElement,domElement],同样支持上面的用法；

####属性的过滤器和dom的过滤器使用不同，需要使用$F过滤: $F方法为 $F(val,filters)：

val:需要过滤的数据
filters第二个参数可以为当个的string类型的过滤器名，也可以为Array类型，存在一个或多个过滤器名；

####数组的一些方法,在实例对象上调用

push(data,pushData):{type : string}，数组的line字符串，pushData可以为数组，也可以为单独的数据；
pop(data):{type : string}，移除最后一个索引值，返回这个索引的值；
unshift(data,pushData):{type : string}，数组的line字符串，pushData可以为数组，也可以为单独的数据；
shift(data):{type : string}，移除第一个索引值，返回这个索引的值；

####钩子函数存在三个钩子函数：

init()创建开始的时候开始调用，可以在options中定义这个函数;
created()为dom节点都重新创建完毕后开始调用，可以在options中定义这个函数;
ready()为所有都准备完毕后调用；

####再说两句：一些方法

.update(mainKey) 可以直接更新所有数据流，然后更新view层，存在一个参数，data中的第一层对象的key值，可以根据key来更新响应依赖的dom对象view层；
.forUpdate(mainKey) 和update方法用法一样，更新的数据流为绑定_v-for属性的View层；
.ifUpdate(mainKey) 和update方法用法一样，更新的数据流为绑定_v-if属性的View层；
.showUpdate(mainKey) 和update方法用法一样，更新的数据流为绑定_v-show属性的View层；
.attrUpdate(mainKey) 和update方法用法一样，更新的数据流为绑定:属性的View层；
.getElIndex(el) 返回el对象在父级中所载的索引位置；
._set(dataLink,val,key) dataLink为data对应的key链，string类型；val为新值；key为可选值，如果存在，则会新建key在keyLink中，并且创建object.defineProperty
._get(keyLink) 返回data中keyLink中对应的值，不存在则返回空字符串；

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme

View

创建实例对象

有关template的使用:

如:

_v-属性