1. 首页
  2. 软件开发
  3. Vue的介绍

Vue的介绍

  • 发布于 2024-08-19
  • 12 次阅读

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


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


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


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



文章目录



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.3 API风格

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

3.3.1 选项式API

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

3.3.2 组合式API

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

3.3.3 两个种风格的选择

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

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


感谢阅读,祝君暴富!


原文链接: https://hanshan.blog.csdn.net//article/details/140215388