Vue.js前端开发零基础教学（一）

目录

第一章  初识Vue.js

前言  开发的好处

一.前端技术的发展

什么是单页Web应用？

二. Vue的简介

三. Vue的特性

四. Vue的版本

五.常见的包管理

六.安装node环境

第一章  初识Vue.js

学习目标：

了解前端技术的发展

了解什么是Vue掌握使用方法

掌握Node.js环境的搭建

前言  开发的好处

为在前端开发中，一个优秀的框架可以帮助用户解决一些常见的问题，有助于高效地完成工作。Vue.js(简称Vue)作为前端开发常用地框架之一，不仅可以提高项目的开发效率，而且可以改善开发体检。为了帮助读者对Vue有一个初步的认识，文章对Vue的基础知识进行详细讲解。

一.前端技术的发展

概念：前端开发的基础言语为HTML、CSS和JavaScript。其中，HTML用于搭建页面的内容；CSS用于美化页面的显示效果；JavaScript用于处理用户和页面之间的交互行为。jQuery的核心思想是使开发人员仅编写少量的代码就能实现更多的功能。

什么是单页Web应用？

单页Web应用将所有的功能局限于一个Web页面中，仅在该页面的初始化加载相应的资源（必要的HTML、CSS和JavaScript代码）。

在页面加载完成后，所有的操作都在这个页面上完成，且不会因用户的操作而进行页面的重新加载或跳转，而是利用javaScript动态地变换页面地内容，从而实现页面与用户的交互。

单页Web应用有以下3个优点：

（1）良好的交互体验

（2）良好的前后端分离开发模式

（3）减轻服务器的压力

单页Web应用有以下2个缺点：

（1）首屏加载慢

（2）不利于搜索引擎优化

二. Vue的简介

概念：是一款用于构建用户界面的渐进式的框架，Vue是MVVM模式的框架，其中，渐进式是指在使用Vue核心库时，可以在核心库的基础上根据实际需要逐步增加功能。使用Vue进行项目开发具有以下6点优势：

（1）轻量级。Vue是一个轻量级的前端开发框架，文件体积小。

（2）Vue项目基于javas语言开发，开发者不用单独学一门陌生的语言，从而降低了学习的门槛。

（3）Vue在使用上比较灵活。

（4）Vue通过虚拟DOM技术对DOM的直接操作，并通过尽可能简单的API来实现响应数据的数据绑定，可支持单向和双向数据绑定

（5）Vue支持组件化开发，可提高项目的开发效率和可维护性，使代码更易于复用，便于团队的协同开发

（6）Vue可以与前端开发中用到的一系列工具以及各种支持库结合使用，以实现前端工程化开发，从而提高了项目的开发效率，降低了大型项目的开发难度

                                                     如图1-1   vue的工作原理

                                  

注意：View和Model不能直接通信，它们需要借助ViewModel才能进行通信。

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

三. Vue的特性

                                            如图1-2     Vue的特性

1.数据驱动视图

概念：在使用Vue的页面中，Vue会监听数据变化。当页面数据发生变化时，Vue会自动重新渲染页面结构。如图1-3所示：

2.双向数据绑定

Vue实现了双向数据绑定，即当数据发生变化时，视图也会发生变化；当视图发生变化时，数据也会跟着同步变化。

例如，用户在填写表单时，双向数据绑定可以辅助开发者在无须手动操作DOM的前提下，自动同步用户填写的内容数据，从而获取表单元素最新的值。

3.指令

指令主要包括内置指令和自定义指令，内置指令是Vue本身自带的指令，而自定义指令是由用户自己定义的指令

4.插件

Vue支持插件，通过加载插件可以实现更多的功能。

常用的插件有Vue Router（路由）、Vuex（状态管理库）、Pinia（轻量级状态管理库）等，这些插件经过简单配置就可以使用。

四. Vue的版本

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

Vue3新增的功能包括组合式API、多根节点组件等；废弃的旧功能包括过滤器以及$on()、$off和$once()实例方法等，Vue3的底层代码发生了很大变化，包括渲染、数据监听、双向绑定、生命周期等。

Vue3的新特征如下：

（1）体积更小，采用按需编译的方式编译出来的问题体积比Vue的小

（2）性能提升

（3）具有更好的TypeScript支持

（4）暴露了更底层的API

（5）提供了更先进的组件

（6）提供组合式API

常用的UI组件库：

（1）Elenment Plus组件库：一款基于Vue3的桌面端组件库

（2）Vant组件库：一款开源移动端组件库

（3）Ant Design Vue组件库：一款用于开发和服务企业级后台产品的组件库

五.常见的包管理

什么是包？

在Vue项目开发中，经常需要通过各种第三方的包（package）来扩展项目的功能。“包”可以理解为将一系列模块化的代码打包起来，形成一个包，以便于使用。项目中所用到的包称为项目的依赖（dependency）。

常见的包管理工具有npm和yarn

1.npm

npm是Node.js默认的包管理工具，它可以安装、共享、分发代码，还可以管理项目的依赖关系。在Node.js时会自动安装相应版本的npm，不需要单独安装。如图1-4所示：

使用npm包管理工具可以解决以下场景的需求。

（1）从npm服务器下载别人编写的第三方包到本地使用。

（2）从npm服务器下载并安装别人编写的命令行程序到本地来使用。

（3）将自己编写的包或命令行程序上传到npm服务器供别人使用。 

npm中常用的命令如下：

npm install 包名：可简写为"npm i包名"，用于为项目安装指定名称的包。

npm uninstall包名：用于卸载指定名称的包

npm update 包名：用于更新指定名称的包

在下载npm安装包时，下载速度可能会比较慢，这是因为提供包的服务器在国外。为了加快包的下载速度，建议将下载源切换成国内镜像服务器。为npm设置镜像地址的具体命令如下。

npm config set registry https://registry.npmmirror.com

为了验证镜像地址是否设置成功，可以通过如下命令进行验证

npm config get registry

执行上述命令后，若输出了设置的镜像地址，则表示设置成功。 

2.yarn

在使用yarn之前，需要先确保计算机中已经安装了Node.js环境，再使用npm命令安装yarn，安装命令如下。

npm install yarn -g

为了验证yarn是否安装成功，可以通过“yarn -v”命令查看yarn的版本信息，如下图所示。

 

为了提高下载yarn安装包的速度，也可以将yarn的下载源切换成国内镜像服务器。为yarn设置镜像地址的具体命令如下。

yarn config set registry https://registry.npmmirror.com

 为了验证镜像地址是否设置成功，可以通过如下命令进行验证。

yarn config get registry

执行上述命令后，若输出了设置的镜像地址，则表示设置成功。 

yarn中一些常用的命令：

yarn install:可简写yarn,用于为项目安装所有的包

yarn remove包名：用于更新指定名称的包

yarn up 包名：用于更新指定名称的包

yarn add包名：用于添加指定名称的包

六.安装node.js环境

1.打开Node.js官网，找到Node.js下载地址，如下图所示。

从Node.js官方网站可以看出，Node.js有两个版本，分别是16.17.0 LTS和18.9.0 Current。 其中，LTS（Long Term Support）表示提供长期支持的版本，只进行Bug修复且版本稳定，因此有很多用户在使用；Current表示当前发布的新版本，增加了一些新特性，有利于进行新技术的开发使用。 这里选择下载16.17.0 LTS版本。下载完成后会得到一个名称为node-v16.17.0-x64.msi的安装包文件。 

2.　双击node-v16.17.0-x64.msi安装包图标，会弹出安装向导窗口，如下图所示。安装过程全部使用默认值。

3.安装完成后，测试一下Node.js是否安装成功。

步骤：

首先，按“Windows+R”组合键，打开“运行”对话框，输入“cmd”。在“运行”对话框中输入“cmd”后的效果如下图所示。

第二步，单击“确定”按钮或者直接按“Enter”键，会打开命令提示符，如下图所示。

 

第三步，在命令提示符中，输入命令“node -v”，其中v是version的简写，表示版本。命令输入完成后，按“Enter”键，查看当前安装的Node.js版本，如下图所示。

若想要退出命令提示符，可以输入“exit”并按“Enter”键，或者单击右上角的“×”关闭按钮退出。 

七.使用和创建项目

手动创建Vue项目

打开命令提示符，切换到D:\vue\chapter01目录，执行如下命令。

yarn create vite

 执行上述命令后，Vite会提示填写项目名称，如下图所示。

使用vite-project作为项目名称后，Vite会提示选择创建项目所使用的框架，如下图所示。

选择好框架后，Vite会提示选择一个变体，如下图所示。

 

选择好变体后，Vite会提示项目创建完成，如下图所示：

 

 

Vue 3项目的package.json文件中的命令配置如下。

"scripts": {
  "dev": "vite",
  "build": "vite build", 
  "preview": "vite preview"
},

上述配置中，dev是vite的别名，build是vite build的别名，preview是vite preview的别名。也就是说，当执行yarn dev时，实际执行的命令是yarn vite。别名可以自定义，如果修改了别名，在执行命令时需要使用修改后的别名。

项目启动后，会默认开启一个本地服务，具体如下。

VITE v4.1.4  ready in 441 ms
➜  Local:   http://127.0.0.1:5173/

在浏览器中打开http://127.0.0.1:5173/，如下图所示。

 

 用命令符创建项目

 打开命令提示符，切换到D:\vue\chapter01目录，使用yarn创建一个基于Vite+Vue模板且项目名称为hello-vite的项目。

yarn create vite hello-vite --template vue

执行上述命令后，hello-vite项目创建完成的效果如下图所示。

 

我的第一个Vue.js案例：

新建一个项目：

 

Vue 3项目创建成功后，使用VS Code编辑器打开项目目录，可以看到一个默认生成的项目目录结构，如图所示。

 

在components中新建一个v-on.vue文件，输入代码：

<template>
	请输入用户名：<input type="text" v-model="username" />
	<div>您的名字是：{{username}}</div>
	<input type="text" v-model.number="number1"/>+
	<input type="text" v-model.number="number2"/>={{number1+number2}}
</template>
<script setup>
	import{ref}from'vue';
	const username=ref('liu')
	const number1=ref(1)
	const number2=ref(2)
	
</script>
<style>
</style>

在main.js文件改对应的v-on名字如下：

import { createApp } from 'vue'
import App from './components/v-on.vue'
createApp(App).mount('#app')

 运行结果如下：

即完成我的第一个Vue.js项目 

注意：

 

 

好啦~今天就分想到这里~感谢大家阅读我的博客，希望我的文章能够对你们有所帮助。如果你们有任何问题或建议，请随时联系我。

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

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

凡事不以规矩不成方圆，合同协议模板范本大全

凡事不以规矩不成方圆，合同协议模板范本大全

一、资料描述 本套合同协议资料&#xff0c;大小18.42M&#xff0c;24个压缩文件。 二、资料目录 01-租赁合同.rar&#xff08;112个文件&#xff09; 02-装修协议.rar&#xff08;32个文件&#xff09; 03-转让或承包协议.rar&#xff08;32个文件&#xff09; 04-员工手…
阅读更多...
羊大师揭秘，孩子适不适合喝羊奶？

羊大师揭秘，孩子适不适合喝羊奶？

羊大师揭秘&#xff0c;孩子适不适合喝羊奶&#xff1f; 羊奶&#xff0c;这个古老而珍贵的营养饮品&#xff0c;近年来在家长们中间逐渐走红。它以其独特的营养价值和口感受到了众多家庭的青睐。但是&#xff0c;面对市面上琳琅满目的羊奶产品&#xff0c;家长们常常陷入选择…
阅读更多...
ViT如何支持变长序列（patches）输入？

ViT如何支持变长序列（patches）输入？

问题&#xff1a;当增加输入图像的分辨率时&#xff0c;例如DeiT 从 224 到 384&#xff0c;一般来说会保持 patch size&#xff08;例如9&#xff09;&#xff0c;因此 patch 的数量 N 会发生了变化。那么视觉transformer是如何处理变长序列输入的? 回答&#xff1a; 在讨论…
阅读更多...
MySQL的目录结构

MySQL的目录结构

安装目录 /usr/local/mysql数据目录 /usr/local/mysql/data配置目录 /usr/local/etc/my.cnf点击返回 MySQL 快速学习目录
阅读更多...
【NLP】TF-IDF算法原理及其实现

【NLP】TF-IDF算法原理及其实现

&#x1f33b;个人主页&#xff1a;相洋同学 &#x1f947;学习在于行动、总结和坚持&#xff0c;共勉&#xff01; #学习笔记# 目录 01 TF-IDF算法介绍 02 TF-IDF应用 03 Sklearn实现TF-IDF算法 04 使用TF-IDF算法提取关键词 05 TF-IDF算法的不足 TF-IDF算法非常容易理…
阅读更多...
matlab 基于小波变换的油气管道泄露信号检测

matlab 基于小波变换的油气管道泄露信号检测

1、内容简介 略 71-可以交流、咨询、答疑 基于小波变换的油气管道泄露信号检测 去噪、小波变换、油气管道泄露、信号检测 2、内容说明 摘 要&#xff1a; 油气管道泄漏会造成严重危害&#xff0c;因此&#xff0c;亟需寻找一种能快速检测油气管道信号的技术。传统的 傅里…
阅读更多...
Vue2（八）：脚手架结构、render函数、ref属性、props配置项、mixin(混入)、插件、scoped样式

Vue2（八）：脚手架结构、render函数、ref属性、props配置项、mixin(混入)、插件、scoped样式

一、脚手架结构分析 crlc终止刚刚搭建的vue。 ├── node_modules ├── public │ ├── favicon.ico: 页签图标 │ └── index.html: 主页面 ├── src │ ├── assets: 存放静态资源 │ │ └── logo.png │ │── component: 存放组件 │ │ …
阅读更多...
Gin框架 源码解析

Gin框架 源码解析

https://zhuanlan.zhihu.com/p/136253346 https://www.cnblogs.com/randysun/category/2071204.html 这个博客里其他go的内容也讲的很好 启动 因为 gin 的安装教程已经到处都有了&#xff0c;所以这里省略如何安装&#xff0c; 建议直接去 github 官方地址的 README 中浏览安装…
阅读更多...
【数据库基础增删改查】条件查询、分页查询

【数据库基础增删改查】条件查询、分页查询

系列文章目录 &#x1f308;座右铭&#x1f308;&#xff1a;人的一生这么长、你凭什么用短短的几年去衡量自己的一生&#xff01; &#x1f495;个人主页:清灵白羽 漾情天殇_计算机底层原理,深度解析C,自顶向下看Java-CSDN博客 ❤️相关文章❤️&#xff1a;清灵白羽 漾情天…
阅读更多...
AI浸入社交领域,泛娱乐APP如何抓住新风口?

AI浸入社交领域,泛娱乐APP如何抓住新风口?

2023年是大模型技术蓬勃发展的一年&#xff0c;自ChatGPT以惊艳姿态亮相以来&#xff0c;同年年底多模态大模型技术在国内及全球范围内的全面爆发&#xff0c;即模型能够理解并生成包括文本、图像、视频、音频等多种类型的内容。例如&#xff0c;基于大模型的文本到图像生成工具…
阅读更多...
Samtec科普 | 一文了解患者护理应用连接器

Samtec科普 | 一文了解患者护理应用连接器

【摘要/前言】 通过医疗专业人士为患者提供护理的种种需求&#xff0c;已经不限于手术室与医院的各种安全状况。当今许多患者的护理都是在其他环境进行&#xff0c;例如医生办公室、健康中心&#xff0c;还有越来越普遍的住家。尤其是需要长期看护的患者&#xff0c;所需的科技…
阅读更多...
Mysql数据库概念与安装

Mysql数据库概念与安装

目录 一、数据库概述 1、数据库的基本概念 2、数据库管理系统&#xff08;DBMS&#xff09; 2.1 数据库管理系统概念 2.2 数据库管理系统工作模式 3、数据库系统&#xff08;DBS&#xff09; 3.1 数据库系统概念 3.2 数据库系统发展史 4、关系型数据库与非关系型数据库…
阅读更多...
机器学习——终身学习

机器学习——终身学习

终身学习 AI不断学习新的任务&#xff0c;最终进化成天网控制人类终身学习&#xff08;LLL&#xff09;&#xff0c;持续学习&#xff0c;永不停止的学习&#xff0c;增量学习 用线上收集的资料不断的训练模型 问题就是对之前的任务进行遗忘&#xff0c;在之前的任务上表现不好…
阅读更多...
【机器学习】无监督学习算法之：K均值聚类

【机器学习】无监督学习算法之：K均值聚类

K均值聚类 1、引言2、K均值聚类2.1 定义2.2 原理2.3 实现方式2.4 算法公式2.4.1 距离计算公式2.4.1 中心点计算公式 2.5 代码示例 3、总结 1、引言 小屌丝&#xff1a;鱼哥&#xff0c; K均值聚类 我不懂&#xff0c;能不能给我讲一讲&#xff1f; 小鱼&#xff1a;行&#xf…
阅读更多...
AI助手 - Fitten Code

AI助手 - Fitten Code

前言 上一篇介绍了商汤AI编程小助手小浣熊 Raccoon&#xff0c;过程中又发现了另外一款国产AI编程助手&#xff0c;那就是本篇要介绍的非十科技出品的Fitten Code。 ​ Fitten Code 主打一个快&#xff1a;超高准确率、超快的响应速度。号称代码生成比GitHub Copilot 快两倍&am…
阅读更多...
蓝桥杯模块综合——高质量讲解AT24C02，BS18B20，BS1302,AD/DA(PCF8591)，超声波模块

蓝桥杯模块综合——高质量讲解AT24C02，BS18B20，BS1302,AD/DA(PCF8591)，超声波模块

AT24C02——就是一个存储的东西&#xff0c;可以给他写东西&#xff0c;掉电不丢失。 void EEPROM_Write(unsigned char * EEPROM_String,unsigned char addr , unsigned char num) {IIC_Start();IIC_SendByte(0xA0);IIC_WaitAck();IIC_SendByte(addr);IIC_WaitAck();while(nu…
阅读更多...
奶牛均分

奶牛均分

解法&#xff1a; 假设编号从左到右递增&#xff0c;奶牛每次只能去往左边的牛圈。因此等分最大奶牛数小于等于最右边牛圈奶牛数&#xff0c;不妨设数为k&#xff0c;那么a[i]>k&#xff0c;a[i-1]>2k。。。 做后缀和二分答案就可找到k #include<iostream> #inc…
阅读更多...
字符串筛选排序 - 华为OD统一考试(C卷)

字符串筛选排序 - 华为OD统一考试(C卷)

OD统一考试&#xff08;C卷&#xff09; 分值&#xff1a; 100分 题解&#xff1a; Java / Python / C 题目描述 输入一个由n个大小写字母组成的字符串&#xff0c; 按照 ASCII 码值从小到大的排序规则&#xff0c;查找字符串中第 k 个最小ASCII 码值的字母(k>1) , 输出该…
阅读更多...
CSS学习（3）-浮动和定位

CSS学习（3）-浮动和定位

一、浮动 1. 元素浮动后的特点 脱离文档流。不管浮动前是什么元素&#xff0c;浮动后&#xff1a;默认宽与高都是被内容撑开&#xff08;尽可能小&#xff09;&#xff0c;而且可以设置宽 高。不会独占一行&#xff0c;可以与其他元素共用一行。不会 margin 合并&#xff0c;…
阅读更多...
C语言易错知识点

C语言易错知识点

1、数组长度及所占字节数 char x[] {"Hello"},y[]{H,e,l,l,o}; x数组的长度为5&#xff0c;y的长度也是5 x、y数组所占字符串为6为 51(\0)6 strlen&#xff08;&#xff09;函数得到的是数组的长度 2、%%与%的优先级 #include<stdio.h> int main(){ int a…
阅读更多...
最新文章

Copyright @ 2022~2023