前端---Vue

VC与MVVM的区别

MVC

MVC：是一种设计模式（Model-View-Controller），是后端的分层开发概念

• M：模型层，负责处理数据（是应用程序中用于处理应用程序数据逻辑的部分，模型对象负责在数据库中存取数据）
• V： 视图层，负责终端界面展示（是应用程序中处理数据显示的部分，视图是依据模型数据创建的）
• C： 调度层，是应用程序中处理用户交互的部分，控制器接受用户的输入并调用模型和视图去完成用户的需求，负责维护两者之间数据传递，控制器本身不输出任何东西和做任何处理，它只是接收请求并决定调用那个模型构建去处理请求，然后在确定用哪个视图来显示返回的数据

MVVM

MVVM：（Model-View-ViewModel）是前端视图层的概念，主要关注于视图层分离

• M：模型层，就是业务逻辑相关的数据对象，通常从数据库映射而来，我们可以说是与数据库对应的model。
• V：视图层。展示出来的用户界面。
• VM：视图模型层，连接view 和 model 的桥梁。因为 model层中的数据往往是不能直接跟 view 中的控件一一对应上的，所以需要在定义一个数据对象专门对应 view 上的控件，而 viewModel 就是把 model 对象封装成可以显示和接受输入的界面数据对象。

MVC与MVVM的区别

• MVC是后端分层开发的概念，MVVM是前端视图层的概念
• MVC中，v代表miew视图层，用来展示数据、发送请求；c是controllen调度层，用来接收数据、响应数据；m是modle模型层，用来处理数据，和数据库做交互。
• MVVM中，v代表view视图层，用来展示数据；vm是view-model视图模型层，用来连接view和molde，承上启下的作用；m是modle模型层，对数据进行逻辑处理。

Vue.js代码结构

1. 引入vue.js
2. 书写视图层
3. 实例化Vue

展示数据的方式：

1. 插值表达式：{{ }}可以做简单的运算
2. v-html和v-text的异同：

• 相同点：都会覆盖原来的元素
• 不同点：v-html可以解析富文本（innerHTML），v-text不可以（innerText）

v-bind:元素属性的绑定，简写：

v-on:事件的绑定，简写@

事件修饰符

1. .stop:阻止冒泡事件
2. .capture:添加捕获模式
3. .self:只有事件作用于本身的时候触发回调函数
4. .once:只会触发一次
5. .prevent:阻止默认事件

双向绑定:v-model 表单控件

作业：减、乘、除

样式的使用：

1. claas

• 数组
• 对象
• 数组内置对象
• 三目表达式

1. style

• 数组
• 对象
• 函数返回值

v-for和key：(item,index) in 遍历的名称

• 遍历数组
• 遍历对象
• 遍历数字

v-for后面必须跟key，key只能是数字或字符串，必须是唯一值

key的作用：提高重排效率，就地复用 diff算法

v-if和v-show

• 相同点：都是显示隐藏元素
• 不同点：v-if是通过删除DOM元素进行隐藏；v-show是通过dispaly: none;进行元素的隐藏
• 应用场景不同：只修改一次的时候用v-if，频繁切换的时候用v-show