vue 理论与MVC

一、vue组件的组成

1、组件模板

2、组件逻辑

3、组件样式

组件的本质就是一个对象

二、vue的内部指令:

1、插值表达式:{{}}；重点是表达式

2、属性绑定:v-bind(:)；

3、事件绑定:v-on（@）；

4、条件渲染： 4-1:v-if、v-else-if、v-else由指令表达式返回Truthy控制渲染,惰性渲染；对内部的子组件与事件监听都会销毁重键，当表达式为Falsy是，用一个注释标签<!-->v-if<-->占位

4-2:v-show：控制style.display:none/block，总是渲染。

5、双向绑定：v-mode；

6、列表渲染：v-for；（item，index） in/of list:

key是唯一：方便vue的就地更新策略的实施。

枚举对象是根据：Object.keys进行遍历

javascript:

for in :枚举对象属性；

for of :可迭代对象的遍历；

三、vue组件化

vue组件化：抽象小型、独立、可预先定义/配置、可复用的组件。

1、小型：页面的构成拆分成一个一个的小单元；

2、独立：每一个小单元尽可能独立开发；

3、可预先定义：每一分小单元可预先定义号，需要的时候导入使用；

4、可配置：小单元可以接收在使用的时候一些配置信息；

5、复用性：慎重使用；

vue利用ES6的模块化，实现vue组件系统的构建。

应用实例：通过creatAPP({})创建应用实例或者通过new Vue({}), 实例通过的方法大多数都会返回实例，所以这些方法可以链式调用。

四、MVC的实现

// controller->mode->view
// view->controller->mode
	(function() {
		function init() {
			mode.init(); //组织数据+数据监听操作/数据代理
			view.render(); //组织html模板+渲染html
			controller.init(); //事件处理函数定义与绑定
		}
		var mode = {
			data: {
				a: 0,
				b: 0,
				s: '+',
				r: 0
			},
			init: function() {
				var _this = this;
				for (let k in _this.data) {
					(function(k) {
						Object.defineProperty(_this, k, {
							get: function() {
								return _this.data[k];
							},
							set: function(newValue) {
								_this.data[k] = newValue;
								console.log(k);
								view.render({
									[k]: newValue
								})
							}
						})
					})(k)
				}
			}
		}
		var view = {
			el: 'app',
			template: `
			<p>
			<span class='cal-a'>{{a}}</span>
			<span class='cal-s'>{{s}}</span>
			<span class='cal-b'>{{b}}</span>
			<span >=</span>
			<span class='cal-r'>{{r}}</span>
			</p>
			<p>
			<input type='text' placeholder="munber A" class='cal-input a'/>
			<input type='text' placeholder="munber B" class='cal-input b'/>
			</p>
			<p>
			<span class='cal-btn'>+</span>
			<span class='cal-btn'>-</span>
			<span class='cal-btn'>*</span>
			<span class='cal-btn'>/</span>
			</p>
			`,
			render: function(mutedData) {
				if (!mutedData) {
					this.template = this.template.replace(/\{\{(.*?)\}\}/g,
					function(node,key){
					return	mode[key.trim()]
					})
					var container=document.createElement('div');
					container.innerHTML=this.template;
					document.getElementById(this.el).appendChild(container)
				}else{
					for (let k in mutedData) {
						document.querySelector('.cal-'+k).textContent=mutedData[k]
					}
				}
			}
		}
		var controller={
			init:function(){
				var oCalInputs=document.querySelectorAll('.cal-input'),
				inputItem;
				for (let i = 0; i < oCalInputs.length; i++) {
					inputItem=oCalInputs[i]
					inputItem.addEventListener('input',this.handleInput,false);
				}
			},
			handleInput:function(e){
				var tar=e.target||e.srcElement,
				 value=Number(tar.value),
				 field=tar.className.split(' ')[1];
				 mode[field]=value;
				 mode.r=eval('mode.a'+mode.s+'mode.b')
			}
		}
		init()
	}());