当前位置: 首页 > news >正文

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.lryc.cn/news/310681.html

相关文章:

  • Linux系统Docker部署RStudio Server
  • 【C++】每周一题——2024.3.3(手滑再再写一篇)
  • TabLayout与ToolBar、ViewPager的使用
  • 链表基础知识详解(非常详细简单易懂)
  • SAP PP学习笔记05 - BOM配置(Customize)1 - 修正参数
  • 前端从普通登录到单点登录(SSO)
  • 考研总计划(基础篇)
  • 力扣周赛387
  • 部署PhotoMaker通过堆叠 ID 嵌入自定义逼真的人物照片
  • 挑战杯 基于深度学习的中文情感分类 - 卷积神经网络 情感分类 情感分析 情感识别 评论情感分类
  • 关于RSA公私钥加密报错Data must not be longer than 117 bytes问题解决办法
  • 【云原生】kubeadm快速搭建K8s集群Kubernetes1.19.0
  • Android 开发环境搭建的步骤
  • 六、继承(一)
  • 数字化转型导师鹏:政府数字化转型政务服务类案例研究
  • 解决ODOO12 恢复数据库提示内存不够报错
  • 关于数据提交上传服务端的数据类型以及项目打包上线的流程
  • 儿童悬吊训练系统:改善脑性麻痹儿童平衡感与运动能力的有效途径
  • ElasticSearch之文档的存储
  • 在Redhat 7 Linux上安装llama.cpp [ 错误stdatomic.h: No such file or directory]
  • linux 常用 命令行HTTP客户端
  • 深入理解@Param注解:用于参数映射的利器
  • OCP Secure boot必要特性
  • 全新攻击面管理平台
  • 在VMware中安装CentOS 7并配置Docker
  • Leetcoder Day37| 动态规划part04 背包问题
  • 突破编程_C++_面试(STL 编程 vector )
  • 【报名指南】2024年第九届数维杯数学建模挑战赛报名全流程图解
  • C#,哈夫曼编码(Huffman Code)压缩(Compress )与解压缩(Decompress)算法与源代码
  • JS 对象数组排序方法测试