入门Vue2 01 前端核心分析、HelloVue

牟泉禹[Dark Cat]

已于 2022-07-29 13:33:56 修改

阅读量153

点赞数

分类专栏：学习笔记文章标签：前端 javascript vue.js

于 2022-07-27 19:08:54 首次发布

BY-牟泉禹/MuQuanyu

本文链接：https://blog.csdn.net/qq_52606908/article/details/126019162

版权

学习笔记专栏收录该内容

387 篇文章 11 订阅

订阅专栏

1.1 前端核心分析

Vue 是一套用于构建用户界面的 渐进式框架，发布于 2014 年 2月。与其它大型框架不同的是，Vue被设计为可以自底向上逐层应用。Vue的核心库只关注视图层，不仅易于上手，还便于与第三方库（vue-router：跳转 vue-resource：通信 vuex：管理）或项目整合。

它遵守Soc（关注点分离）原则，也就是说我就管视图层。就写界面。哈哈 ~

CSS预处理器

CSS 预处理器定义了一种新的语言，其基本思想是，用一种专门的编程语言，为 CSS 增加了一些编程的特性，将 CSS 作为目标生成文件，然后开发者就只要使用这种语言进行 CSS 的编码工作即可。说白了就是：“用一种专门的编程语言，进行 Web 页面样式设计，再通过编译器转化为正常的 CSS 文件。这样的话 CSS 就不是固定写死的了。”

常用的 CSS 预处理器有：

SASS：基于 Ruby，通过服务端处理，功能强大。解析效率高，需要学习 Ruby 语言，上手难度高于 LESS。
LESS：基于 NodeJS，通过客户端处理，使用简单方便。功能比SASS简单，解析效率也低于SASS，但是目前来看，在实际开发中足够了。所以现在大多数用的预处理器都是 LESS。

MVVM 模式的实现者

Model：模型层，在这里表示 JS 对象。
View：视图层，在这里表示 DOM（HTML 操作的元素）
ViewModel：连接视图和数据的中间件，Vue.js 就是 MVVM 中的 ViewModel 层的实现者。

在 MVVM 架构中，是不允许数据和视图直接通信的，只能通过 ViewModel 来通信，而 ViewModel 定义了一个 Observer 观察者。

ViewModel 能够观察到数据的变化，并对视图对应的内容进行更新
ViewModel 能够监听到视图的变化，并能够通知数据发生改变

至此，我们就明白了，Vue.js 就是一个 MVVM 的实现者，它的核心就是实现了 DOM 监听与双向数据绑定。

为什么要使用 Vue.js

轻量级，体积小时一个重要的指标。 Vue.js 压缩后只有 20+ kb（Angular 压缩后要 56+ kb、React 压缩后都要 44+ kb）
移动端优先。更适合做当下最流行的移动端。比如说移动端 Touch 事件的支持。
易上手，学习曲线平稳，文档齐全。
洗去了 Angular（模板化）和 React（虚拟 Dom）的长处，并拥有自己独特的功能。如：计算属性。
开源，社区活跃度很高很高！

1.2 HelloVue

IDEA 安装 Vue 插件

在这里插入图片描述
可能需要重启一下 IDEA，才会生效。如果还不生效！那么就直接新建一个 a.vue 的文件。它就刷新自动识别了。

在这里插入图片描述
2. 利用 cdn 导入 Vue.js 并且使用！

切记：Vue3 的语法和 Vue2 略有不同。

而且学习 Vue 最好先从 Vue2 学起。然后去学 Vue3。

<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.13/vue.js"></script>

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<div id="app" v-cloak>{{message}}</div>

<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.13/vue.js"></script>
<script>
    let vm = new Vue({
       el: "#app",
       data: {
           message: "hello,vue!"
       }
    });
</script>

</body>
</html>

在这里插入图片描述
3. 测试数据的双向绑定

我们直接可以在控制台改变变量 vm 的 message 值。然后你会发现惊奇的一幕。前端的值居然不刷新，也没有用 AJAX 就改变了。卧槽？

在这里插入图片描述

1.3 MVVM

在这里插入图片描述

为什么要使用 MVVM

MVVM 模式和 MVC 模式是大差不差的。主要目的其实就是分离视图和模型！这样做的话，会有如下好处！

低耦合：视图可以独立于 Model 变化和修改，一个 ViewModel 可以绑定到不同的 View 上，当 View 变化的时候，Model 可以不变，当 odel 变化的时候，View 也可以不变。说人话就是互不影响，这个数据取过来是啥就是啥。类似于后端的变量一样。只负责拿到数据和更改数据，设置数据等。其它的东西变不变无所谓，跟人家也没关系。当然它也影响不了别的东西。
可复用：你可以把一些视图逻辑放在一个 ViewModel 里面。让很多的 View 重用这段视图逻辑。
独立开发：开发人员可以专注于业务逻辑和数据的开发（ViewModel），而并非考虑什么请求，更新什么数据，什么异步乱七八糟的事情。设计人员完全可以专注于页面的设计。
可测试：界面的话测试一直都很难，而现在测试直接可以针对 ViewModel 来写。

视图状态和行为都封装在了 ViewModel 里面，这样的封装使得 ViewModel 可以完整地取描述 View 层。由于实现了双向绑定，ViewModel 的内容会实时展现在 View 层，这是非常激动人心的创新革命。前端开发者再也不必低效率又麻烦地去操纵 DOM 去更新视图了。