vue基础

最新推荐文章于 2024-08-08 15:28:54 发布

可爱de蓝胖子

最新推荐文章于 2024-08-08 15:28:54 发布

阅读量861

点赞数 10

文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/weixin_63757502/article/details/136918361

版权

本文介绍了Vue.js的基本概念，包括其作为渐进式框架的特点、核心理念（数据驱动视图和组件化），以及学习流行框架的原因（如轻量级、国人开发等）。同时，还对比了框架和库的区别，以及MVC和MVVM在前端开发中的应用。

摘要由CSDN通过智能技术生成

vue基础使用

一、什么是vue.js：

一套用于构建用户界面的渐进式框架。采⽤⾃底向上增量开发的设计。（单页面应用程序）
vue.js 是前端的主流框架之一，和 Angular.js、React.js 一起，并称为前端三大主流框架

二、vue的核心理念：

数据驱动视图，组件化开发

三、为什么学习流行框架：

轻量级框架：只关注视图层，是一个构建数据的视图集合
简单易学：国人开发，中文文档，不存在语言障碍，易于理解和学习
视图、数据、结构分离：使数据的更改更为简单
不需要进行逻辑代码的修改，只需要操作数据就能完成相关操作
虚拟 DOM：不再使用原生的 dom 操作节点，极大解放 dom 操作
运行速度更快：相比较与 react 而言，vue 存在很大的优势

四、框架和库的区别：

框架：是一套完整的解决方案，对项目的侵入性加大，如果要更换框架，则需要重新架构整个项目
库：提供的一个小功能，对项目的入侵性较小，如果这个库无法满足需求，更换一个库即可。

五、MVC 和 MVVM 的区别：

MVC 是一种设计模式，表示“Model-View-Controller”，是后端的分层开发概念。
M：模型层——model，【处理数据，与数据库打交道】负责处理数据（是应用程序中用于处理应用程序数据逻辑的部分，模型对象负责在数据库中存取数据）
V: 视图层——view，【展示数据，发送请求】负责终端界面展示（是应用程序中处理数据显示的部分，视图是依据模型数据创建的）
C：调度层——controller，【接收数据，响应数据，返回数据】是应用程序中处理用户交互的部分，控制器接受用户的输入并调用模型和视图去完成用户的需求，负责维护两者之间数据传递，控制器本身不输出任何东西和做任何处理，它只是接受请求并决定调用那个模型构建去处理请求，然后在确定用那个视图来显示返回的数据
MVVM 表示“Model-View-ViewModel”，是前端视图层的概念，主要关注于视图层分离
M：模型层——model，【用来处理逻辑关系】就是业务逻辑相关的数据对象，通常从数据库映射而来，我们可以说是与数据库对应的 model。
V：视图层——view，【用来展示数据】展示出来的用户界面。
VM: 视图模型层——view-model，【用来连接 view 和 model，承上启下的作用】连接 view 和 model 的桥梁。因为 model 层中的数据往往是不能直接跟 view 中的控件——对应上的，所以需要在定义一个数据对象专门对应 view 上的控件，而 viewModel 就是把 model 对象封装成可以显示和接受输入的界面数据对象。
在这里插入图片描述
view 和 viewModel 之间通过双向数据绑定建立联系，当 view 变化时，会自动更新到viewModel，反之亦然

六、vue.js的代码结构

<html>
<head>
    <!-- 1. 引入vue.js -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>
</head>
<body>
    <!-- 2. 书写视图层 -->
    <div id="app">
    </div>
</body>
<script>
    // 3. 实例化Vue()
    let vm = new Vue({
        el: "#app", // 控制区域
        data: { // 存放数据
            message: 'Hello Vue!' // 存放的数据
        },
        methods: { // 存放的方法
        }
    })
</script>
</html>