当前位置：首页 > news >正文

Vue的介绍

news 2025/7/5 0:08:08

天行健，君子以自强不息；地势坤，君子以厚德载物。

每个人都有惰性，但不断学习是好好生活的根本，共勉！

文章均为学习整理笔记，分享记录为主，如有错误请指正，共同学习进步。

两水夹明镜，双桥落彩虹。
人烟寒橘柚，秋色老梧桐。
——《秋登宣城谢脁北楼》

文章目录

Vue的概览
- 1. Vue.js 简介
- - 1.1 创始人
  - 1.2 版本
  - 1.3 读音
  - 1.4 特点
  - 1.5 核心特点
  - 1.6 Vue官网
- 2. vue与angular的区别
- - 2.1 angular的特点
  - 2.2 vue的特点
  - 2.3 共同点
- 3. vue的几个概念
- - 3.1 渐进式框架
  - 3.2 单文件组件
  - 3.2 API风格
  - - 3.2.1 选项式API
    - 3.2.2 组合式API
    - 3.2.3 两个种风格的选择

Node.js的下载、安装和配置
node的下载、安装、配置和使用（node.js下载安装和配置、npm命令汇总、cnpm的使用）
Vue入门

Vue的概览

该部分可参考Vue官网介绍

1. Vue.js 简介

摘录自Vue官网的介绍如下：

Vue (发音为 /vjuː/，类似 view) 是一款用于构建用户界面的 JavaScript 框架。
它基于标准 HTML、CSS 和 JavaScript 构建，并提供了一套声明式的、组件化的编程模型，
帮助你高效地开发用户界面。无论是简单还是复杂的界面，Vue 都可以胜任。

1.1 创始人

项目的创建人：尤雨溪

1.2 版本

版本分为Vue、Vue2、Vue3
2016年Vue2发布
2020年Vue3发布
随着Vue2在2023年12月31日停止维护
后续的使用基本都是Vue3

1.3 读音

读音为view，并非v-u-e

1.4 特点

轻量的mvvm（model-view-viewmodel）框架，与angular、react类似，均为数据双向绑定的实现
数据驱动+组件化的前段开发
通过简单的API实现响应式的数据绑定和组合的视图组件
易上手，轻量化

1.5 核心特点

声明式渲染：Vue 基于标准 HTML 拓展了一套模板语法，使得我们可以声明式地描述最终输出的 HTML 和 JavaScript 状态之间的关系。
响应性：Vue 会自动跟踪 JavaScript 状态并在其发生变化时响应式地更新 DOM。

1.6 Vue官网

官网地址
英文官网：https://vuejs.org/
中文官网：https://cn.vuejs.org/

2. vue与angular的区别

2.1 angular的特点

上手较难
指令以ng-xxx开头
所有属性和方法都存储在$scope中
由google维护

2.2 vue的特点

简单、易学、轻量
指令以v-xxx开头
HTML代码+JSON数据，再创建一个vue的实例

2.3 共同点

都不兼容低版本IE

总结对比，github中vue使用更多

3. vue的几个概念

3.1 渐进式框架

无需构建步骤，渐进式增强静态的HTML
在任何页面中作为Web Components嵌入
单页应用（SPA）
全栈/服务端渲染（SSR）
Jamstack/静态站点生成（SSG）
开发桌面端、移动端、WebGL，甚至是命令行终端的界面

3.2 单文件组件

以.vue结尾的文件就是单文件组件，是一种类似HTML格式的文件的Vue组件
单文件组件英文件名称为：Single-File Components
缩写为SFC
Vue单文件组件将一个组件的逻辑（JavaScript）、模板（HTML）和样式（CSS）封装在同一个文件中

3.2 API风格

vue的组件有两种风格，选项式API和组合式API

3.2.1 选项式API

Options API
可使用包含多个选项的对象来描述组件的逻辑，如data、methods、mounted
选项所定义的属性会暴露在函数内部的this上，他会指向当前的组件实例

3.2.2 组合式API

Composition API
可使用导入的API函数来描述组件逻辑，单文件组件中，组合式API会与<script setup>搭配使用
setup attribute是一个表示，让vue需要在编译时进行处理，让我们更简洁的使用组合式API

3.2.3 两个种风格的选择

两种风格的底层系统相同
选项式API是在组合式API基础上实现的，vue的基础知识在两种api种是通用的
选项式API与面向对象的思想更为贴近
组合式API更为灵活
选项式API更易理解和上手

在vue的官网可自由切换两种api风格的文档
根据自己需要选用即可

感谢阅读，祝君暴富！