vue3初识

目录

    • 一、前言
    • 二、主观感受
    • 三、vue3初探

原文以及该系列教程文章后续可点击这里查看:vue初识

一、前言

Vue.js是一款流行的前端框架,最初由尤雨溪(Evan You)于2014年创建,非常的年轻。官网为vue3,

但要注意,vue框架本身是基于前端基础知识之上的,所以学习vue的前提是,你已经理解、并能够熟练的使用htmlcssJavaScript这三大前端基石去开发基本的网页应用了。

如果你对这些还不甚了解,可以阅读本章其它文章快速学习入门:

  • HTML
  • CSS
  • JavaScript

放心,相比于C/C++、python、rust、java之类的语言,这三者是非常简单的,甚至一定程度上来说,除了JavaScript,其它两者都不能算是编程语言。

二、主观感受

我过去主要学习的是C/C++、rust等较偏底层的语言、又或者python等脚本语言,对于前端了解的并不深。

因此我的第一个网站使用的纯html、js、css写的,老实说,写的真的非常难受,而且效率极低,最终的效果也仅仅只是一个静态页面,非常难看,

后来随着了解的深入,我知道了一个叫做JQuery的库,它是一个很优秀的js库,自从用了它之后,我写同一个网页所需要的代码量少了很多,它可以极大的简化js代码。

但直到这时,写网页也仍然是一件非常痛苦的事情,因为虽然JQuery简化了js代码,但css仍旧很麻烦,尤其是当一个网页内标签层次较多时,你想要写一个css样式,就要重复的写一长串的前缀来保证作用的标签正确。

于是后来我了解到了less,通过它,我写css样式也一下子轻松了不少,我可以按我思路准确的写出对应的样式,然后再通过less将其转换为等价的css

自此,前端三大基石html、css、js中的cssjs都有对应的库来简化我网站的开发流程。

原本我以为这已经足够了,因为这真的已经简化了我很多的工作量

如果你真的用纯html、js、css写过一个网页,我想你会明白它的含义。

直到后来,我又遇到了vue,再一次刷新了我对前端的认知。

因为它并不是继续来优化html的书写,而是直接一套框架同时优化htmljscss这三大基石。

具体来说就是,它将一个网页划分为了不同的部分,比如网页的头部、导航栏、页尾等等,甚至更具体的还有一个按钮、一个图片。

vue将这些划分出来的一个个小部分称之为组件,而一个组件同时包含了html、css、js三种代码。

这和其它编程语言中的类的概念类似:将所有相关的属性放在一个对象里面。

vue就是这样,比如你要写一个按钮,那就把按钮的样式、以及按钮相关的处理逻辑代码写进一个组件中。

其他任何地方、甚至可以是不同的项目中,如果想要使用这个封装好的组件,那就直接引入即可。

这非常爽,因为这意味着你可以直接引入别人在网上封装好的组件,比如本网站的前端就有一些组件直接使用到了Element Plus库里面的东西。

如果说以前你复制代码想要使用还需要各种调整,那么一旦你使用了vue,你就真的可以成为一个“CV工程师”。

虽说只是个玩笑,但大多数情况下你确实真的就只是在复制粘贴而已。

然而即使vue在这一点上已经很爽了,但却仍然不是vue的全部,它还有另一个特点“路由”。

这同样也是一个很舒服的东西,因为以前我们如果想要写一个很复杂的网页,正常来说,你必须得不断地在多个html页面中切换,也就是多页面应用。

但到了vue这里就不一样了,因为它从始至终都只有一个html页面、一份css样式文件、一份js代码文件。

它需要对应的工具(称为脚手架)来将vue代码编译为html、css、js,因为只有这样浏览器才能正常识别。

但即使只有一份,你仍然可以实现跳转操作,这就是vue的路由,它可以让你在同一个页面内实现跳转不同的内容,这真的非常棒!

三、vue3初探

学习任何东西,方法都是最重要的,而对于vue来说,其实它的官方教程已经非常详细了,你可以点击这里查阅官方教程。

image-20240116162600861

而进入官方教材的第一步,就是去调整左上方的按钮为组合式

这一步很重要,因为在vue2版本中使用的是选项式编程,而在vue3中,官方推荐使用组合式编程,同时我个人也建议你使用组合式编程。

那什么是选项式,什么是组合式呢?最简单的方法就是举个例子:

比如在vue2中想要创建一个响应式变量需要像下面这样做:

<script>
export default {data() {return {message: 'Hello, Vue 2!'};},
};
</script>

看起来是不是觉得很奇怪?反正在我第一次接触vue2的语法时,是真的觉得别扭。

而实现同样功能的vue3代码如下:

<script setup>
import { ref } from 'vue';
const message = ref('Hello, Vue 3!');
</script>

现在是不是就觉得直观、精简多了!

注意两者的区别,vue3中,需要在script标签内添加一个叫做setup的属性才能启用这一功能。

上面这就是组合式语法,所谓组合式,通俗的来说就是所有vue3的功能都被封装到了一个个函数中,在你想要使用的时候就直接引入函数即可,也就是所谓的“组合”。

了解了这个,下一步就是理解vue3的工作逻辑。

而理解它工作逻辑最重要的一步就是你要认识到:前端任何代码最终都是交给浏览器运行的,而浏览器只认识html、js、css代码。

而vue框架中的文件都是以**.vue**作为结尾的,一个基本的vue文件结构如下,主要有两个标签:

<template>
</template><script>
</script><style>
</style>
  • template:这个标签中写我们的html代码
  • script:这个标签中写我们的js代码
  • style:这个标签中写我们的css代码

这时你就可以看到,一个vue文件直接就包含了三种类型的代码,这就是组件的概念。

但这样的代码浏览器肯定是不认识的,所以我们就需要将这种vue代码转换为最终的htmljscss文件,这样浏览器才能认识。

那用什么转换呢?官方将这个工具称之为脚手架,通过脚手架我们就能完成这样的转换。

这类似于C/C++中的编译器,你写的C/C++代码只有经过编译成为可执行文件了电脑才能运行,只不过这里运行的平台换成了浏览器而已。

那怎么下载脚手架呢?那就需要用到这里的node工具了,它只是一个js的运行环境,你暂时可以将其理解为没有窗口的浏览器(但比浏览器要强大的多),可以点击这里前往node官网。

直接下载第一个稳定版,然后安装即可(安装选项可以直接全部默认):

image-20240116163305340

本系列文章均默认你使用的是window系统,因为使用windows系统的人最多,后面的操作仅对windows系统有效,但安装node完成之后的命令,对所有系统都是一样的。

安装完成后,你可以按win+R快捷键,会弹出下面这个编辑框:

image-20240116163432511

输入cmd,点击确认,即可进入黑窗口、终端,或者称其为“控制台”均可:

image-20240116163843595

只要输入node -v命令打印出来了版本号,那就说明你已经安装完成了,如果失败,可能需要重启一下电脑。

自此,我们就完成了node的安装,然后下一步就是安装vue的脚手架了。

这里注意一下两者之间的关系,node只是一个js的运行环境,你可以直接将其理解为没有窗口的浏览器,它可以执行js代码。

而“脚手架”本身是一个可以运行在node之上的程序,它可以将你的vue代码编译成为html、js、css代码。

为你能够安装“脚手架”,我们还需要使用一个叫做npm的工具,它是node的默认包管理器,可以直接使用、用来下载js代码包,同样也就包括了这里的vue的“脚手架”。

回到官网,我们可以看到相应的下载命令:npm init vue@latest

image-20240116164307618

直接复制这条命令到控制台即可:

image-20240116164547804

之后,你就会看到上面这样的创建vue项目的过程,中间会出现很多条例让你选择。

几个重要的点为:

  • 输入项目名:所谓的项目,你可以理解为一个网站的开发所需要的所有代码都在里面,同时也是之后创建的文件夹名称。

  • 使用TypeScript语法:这个看你自己是否熟悉TypeScript了,如果不熟悉,那就默认No即可,没有什么影响。

  • 引入Vue Router:这个就很重要了,因为这就是前面我提到的路由,不过现在我们还处于基础阶段,所以也直接选了No

总的来说就是,除了第一项的项目名你可以自己随便取一个,其它项都直接按Enter键即可,即默认为No,不添加。

最后我用红框框起来的地方就是官方提示我们要执行的命令,你可以直接将其复制下来,挨个执行即可。

image-20240116164941102

  • cd vue-project:进入项目文件夹的意思,你可以看到在运行了这个命令后,其前面的前缀就进入了这个文件夹,这个命令取决于你的项目名字是什么。

  • npm install:这是npm包管理器的安装命令,前面只是在初始化,这里才是安装,至于它安装了什么,你可以到这个项目文件夹中的package.json文件中查看。

  • npm run dev:这是运行脚本的命令,其结果就是,你现在已经启动了一个本地服务器,可以直接通过下图这个链接查看:

image-20230701144238518

在浏览器中打开这个链接,你就能看到下面这样的页面:

image-20240116165154463

这就证明你已经成功安装好了脚手架,这是官方实例的vue文件被编译成为了htmljs以及css,然后被浏览器解析成功了。

此时你可以在控制台按Ctrl+C终止它的运行,然后重新运行命令npm run build:

image-20240116165351380

该命令的作用就是编译,编译完成后,你就能看到最终编译的编译结果放在了dist目录下,正如前面所说,最终编译的结果只有一个htmljscss文件。

当你前端开发完成了之后,便是通过这个命令进行构建,然后将dist目录下的文件放在你的服务器上,可能还需要配置一下服务器的相关设置,然后一个网站就搭建好了!

注意:你直接点击打开它是看不到任何东西的,因为这涉及到浏览器的跨域问题,不允许让你加载js脚本文件,所以你直接点击index.html用浏览器打开,就是一片空白。

最后,为了更加方便的开发Vue代码,我们还需要配置一下开发环境。

本系列所使用的编辑器为vscode,这是目前全网最强大的编辑器,vue官方同样推荐,并且官方还有相关的vue插件,可以让我们的敲代码更加舒服。

其官网可以点击这里跳转,然后下载对应的版本安装即可:

image-20240116165915394

安装完成后,你可以直接在控制台的本项目目录中,输入code .

code是vscode这款软件的命令行命令,而后面的点代表当前目录,意思就是用vscode打开当前目录,不理解的可以参考文章:路径详解。

打开后的首页就是我们的文件夹,里面全是我们这个项目相关的文件:

image-20240116170245445

vscode这款编辑器之所以这么受欢迎,就是因为它强大的插件系统,同样的,我们需要安装vue相关的插件来提升我们的开发效率。

来到插件页面,搜索vue,找到下面两款插件进行安装:

image-20240116173534463

自此,我们所有的准备工作就都完成了,后面便开始真正的vue学习之旅。

原文以及该系列教程文章后续可点击这里查看:vue初识

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

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

相关文章

OpenCV基础

OpenCV简介 OpenCV是一个功能强大的开源计算机视觉和机器学习软件库&#xff0c;它在图像处理和视频分析领域得到了广泛应用。OpenCV最初由英特尔公司于1999年发起并支持&#xff0c;后来由Willow Garage和Itseez&#xff08;现在是Intel的一部分&#xff09;维护。它是为了推…

题目练习(生死时速2.0版)

题目一&#xff08;Before an Exam&#xff09; 题意翻译 题目背景 明天皮特将要考生物。他并不很喜欢生物&#xff0c;但在 d 天前他得知他将不得不参加此次考试。皮特严厉的父母勒令他立即复习&#xff0c;因此他在第 i 天将需要学习不少于 minTimei​ 小时&#xff0c;不…

人工智能深度学习入门指南

随着人工智能&#xff08;AI&#xff09;技术的飞速发展&#xff0c;深度学习作为其重要分支&#xff0c;已经成为许多领域的研究热点。深度学习通过模拟人脑神经网络的运作方式&#xff0c;使得机器能够处理和分析海量的数据&#xff0c;从而实现更高级别的智能。本文将为你提…

SPI NOR FLASH和SPI NAND FLASH

SPI NOR FLASH和SPI NAND FLASH是两种不同的存储设备&#xff0c;它们在硬件接口和软件应用上都有所不同。以下是关于这两种存储设备更详细的介绍&#xff1a; 1.SPI NOR FLASH SPI NOR FLASH是一种非易失性存储器&#xff0c;它通过串行接口进行数据传输&#xff0c;具有读写…

IT行业有哪些证书含金量高?

1.Amazon Certified Cloud Practitioner 转码小白超友好的一门入门级证书&#xff0c;对于之前没有IT或者project经验的同学也可以轻轻松松顺利拿下&#xff0c;含金量很高可以直接标到linkedln的个人介绍里面。 (1)将如何帮助职业生涯 获得此认证可验证对 AWS Cloud、服务和…

真、开源LLM-OLMo

论文&#xff1a;https://arxiv.org/pdf/2402.00838.pdf Weights https://huggingface.co/allenai/OLMo-7B Code https://github.com/allenai/OLMo Data https://huggingface.co/datasets/allenai/dolma Evaluation https://github.com/allenai/OLMo-Eval Adaptation http…

分享88个表单按钮JS特效,总有一款适合您

分享88个表单按钮JS特效&#xff0c;总有一款适合您 88个表单按钮JS特效下载链接&#xff1a;https://pan.baidu.com/s/1v-qcl8bv2kxZ8a98Xo9UAg?pwd8888 提取码&#xff1a;8888 Python采集代码下载链接&#xff1a;采集代码.zip - 蓝奏云 学习知识费力气&#xff0c;…

【教3妹学编程-算法题】价值和小于等于 K 的最大数字

3妹&#xff1a;2哥&#xff0c;新年好鸭~ 2哥 : 新年好&#xff0c;3妹这么早啊 3妹&#xff1a;是啊&#xff0c;新年第一天要起早&#xff0c;这样就可以起早一整年 2哥 :得&#xff0c;我还不了解你&#xff0c;每天晒到日上三竿 3妹&#xff1a;嘿嘿嘿嘿&#xff0c;一年是…

安装了多个Java版本如何指定特定版本

Java版本问题的实战场景 机器安装了一个JDK 8的安装版本&#xff0c;默认的安装路径是 C:\Program Files\Java&#xff0c;JDK的安装版本同时安装了JDK 和JRE, 安装的路径分别是&#xff1a; JDK 路径&#xff1a; C:\Program Files\Java\jdk1.8.0_361JRE 路径&#xff1a; C…

【数据结构和算法】--- 基于c语言排序算法的实现(2)

目录 一、交换排序1.1 冒泡排序1.2 快速排序1.2.1 hoare法1.2.2 挖坑法1.2.3 前后指针法 1.3 快速排序优化1.3.1 三数取中法选key1.3.2 递归到小的子区间使用插入排序 1.4 快排非递归版 二、归并排序2.1 归并排序2.1.1 递归版2.1.2 非递归版 一、交换排序 基本思想&#xff1a…

VSCode:替换空行

有时从不同的编辑器拷贝过来的代码会有很多空行&#xff0c;可以通过以下办法进行删除&#xff1a; 1.按CtrlH弹出替换窗口 2.在查找输入框中输入&#xff1a;^\s*(?\r?$)\n 3.点击使用正则表达式 4.点击全部替换

3d渲染100农场如何使用?渲染100邀请码1a12

3d渲染农场通常用于电影、动画或视觉效果的渲染&#xff0c;本文以广受好评的渲染100农场为例&#xff0c;来讲解它的使用方法。 1、注册账号 前往渲染100官网(http://www.xuanran100.com/?ycode1a12)注册账号&#xff0c; 新用户注册记得填邀请码1a12&#xff0c;有30元大礼…

【软件设计师】——面向对象设计原则

为了提高软件的可维护性、可复用性&#xff0c;增加软件的可扩展性和灵活性&#xff0c;在面向对象编程的过程中我们需要遵守以下六条原则。 开闭原则 定义&#xff1a; 编写的代码需要对 扩展开放 对 修改关闭 &#xff0c;实现 热插拔 的效果。 例&#xff1a;在编写不同皮…

【linux系统体验】-archlinux简易折腾

archlinux 一、系统安装二、系统配置及美化2.1 中文输入法2.2 安装virtualbox增强工具2.3 终端美化2.4 桌面面板美化 三、常用命令 一、系统安装 安装步骤人们已经总结了很多很全: Arch Linux图文安装教程 大体步骤&#xff1a; 磁盘分区安装 Linux内核配置系统&#xff08;…

css2复合选择器

一.后代&#xff08;包含&#xff09;选择器&#xff08;一样的标签可以用class命名以分别&#xff09; 空格表示 全部后代 应用 二.子类选择器 >表示 只要子不要孙 应用 三.并集选择器 &#xff0c;表示 代表和 一般竖着写 应用 四.伪类选择器&#xff08;包括伪链接…

【JAVA WEB】 百度热榜实现 新闻页面 Chrome 调试工具

目录 百度热榜 新闻页面 Chrome 调试工具 --查看css属性 打开调试工具的方式 标签页含义 百度热榜 实现效果&#xff1a; 实现代码 <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><meta name"vi…

无人机应用场景和发展趋势,无人机技术的未来发展趋势分析

随着科技的不断发展&#xff0c;无人机技术也逐渐走进了人们的生活和工作中。无人机被广泛应用于很多领域&#xff0c;例如遥感、民用、军事等等。本文将围绕无人机技术的应用场景和发展趋势&#xff0c;从多角度展开分析。 无人机技术的应用场景 无人机在遥感方面的应用&…

Linux(Ubuntu) 环境搭建:Nginx

注&#xff1a;服务器默认以root用户登录 NGINX 官方网站地址&#xff1a;https://nginx.org/en/NGINX 官方安装文档地址&#xff1a;https://nginx.org/en/docs/install.html服务器的终端中输入以下指令&#xff1a; # 安装 Nginx apt-get install nginx # 查看版本信息 ngi…

###C语言程序设计-----C语言学习(11)#数据的存储和基本数据类型

前言&#xff1a;感谢您的关注哦&#xff0c;我会持续更新编程相关知识&#xff0c;愿您在这里有所收获。如果有任何问题&#xff0c;欢迎沟通交流&#xff01;期待与您在学习编程的道路上共同进步。 一. 数据的存储 1.整型数据的存储 计算机处理的所有信息都以二进制形式表示…

电子电器架构 —— 对车载软件开发新阶段的愿景

电子电器架构 —— 对车载软件开发新阶段的愿景 我是穿拖鞋的汉子,魔都中坚持长期主义的汽车电子工程师(Wechat:gongkenan2013)。 老规矩,分享一段喜欢的文字,避免自己成为高知识低文化的工程师: 本就是小人物,输了就是输了,不要在意别人怎么看自己。江湖一碗茶,喝…