根据有关前端开发教材的说法，Vue是当前最主流的前端开发框架，它可以大大减少前端开发人员的工作量。首先查看以下的代码：

<ul>
	<li>
		<div class="div1">
			<img alt="项目1" src="images/bigben200.png">
			<p>项目1</p>
		</div>
		<div class="div2"><p>我家的花瓶</p></div>
	</li>
	<li>
		<div class="div1">
			<img alt="项目2" src="images/colosseum200.png">
			<p>项目2</p>
		</div>
		<div class="div2"><p>谁的眼泪在飞</p></div>
	</li>
	<li>
		<div class="div1">
			<img alt="项目1" src="images/egypt200.png">
			<p>项目3</p>
		</div>
		<div class="div2"><p>主要内容</p></div>
	</li>
	<li>
		<div class="div1">
			<img alt="项目4" src="images/eiffel200.png">
			<p>项目4</p>
		</div>
		<div class="div2"><p>家庭聚会</p></div>
	</li>
	<li>
		<div class="div1">
			<img alt="项目5" src="images/liberty200.png">
			<p>项目5</p>
		</div>
		<div class="div2"><p>维也纳新年音乐会</p></div>
	</li>
</ul>

如果照这种思路编写页面，随着内容的增加，各种dom标签需要根据内容的多少进行重复，这样会大大增加开发人员的工作量。我们首先引用vue.js。

<script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>

然后，简化上述HTML代码如下：

<ul>
	<li v-for "m in menus">
		<div class="div1">
			<img v-bind:alt="m.title" v-bind:src="m.src">
			<p>{
   
   { m.title }}</p>
		</div>
		<div class="div2"><p>{
   
   { m.descriptioin }}</p></div>
	</li>
</ul>

其中v-for是vue.js中的循环语句，v-bind表示需要绑定的内容，变量用双大括号标示。在script里面这样编写：

var vue = new Vue({
	el: '#app',
	data: {
		menus: [{
			src: "images/icons/bigben200.png",
			title: "标准地图服务",
			description: "自然资源部提供的标准地图服务网站，用户" + 
				"可以在网上下载中国地图、世界地图供人们下载、使用。" +
				"用户若出版需要申请审图号。"
		}, {
			src: "images/icons/colosseum200.png",
			title: "中国反邪教网",
			description: "通过比较宗教与邪教的区别，以及大量的案例" + 
				"来进一步说明邪教的反科学、反人类、反社会性质，从而" + 
				"铲除邪教产生的土壤。"
		}, {
			src: "images/icons/egypt200.png",
			title: "天地图实例库",
			description: "本网站包括了如何使用地图、加载地图、与地" +
				"图有关的一些算法，查询距离等。"
		}, {
			src: "images/icons/liberty200.png",
			title: "今日食谱",
			description: "随着经济的不断发展，人们越来越讲究如何吃" +
			"得有声有色，为此，本网站汇聚的大量的精英厨师，向广大网友"+
			"们推荐美味又营养的食品。"
		}]
	},
	computed: {
		
	}
})