Vue基础

一、渐进式框架

二、两个核心点

1. 响应的数据绑定
   当数据发生改变时，自动更新视图。
   是利用Object.defineProperty中的getter和setter代理数据。

var obj = {};
Object.defineProperty(obj,"a",{
	value:10,  //obj.a值为10
	writable:false,   //表示不可写
	enumerable:false,   //表示不可遍历
	configurable:false,  // 表示不可配置，即不能改变writable:false或者enumerable:false
	get(){               //   当读取obj.a时会自动调用该函数，不管是什么都返回1000
		return 1000;
	},
	set(){         //   当写入obj.a时会自动调用该函数，不管写什么都写入2000
		return 2000;
	}
});

Vue监控的数据变化就是监控的getter和setter得变化。变化就去重新渲染。
2. 视图组件
UI页面映射出一个组件树
组件可重用，可维护性好。

三、虚拟DOM

要改变一个DOM节点，才能把视图重新渲染出来。但这样会发生重排重绘，十分耗费性能。
虚拟DOM就是使用js去模拟一个节点。把js封装出来，变为一个真实的DOM。（使用js对象的嵌套形式模仿出一个html文档），通过底层的算法可以让重排重绘只发生在局部。优化页面。

//  模仿实现
function VElement(tagName,prop,children){  //参数为( "",{},[] ) 
	// 判断是不是一个VElement的一个实例
	if ( !(this instanceof VElement) ) {
		return new VElement(tagName,prop,children);
	}
	//  假如用户没有属性prop，就没有给参数prop，进行兼容性处理
	if( Object.prototype.toString.call(prop) === "[object Array]" ){
		children = prop;
		prop = {};
	}
	this.tagName = tagName;
	this.prop = prop;
	this.children = children;
	var count = 0;  //  用于记录虚拟节点个数
	this.children.forEach(function(child,index){
		if(child instanceof VElement){
			// 如果子节点是一个虚拟节点，让总节点数加上子节点的子子节点数
			count += child.count;
		}
		count ++;
	});
	this.count = count;
}
var dom = VElement("div",[VElement("div",["Vue牛逼"])]);
console.log(dom);
// 结果  虚拟DOM   相当于：
Vue牛逼
// VElement {
//   tagName: 'div',
//   prop: {},
//   children: [ VElement { tagName: 'div', prop: {}, children: [Object], count: 1 } ],
//   count: 2 }
VElement.prototype.render = function(){
	//rander函数将虚拟DOM转换为真实DOM
	var dom = document.createElement(this.tagName);
	var children = this.children;
	var prop = this.prop;
	for(var item in prop){
		dom.setAttribute(item,prop[item]);
	}
	children.forEach( function(child,index){
		if(child instanceof VElement){
			var childDom = child.render();
		}else{
			var childDom = document.createTextNode(child);
		}
		dom.appendChild(childDom);
	} );
	return dom;
};
console.log(dom.render());
//  结果
// 

//  	
Vue牛逼
// 

Vue底层时使用深度遍历优先算法转化为dom节点的

四、MVVM模式

M：model 数据模型
V：视图模板
VM：视图模型
VM层是中间层，连接数据模型和视图模板，由Vue实现。由vm代替以前的dom操作，只操作vm层

五、Vue实例

1. 数据绑定
2. 计算属性与侦听器
3. 属性绑定
4. 条件渲染 v-if v-show
5. 列表渲染 v-for
6. 绑定事件 事件修饰符 表单

	



	

		{{name}}   
		{{changeName}}     
		
		
		
		{{name}}
		
		
		
		
条件渲染演示
		
		{{item.title}}
		
		点击
		
		
		表单，初始化时，会将value的值默认填入input框
		

	
		

	
	

7. 生命周期（1最后五分钟）
   

六、模板

1. html模板
2. 字符串模板
3. render函数

	



	

		{{message}}