vue学习笔记---MVVM模式

传统MVP设计模式
MVP模式中Model(数据层)的代码编写并不多,主要专注于presenter(控制层)代码的编写,在Presenter层中改变数据,而后也需要在Presenter中修改view视图层显示的数据.
所以需要在Presenter中编写大量的DOM操作.

vue学习笔记---MVVM模式

MVVM模式
开发人员只要关注的就是Model数据层代码的编写,当数据发生改变时View视图层中显示的数据也会自动改变.因此程序员不需要过多编写控制层的代码.
vue中对于ViewModel自己来控制,不需要程序员知道实现细节.

前端组件化

前段组件化可以理解为页面之中的一部分,页面中的每一块区域就是一个组件.
件前端组件化的好处就在于能够拆分出可重用的代码,在需要的地方可以重复导入,消除了重复的代码.

vue学习笔记---MVVM模式

使用组件化修改ToDoList程序

原ToDoList程序代码

<html>
	<head>
		<title>todolist</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<script src="vue.js"></script>
	</head>
	<body>
	<div id="app">
		待办事项:<input type="text" id="todoList" v-model="todo" v-on:keyup.enter="addList"/>
		<input type="submit" value="提交" v-on:click="addList" />
		<ul>
			<li v-for="item in list">{{item}}</li>
		</ul>
	</div>
		<script>
			var vm = new Vue({
				el:'#app',
				data:{
					list:[],
					todo:""
				},
				methods:{
					addList:function(){
						this.list.push(this.todo);
						this.todo="";
					}
				}
			})
		</script>
	</body>
</html>

现在希望将"<li v-for=“item in list”>{{item}}</li>"部分作为一个组件抽取出来
为了能在模板中使用，这些组件必须先注册以便 Vue 能够识别。这里有两种组件的注册类型：全局注册和局部注册。

定义全局组件

props—Prop 是你可以在组件上注册的一些自定义特性。当一个值传递给一个 prop 特性的时候，它就变成了那个组件实例的一个属性。
template:为组件内容

//定义全局组件
Vue.component("item-component",{
	props:['arg'],//使用propers接收传递的参数
	template:"<li>{{arg}}</li>"
});

在页面中引用全局组件
v-bind—系那个组件中传递参数,参数名为arg,参数内容为每一个从集合中提取出来的"item"变量内容

<item-component v-bind:arg="item" 
				v-for="item in list"></item-component>

最后页面代码

<html>
	<head>
		<title>todolist</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<script src="vue.js"></script>
	</head>
	<body>
	<div id="app">
		待办事项:<input type="text" id="todoList" v-model="todo" v-on:keyup.enter="addList"/>
		<input type="submit" value="提交" v-on:click="addList" />
		<ul>
			<item-component v-bind:arg="item" 
							v-for="item in list"></item-component>
		</ul>
	</div>
		<script>
		//定义全局组件
			Vue.component("item-component",{
				props:['arg'],//使用propers接收传递的参数
				template:"<li>{{arg}}</li>"
			});
			var vm = new Vue({
				el:'#app',
				data:{
					list:[],
					todo:""
				},
				methods:{
					addList:function(){
						this.list.push(this.todo);
						this.todo="";
					}
				}
			})
		</script>
	</body>
</html>

vue学习笔记---MVVM模式

使用局部注册组件
局部组册组件无法使用"-“符号命名,因此需要使用驼峰命名法"XxxYyy”
而在使用的局部组件的时候,只需要将大写字母转换为小写字母即可,而后在单词连接处添加"-"符号
例如:“ItemComponent"组件,使用时就是”<item-component>"

//使用局部注册主键
var ItemComponent = {
	props:['arg'],//定义传递参数
	template:"<li>{{arg}}</li>"
}

如果要使用局部注册组件,需要在Vue根实例中使用"components注册组件,可以定义组件的名称

var vm = new Vue({
	el:'#app',
	components:{//注册局部组件
		ItemComponent:ItemComponent
	},
	data:{
		list:[],
		todo:""
	},
	methods:{
		addList:function(){
			this.list.push(this.todo);
			this.todo="";
		}
	}
})

vue学习笔记---MVVM模式