初识Vue.js

官网文档地址：传送门

1、为什么学习Vue.js?

首先给大家说下MVVM模式

MVVM设计模式由Model（模型）、View（视图）、ViewModel（视图模型）三部分组成。

主要的目的是分离视图（View）和模型（Model），主要有以4个优点：

低耦合：View可以独立于Model的变化和修改，一个VIew Model可以绑定到不同的View上，当View变化时Model可以不变化，当Model变化时View也可以不用变化。

独立开发：开发人员更加专注于业务逻辑和数据的开发（ViewModel），设计人员可以专注于界面的设计。

可重复性：可以把一些视图逻辑放在一个ViewModel中，让更多的View重用这段视图逻辑。

可测试：现在测试人员可以针对ViewMdoel来写。

 MVVM框架已经把最脏最累的一块做好了， 我们开发者只需要处理和维护View Model， 更新数据视图就会自动得到相应更新，真正实现事件驱动编程。
  View层展现的不是Model层的数据， 而是ViewModel的数据， 由ViewModel负责与Model层交互， 这就完全解耦了View层和Model层， 这个解耦是至关重要的， 它是前后端分离方案实施的重要一环。

而Vue.js就是一个MV VM的实现者， 他的核心就是实现了DOM监听与数据绑定。

2、Vue的安装方式：

1.1 使用CDN方法(初学者使用)也可以直接使用CDN的方式引入，代码如下：

1.2下载官网Vue.js文件，相对位置引入到项目中

1.3Vue-cli脚手架
利用Vue-cli 脚手架构建Vue项目，在后面第七点详细讲解。(中大型项目中推荐使用)。

3、第一个Vue程序

说明:

view层只需要在绑定的元素中使用双花括号将Vue创建的名为message属性包裹起来， 即可实现数据绑定功能， 也就实现了View Model层所需的效果， 是不是和EL表达式非常像?

el: '#vue'：绑定元素的ID

data 用于定义属性，实例中有2个属性分别为：message1、message2

完整的HTML

	
	
    
	



	

		
message1: {{message1}}
		
message2: {{message2}}