前序

MVVM模式

MVVM（Model-View-ViewModel）是一种软件架构设计模式，由微软 WPF（用于替代 WinForm，以 前就是用这个技术开发桌面应用程序的）和 Silverlight（类似于 Java Applet，简单点说就是在浏览器上 运行的 WPF） 的架构师 Ken Cooper 和 Ted Peters 开发，是一种简化用户界面的事件驱动编程方式。 由 John Gossman（同样也是 WPF 和 Silverlight 的架构师）于 2005 年在他的博客上发表。

MVVM 源自于经典的 MVC（Model-View-Controller）模式。MVVM 的核心是 ViewModel 层，负责转 换 Model 中的数据对象来让数据变得更容易管理和使用，该层作用是

• 向上与视图层进行双向数据绑定
• 向下与 Model 层通过接口请求进行数据交互

MVVM模式的好处

MVVM 模式和 MVC 模式一样，主要目的是分离视图（View）和模型（Model），有几大好处：

低耦合：

视图（View）可以独立于 Model 变化和修改，一个 ViewModel 可以绑定到不同的 View 上，当 View 变化的时候 Model 可以不变，当 Model 变化的时候 View 也可以不变。

可复用：

你可以把一些视图逻辑放在一个 ViewModel 里面，让很多 View 重用这段视图逻辑。

独立开发：

开发人员可以专注于业务逻辑和数据的开发（ViewModel），设计人员可以专注于页 面设计。

可测试:

界面素来是比较难于测试的，而现在测试可以针对 ViewModel 来写。

Vue基础知识：

开发环境

vscode 与 Idea都可以，一个小窍门是在vs code中运行直接选中index.html->run(运行)即可。在idea中引入项目vs code的项目后，直接点浏览器的按钮即可。另外前端提示错误以vs code为准，如果vs code中没有错误提示，代码是没有问题的。

一个运行后的MVVM例子：

再次对照mvvm

什么是Vue

Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是， Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库 或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复 杂的单页应用提供驱动。

第一个程序

1、编写视图层 （使用vue的插值表达式 {{data中的变量}}）
2、编写Vue对象
3、提供数据！

<!-view layer>
<div id="app">
    {{message}}
</div>
<script src="../lib/vue.js"></script>
<script>
    //view model layer
    var vm = new Vue({
        el:'#app',
        data:{
            //model layer
            message:'hello, vue world'
        }
    })
</script>

Vue生命周期

Vue基本语法:

语法学习的重点:

• 视图 v-bind （HTML + CSS）
• 事件 v-on （JS）
• 判断 v-if
• 循环 v-for
• 双向绑定 v-model 表单中的常用标签都可以进行绑定
• 通信 （vue是专注于视图层的框架，通信是没有的，推荐我们使用axios

mustache&v-bind

用mustache语法跟v-bind 来进行数据的绑定。mustache语法可以将变量的值变成普通的html，v-bind用来绑定html中的默认的属性, 用于响应式地更新 HTML attribute：

<p>Using mustaches: {{ rawHtml }}</p>
<p>Using v-html directive: <span v-html="rawHtml"></span></p>

v-bind

<a v-bind:[attributeName]="url"> ... </a>

v-on

<a v-on:click="doSomething">...</a>

缩写

v- 前缀作为一种视觉提示，用来识别模板中 Vue 特定的 attribute。当你在使用 Vue.js 为现有标签添加动态行为 (dynamic behavior) 时，v- 前缀很有帮助，然而，对于一些频繁用到的指令来说，就会感到使用繁琐。同时，在构建由 Vue 管理所有模板的单页面应用程序 (SPA - single page application) 时，v- 前缀也变得没那么重要了。因此，Vue 为 v-bind 和 v-on 这两个最常用的指令，提供了特定简写：v-bind简写为：，v-on简写为@。

v-on

可以用 v-on 指令监听 DOM 事件，并在触发时运行一些 JavaScript 代码。许多事件处理逻辑会更为复杂，所以直接把 JavaScript 代码写在 v-on 指令中是不可行的。因此 v-on 除了接受直接js代码，还可以接收一个需要调用的方法名称。

v-if

<div id="app">
    <!-- 如果成立true则显示这个标签，否则隐藏！ -->
    <h2 v-if="type === 'A'"> 测试A </h2>
    <h2 v-else-if="type === 'B'"> 测试B </h2>
    <h2 v-else-if="type === 'C'"> 测试C </h2>
    <h2 v-else> Other </h2>
</div>

<script src="../lib/vue.js"></script>
<script>
    var vm = new Vue({
        el: '#app',
        data: {
            type: 'A'
        }
    })
</script>

v-model: [https://cn.vuejs.org/v2/guide/forms.html#%E5%80%BC%E7%BB%91%E5%AE%9A](

https://cn.vuejs.org/v2/guide/forms.html#值绑定)

开始你的第一个vue项目

npm install -g @vue/cli
# OR
yarn global add @vue/cli

vue create my-project
# OR
vue ui