初识Vue.js

文章目录

• MVC、MVP、MVVM
• 三大MVVM框架
• vue-devtools
• 第一个vue程序

---

一、MVC、MVP、MVVM

MVC（Model-View-Controller）是最常见的的构架模型之一。在这种模式下，应用被分为三个部分：模型（Model）、视图（View）和控制器（Controller）。

MVP（Model-View-Presenter）是由经典的MVC模式演变而来的。Model（模型）提供数据，View（视图）负责显示，Presenetr（表示器）负责逻辑的处理。

MVVM（Model-View-ViewModel）萌发于2205年微软公司。M为数据层，V为视图层，VM为视图数据层，在此架构中不允许数据层和视图层直接通信的，VM是连接V和M的桥梁。

二、三大MVVM框架

三个佼佼者：Angular、React和Vue

特：Vue可以构成一个完整的生态系统，可以通过添加组件系统、客户端路由、大规模状态管理来构建一个完整的框架。

---

三、vue-devtools

vue-devtools是一款基于Chrome浏览器的插件，用于调试Vue应用，可以极大地提高调试效率。

四、第一个Vue程序

1、插入Vue.js

<script src="js/jquery.min.js"></script>
<script src="js/vue.js"></script>

2、插入内容

<script>
	document.getElementById('title1').innerHTML = '上海邻之水乡踏青采草莓';
	document.getElementById('content1').innerHTML = `行走，停顿，驻足，思考。
									对于古镇，总有着一份特殊的情节。
									门前有河，半亩田地种瓜点豆，春夏秋冬别有一番风景。`;
	$('#title2').html('土家族姑娘的湘•黔环游记');
	$('#content2').html(`人总要给忙忙碌碌的生活找点不一样的乐趣，
									或是约一约许久不见的老朋友吃一顿火锅，
									或是打一场酣畅淋漓的篮球比赛，
									或是安静的看完一本喜欢的书，
									亦或是去那个一直想去却还不曾到达的远方。`);
	var app= new Vue({
		el:'#app',
		data:{title: '在潮汕吃吃喝喝的快落日子',
		content: `如果你没有来过 普宁 ，大概不知道这里美食那！么！多！ 
									普宁 肠粉、粿汁、豆干、洪阳蚝烙、猪肠胀糯米、莲藕汤、厚弥粥、牛肉火锅.......
									虽不是什么稀奇珍贵的东西，却是很多人从小到大最爱的味道。
									对于吃货们来说，就更加令人向往。`

		}
	})
</script>