Vue2 01 前端核心分析、HelloVue

Vue2 01 前端核心分析、HelloVue
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
1. IDEA 安装 Vue 插件
可能需要重启一下 IDEA，才会生效。如果还不生效！那么就直接新建一个 a.vue 的文件。它就刷新自动识别了。

2. 利用 cdn 导入 Vue.js 并且使用！

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

而且学习 Vue 最好先从 Vue2 学起。然后去学 Vue3。
```
DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
```
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 去更新视图了。
相关阅读:
虹科分享 | 冻干机搁板温度均匀性（分布验证）的测量方法
 事件过滤器
 神经网络的基本结构
 java中ServiceLoader.load 没有加载出来实现类
 C++编译期循环获取变量类型
 java-php-python-科院垃圾分类系统计算机毕业设计
 共享开源技术，共建开放生态丨平凯星辰余梦杰出席 2022 世界互联网大会开源论坛圆桌对话
 【Rust日报】2022-07-26 lurk - strace written in rust
2020年最新最全的Java面试经历整理(一次性查缺补漏个够)
05 | 基础篇：某个应用的CPU使用率居然达到100%，我该怎么办？笔记
原文地址：https://blog.csdn.net/qq_52606908/article/details/126019162

1.1 前端核心分析

1.2 HelloVue

1.3 MVVM