锋盈数科-知识库 Logo
首页
软件开发
计算机基础
Hello Halo
新手必读
关于本知识库
登录 →
锋盈数科-知识库 Logo
首页 软件开发 计算机基础 Hello Halo 新手必读 关于本知识库
登录
  1. 首页
  2. 软件开发
  3. Vue的介绍

Vue的介绍

0
  • 软件开发
  • 发布于 2024-08-19
  • 12 次阅读
黄健
黄健

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


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


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


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



文章目录

  • 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.3 API风格
        • 3.3.1 选项式API
        • 3.3.2 组合式API
        • 3.3.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.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

标签: #VUE 61 #软件开发 1171
相关文章

万字:支付“核心系统”详解 2024-11-02 15:33

专栏作者:隐墨星辰 \| 主编:陈天宇宙 这篇文章也尝试化繁为简,探寻支付系统的本质,讲清楚在线支付系统最核心的一些概念和设计理念。 虽然支付行业已经过了风头最劲的时光,但跨境支付仍然在蓬勃发展,每年依然有很多新人进入这个行业,这篇文章尝试为这些刚入行的新人提供一点帮助。 文章只介绍一些支付行业十几

资深支付架构师视角:实战从问题定义到代码落地的完整套路 2024-11-02 15:33

前言 今天从一个实际案例入手,介绍站在架构师的角度,如何识别并定义问题,提炼需求,技术方案选型,再到详细设计,最后利用AI的能力协助写出核心的代码,验证与调优。 解决问题存在一定的模式,也可以称之为框架,总结出自己的思考和解题框架,以后再碰到同类型的问题就可以如庖丁解牛一样容易。 很多年前,我写代码

Spring 实现 3 种异步接口 2024-10-18 09:07

大家好,我是苏三~ 如何处理比较耗时的接口? 这题我熟,直接上异步接口,使用 Callable、WebAsyncTask 和 DeferredResult、CompletableFuture等均可实现。 但这些方法有局限性,处理结果仅返回单个值。在某些场景下,如果需要接口异步处理的同时,还持续不断地

重学SpringBoot3-集成Redis(五)之布隆过滤器 2024-10-08 11:24

更多SpringBoot3内容请关注我的专栏:《SpringBoot3》 期待您的点赞👍收藏⭐评论✍ 重学SpringBoot3-集成Redis(五)之布隆过滤器 1. 什么是布隆过滤器? * 基本概念 适用场景 2. 使用 Redis 实现布隆过滤器 * 项目依赖 Redis 配置

设计模式第16讲——迭代器模式(Iterator) 2024-10-08 11:24

一、什么是迭代器模式 迭代器模式是一种行为型设计模式,它提供了一种统一的方式来访问集合对象中的元素,而不是暴露集合内部的表示方式。简单地说,就是将遍历集合的责任封装到一个单独的对象中,我们可以按照特定的方式访问集合中的元素。 二、角色组成 抽象迭代器(Iterator):定义了遍历聚合对象所需的方法

vue2路由和vue3路由区别及原理 2024-10-08 11:24

一、Vue2 与 Vue3 路由的区别 1. 创建路由实例方式的不同 Vue 2 中,通过 Vue.use() 注册路由插件,并通过 new VueRouter() 来创建路由实例。 import Vue from 'vue';import VueRouter from 'vue-router';i

目录

IT 外包服务商

  • 意见投递
  • zyf6619

软件开发应用

主菜单

  • 首页
  • 软件开发
  • 计算机基础
  • Hello Halo
  • 新手必读
  • 关于本知识库
Copyright © 2024 your company All Rights Reserved. Powered by Halo.