遇见Vue.js

一、邂逅Vue.js

• Vue(读音类似于: view)是一个渐进式框架。
• 什么是渐进式呢？
• 渐进式意味着可以把Vue嵌套进你的项目里面，作为项目的一部分。举例：假设你公司的某个项目有三个页面，这三个页面都是用jQuery或者原生的js进行开发的，这个时候你可以用Vue来重构某个页面，然后等你有其他时间，再一点一点用Vue去重构其他的页面，这个过程就是渐进式的过程。
• Vue的全家桶：Vue的核心+Vue-router(路由)+Vuex(状态管理)+Axios

二、安装Vue.js

安装方式有以下三种：初学者可先使用前两种，等学了vue-cli再用第三种方法。具体操作可看官方文档。

• 方式一： 直接CDN方式引入

<!--开发环境版本-->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<!--生产环境版本-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.12"></script>

• 方式二： 下载和引入

1. 开发环境：https://vuejs.org/js/vue.js
2. 生产环境：https://vuejs.org/js/vue.js

• 方式三： 通过vue-cli

$ npm install vue

三、体验Vue.js

• 声明式编程：数据和界面完全分离！
• 响应式：当数据发生变化，界面也会跟着响应。

<div id="app">
	{{message}}
</div>
<script>
	const app = new Vue({
		el: '#app', //用于挂载要管理的元素
		data: {  //定义数据
			message: 'seven'
		}
	})
</script>

四、Vue中的MVVM架构

• MVVM：Model-View-ViewModel，ViewModel是帮助Model和View通信的。