Vue.js

发表于 更新于

Vue.js 是一套构建用户界面的渐进式框架。与其他重量级框架不同的是，Vue 采用自底向上增量开发的设计。Vue 的核心库只关注视图层，并且非常容易学习，非常容易与其它库或已有项目整合。另一方面，Vue 完全有能力驱动采用单文件组件和Vue生态系统支持的库开发的复杂单页应用。

框架和库的区别

  • 框架：一套完整的解决方案，项目对其依赖性大，中途难以更换。
  • 库（插件）：提供某个功能，项目对其依赖性较小，当某个库无法完成功能时可以更换其他库。

MVVM模式

MVVM时前端视图层的概念，专注前端视图分离，将前端分为Model、View、ViewModel三个部分。ViewModel是MVVM的核心，由它来调度Model和View。
Model保存每个页面单独的数据，View是每个页面中的Html结构。ViewModel分割了View和Model。其结构如下所示：
01

导入Vue.js

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

之后便可在<Script>标签中使用Vue对象。

1
2
3
4
5
6
7
8
9
10
11
12
<div id="app">
	<p>{{message}}</p>
</div>

<script>
	var vm=new Vue({
		el:'#app',   //当前new 出来的Vue对象能够控制的区域
		data:{//存放el中要使用的数据
			message:'hello'  //通过Vue提供的指令，就无需再操作DOM元素
		}
	})
<script>

MVVM模式具体体现在示例中：
02