Vue概论

乖女子@@@

已于 2023-12-06 14:08:50 修改

阅读量124

点赞数

分类专栏： # vue2 文章标签： vue.js 前端 mvc

于 2022-09-17 15:47:02 首次发布

本文链接：https://blog.csdn.net/qq_43260366/article/details/126905789

版权

vue2 专栏收录该内容

28 篇文章 0 订阅

订阅专栏

[1]对MVVM的理解

MVVM

[1]定义

M:model
- 模型
- 作用：负责数据存储。泛指后端进行的各种业务逻辑处理和数据操控，主要围绕数据库系统展开；
V:view
- 视图
- 作用：用来展示数据的用户界面，主要由 HTML 和 CSS 来构建；
VM:view-model
- 视图模型
- 作用：业务逻辑处理，将数据进行加工后交给视图进行展示。Vue的实例化对象就是MVVM模式中的VM层，模型通过它可以将数据绑定到页面上，视图可以通过它将数据映射到模型上；
MVVM是数据驱动视图更新，三大框架都是使用MVVM的设计模式；

[2]优点

1.低耦合性（简化了业务与视图的依赖）：
- 视图（界面）可以独立于Model(数据)变化和修改，一个ViewModel可以绑定到不同的"View"上，当View变化的时候Model可以不变，当Model变化的时候View也可以不变
- 注：低耦合性定义：就是A模块与B模块存在依赖关系，那么当B发生改变时，A模块仍然可以正常工作，那么就认为A与B是低耦合的。
2.可重用性
- 可以把一些视图逻辑放在一个ViewModel里面，让很多view重用这段视图逻辑
3.可以独立开发
- 开发人员可以专注于业务逻辑和数据的开发（ViewModel），设计人员可以专注于页面设计；

MVC

M:model(模型)，与数据库进行交互；
V:view(界面)
C:controller(控制器)，是模型与视图之间的纽带；

MVC是Model-View-Control的缩写，是一种典型的软件设计模式，使用业务逻辑，数据，界面相分离的方式编写代码，将业务逻辑写在一个部件里面，当设计个性化界面以及用户交互的时候，不需要重写业务逻辑；

MVC与MVVM之间的区别

其实MVVM是MVC的改良版；

MVVM与MVC最大的区别就是：MVVM是数据驱动模型MVVM实现了View和Model的自动同步，也就是当Model的属性改变时，我们不用再自己手动操作Dom元素来改变View的显示，而是改变属性后该属性对应View层显示会自动改变；

[2]定义

Vue是一个用于构建用户界面的渐进式javascript框架。

如何理解渐进式框架

所谓渐进式就是在使用vue时不必将vue所有的内容引入，而是使用哪部分就引入哪部分，渐进式框架的优点就是最大程度的避免资源浪费。

vue的特点

[1]数据驱动：Vue会根据数据，自动渲染页面；无需DOM操作，修改了对象中的数据，页面会自动渲染(双向数据绑定的原理)
[2]组件化开发: 允许将一个网页分割成可复用的组件，每个组件都包含属于自己的HTML、CSS、javascript以用来渲染网页中相应的地方(组件化开发);

优点
- 一次定义，多处使用
- 便于后期维护

[3]使用

官网->安装

(1)制作原型或学习

vue2.x

在这里插入图片描述
通过上述引入可以在界面中得到一个Vue构造函数；

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.7.10"></script>
  </head>
  <body>
    <div id="app">{{msg}}</div>
    <script>
      const vue = new Vue({
        el: '#app',
        data: {
          msg: 111
        }
      })
    </script>
  </body>
</html>

上述代码在页面中展现111

vue3.x

制作原型学习
在这里插入图片描述
引入上述链接之后，可以得到一个Vue对象，该对象上存在createApp构造函数以及一些组合API。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head>
<body>
  <button id="app">{{ msg }}</button>
  <script>
    const { createApp, ref } = Vue
    createApp({
      setup(){
        const msg = ref('111111')
        return{
          msg
        }
      }
    }).mount('#app')
  </script>
</body>
</html>