Vue.js 是什么
Vue是一套用于构建用户界面的渐进式的JavaScript框架。
为什么选择Vue
Vue是一款友好的、多用途且高性能的JavaScript框架，它能够帮助你创建可维护性和可测试性更强的代码库。Vue是渐进式的JavaScript框架，也就是说，如果你已经有了现成的服务端应用，你可以将Vue作为该应用的一部分嵌入其中，带来更加丰富的交互体验。 和其他框架一样，Vue允许我们将一个网页分割成可复用的组件，每个组件都包含属于自己的HTML、CSS、JavaScript，以用来渲染网页中相应的地方。如果我们构建了一个大型的应用，可能需要将东西分割成为各自的组件和文件，使用Vue的命令行工具，使快速初始化一个真实的工程变得非常简单。
与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。
Vue 是一个推陈出新的前端框架，吸收了很多前端框架的优点。例如，Vue 借鉴了 React 的组件化和虚拟 DOM ，借鉴了 Angular 的模块化和数据绑定。因此，我们以 Vue.js 作为入手，以后深入学习其他框架，之后会发现他们的共通之处，更好地高效地学习。
使用
我的第一个Vue实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>syl-vue-test</title>
<!--引入 vue.js-->
<script src="vue.min.js">
</script>
</head>
<body>
<div id="app">{{msg}}</div>
<script>
var app = new Vue({
el: "#app", // dom 挂载点
data: {
// 数据项
msg: "hello syl",
},
});
</script>
</body>
</html>
Vue 的 MVVM 模式
（图片来源于网络）
M：Model 即数据逻辑处理。
V：View 即视图（用户界面）。
VM：ViewModel 即数据视图，用于监听更新，View 与 Model 数据的双向绑定。
数据驱动（双向数据绑定）的原理
什么是数据驱动
数据驱动是Vue.js最大的特点。在vue中，所谓的数据驱动就是当数据发生变化时，用户界面发生相应的变化，开发者不需要手动的去修改DOM。
举例：
表单数据中的双向绑定
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>syl-vue</title>
<!--引入 vue.js-->
<script src="vue.min.js"></script>
</head>
<body>
<!-- 数据双向绑定 -->
<div id="app">
<input type="text" v-model="msg" />
<p>{{msg}}</p>
</div>
<script>
var app = new Vue({
el: "#app", // el: 挂载点
data: {
// data:数据选项
msg: "hello",
},
});
</script>
</body>
</html>
在我们对文本框输入值时，实例 data 中的 msg 值也随之变化。
