实战用户管理【入门】

已于 2022-09-21 09:13:32 修改
阅读量94 收藏
点赞数
文章标签： javascript vue.js 前端
于 2022-09-20 23:29:46 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_43432717/article/details/126946091
版权

文章目录

1.创建项目

//在目标文件夹里 cmd
npm init vite@latest vue3-vite-users

2.模拟数据

//1.安装json-server
npm install -g json-server
//遇到的问题：权限原因
//解决办法：cmd,管理员身份打开
//2.
在根目录下创建data文件夹，db.json，写json数据
//3.
json-server --watch data/db.json --port=3303
//设置启动的简写方法
在package.json 中的scripts中加：
"generate":"json-server ./data/db.json"
//启动后端接口：
npm run generate
//生成的接口（可在浏览器中打开） ：http://localhost:3303/posts
//可能遇到的问题：json-server : 无法加载文件 D:\My_install\nodejs\node_global\json-server.ps1，因为在此系统上禁止运行脚本
解决方案：
以管理员身份运行powershell（快捷键：windows+X）
set-executionpolicy remotesigned
y

3.配置路由

npm install vue-router
//在src下创建router文件夹，index.ts
import { createRouter, createWebHistory } from "vue-router";
import Home from "../views/HomeView.vue";
const routes = [
  { path: "/", name: "Home", component: Home },
  {
    path: "/add",
    name: "add",
    component: () => import("../views/AddView.vue"),
  },
  {
    path: "/about",
    name: "about",
    component: () => import("../views/AboutView.vue"),
  },  
];
const router = createRouter({
  history: createWebHistory(),
  routes,
});
export default router;
//在main.js中全局配置路由
import router from "./router"
.use(router)

//在App.vue中
<script setup>
</script>
<template>  
  <router-view></router-view>
</template>

4.制作导航

https://www.bootcss.com/ --> Bootstrap4中文文档 --> 快速入门
//引入cdn，放到index.html中
<link
      rel="stylesheet"
      href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css"
      crossorigin="anonymous"
    />
//点击实例 Navbar static -->显示网页源代码 --> 拷贝<nav> </ nav> -->放到APP.vue
 <nav class="navbar navbar-expand-md navbar-dark bg-dark mb-4">
    <a class="navbar-brand" href="#">Top navbar</a>
    <button
      class="navbar-toggler"
      type="button"
      data-toggle="collapse"
      data-target="#navbarCollapse"
      aria-controls="navbarCollapse"
      aria-expanded="false"
      aria-label="Toggle navigation"
    >
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarCollapse">
      <ul class="navbar-nav mr-auto">
        <li class="nav-item active">
          <a class="nav-link" href="#"
            >Home <span class="sr-only">(current)</span></a
          >
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Link</a>
        </li>
        <li class="nav-item">
          <a class="nav-link disabled">Disabled</a>
        </li>
      </ul>
      <form class="form-inline mt-2 mt-md-0">
        <input
          class="form-control mr-sm-2"
          type="text"
          placeholder="Search"
          aria-label="Search"
        />
        <button class="btn btn-outline-success my-2 my-sm-0" type="submit">
          Search
        </button>
      </form>
    </div>
  </nav>
//更改后---------------------------------------------------------------------------：
<nav class="navbar navbar-expand-md navbar-dark bg-dark mb-4">
    <div class="navbar-brand" to="/">用户管理系统</div>
    <div class="collapse navbar-collapse" id="navbarCollapse">
      <ul class="navbar-nav mr-auto">
        <li class="nav-item active">
          <router-link class="nav-link" to="/">主页</router-link>
        </li>
        <li class="nav-item">
          <router-link class="nav-link" to="/about">关于</router-link>
        </li>
      </ul>
      <ul class="navbar-nav">
        <li class="nav-item active">
          <router-link class="nav-link" to="/add">添加用户</router-link>
        </li>
      </ul>
    </div>
  </nav>

5.请求数据并渲染

//制作form添加表格
//快速入门-->页面内容  -->表格 table table-striped  copy 放到Home.vue中
<table class="table table-striped">
      <thead>
        <tr>
          <th scope="col">姓名</th>
          <th scope="col">电话</th>
          <th scope="col">邮箱</th>
          <th scope="col">详情</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>1</td>
          <td>2</td>
          <td>3</td>
          <td>4</td>
        </tr>        
      </tbody>
</table>
//==========================================================================
<template>
  <!-- container保证表格即内容左右两边有留白 -->
  <div class="home container">
    <input type="text" class="form-control" placeholder="search..." />
    <!-- 表格 -->
    <table class="table table-striped">
      <thead>
        <tr>
          <th scope="col">序号</th>
          <th scope="col">姓名</th>
          <th scope="col">电话</th>
          <th scope="col">邮箱</th>
          <th scope="col">详情</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="customer in customers" :key="customer.id">
          <th scope="row">{{ customer.id }}</th>
          <td>{{ customer.name }}</td>
          <td>{{ customer.phone }}</td>
          <td>{{ customer.email }}</td>
          <td>{{  }}</td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script lang="ts" setup>
import { ref, onMounted } from "vue";
import axios from "axios";
const customers = ref<any>([]);
//发起请求
onMounted(async () => {
  const res = await axios.get("http://localhost:3000/users");
  customers.value = res.data;
  console.log(res.data);
});
</script>

在这里插入图片描述

6.制作添加用户表单

6.1.获取表单数据操作
//表单   Form controls
<template>
  <div class="add container">
    <form @submit.prevent="addCustomer">
      <div class="form-group">
        <label>姓名</label>
        <input
          type="text"
          class="form-control"
          placeholder="name..."
          v-model="customer.name"
        />
      </div>
      <div class="form-group">
        <label>电话</label>
        <input
          type="text"
          class="form-control"
          placeholder="phone..."
          v-model="customer.phone"
        />
      </div>
      <div class="form-group">
        <label>邮箱</label>
        <input
          type="email"
          class="form-control"
          placeholder="email..."
          v-model="customer.email"
        />
      </div>
      <div class="form-group">
        <label>学历</label>
        <input
          type="text"
          class="form-control"
          placeholder="education..."
          v-model="customer.education"
        />
      </div>
      <div class="form-group">
        <label>毕业学校</label>
        <input
          type="text"
          class="form-control"
          placeholder="graduations school..."
          v-model="customer.graduationschool"
        />
      </div>
      <div class="form-group">
        <label>专业</label>
        <input
          type="text"
          class="form-control"
          placeholder="profession..."
          v-model="customer.profession"
        />
      </div>
      <div class="form-group">
        <label>个人简介</label>
        <textarea
          class="form-control"
          rows="7"
          v-model="customer.profile"
        ></textarea>
      </div>
      <button type="submit" class="btn btn-primary btn-block">添加</button>
    </form>
  </div>
</template>

<script lang="ts" setup>
import { ref } from "vue";
import axios from "axios";

const customer = ref<any>({
  id: "",
  name: "",
  phone: "",
  email: "",
  education: "",
  graduationschool: "",
  profession: "",
  profile: "",
});

const addCustomer = async () => {
  console.log(customer.value);
};
</script>
6.2.数据添加提交，路由跳转
<script lang="ts" setup>
import { ref } from "vue";
import axios from "axios";
import { useRouter } from "vue-router";

const router = useRouter();
const customer = ref<any>({
  id: "",
  name: "",
  phone: "",
  email: "",
  education: "",
  graduationschool: "",
  profession: "",
  profile: "",
});

const addCustomer = async () => {
 	const res = await axios.post("http://localhost:3000/users", customer.value);
    console.log(res.data);
    //页面跳转
    router.push("/");
};
</script>

7.跳转到详情

7.1.页面跳转并传递参数的两种写法
//在Home.vue中，加详情的跳转列
//因为id是动态的，所以要用：进行绑定
//1.推荐使用这种
 <td>
    <router-link class="btn btn-warning" :to="'/details/' + customer.id">
    详情
    </router-link>    
</td>
//======================================================================
//2.
 <td>
   <router-link
   class="btn btn-warning"
   :to="{ name: 'details', params: { id: customer.id } }">
   详情
   </router-link>  
</td>
7.2.在details组件中接收参数的两种写法
//1.这种情况要在相应的路由中加 props:true
<script lang="ts" setup>
import { ref, onMounted } from "vue";
import axios from "axios";

const customer = ref<any>({});
const props = defineProps({
  id: String,
});
onMounted(async () => {
  const res = await axios.get("http://localhost:3000/users/" + props.id);
  console.log(res.data);
  customer.value = res.data;
});
</script>
//在路由中：
{
    path: "/details/:id",
    name: "details",
    component: () => import("../views/DetailView.vue"), 
    props:true    
  },
//======================================================================
//2.推荐使用这种
<script lang="ts" setup>
import { ref, onMounted } from "vue";
import { useRoute } from "vue-router"; //用来接收传来的参数，等价于defineProps
import axios from "axios";

const customer = ref<any>({});
const route = useRoute();
onMounted(async () => {
  const res = await axios.get("http://localhost:3000/users/" + route.params.id);
  console.log(res.data);
});
</script>
//在路由中：
{
    path: "/details/:id",
    name: "details",
    component: () => import("../views/DetailView.vue"),     
  },
7.3.引入图标
//在bootstrap中的组件中找到列表组
<ul class="list-group">
  <li class="list-group-item">An item</li>
  <li class="list-group-item">A second item</li>
  <li class="list-group-item">A third item</li>
  <li class="list-group-item">A fourth item</li>
  <li class="list-group-item">And a fifth one</li>
</ul>
//https://fontawesome.dashgame.com/
//将cdn放在index.html中
<link rel="stylesheet" href="https://cdn.staticfile.org/font-awesome/4.7.0/css/font-awesome.css">
<template>
  <div class="details container">
    <h1 class="page-header">
      <router-link to="/" class="btn btn-success">返回</router-link>
      <span style="float: right">
        <router-link class="btn btn-primary" :to="'/edit/' + customer.id">
          编辑
        </router-link>
        &nbsp; &nbsp;
        <button class="btn btn-danger">删除</button>
      </span>
    </h1>
    <ul class="list-group">
      <li class="list-group-item">
        <i class="fa fa-user" aria-hidden="true"></i> &nbsp;&nbsp;{{
          customer.name
        }}
      </li>
      <li class="list-group-item">
        <i class="fa fa-phone" aria-hidden="true"></i> &nbsp;&nbsp;{{
          customer.phone
        }}
      </li>
      <li class="list-group-item">
        <i class="fa fa-envelope-open" aria-hidden="true"></i> &nbsp;&nbsp;{{
          customer.email
        }}
      </li>
      <li class="list-group-item">
        <i class="fa fa-meetup" aria-hidden="true"></i> &nbsp;&nbsp;{{
          customer.education
        }}
      </li>
      <li class="list-group-item">
        <i class="fa fa-superpowers" aria-hidden="true"></i> &nbsp;&nbsp;{{
          customer.graduationschool
        }}
      </li>
      <li class="list-group-item">
        <i class="fa fa-window-restore" aria-hidden="true"></i> &nbsp;&nbsp;{{
          customer.profession
        }}
      </li>
      <li class="list-group-item">
        <i class="fa fa-wpexplorer" aria-hidden="true"></i> &nbsp;&nbsp;{{
          customer.profile
        }}
      </li>
    </ul>
  </div>
</template>

<script lang="ts" setup>
import { ref, onMounted } from "vue";
import { useRoute } from "vue-router"; //用来接收传来的参数，等价于defineProps
import axios from "axios";

// const customer = ref<any>({
//   id: "",
//   name: "",
//   phone: "",
//   email: "",
//   education: "",
//   graduationschool: "",
//   profession: "",
//   profile: "",
// });
const customer = ref<any>({});

const route = useRoute();
onMounted(async () => {
  const res = await axios.get("http://localhost:3000/users/" + route.params.id);
  console.log(res.data);
  customer.value = res.data;
});
</script>
7.4.实现删除
//删除
<script lang="ts" setup>
import { ref, onMounted } from "vue";
import { useRoute ,useRouter} from "vue-router"; 
import axios from "axios";

const router=useRouter();
onMounted(async () => {
  const res = await axios.get("http://localhost:3000/users/" + route.params.id);
  console.log(res.data);
  customer.value = res.data;
});
const deleteCustomer = async () => {
  await axios.delete("http://localhost:3000/users/" + route.params.id);
  router.push("/");  
};
</script>
7.5.实现编辑
<span style="float: right">
        <!-- <router-link
          class="btn btn-primary"
          :to="{ name: 'edit', params: { id: customer.id } }"
          >编辑</router-link
        >      -->
        <router-link class="btn btn-primary" :to="'/edit/' + customer.id">
          编辑 </router-link>

        &nbsp; &nbsp;
        <button class="btn btn-danger" @click="deleteCustomer">删除</button>
</span>

//在editView.vue中
<template>
  <div class="edit container">
    <form @submit.prevent="updateCustomer">
      <div class="form-group">
        <label>姓名</label>
        <input type="text" class="form-control" placeholder="name..." v-model="customer.name" />
      </div>
      <div class="form-group">
        <label>电话</label>
        <input type="text" class="form-control" placeholder="phone..." v-model="customer.phone" />
      </div>
      <div class="form-group">
        <label>邮箱</label>
        <input type="email" class="form-control" placeholder="email..." v-model="customer.email" />
      </div>
      <div class="form-group">
        <label>学历</label>
        <input type="text" class="form-control" placeholder="education..." v-model="customer.education" />
      </div>
      <div class="form-group">
        <label>毕业学校</label>
        <input type="text" class="form-control" placeholder="graduations school..."
          v-model="customer.graduationschool" />
      </div>
      <div class="form-group">
        <label>专业</label>
        <input type="text" class="form-control" placeholder="profession..." v-model="customer.profession" />
      </div>

      <div class="form-group">
        <label>个人简介</label>
        <textarea class="form-control" rows="7" v-model="customer.profile"></textarea>
      </div>
      <button type="submit" class="btn btn-primary btn-block">确定</button>
    </form>
  </div>
</template> -->

<script lang="ts" setup>
import { ref, onMounted } from "vue";
import axios from "axios";
import { useRouter, useRoute } from "vue-router";

const router = useRouter();
const route = useRoute();

// const customer = ref<any>({
//   id: "",
//   name: "",
//   phone: "",
//   email: "",
//   education: "",
//   graduationschool: "",
//   profession: "",
//   profile: "",
// });
const customer = ref<any>({});

onMounted(async () => {
  const res = await axios.get("http://localhost:3000/users/" + route.params.id);
  console.log(res.data);
  customer.value = res.data;
});

const updateCustomer = async () => {
  const res = await axios.put("http://localhost:3000/users/" + route.params.id, customer.value);
  console.log(res.data);
  //页面跳转
  router.push("/");
};
</script>

8.提示框提醒

//所有可以通过路由跳转的写在views里
//1.安装
npm install element-plus --save
//2.项目中用全局引用，在main.js项目中导入
import ElementPlus from 'element-plus'  //导入组件
import 'element-plus/dist/index.css'  //导入样式
use(ElementPlus)

//哪个组件中需要就导入，写在页面跳转之前。以添加组件为例
import { ElMessage } from "element-plus";
// @ts-ignore
  ElMessage({
        message: "用户添加成功!",
        type: "success",
      });
  router.push("/");
//=============================================================================================
//删除提醒
import { ElMessage,ElMessageBox } from "element-plus";
const deleteCustomer = async () => {
  ElMessageBox.confirm("确定要删除此条记录?", "提示", {
    confirmButtonText: "是",
    cancelButtonText: "否",
    type: "warning",
  })
    .then(() => {
       axios.delete("http://localhost:3000/users/" + route.params.id);
      ElMessage({
        type: "success",
        message: "用户删除成功！",
      });
      router.push("/");
    })
    // .catch(() => {
    //   ElMessage({
    //     type: "info",
    //     message: "删除失败！",
    //   });
    // }); 
  
};

9.实现搜索功能

const matchCustomers=computed(() => {
    return customers.value.filter((item:any)=>item.name.includes(filterInput.value))
})
<tbody>
        <tr v-for="customer in matchCustomers" :key="customer.id">
          <th scope="row">{{ customer.id }}</th>
          <td>{{ customer.name }}</td>
          <td>{{ customer.phone }}</td>
          <td>{{ customer.email }}</td>
          <!-- 因为id是动态的，所以要用：进行绑定 -->
          <!-- <td>
            <router-link class="btn btn-warning" :to="'/details/' + customer.id"
              >详情</router-link
            >
          </td> -->
          <td>
            <router-link class="btn btn-warning" :to="{ name: 'details', params: { id: customer.id } }">详情</router-link>
          </td>
        </tr>
      </tbody>
单车哥哥
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
linux shell 脚本 入门到实战详解[⭐建议收藏！！⭐]
心有鸿鹄天地，不敢妄坠人间
09-28 27万+
文章目录shell 入门到实战详解[⭐建议收藏！！⭐]关于作者**作者介绍**一、shell 入门简介1.1 什么是shell1.2 shell 编程注意事项1.3 第一个shell 脚本 hello world二、shell 环境变量讲解2.1 shell 变量详解2.2 shell 系统变量 介绍2.3 shell 环境变量 介绍2.3.1 常见的系统环境变量2.4 shell 用户环境变量 介绍2.4.1 自定义shell环境变量2.4.2 echo 打印菜单栏2.4.3 shell 中彩色输出 h
〖Python 数据库开发实战 - MongoDB篇⑥〗- MongoDB的用户管理
易编橙 · 终身成长社群，相遇已是上上签！
10-27 3万+
大家好，该章节我们来学习一下 MongoDB 的 "用户管理"，上一章节我们无论是使用命令行还是图形界面都是不需要登录，直接就可以访问的。那么 MongoDB 能不能设置账户，开启登录验证呢？答案是当然可以，该章节的内容就来学习这一部分的内容吧。
influxDB快速入门实战教程
zhangxm_qz的博客
12-05 1万+
文章目录influxdb是什么influxdb数据模型influxdb数据存储架构influxdb部署运行influxdb基本操作 influxdb是什么 时序数据库是近几年一个新的概念，与传统的Mysql关系型数据库相比，它的最大的特点是：数据按照时间顺序存储。 InfluxDB是一个由InfluxData开发的开源时序型数据库。它由Go语言写成，着力于高性能地查询与存储时序型数据。InfluxDB被广泛应用于存储系统的监控数据，IoT行业的实时数据等场景，有三大特性 基于时间序列 可度量性 基于事件
Vue.js 快速入门实战
努力是为了站在万人之中，成为别人的光
06-12 2万+
通过这个简单的待办事项列表应用，我们学习了 Vue.js 的基本用法，包括数据绑定、事件处理和列表渲染。Vue.js 的设计使得它非常易于上手，并且能够与其他库或已有项目无缝整合。希望这篇文章能帮助你快速入门 Vue.js，并为你的前端开发之旅打下坚实的基础。接下来，你可以继续学习 Vue 的其他特性，例如组件、路由和状态管理等，以便在更复杂的项目中更好地使用 Vue.js。祝你学习愉快！
LlamaIndex 入门实战
AIGC搞起
02-04 5408
LlamaIndex是一个“数据框架”，用于帮助构建LLM应用程序。它提供了各种工具，包括数据连接器，用于摄取现有数据源和数据格式（API，PDF，文档，SQL等），以及用于将数据结构化（索引，图形）以便与LLM轻松使用的方式。此外，LlamaIndex还提供了高级的检索/查询接口，可以输入任何LLM输入提示，并返回检索到的上下文和增强知识的输出。它还允许与外部应用程序框架（如LangChain，Flask，Docker，ChatGPT等）轻松集成。
JavaWeb入门到实战
qq_33491651的博客
07-11 6677
web开发：可以提供浏览器访问的程序；Web应用程序编写完毕后，若想提供给外界访问；需要一个服务器来统一管理；*.htm， *.html这些都是网页的后缀、如果服务器上一直存在这些东四，我们就可以直接通过网络进行读取；静态web存在的缺点页面会动态展示，即“web页面的展示效果因人而异” 缺点：优点：ASP:php:JSP/Servlet: B/S：浏览和服务器C/S：客户端和服务器服务器是一种被动的操作，用来处理用户的一些请求和给用户一些响应信息；IIS：微软的；ASP.,Windows中自带的Tomca
React基础入门项目实战
Da_Zhuang的博客
04-05 2923
今天参加了一整天reactjs的培训，看邮件说该课程价值100美元，该课程覆盖了react的大部分基础内容，确实很不错。听说外企中使用reactjs较多，国内使用vue较多，想在外企工作的同学有必要了解该框架。写该博文主要是梳理React的基础知识点，可以对ReactJS的基础知识有大体了解。
Vue3实战教程（快速入门）
热门推荐
qq_39055970的博客
07-28 7万+
本教程通过搭建一个简单项目，帮助读者快速入门Vue3项目实战，掌握Vue3、TS、Element Plus、axios等技术栈。
Django入门实战——路灯后台管理系统
weixin_45962679的博客
03-14 2148
今天给大家分享一个Django入门级开发项目—后台管理系统 下面针对我所做的实战项目为例给大家分享：社区路灯管理系统 项目传送门 一、项目介绍 1.管理员登录 2.用户管理页面 2.1 用户添加、编辑、删除操作 ①、添加操作 ②、编辑操作 ③、删除操作 3、路灯管理页面 ①、路灯添加 ②、路灯编辑 4、故障管理 4.1 故障分类 4.2故障详情 ①、添加操作 ②、编辑操作 5、管理员用户管理页面 5.1、编辑操作 二、数据库设计 这个项目的数据库共设计了5个表：用户表、
深度学习：TensorFlow入门实战
m0_60721065的博客
09-16 8045
推荐下我自己建的人工智能Python学习群:[809160367]，群里都是学Python的，如果你想学或者正在学习Python ，欢迎你加入，大家都是软件开发党，不定期分享干货，还有免费直播课程领取。包括我自己整理的一份2021最新的Python进阶资料和零基础教学，欢迎进阶中和对Python感兴趣的小伙伴加入！还可以扫码加VX领取资料哦！ 下面是正文 本章介绍一个现阶段使用最广泛的深层学习框架——TensorFlow。因为TensorFlow所拥有的社区支持度日益增长，所以使用它来构建...
matplotlib入门实战全教程
02-24
1.pylab接口是由matplotlib.pylab提供的函数集，允许用户使用非常类似于MATLAB图生成代码的代码创建绘图2.matplotlib前端或API是一组重要的类，可创建和管理图形，文本，线条，图表等（艺术家教程），是一个对输出无...
Dubbo入门_实战
06-26
### Dubbo入门实战详解 #### 一、Dubbo概述与应用场景 ##### 1.1 什么是Dubbo？ Dubbo是一款由阿里巴巴开发的分布式服务框架，它致力于提供高性能和透明化的RPC远程服务调用方案。该框架是阿里巴巴SOA服务化治理...
源码-C语言项目实战入门.zip
08-04
【标题】"源码-C语言项目实战入门.zip"所代表的是一个C语言的学习资源，它以实际项目的形式帮助初学者入门。C语言是一种基础且强大的编程语言，被广泛应用于系统开发、软件工程、嵌入式系统等多个领域。通过项目实战...
52ABP实战系列教程入门-52ABP学校管理系统 .zip
04-12
用户界面与交互模块：提供友好的人机交互界面，方便用户操作使用。 二、主要类型与功能 管理系统根据所针对的管理对象和领域，可分为多种类型，如： 人力资源管理系统（HRM）：涵盖招聘、培训、绩效考核、薪酬...
vue2前端阿里云oss服务端签名直传
weixin_74285634的博客
08-13 286
generatePresignedUrlApi是由后端提供的接口 来获取密钥。
【vue教程】五. Vue 的路由管理
前端探索者
08-13 1119
Vue Router 是 Vue 官方的路由管理器，用于构建单页面应用。它允许你通过 URL 来映射不同的组件，实现页面的动态加载和导航。路由守卫用于在路由跳转前后执行代码，可以用来检查用户认证状态、获取数据等。通过本篇文章，我们学习了 Vue Router 的基本概念、配置和使用，以及如何实现动态路由和嵌套路由。我们还探讨了路由守卫的概念，并提供了如何在 Vue 组件中使用它们的示例。这些知识点将帮助你构建一个功能完备的单页面应用。
CSS的:defined伪类：选择已定义元素的新选择器
最新发布
2401_85743969的博客
08-17 354
在CSS中，伪类用于选择元素的不同状态或行为。:defined伪类是CSS4的一个特性，用于选择已经在文档中定义的元素。
【无标题】
weixin_42348009的博客
08-14 173
静态方法返回一个由给定对象自身的可枚举的字符串键属性名组成的数组。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值