vue2+3 pinia v-router学习记录

picktheshy

已于 2023-03-19 20:09:56 修改

阅读量454

点赞数

分类专栏： Vue 文章标签： vue.js Powered by 金山文档

于 2023-03-19 20:07:46 首次发布

本文链接：https://blog.csdn.net/picktheshy/article/details/129655594

版权

Vue 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

1. 为什么要学习vue

1.官网

https://v3.cn.vuejs.org/guide/migration/introduction.html

2.Web前端技术的发展

早期的Web应用主要是以静态页面的浏览（比如新闻浏览），这些静态页面使用HTM语音编写。1995年，Netseape公司的工程师Brendan Eich(布兰登·艾奇）设计了JavaScript脚本语言，使前端网页具有动态的效果（跑马灯，浮动广告等)，以及与用户交互能力的表单。

然而随着互联网的发展，很多的线下业务的开始向向上发展。基于Internet的 Web应用也变越复杂，用户所访问的资源已不仅仅局限于服务器硬盘上存放的静态网页，更多的应用需要根据户的请求动态生成页面信息，复杂一些的还需要从数据库中查询数据，经过一定的运算，生成一个页面返回给用户。

1996年，微软公司推出了ASP技术

1997年，Sun公司推出了JSP技术

1998年6月，PHP3正式发布

由此网页开启了真正动态交互的阶段。这些服务器端的动态页面技术是的网页可以获取服务器的数据信息并保持更新，推动了以Google为代表的搜索引擎和各种论坛的出现，Web开始快速发展。服务器端网页动态交互功能不断丰富，伴随的是后端逻辑复杂度的快速上升以及及代码越来越复杂。为了更好地管理后端逻辑，出现了大量后端的MVC框架。

什么是MVC

MVC( Model-View-Controller)即模型-视图-控制层，MVC框架有助于将应用程序分割成若干逻辑部件，使程序设计变得更加容易。MVC框架提供了一种按功能对各种对象进行分割的方法，其目的:将各对象间的耦合程度降到最低

动态页面实现了动态交互和数据即时存和取，当由于动态页面是由后端技术驱动的，每一次的数据交互都需要刷新一次浏览器，频繁的页面刷新非常影响用户的体验，这个问题直到Goole公司在2004年使用Ajax技术开发的Gmail和GoogleMaps的发布后才得到解决。

Ajaxt改变了传统的用户请求――等待—―响应这种web的交互模式，采用异步交互机制避免了用户对服务器响应的等待。提供了更好的用户体验，此外，它还改变了用户请求―服务器响应一-页面刷新的用户体验方式，提供了页面局部刷新数的实现机制，Ajax开启了Web2.0时代。

由于Ajax的火热，也带动了一些古老技术的复兴，css 和javascript这两个原先被程序员瞧不上的技术收到了前所未有的关注，而这一切都源于Ajax带来的全新的用户体验。

Ajax全称是:Asynchronous Javascript And Xml即异步avascript和XML。

Ajax最早是由Adaptive Path公司的咨询顾问ese James Garrett 于2005年提出的。Garrett专门写了一篇文章来讲述Ajax这一新的Web开发方式。Ajax为用户带来了更好的用户体验，在传统的web应用程序中，用户向服务器发送一个请求，然后等待，服务器对应请求进行处理，然后返回一个响应，这是一种同步的处理方式，如果服务器处理请求的时间比较长，那么用户将不得不长时间的等待。在后台执行程序的过程中，如果执行的程序出现异常还可能导致某个业务的执行出错会影响整个的体验。

为什么Ajax服务器端早期返回的是Xml，现在是Json呢?

不论我们通过ajax还是正常的请求/响应，其目的都是为了获取服务器的数据。渲染页面。

正常的请求和响应，每种语吝都有在服务器端渲染的方式，比如: jsp+标签/el表达式。这是一种服务器端渲染方式。都是一种语言，都自家人解析认识的，

异步请求服务端:服务端给予客户端什么样数据格式就是命题了﹖———javascript——jsp/php/asp·如果用字符串自己拼接返回，可能会你分隔符会和具体内容冲突就不适合

所以早起的ajax异步处理是通过xml字符串进行传输，然后js有domxml对象可以对xml进行解析获取每个点的值，然后进行渲染

近几年来，后面xml比较的笨重。节点过多，层级过深，解析也一个很大的问题，所以新的数据格式应运而生: json

从这里要明白一个道理: xml也好还是json也好，都是一种有格式的字符串。方便你解析和获取。仅此而已。

3、JS框架的诞生

之后的一段时间，前端技术的蓬勃发展主要集中在:如何简化页面的开发与交互，相机涌现出了很多前端的js框架和库。比如:

jQuery、Dojo、ExtIS、ECharts等，直到HTML5的出现，打破了这种发展格局，随着各大浏览器纷纷开始支持HTML5。前端能够实现的交互功能越来越多，也越来越丰富。相应的代码复杂度也快速的提高。以至于用后端的:MV*的架构模式开始出现在前端部分。从2010年10月出现的Backone开始，Knockout、Angular、Ember、React、Vue相继出现。这些框架的应用，使网站从Web Site进化成了WebApp时代，开启了网站应用的SPA （Single Page Application单页应用程序）时代。

*SPA Single Page Application单页应用程序,是指有一个Web页面的应用，单页应用程序是加载单个HTML页面并在用户与应用程序交互时动态更新该页面的Web应用程序，浏览器一开始会加载必颈的HTML、CSS和javascript，所有操作都在这个页面上完成，由Javascript控制交互和页面的布局刷新。

优点是:

1、前后端分离;前端工作在前端部分，后端工作在后端部分，前后端彻底分离开发，并行工作，对开发人员的技能要求也会变得更加单一，

2、良好的用户体验:用户不需要重新刷新页面，数据通过Ajax异步获取，页面显示更加流畅。

3、减轻服务器压力:服务器只需要提供数据就可以了，不用负责展示邀辑和页面合成，吞吐能力会大幅提高。*

4、共用一套后端程序代码:不用修改后端程序代码就可以同时用于web界面，手机，平板电脑等多种客户端。

*缺点是

1、初次加载耗时比较多:为了实现单页Web应用功能及显示效果，需要加载页面的时候需要将Javascript 和Css统一加载，因此第一次加载会稍微慢一些。为了减少加载时的数据流量，缩短加载时间，必须对javascript和Css代码进行合并压缩处理。

2、前进后退的问题:由于单页Web应用在一个页面中显示所有的内容，所以不能使用浏览器的前进，后退功能，如果要实现浏览器的前进和后退，需要编写额外的代码手动实现。

3、SEO难度较高:由于所有的内容都在一个页面中动态替换显示，所以在SEO上有着天然的弱势，如果站点对SEO很看重，且要用单页应用，那么可以编写一些静态页面给搜索引擎，或者通过服务器端渲染技术解决。*

4.关于前端JS现状

2015年6月，ECMAScript6发布，并被正式命名为ECMASCript2015，该版本增加了很多新的语法，极大地拓展了Javascript的开发潜力。由于浏览器对ECMAScript6语法支持滞后，出现了Babel编译器，它可以将ECMAScript6代码编译成浏览器支持的ECMAScript5的代码。

目前的前端技术已经形成一个庞大的体系:

以GitHub为代表的代码管理仓库

以NPM和Yarn为代表的包管理工具

ECMAScript6 TypeScript和Babel构成的脚本体主

HTML5,CSS3和相应的处理技术

React、Vue、Angular为代表的前端框架

以WebPack为代表的打包工具

以Nodejs为基础的Express和Koa后端框架。

5.前端开发模式发展·

静态页面

异步刷新，操作DOM

MVVM，关注模型和视图

基于脚手架的SPA的单页开发

2.vue的前期准备工作

1. 环境的准备

Nodejs的准备

Vscode的准备

2.Npm项目初始化和全局安装

nodejs下载: http://nodejs.p2hp.com/google_vignette

项目初始化: npm init

查看全局安装位置: npm root -g

全局安装模块: npm install -g

查看全局安装模块: npm list -g或者 npm Is-g

查看模块的版本: npm view versions

3.Npm生成环境安装和开发环境依赖模块安装

生产环境

npm insta1l <module modu1e2 ... modulen> --save
npm insta11 <module modu1e2@version ... modulen> -S
#或者
npm i <module modu1e2 ... modulen> --save
npm i <module modu1e2@version ... modulen> -s

开发环境

npm insta11 <module module2 ... modulen> --save-dev
npm insta11 <module module2@version ... modulen> -D
#或者
npm i <modu le module2 ... modulen> --save-dev
npm i <module modu1e2@version ... modulen> -D

两者的区别是啥?

生产环境是指未来你安装的模块都会随着项目的打包一起编译到最后的js文件中。也是项目依赖和需要的。比如jquery,vue,bootstrap等

npm instal1 vue --save
npm insta11 vue -s
npm insta11 vue@version -s

开发环境是指只在开发阶段使用。比如项目中的: eslint。

4.关于node_modules的认识

我们后续的项目都是运行在node的环境下的。后续在项目中安装的模块都是安装在一个叫node_modules的目中。项目中会存在一个。如果你使用npm install -g module会在你的用户目录下也会创建一个node_module是文件。用来存放你全局安装的信息。当然还有一个最顶级的就是: node的安装目录下。也公有一个，这个是放的node自身的核心模块。

npm install module --save --------------------安装到项目的node_modules

npm install module --save -dev------------------安装到项目的node_modules

npm install module --g----------安装到项用户目录下的node_modules

安装nodejs的时候-------------安装目录下有一个node_modules

他们的加载顺序是;

先加载工程的node_ modules，如果工程没有就加载全局用户的node_ modules，然后在加载nodejs安装目录下的node_modules信息。一层层查找上去。如果没找到就报模块没安装。需要进行安装，

5.CNPM/PNPM命令的安装

pnpm

npm insta11 -g pnpm

cnpm

npm insta11 -g cnpm --registry=https://registry.npmmirror.com

3.vue的发展史

01、概述

Vue(读音/vju/，类似于view)是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue被设计为可以自底向上逐层应用。Nue的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue也完全能够为复杂的单页应用提供驱动。js库

02、Vue的核心功能

去DOM中心化:使用Vue以后摒弃了传统的dom操作元素节点的过程。-

前端模板引擎:使用Vue可以抛弃后端的模板引擎技术，让前后端开发成为了可能。

**响应式绑定数据:**当数据发生改变时，视图也可以自动更新，可以不用关心DOM的操作。而专心数据操作。

可组合的视图组件:把页面中的视图按照功能或者模块进行切分成若干基本单元，组件可以一级级组合整个应用形成一个组件树，可维护、可重用、可测试。

前端路由:更流畅的用户体验，灵活地在页面切换已渲染组件的显示，不需要与后端做多余的交互。

状态集中管理:在VVM响应式模型基础上实现多组件之间的状态数据同步与管理。

前端化工程:结合webpack等前端打包工具，管理多种静态资源，代码，测试，发布等整合前端大型项目，也就是后续的脚手架开发(vue-cli/vite等)

03、发展历程

2013年，在Google 工作的尤雨溪，受到 Angular的启发，开发出了一款轻量框架，最初命名为Seed。

2013年12月，更名为Vue，图标颜色是代表勃勃生机的绿色，版本号是0.6.0.

2014.01.24，Vue 正式对外发布，版本号是0.8.0。

2014.02.25，0.9.0发布，有了自己的代号: Animatrix，此后，重要的版本都会有自己的代号。

2015.06.13，0.12.0，代号Dragon Ball，Laravel社区（一款流行的 PHP框架的社区〉首次使用Vue，Vue在JS社区也打响了知名度。

2015.10.26，1.0.0Evangelion 是Vue历史上的第一个里程碑。同年，vue-router、vuex、vue-cli 相继发布，标志着Vue从一个视图层库发展为一个渐进式框架。

2016.10.01，2.0.0是第二个重要的里程碑，它吸收了React的虚拟Dom方案，还支持服务端渲染。自从Vue 2.0发布之后，Vue就成了前端领域的热门话题。

2019.02.05，Vue发布了2.6.0，这是一个承前启后的版本，在它之后，将推出3.0.0.

2019.12.05，在万众期待中，尤雨溪公布了Vue3源代码，目前Vue 了处于Alpha版本

2020年9月18日，发布了vue3.0的正式版本

4.什么是Mvvm框架

Vue的设计模式

经典的设计模式开发有MVC、MVP、MVVM

MVVM模式

M:即Model，模型，包括数据和一些基本操作

v:即View，视图，页面渲染结果

VM:即View-Model，模型与视图间的双向操作（无需开发人员干涉)

在MVVM之前，开发人员从后端获取需要的数据模型，然后要通过DOM操作Model渲染到View中。而后当用户操作视图，我们还需要通过DOM获取View中的数据，然后同步到Model中。

而MVVM中的VM要做的事情就是把DOM操宝全封装起来，开发人员不用再关心Model和View之间是如何互相影响的:

只要Model发生了改变，View上自然就会表现出来。

当用户修改了View，Model中的数据也会跟着改变。

把开发人员从繁琐的DOM操作中解放出来，把关注点放在如何操作Model上。

小结

好处:数据和视图分离，便于维护和升级。

只要Model发生了改变，View上自然就会表现出来。

当用户修改了View，Model中的数据也会跟着改变

mvvm设计的理念:视图和数据完全分离。

MVVM : Model View VIew-model

5.Vuejs 的下载和安装

npm 安装（推荐）

Vuejs的快速入门

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 第三步：定义一个视图 view-->
    <div id="app">
        <h1>{{title}}</h1>
        <p><span v-html="title"></span></p>
        <p><span v-text="title"></span></p>
        <p><input v-model="title"></input></p>
    </div>
    <!--第一步：引入vue -->
    <script src="node_modules/vue/dist/vue.min.js"></script>
    <script>
        // 第二部：初始化 ---vm
        var vue = new Vue({
            // 代表我的vue从哪里开始渲染编译
            el:"#app",
            //响应式数据
            data:{
                title:"vuejs我来了"
            }
        })
    </script>
</body>
</html>

6.Vuejs的插入表达式

掌握插入值表达式的使用

插入值表达式:{{插入值表达式写在这里}}

类比学习:类似于jsp中的el表达式

作用

将data中的数据获取和展位，支持四则运算和三目运算符

小结

插入值表达式可以使用if判断吗?可以定义变量吗?答案是:不能

插值表达式，不能写在指令上。

7.vue指令

1.v-text与v-html

v-text不支持标签解析,v-html支持标签解析

2.v-bind

v-bind用于class和style时，样式时相加的不是覆盖

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        [v-clock]{
            display: none;
        }
        .page .link{
            background: #1a1919;
            display: inline-block;
            color: #fff;
            text-decoration: none;
            padding: 8px 12px;
        }
        .page .link:hover,.page .link.active{background:red;}
    </style>
</head>
<body>
    <!-- 第三步：定义一个视图 view-->
    <div id="app" v-clock>
        <div class="page">
            <h1>currentIndex:{{currentIndex}}</h1>
            <a class="link" v-bind:class="[currentIndex==1?'active':'']"@click="handleChange(1)" href="javascript:void(0);">1</a>
            <a class="link" v-bind:class="[currentIndex==2?'active':'']"@click="handleChange(2)" href="javascript:void(0);">2</a>
            <a class="link" v-bind:class="[currentIndex==3?'active':'']"@click="handleChange(3)" href="javascript:void(0);">3</a>
            <a class="link" v-bind:class="[currentIndex==4?'active':'']"@click="handleChange(4)" href="javascript:void(0);">4</a>
            <a class="link" v-bind:class="[currentIndex==5?'active':'']"@click="handleChange(5)" href="javascript:void(0);">5</a>
        </div>
    </div>
    <!--第一步：引入vue -->
    <script src="node_modules/vue/dist/vue.min.js"></script>
    <script>
        // 第二部：初始化 ---vm
        var vue = new Vue({
            // 代表我的vue从哪里开始渲染编译
            el:"#app",
            //响应式数据
            data:{
                currentIndex:1
            },
            methods:{
              handleChange(index){
                this.currentIndex = index;
              }
            }
        })
    </script>
</body>
</html>

3.v-model

v-bind 的多用于将data填入html标签的属性中

v-model多用于将值填入data中

4.v-for

记得加上index

使用v-for 的时候记得修改为v-bind:key=user.id

5.v-if

6.v-on:click

<button @click="handleLogin($event)">登录</button>

可以拿到button的位置坐标等等事件$event不能改

事件分类

uI事件
unload事件
load事件
resize事件
scroll事件
error事件


焦点事件用于form元素上
blur在元素失去焦点时触发。这个事件不冒泡,所有浏览器都支持。
focus在元素获得焦点时触发。这个事件不冒泡,所有浏览器都支持。
focusin在元素获得焦点时触发。这个事件冒泡,某些浏览器不支持。
focusout在元素失去焦点时触发。这个事件冒泡，某些浏览器不支持。

鼠标与滚轮事件
click---用户单击鼠标左键或按下回车键触发
db1click---用户双击鼠标左键触发。
mousedown---在用户按下了任意鼠标按钮时触发。
mouseenter---在鼠标光标从元素外部首次移动到元素范围内时触发。此事件不冒泡。mouseleave---元素上方的光标移动到元素范围之外时触发。不冒泡。
mousemove---光标在元素的内部不断的移动时触发。
mouseover---鼠标指针位于一个元素外部，然后用户将首次移动到另一个元素边界之内时触发。mouseout---用户将光标从一个元素上方移动到另一个元素时触发。
mouseup---在用户释放鼠标按钮时触发。

键盘和文本事件--form元素
keydown:当用户按下键盘上的任意键时触发。按住不放，会重复触发。
keypress:当用户按下键盘上的字符键时触发。按住不放，会重复触发。
keyup:当用户释放键盘上的键时触发。
textInput:这是唯一的文本事件，用意是将文本显示给用户之前更容易拦截文本。

7.v-on:keyup

8.v-on:mouseenter

9v-on事件修饰符

10v-on按键修饰符

11.v-once和 v-pre

v-pre

跳过这个元素和它的子元素的编译过程。可以用来显示原始Mustache标签。跳过大量没有指令的节点会加快编译。

<span v-pre>ii this wi11 not be compiled }}</span>

v-once

只渲染元素和组件一次。随后的重新渲染，元素/组件及其所有的子节点将被视为静态内容并跳过。这可以用于优化更新性能。

<!--单个元素-->
<span v-once>This wi1l never change: {{msg}}</span>

12、v-cloak

这个指令保持在元素上直到关联实例结束编译。和CSS规则如[v-cloak] { display: none }一起用时，这个指令可以隐藏未编译的Mustache标签直到实例准备完毕。

13vuejs指令

文本指令: v-html / v-text和插值表达式，名字也必须定义在data中。

事件指令: v-on:click="事件名"，缩写:@click="事件名"，注:事件名定义在: methods中

属性指令: v-bind:属性名="data的key”缩写:属性名="data的key" .注意动静拼接的问题

控制指令: v-model="data的key"，用于获取form控制元素的值。如果的多余3个建议使用对象去定义和获取

循环指令: v-for ="(obj, index) inf data中定义数组的名字"。

条件指令: v-if / v-else-if /v-else注意中间不能出现标签，否则会出现断层。

显示指令: v-show控制元素的隐藏和显示。（鼠标事件+ v-show /v-if选项卡）

8vuejs的生命周期

01、场景

现在我有一个需求，就是页面初始化完毕的时候，我就需要把接口的数据通过异步的方式加载出来。这里就有二个问题:

我加载这个接口的方法定义在哪里?-methods

定义好这个方法以后，我在哪里去加载呢?

02、概述

官网:

掌握它的生命周期是为了用它的生命周期的方法:一共8个，两两一组

这些方法不用我们触发，都是由vue自己触发的方法，知道这些方法的调用时机就可以了

创建时期: beforeCreate created

挂载时期: beforeMount mounted

更新时期: beforeUpdate updated

死亡时期: beforeDestory destoryed

这些方法不用我们触发，都是由vue自己触发的方法，知道这些方法的调用时机就可以了

创建时期: beforeCreate created

挂载时期:beforeMount mounted

更新时期: beforeUpdate updated

死亡时期: beforeDestory destoryed

3.方法和时期的作用

下图展示了实例的生命周期。你不需要立马弄明白所有的东西，不过随着你的不断学习和使用，它的参考价值会越来越高

04、为什么要学习生命周期:

1:是因为开放的过程，有一些逻辑的数据初始化需要在页面加载完毕的时候就去执行。那么必须要知道那个地方执行即可:

created
mounted
一般在开放中我们都会使用这个两个方法去初始化和改变数据，然后给后续进行渲染和替换。不是beforeMounte不行，是因为mounted更适合。

9.vuejs计算属性:coomputed

1、概述

在一些业务的开发中，在模板中使用表达式非常的方便，但是如果在模板中表达式的逻辑过于复杂，模板就会变得臃肿不堪且难以维护。比如:

<div id="app">
	{{message.split('').reverse(.join('')
</div>
<script src="js /vue.min.js "></script>
<script>
    var vue = new vue({
        el: "#app",
        data: {
    		message: "He1lo, vue无难事"
        }，
        methods: {

        }
    })
</script>

插值表达式Mustache语法中的表达式调用了3个方法来最终实现字符串的反转，逻辑过于复杂。如果在模板中还要多次引用此处的翻转字符串，就更加难以理解和处理。这时应该使用计算属性可以很好的解决这个问题。

2.计算属性定义

如果在开发中逻辑过于复杂的时候，应该考虑计算属性，计算属性是以函数形式来进行表达，定义在computed选项中定义，

10、Vuejs监控属性:watch

01、概述

在vue中还提供了一个非常通用的方式来观察和相应实例上的数据变动:监听器。当有一些数据需要随着它自身数据变化而变动时。就可以使用监听器。怎么听起来好像和计算属性的作用差不多。从功能上来说是的。但是两者还是存在很大的差别。

computed[-----watcher-----message/watch----price}

因为computed是一个多对一关系，而watch更多是一对一关系。

computed是监听响应式多个响应式属性数据的变化，watch是监听响应式属性自身的变化而得到另外一个结果。

watch更多是一种监听自身的变*，然后得到一个结果，而computed注重的是计算能力。也就是说watch可以把你监听的属性进行整容和改头换面。只能一个个监听。而jcomputed就是可以监听多个响应式属性，可以把它们一起改头换面。

watch一般用于，监听响应式属性自身的变化，得到另外一个结果，它没有返回值默认情况: computed会执行一次，而watch是不会

11.Vue3

01、Vue3初认识的Web开发和构建

官网: https://cn.vuejs.org/

01、概述

在前面的课程中我们已经学习了Vue2相关的知识，但是其实在2019年的时候，Vue2已经升级到了Vue3.x。如下:

2019.02.05，Vue发布了2.6.0，这是一个承前启后的版本，在它之后，将推出3.0.0.

2019.12.05，在万众期待中，尤雨溪公布了Vue 3源代码，目前Vue 3处于 Alpha版本。. 2020年9月18日，发布了vue3.0的正式版本

02、Vue3.0给我们带来的变化

更小的尺寸和更快的速度

vue2时代,最小被压缩也得差不多20kb

vue3以后，压缩版本只有:10kb左右，所以可以获取更快的响应和加速速度

更加现代化的语法特性,加强Typescript的支持

在vue3中，对虚拟dom进行了设计也进行了优化，这样可以让页面的渲染和编译速度更快·

在API设计方面，增强统一性和一致性

在Vue3中开始采用函数风格的API。在vue3中引入了组合式API的setup，可以让组件的逻辑更加的聚合。

提高了前端工程的可维护性，更强大的功能，提供开发者的效率。

03、再次理解渐进式框架

Vue是一个框架，也是一个生态。其功能覆盖了大部分前端开发常见的需求。但Web世界是十分多样化的，不同的开发者在Web 上构建的东西可能在形式和规模上会有很大的不同。考虑到这一点，Vue的设计非常注重灵活性和“可以被逐步集成"这个特点。根据你的需求场景，你可以用不同的方式使用Vue:

无需构建步骤，渐进式增强静态的HTML·在任何页面中作为Web Components嵌入·单页应用(SPA)

全栈/服务端渲染(SSR)

Jamstack/静态站点生成(SSG)

开发桌面端、移动端、WebGL，甚至是命令行终端中的界面

如果你是初学者，可能会觉得这些概念有些复杂。别担心!理解教程和指南的内容只需要具备基础的HTML和 JavaScript知识。即使你不是这些方面的专家，也能够跟得上。

04、后续的开发模式

Vue2+ Html网页开发

Vue3 + Html网页开发(建议从这里开始，但是)

Vue-cli +Vue2/Vue3+ JS/TS＋开启SPA单页时代开发

Vite + Vue3+ JS/TS +开启SPA单页时代开发

02、何谓单文件应用程序

在大多数启用了构建工具的Vue项目中，我们可以使用一种类似HTML格式的文件来书写Vue组件，它被称为单文件组件(也被称为*.vue文件，英文Single-File Components，缩写为SFC)。顾名思义，Vue的单文件组件会将一个组件的逻辑(JavaScript)，模板(HTML)和样式(CSS)封装在同一个文件里。下面我们将用单文件组件的格式重写上面的计数器示例:

<script>
export default {
    data() {
		return {
            count:0
        }
    }
}
</script>

<template>
	<button @click="count++ ">Count is: { count }</button>
</template>

<style scoped>  
    button {
        font-weight: bold;
    }
</sty1e>

02、单文件组件-Vue3.0和Vite和Vue-cli的选项式

<template>
<button @click="increment" >Count is: {{ count }]</button></template>
<script>
export default {
    //data(返回的属性将会成为响应式的状态
    //并且暴露在`this上
    data() {
    	return {count: 0}
    }，
	//methods是一些用来更改状态与触发更新的函数
    //它们可以在模板中作为事件监听器绑定
    methods: {
    	increment() {
            this.count++
        }
    }，
	//生命周期钩子会在组件生命周期的各个不同阶段被调用
    //例如这个函数就会在组件挂载完成后被调用
    mounted( {
    console.log(`The initial count is ${this.count}. `)
    }
    
}
</script>

03、单文件组件-Vue3.0和Vite相组合API的搭建

<template>
	<button @click="increment">Count is: {{count}}</button></temp1ate>

<script setup>
import { ref, onMounted } from 'xue'

//响应式状态
const count = ref(0)

//用来修改状态、触发更新的函数
function incrementO{
    count.value++
}

//生命周期钩子
onMounted(()=>{
	console.log( The initial count is Sicount.value}.）
}）
</script>

04、该选哪一个?

两种API风格都能够覆盖大部分的应用场景。它们只是同一个底层系统所提供的两套不同的接口。实际上，选项式API是在组合式API的基础上实现的!关于Vue的基础概念和知识在它们之间都是通用的。

选项式API以“组件实例”的概念为中(即上述例子中的 this)，对于有面向对象语言背景的用户来说，这通常与基于类的心智模型更为一致。同时，它将响应性相关的细节抽象出来，并强制按照选项来组织代码，从而对初学者而言更为友好。

组合式API的核心思想是直接在函数作用域内定义响应式状态变量，并将从多个函数中得到的状态组合起来处理复杂问题。这种形式更加自由，也需要你对Vue的响应式系统有更深的理解才能高效使用。相应的，它的灵活性也使得组织和重用逻辑的模式变得更加强大。

如果你是使用Vue的新手，这里是我们的大致建议:

在学习的过程中，推荐采用更易于自己理解的风格。再强调一下，大部分的核心概念在这两种风格之间都是通用的。熟悉了一种风格以后，你也能够很快地理解另一种风格。

在生产项目中:

当你不需要使用构建工具，或者打算主要在低复杂度的场景中使用Vue，例如渐进增强的应用场景，推荐采用选项式API:

当你打算用Vue构建完整的单页应用，推荐采用组合式API+单文件组件。

在学习阶段，你不必只固守一种风格。在接下来的文档中我们会为你提供一系列两种风格的代码供你参考，你可以随时通过左上角的API风格偏好来做切换。

官方构建

快速上手 | Vue.js (vuejs.org)

执行命令

npm init vue@latest

12vuejs脚手架vite

13vuejs3的组合式API

1.html单文件组件的setup定义

2选项式的组合式的setup定义

3组合式的组合式api的setup定义

4为什么vue3要引入组合式API

5响应式API

1ref

官方文档: https://cn.vuejs.org/api/reactivity-core.html#fref

ref是接受一个内部值，返回一个响应式的、可更改的 ref对象，此对象只有一个指向其内部值的属性.value .

function ref<T>(value:T): Ref<UnwrapRef<T>>
    
interface Ref<T>{
value: T
}

ref对象是可更改的，也就是说你可以为.value赋予新的值。它也是响应式的，即所有对.value的操作都将被追踪，并且写操作会触发与之相关的副作用。

含义就是:

定义:定义的时候使用ref定义，是一个响应式的对象的值

修改:是操作和修改的时候，都使用.value的时候进行覆盖和重写响应式对象的值:

使用:在使用的时候，直接使用即可，不需要.value

2reactive

返回一个对象的响应式代理。

3computed

4readonly

5watcheffect()

默认情况下会执行一次。

如果监听属性发生了变化，其实就会立即触发

监听的属性，如果连续赋值更改,指挥触发一次

watcheffect它是1:N的监听。

6watch

聊聊const定义

const一般用来定义对象，因为对象不修改，都是修改对象的属性

toref和torefs

toref

这样创建的 ref 与其源属性保持同步

torefs

将一个响应式对象转换为一个普通对象，这个普通对象的每个属性都是指向源对象相应属性的 ref

6依赖注入provide/inject

7封装组合API-use机制

14vuejs组件

1组件介绍

2HTML的方式定义组件

3vue3：spa的组件定义

全局注册

1.vue基于SPA的方式进行全局注册

CourseView.vue

<script setup>

</script>

<template>
  <main>
    <h1>kecheng</h1>
    <xk-button></xk-button>
  </main>
</template>

在main.js中进行全局注册

import { createApp } from 'vue'
import { createPinia } from 'pinia'

import App from './App.vue'
import router from './router'
import XkButton from './components/XkButton.vue'

const app = createApp(App)

app.use(createPinia())
app.use(router)

app.component("XkButton",XkButton)


app.mount('#app')

2.vue基于插件的方式进行全局注册和统一管理

局部注册

定义按钮组件


<script>

</script>
<template>
  <button>kecheng</button>
</template>

<style scoped>

</style>

CourseView.vue

<script setup>
//局部注册
 import XkButton from '../components/XkButton.vue'
</script>

<template>
  <main>
    <h1>kecheng</h1>
    <xk-button></xk-button>
  </main>
</template>

4vue2：组件通信-父向子通信-defineProps

5vue2：组件通信-子向父通信-defineEmits

6vue3组件通讯-ref的方式definEpose（）父调用子

7vue3组件通讯-使用provide/inject-子调用父

8teleport的应用

9组件的缓存

15vuejs高级编程-插槽slot

16vuejs路由v-router

1概述

2路由安装

3路由快速入门

4.路由跳转和转发

5带参数的动态路由匹配

6.嵌套路由

//1.导入router的创建对象createRouter
//web模式createWebHistory http://localhost:5173/user
// hash模式createWebHistory http://localhost:5173/#user
import {createRouter,createWebHistory} from "vue-router";
import IndexViews from '../views/IndexViews.vue'
//静态导入
//异步导入：异步导入，按需加载
//动态导入:addRoute
//2.创建路由对象
const router = createRouter({
    //指定路由模式
    history:createWebHistory(import.meta.env.BASE_URL),
    //定义地址和视图的配置和映射
    routes:[
        {
            path:"/",
            name:"index",
            component:IndexViews,
            children:[
                {
                    path:"",
                    name:"home",
                    component:()=>import ('../views/home/HomeView.vue')
                },
                {
                    path:"/bbs",
                    name:"bbs",
                    component:()=>import ('../views/bbs/BbsViews.vue')
                },
                {
                    path:"/category",
                    name:"category",
                    component:()=>import ('../views/category/CategoryViews.vue')
                },
                {
                    path:"/about",
                    name:"about",
                    component:()=>import ('../views/about/AboutViews.vue')
                },
                {
                    path:"/bbs/detail/:id",
                    name:"bbsdetail",
                    component:()=>import ('../views/bbs/BbsDetailViews.vue')
                }
            ]
        },
        {
            path:"/login",
            name:"login",
            component:()=>import ('../views/LoginViews.vue')
        }
    ]
})
//3.到处路由
export default router