Vue3教程

1.1 配置环境

vue官网:

Vue.js - The Progressive JavaScript Framework | Vue.js

终端
Linux和Mac上可以用自带的终端。
Windows上推荐用powershell或者cmd。Git Bash有些指令不兼容。

安装Nodejs
安装地址:

Node.js

安装@vue/cli
打开Git Bash,执行:

npm i -g @vue/cli
如果执行后面的操作有bug,可能是最新版有问题,可以尝试安装早期版本,比如:npm i -g @vue/cli@4

启动vue自带的图形化项目管理界面
vue ui
常见问题1:Windows上运行vue,提示无法加载文件,表示用户权限不足。
解决方案:用管理员身份打开终端,输入set-ExecutionPolicy RemoteSigned,然后输入y

 

1.2 基本概念

script部分

export default对象的属性:

name:组件的名称
components:存储<template>中用到的所有组件
props:存储父组件传递给子组件的数据
watch():当某个数据发生变化时触发
computed:动态计算某个数据
setup(props, context):初始化变量、函数
ref定义变量,可以用.value属性重新赋值
reactive定义对象,不可重新赋值
props存储父组件传递过来的数据
context.emit():触发父组件绑定的函数

template部分

<slot></slot>:存放父组件传过来的children。
v-on:click或@click属性:绑定事件
v-if、v-else、v-else-if属性:判断
v-for属性:循环,:key循环的每个元素需要有唯一的key
v-bind:或::绑定属性

style部分

<style>标签添加scope属性后,不同组件间的css不会相互影响。

第三方组件

view-router包:实现路由功能。
vuex:存储全局状态,全局唯一。
state: 存储所有数据,可以用modules属性划分成若干模块
getters:根据state中的值计算新的值
mutations:所有对state的修改操作都需要定义在这里,不支持异步,可以通过$store.commit()触发
actions:定义对state的复杂修改操作,支持异步,可以通过$store.dispatch()触发。注意不能直接修改state,只能通过mutations修改state。
modules:定义state的子模块

1.3 项目的API

1. 获取Json Web Token(JWT)

地址:https://app165.acapp.acwing.com.cn/api/token/
方法:POST
是否验证jwt:否
输入参数:
username: 用户名
password: 密码
返回结果:
access: 访问令牌,有效期5分钟
refresh: 刷新令牌,有效期14天

2. 刷新JWT令牌

地址:https://app165.acapp.acwing.com.cn/api/token/refresh/
方法:POST
是否验证jwt:否
输入参数:
refresh: 刷新令牌
返回结果:
access: 访问令牌,有效期5分钟

3. 获取用户列表

地址:https://app165.acapp.acwing.com.cn/myspace/userlist/
方法:GET
是否验证jwt:否
输入参数:无
返回结果:返回10个用户的信息

4. 获取某个用户的信息

地址:https://app165.acapp.acwing.com.cn/myspace/getinfo/
方法:GET
是否验证jwt:是
输入参数:
user_id:用户的ID
返回结果:该用户的信息

5. 获取某个用户的所有帖子

地址:https://app165.acapp.acwing.com.cn/myspace/post/
方法:GET
是否验证jwt:是
输入参数:
user_id:用户的ID
返回结果:该用户的所有帖子

6. 创建一个帖子

地址:https://app165.acapp.acwing.com.cn/myspace/post/
方法:POST
是否验证jwt:是
输入参数:
content:帖子的内容
返回结果:result: success

7. 删除一个帖子

地址:https://app165.acapp.acwing.com.cn/myspace/post/
方法:DELETE
是否验证jwt:是
输入参数:
post_id:被删除帖子的ID
返回结果:result: success

8. 更改关注状态

如果未关注,则关注;如果已关注,则取消关注。

地址:https://app165.acapp.acwing.com.cn/myspace/follow/
方法:POST
是否验证jwt:是
输入参数:
target_id: 被关注的用户ID
返回结果:result: success

9. 注册账号

地址:https://app165.acapp.acwing.com.cn/myspace/user/
方法:POST
是否验证jwt:否
输入参数:
username: 用户名
password:密码
password_confirm:确认密码
返回结果:
result: success
result: 用户名和密码不能为空
result: 两个密码不一致
result: 用户名已存在

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

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

相关文章

C#,最小代价多边形三角剖分MCPT(Minimum Cost Polygon Triangulation)算法与源代码

1 最小代价多边形三角剖分算法 凸多边形的三角剖分是通过在非相邻顶点&#xff08;角点&#xff09;之间绘制对角线来形成的&#xff0c;这样对角线就不会相交。问题是如何以最小的代价找到三角剖分的代价。三角剖分的代价是其组成三角形的权重之和。每个三角形的重量是其周长…

293.【华为OD机试】剩余银饰的重量(模拟和贪心算法JavaPythonC++JS实现)

🚀点击这里可直接跳转到本专栏,可查阅顶置最新的华为OD机试宝典~ 本专栏所有题目均包含优质解题思路,高质量解题代码(Java&Python&C++&JS分别实现),详细代码讲解,助你深入学习,深度掌握! 文章目录 一. 题目二.解题思路三.题解代码Python题解代码JAVA题解…

LLM春招准备(1)

llm排序 GPT4V GPT-4V可以很好地理解直接绘制在图像上的视觉指示。它可以直接识别叠加在图像上的不同类型的视觉标记作为指针&#xff0c;例如圆形、方框和手绘&#xff08;见下图&#xff09;。虽然GPT-4V能够直接理解坐标&#xff0c;但相比于仅文本坐标&#xff0c;GPT-4V在…

蓝桥杯练习题——dp

五部曲&#xff08;代码随想录&#xff09; 1.确定 dp 数组以及下标含义 2.确定递推公式 3.确定 dp 数组初始化 4.确定遍历顺序 5.debug 入门题 1.斐波那契数 思路 1.f[i]&#xff1a;第 i 个数的值 2.f[i] f[i - 1] f[i - 2] 3.f[0] 0, f[1] 1 4.顺序遍历 5.记得特判 …

Web前端---表格和表单

1.表格概述 表格标记&#xff1a;<table></table> 表格标题标记&#xff1a;<caption></caption> 表头&#xff1a;<th></th>------heading 行标记&#xff1a;<tr></tr>-----r是row 列标记&#xff1a;<td></t…

数据可视化原理-腾讯-散点图

在做数据分析类的产品功能设计时&#xff0c;经常用到可视化方式&#xff0c;挖掘数据价值&#xff0c;表达数据的内在规律与特征展示给客户。 可是作为一个产品经理&#xff0c;&#xff08;1&#xff09;如果不能够掌握各类可视化图形的含义&#xff0c;就不知道哪类数据该用…

快速搭建Vue前端框架

快速搭建Vue前端框架 安装Vue Vue官方安装过程:https://cli.vuejs.org/zh/guide/installation.html 二.创建Vue工程 2.2 安装淘宝镜像 安装淘宝镜像&#xff08;会让你安装Vue的速度加快&#xff09;&#xff1a; npm config set registry https://registry.npm.taobao.or…

CMU 10-414/714: Deep Learning Systems --hw0

hw0 宏观上的步骤: softmax loss: 实现softmax loss代码 概念 softmax就是将结果映射到0~1之间,且所有结果相加为1(概率形式)cross-entropy loss就是计算 p ( x ) log ⁡ q ( x ) p(x)\log {q(x)} p(x)logq(x),此值可用于衡量实际输出与期望输出的距离,进而衡量预测模…

Qt 实现橡皮擦拭显示图片

1.简介 在一些游戏中看见类似解密破案的效果&#xff0c;使用手触摸去擦拭图片上的灰尘&#xff0c;然后显示最终的图片&#xff0c;所以也想试试Qt实现的效果。大家有自己想做的效果&#xff0c;都可以尝试。 以下是效果展示图。 可以控制橡皮擦的大小&#xff0c;进行擦拭…

CRMCHAT修复获取客户ip信息,地区信息

CRMCHAT修复获取客户ip信息&#xff0c;地区信息-TP源码网原因&#xff1a; 因pv.sohu.com/cityjson?ieutf-8接口已无法正确获取ip信息&#xff0c;导致后台站点统计无法正确获取用户ip信息&#xff0c;无法获取地区信息 修改 注释掉无用接口地址 修复ip信息 也可以使用&…

PTA天梯赛L1 001-010题目解析

目 录 1.L1-001 Hello World 2.L1-002 打印沙漏 3.L1-003 个位数统计 4.L1-004 计算摄氏温度 5.L1-005 考试座位号 6.L1-006 连续因子 7.L1-007 念数字 8.L1-008 求整数段和 9.L1-009 N个数求和 10.L1-010 比较大小 1.L1-001 Hello World 代码&#xff1a; #inclu…

NLP评价指标

一、分类任务常见评估&#xff1a; 准确度(Accuracy) 评估预测正确的比例&#xff0c;精确率(Precision) 评估预测正例的查准率&#xff0c;召回率(Recall) 评估真实正例的查全率。如果是多分类&#xff0c;则每个类别各自求P、R最终求平均值。 TP&#xff08;True Positives…

NLP_新闻主题分类_7(代码示例)

目标 有关新闻主题分类和有关数据.使用浅层网络构建新闻主题分类器的实现过程. 1 案例说明 关于新闻主题分类任务: 以一段新闻报道中的文本描述内容为输入, 使用模型帮助我们判断它最有可能属于哪一种类型的新闻, 这是典型的文本分类问题, 我们这里假定每种类型是互斥的, 即文…

11. Nginx进阶-HTTPS

简介 基本概述 SSL SSL是安全套接层。 主要用于认证用户和服务器&#xff0c;确保数据发送到正确的客户机和服务器上。 SSL可以加密数据&#xff0c;防止数据中途被窃取。 SSL也可以维护数据的完整性&#xff0c;确保数据在传输过程中不被改变。 HTTPS HTTPS就是基于SSL来…

【Unity】Node.js安装与配置环境

引言 我们在使用unity开发的时候&#xff0c;有时候会使用一些辅助工具。 Node.js就是开发中&#xff0c;经常会遇到的一款软件。 1.下载Node.js 下载地址&#xff1a;https://nodejs.org/en 2.安装Node.js ①点击直接点击Next下一步 ②把协议勾上&#xff0c;继续点击…

【lua】lua内存优化记录

这边有一个Unity项目用的tolua&#xff0c; 游戏运行后手机上lua内存占用 基本要到 189M&#xff0c; 之前峰值有200多。 优化点1 加快gc频度&#xff1a; 用uwa抓取的lua内存&#xff0c; 和unity的mono很像&#xff0c;内存会先涨 然后突然gc一下&#xff0c;降下来。 这样…

java数据结构与算法刷题-----LeetCode687. 最长同值路径

java数据结构与算法刷题目录&#xff08;剑指Offer、LeetCode、ACM&#xff09;-----主目录-----持续更新(进不去说明我没写完)&#xff1a;https://blog.csdn.net/grd_java/article/details/123063846 文章目录 1. 深度优先&#xff0c;用下面的儿子判断2. 深度优先&#xff0…

UI 自动化测试实战(二)| 测试数据的数据驱动

数据驱动就是通过数据的改变驱动自动化测试的执行&#xff0c;最终引起测试结果的改变。简单来说&#xff0c;就是参数化在自动化测试中的应用。 测试过程中使用数据驱动的优势主要体现在以下几点&#xff1a; 1.提高代码复用率&#xff0c;相同的测试逻辑只需编写一条测试用例…

【01】区块链科普100天-模块化区块链

模块化区块链以其高拓展性的特点成为热点 导言&#xff1a; 模块化区块链通过将不同功能分解为不同的模块&#xff08;层&#xff09;来提高系统的可拓展性、安全性和灵活性 例如Celestia公链&#xff0c;通过将数据可用性与共识分离来提高网络的可拓展性和灵活性 1.层次架构&a…

服务器后端是学习java还是php

没有绝对的"最好"语言&#xff0c;每种后端语言都有其适用的场景和特点。以下是几种常用的后端语言&#xff1a; 1. Java&#xff1a;Java是一种通用且强大的语言&#xff0c;广泛用于企业级应用和大型系统。它有很好的性能和可靠性&#xff0c;并且具有优秀的生态系…