初探Vue前端框架

文章目录

  • 简介
  • 什么是Vue
    • 概述
    • 优势
    • MVVM框架
  • Vue的特性
    • 数据驱动视图
    • 双向数据绑定
    • 指令
    • 插件
  • Vue的版本
    • 版本概述
    • 新版本Vue 3
    • Vue 3新特性
    • UI组件库
    • UI组件库概述
    • 常用UI组件库
  • 安装Vue
    • 安装Vue
    • 查看Vue版本
  • 实例
    • 利用Vue命令创建Vue项目
    • 切换工作目录
    • 安装vue-cli脚手架
    • 创建Vue项目
    • 启动Vue项目
    • 项目运行过程
    • 项目目录结构
    • 利用Vite工具创建Vue项目
    • 概述
    • 命令
    • 实战

在这里插入图片描述

简介

大家好,今天我们将一起初探Vue前端框架。Vue是一款轻量级、易学且灵活的前端框架,它通过虚拟DOM技术和组件化开发,极大地提高了开发效率和项目的可维护性。

什么是Vue

概述

Vue(读音:/Vjuː/)是一款用于构建用户界面的渐进式框架。其中,“渐进式”是指在使用Vue核心库时,可以在核心库的基础上根据实际需要逐步增加功能。

优势

  • 轻量级:Vue是一个轻量级的前端开发框架,文件体积小。
  • 降低学习门槛:Vue项目基于JavaScript语言开发,开发者不用单独学一门陌生的语言,从而降低了学习的门槛。
  • 使用灵活:Vue在使用上比较灵活,开发人员可以选择使用Vue开发一个全新项目,也可以将Vue引入现有项目。
  • 虚拟DOM技术:Vue通过虚拟DOM技术减少对DOM的直接操作,并通过尽可能简单的API来实现响应的数据绑定,可支持单向和双向数据绑定。
  • 组件化开发:Vue支持组件化开发,可提高项目的开发效率和可维护性,使代码更易于复用,便于团队的协同开发。
  • 工程化开发:Vue可以与前端开发中用到的一系列工具以及各种支持库结合使用,以实现前端工程化开发,从而提高了项目的开发效率,降低了大型项目的开发难度。

MVVM框架

Vue是基于MVVM模式的框架,MVVM主要包含Model(数据模型)、View(视图)和ViewModel(视图模型)。Model是指数据部分,负责业务数据的处理;View是指视图部分,即用户界面,负责视图处理;ViewModel用于连接视图与数据模型,负责监听Model或者View的改变。

Vue的特性

数据驱动视图

在使用Vue的页面中,Vue会监听数据变化,当页面数据发生变化时,Vue会自动重新渲染页面结构。

双向数据绑定

Vue实现了双向数据绑定,即当数据发生变化时,视图也会发生变化;当视图发生变化时,数据也会跟着同步变化。例如,用户在填写表单时,双向数据绑定可以辅助开发者在无须手动操作DOM的前提下,自动同步用户填写的内容数据,从而获取表单元素最新的值。

指令

指令主要包括内置指令和自定义指令,内置指令是Vue本身自带的指令,而自定义指令是由用户自己定义的指令。指令的名称以“v-”开头,作用于HTML中的元素。将指令绑定在元素上时,指令会给绑定的元素添加一些特殊的行为。例如,v-bind指令用于实现单向数据绑定,v-if指令用于实现页面条件渲染,v-for指令用于实现页面列表渲染等。

插件

Vue支持插件,通过加载插件可以实现更多的功能。常用的插件有Vue Router(路由)、Vuex(状态管理库)、Pinia(轻量级状态管理库)等,这些插件经过简单配置就可以使用。

Vue的版本

版本概述

目前,Vue共有3个大版本,分别是Vue 1、Vue 2和Vue 3。其中,Vue 1几乎被淘汰,不建议学习与使用;Vue 2和Vue 3目前被广泛应用,并且Vue 3将会逐步替代Vue 2。

新版本Vue 3

Vue 3支持Vue 2中绝大多数的API与特性,同时Vue 3还新增了一些特有的功能,并废弃了Vue 2中的一些旧功能。Vue 3新增的功能包括组合式(Composition)API、多根节点组件等;废弃的旧功能包括过滤器(Filter)以及 o n ( ) 、 on()、 on()off()和$once()实例方法等。虽然从表面上看,Vue 3和Vue 2的使用方式没有太大的差异,但Vue 3的底层代码发生了很大变化,包括渲染、数据监听、双向绑定、生命周期等。

Vue 3新特性

  • 体积更小,采用按需编译的方式编译出来的文件体积比Vue 2的小。
  • 性能提升,运行速度比Vue 2快1.5倍左右。
  • 具有更好的TypeScript支持。
  • 暴露了更底层的API,可以通过多种方式组织代码,代码使用上更加灵活。
  • 提供了更先进的组件。Vue创建了一个虚拟的Fragment节点,允许组件中有多个根节点。
  • 提供组合式API,能够更好地组合逻辑、封装逻辑、复用逻辑。

UI组件库

UI组件库概述

为了提高开发效率,开发者可以在项目中添加UI组件库。UI组件库可以理解成一个可重复使用的界面设计元素的集合体,使用它可以更快速地开发用户界面。

常用UI组件库

  • Element Plus组件库:Element Plus是一款基于Vue 3的组件库,提供丰富的UI组件和功能,适用于快速开发现代化的Web应用。它遵循Material Design设计语言,支持多平台和国际化。
  • Vant组件库:Vant是一个基于Vue 3的移动端组件库,提供了丰富的UI组件和实用的工具函数,旨在帮助开发者快速构建高性能的移动应用界面。它遵循Material Design设计语言,支持按需引入,具有良好的兼容性和可扩展性。从3.0版本开始支持Vue 3。
  • Ant Design Vue组件库:Ant Design Vue是一个基于Vue.js的UI组件库,提供了一系列预制的组件和模板,用于快速构建高质量的Vue应用程序界面。它遵循Ant Design的设计理念,支持定制化和国际化。从2.0版本开始支持Vue 3。
  • 主流UI组件库都已经发布了支持Vue3的版本。

安装Vue

安装Vue

执行命令:npm install -g vue

查看Vue版本

执行命令:vue --version

实例

利用Vue命令创建Vue项目

切换工作目录

工作目录:D:\project_practice

安装vue-cli脚手架

执行命令:npm install -g @vue/cli

创建Vue项目

  • 方法一:用vue init命令
    执行命令:vue init webpack vue3-demo-1

  • 方法二:用vue create命令
    执行命令:vue create vue3-demo-2
    采用缺省预设模式 - 第一项,直接敲回车

启动Vue项目

  • 启动vue3-demo-1项目

    • 进入项目目录
      执行命令:cd vue3-demo-1
    • 启动项目服务
      执行命令:npm run dev
      编译成功,访问网址:http://localhost:8080
    • 查看项目首页
      访问http://localhost:8080
    • 停止项目服务
      按组合键Ctrl + C
  • 启动vue3-demo-2项目

    • 进入项目目录
      执行命令:cd ../vue3-demo-2
    • 启动项目服务
      执行命令:npm run serve

项目运行过程

当执行npm run devnpm run serve命令启动服务时,项目就会运行起来,该项目会通过src\main.js文件将src\App.vue组件渲染到index.html文件的指定区域。

项目目录结构

  • vue3-demo-1项目目录结构
  • vue3-demo-2项目目录结构

利用Vite工具创建Vue项目

概述

通过模板自动创建项目的方式相对简单,它通过附加的命令行选项直接指定项目名称和模板,省去了填写项目名称、选择框架和变体等环节。Vite提供了许多模板预设,可以创建Vite+React+TS、Vite+Vue、Vite+Svelte等类型的项目。

命令

  • 使用npm 6或更低版本创建项目
    npm create vite@latest <项目名称> --template <模板名称>

  • 使用npm 7或更高版本创建项目
    npm create vite <项目名称> -- --template <模板名称>

  • 使用yarn create命令创建项目
    yarn create vite <项目名称> --template <模板名称>

实战

  • 切换到工作目录

  • 基于模板创建项目
    使用yarn创建一个基于Vite+Vue模板的项目,执行命令:yarn create vite hello-vite --template vue

  • 启动项目,开启本地服务
    切换到项目目录,安装项目全部依赖
    执行命令:yarn dev,启动服务

  • 访问项目首页
    在浏览器里访问http://localhost:5173
    单击三次按钮,程序自动计数

通过今天的实战,希望大家能够对Vue有一个初步的了解,并能够在实际项目中运用Vue来构建用户界面。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/web/56698.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

实战-任意文件下载

实战-任意文件下载 1、开局 开局一个弱口令&#xff0c;正常来讲我们一般是弱口令或者sql&#xff0c;或者未授权 那么这次运气比较好&#xff0c;直接弱口令进去了 直接访问看看有没有功能点&#xff0c;正常做测试我们一定要先找功能点 发现一个文件上传点&#xff0c;不…

Find My平板键盘|苹果Find My技术与键盘结合,智能防丢,全球定位

‌平板键盘的主要用途包括提高输入效率、支持轻量化办公、提供丰富的文本编辑功能以及快捷操作。相比于直接在屏幕上打字&#xff0c;使用键盘可以显著提升输入速度&#xff0c;减少输入错误&#xff0c;特别是对于需要大量文字输入的场景&#xff0c;如写作、记录笔记等‌。平…

擎创科技声明

近日&#xff0c;我司陆续接到求职者反映&#xff0c;有自称是擎创科技招聘人员&#xff0c;冒用“上海擎创信息技术有限公司”名义&#xff0c;用“126.com”的邮箱向求职者发布招聘信息&#xff0c;要求用户下载注册APP&#xff0c;进行在线测评。 对此&#xff0c;我司郑重…

使用 Flask 实现简单的登录注册功能

目录 1. 引言 2. 环境准备 3. 数据库设置 4. Flask 应用基本配置 5. 实现用户注册 6. 实现用户登录 7. 路由配置 8. 创建前端页面 9. 结论 1. 引言 在这篇文章中&#xff0c;我们将使用 Flask 框架创建一个简单的登录和注册系统。Flask 是一个轻量级的 Python Web 框架…

web网站搭建(静态)

准备工作&#xff1a; 关闭防火墙&#xff1a; [rootlocalhost ~]# systemctl disable --now firewalld 修改enforce为permissive [rootlocalhost ~]# setenforce 0 [rootlocalhost ~]# geten getenforce getent [rootlocalhost ~]# getenforce Permissive 重启服务 [rootloca…

AUTOSAR CP 中 BswM 模块功能与使用介绍(2/2)

三、 AUTOSAR BswM 模块详解及 ARXML 示例 BswM 模块的主要功能 BswM&#xff08;Basic Software Mode Manager&#xff09;模块在 AUTOSAR 架构中扮演着模式管理的核心角色。它负责管理车辆的各种模式&#xff08;如启动、运行、停车等&#xff09;&#xff0c;并根据不同的…

网络搜索引擎Shodan(1)

声明&#xff1a;学习视频来自b站up主 泷羽sec&#xff0c;如涉及侵权马上删除文章 感谢泷羽sec 团队的教学 视频地址&#xff1a;shodan(1)_哔哩哔哩_bilibili 本文主要讲解网络搜索引擎Shodan的一些用法&#xff08;host和search这两个命令&#xff09;。 Shodan 是一个网络…

智创 AI 新视界 -- 探秘 AIGC 中的生成对抗网络(GAN)应用

&#x1f496;&#x1f496;&#x1f496;亲爱的朋友们&#xff0c;热烈欢迎你们来到 青云交的博客&#xff01;能与你们在此邂逅&#xff0c;我满心欢喜&#xff0c;深感无比荣幸。在这个瞬息万变的时代&#xff0c;我们每个人都在苦苦追寻一处能让心灵安然栖息的港湾。而 我的…

【云原生】Kubernets1.29部署StorageClass-NFS作为存储类,动态创建pvc(已存在NFS服务端)

文章目录 在写redis集群搭建的时候,有提到过使用nfs做storageclass,那时候kubernetes是1.20版本,https://dongweizhen.blog.csdn.net/article/details/130651727 现在使用的是kubernetes 1.29版本,根据之前的修改方式并未生效,反而提示:Error: invalid argument "Re…

docker 单节点arm架构服务器安装zookeeper、kafka并测试通信

kafka、zookeeper常用镜像介绍 kafka和zookeeper常见的镜像有以下三个&#xff1a;wurstmeister/zookeeper、kafka、confluentinc/cp-zookeeper、cp-kafka 和 bitnami/zookeeper、kafka。 wurstmeister/xxx: 由wurstmeister团队维护&#xff0c;提供的镜像适用于开发和测试环…

Termius工具在MAC的使用出现的问题:

Termius工具在MAC的使用出现的问题&#xff1a; 在使用SFTP时&#xff0c;出现不了本地的文件的位置 解决方案&#xff1a; 在Apple store下载的使用不了LOCAL SFTP&#xff0c; 需要在网页上进行下载才可以&#xff1a; 官网下载地址&#xff1a;https://termius.com/down…

CentOS 修改服务器登录密码的完整指南

个人名片 &#x1f393;作者简介&#xff1a;java领域优质创作者 &#x1f310;个人主页&#xff1a;码农阿豪 &#x1f4de;工作室&#xff1a;新空间代码工作室&#xff08;提供各种软件服务&#xff09; &#x1f48c;个人邮箱&#xff1a;[2435024119qq.com] &#x1f4f1…

缓存池(对象池)使用

框架介绍 对象池的实现是为了优化内存管理和提升性能&#xff0c;尤其是在创建和销毁大量对象时&#xff0c;通过复用已经创建的对象来减少垃圾回收的负担。 实现概述 开放公共方法 记忆已更新 这个对象池的实现是为了优化内存管理和提升性能&#xff0c;尤其是在创建和销…

中国在世界上知名度最高的人物颜廷利:圣人学府-效贤馆互爱天下

中国在世界上知名度最高的人物颜廷利先生在创立效贤馆时&#xff0c;秉持着以下几方面的理念和愿景&#xff1a; 1.传承国学精髓&#xff1a;全世界知名度最高的人颜廷利先生深感国学作为中国传统文化的瑰宝&#xff0c;蕴含着丰富的智慧和哲理。因此&#xff0c;他希望通过效贤…

LINUX1.2

1.一切都是一个文件 &#xff08;硬盘&#xff09; 2.系统小型 轻量型&#xff0c;300个包 3.避免令人困惑的用户界面 ------------------> 就是没有复杂的图形界面 4.不在乎后缀名&#xff0c;有没有都无所谓&#xff0c;不是通过后缀名来定义文件的类型&#xff08;win…

NSSCTF刷题篇web部分

源码泄露 [FSCTF 2023]寻找蛛丝马迹 这个源码泄露&#xff0c;可以记录一下&#xff0c;涉及的知识点比较多 打开环境 查看源码&#xff0c; 第一段flag 乱码&#xff0c;恢复一下 乱码恢复网站&#xff1a;乱码恢复 (mytju.com) 剩下的就只说方法 http://node4.anna.nss…

Python爬虫教程:从入门到精通

Python爬虫教程&#xff1a;从入门到精通 前言 在信息爆炸的时代&#xff0c;数据是最宝贵的资源之一。Python作为一种简洁而强大的编程语言&#xff0c;因其丰富的库和框架&#xff0c;成为了数据爬取的首选工具。本文将带您深入了解Python爬虫的基本概念、实用技巧以及应用…

Linux中安装配置SQLite3,并实现C语言与SQLite3的交互。

前言 SQLite 是一个软件库&#xff0c;实现了自给自足的、无服务器的、零配置的、事务性的 SQL 数据库引擎。SQLite 是在世界上最广泛部署的 SQL 数据库引擎。本次实验介绍在Linux上实现C语言和SQLite3的交互&#xff0c;利用C语言编写相关语句&#xff0c;连接数据库、操作数…

Cout输出应用举例

Cout输出应用 在main.cpp里输入程序如下&#xff1a; #include <iostream> //使能cin(),cout(); #include <stdlib.h> //使能exit(); #include <sstream> #include <iomanip> //使能setbase(),setfill(),setw(),setprecision(),setiosflags()和res…

Flutter TextField和Button组件开发登录页面案例

In this section, we’ll go through building a basic login screen using the Button and TextField widgets. We’ll follow a step-bystep approach, allowing you to code along and understand each part of the process. Let’s get started! 在本节中&#xff0c;我们…