03 2024 档案
摘要:菜鸟教程链接 简单分页+当前页面高亮 网页开发过程,如果碰到内容过多,一般都会做分页处理。 要创建一个基本的分页可以在 元素上添加 .pagination 类。然后在 元素上添加 .page-item 类, 元素的 标签上添加 .page-link 类: <template> <div class=
阅读全文
摘要:菜鸟教程链接 普通加载效果 <template> <div class="container mt-3"> <h2>不同颜色加载效果</h2> <p>可以使用文本颜色类设置不同的颜色:</p> <div class="spinner-border text-muted"></div> <div cl
阅读全文
摘要:菜鸟教程链接 创建一个基本的进度条的步骤如下: 添加一个带有 .progress 类的 。 接着,在上面的 内,添加一个带有 class .progress-bar 的空的 。 添加一个带有百分比表示的宽度的 style 属性,例如 style="width:70%" 表示进度条在 70% 的位置。
阅读全文
摘要:菜鸟教程链接 <template> <div class="container mt-3"> <h3>徽章<span class="badge bg-success">new</span></h3> <h3>药丸形状徽章<span class="badge bg-danger rounded-pil
阅读全文
摘要:菜鸟教程链接 btn-group按钮组 <template> <div class="container mt-3"> <h2>加载按钮组</h2> <div class="btn-group"> <button class="btn btn-primary"> <span class="spinn
阅读全文
摘要:菜鸟教程链接 按钮 按钮类可用于 , , 或 元素上: <template> <div class="container mt-3"> <h2>按钮元素</h2> <a href="#" class="btn btn-info m-3" role="button">链接按钮</a> <button
阅读全文
摘要:菜鸟教程链接 提示框-基础颜色 提示框可以使用 .alert 类, 后面加上 .alert-success, .alert-info, .alert-warning, .alert-danger, .alert-primary, .alert-secondary, .alert-light 或 .a
阅读全文
摘要:菜鸟教程链接 圆角效果rounded <img src="./img/537.jpeg" class="rounded" alt="圆角效果" height="236"> 椭圆rounded-circle <img src="./img/537.jpeg" class="rounded-circle
阅读全文
摘要:菜鸟教程链接 基础表格 <template> <div class="container mt-3"> <h2>基础表格</h2> <p>.table 类来设置基础表格的样式:</p> <table class="table"> <thead> <tr> <th>Firstname</th> <th
阅读全文
摘要:菜鸟教程学习链接 字体颜色 Bootstrap 5 提供了一些有代表意义的颜色类:.text-muted, .text-primary, .text-success, .text-info, .text-warning, .text-danger, .text-secondary, .text-wh
阅读全文
摘要:菜鸟教程链接 Bootstrap 5 默认设置 Bootstrap 5 默认的 font-size 为 16px, line-height 为 1.5 默认的 font-family 为 "Helvetica Neue", Helvetica, Arial, sans-serif 此外,所有的 元素
阅读全文
摘要:菜鸟教程链接 Bootstrap 提供了一套响应式、移动设备优先的流式网格系统,随着屏幕或视口(viewport)尺寸的增加,系统会自动分为最多 12 列 规则 网格每一行需要放在设置了 .container (固定宽度) 或 .container-fluid (全屏宽度) 类的容器中,这样就可以自
阅读全文
摘要:在vscode项目打开终端 git config user.name name git config user.email email@email.com 本来试了几次没成功,因为搜的文章里都是 // 配置邮箱 git config --global user.email "you@example.
阅读全文
摘要:这个我查了半天十分奇怪的报错 是因为我没有在main.tsmain.ts引入并使用路由器 // 引入createApp创建应用 import { createApp } from "vue"; // 引入APP根组件 import App from './App.vue' // 引入pinia im
阅读全文
摘要:npm init vite 填写项目名称即可
阅读全文
摘要:菜鸟教程链接 固定宽度 .container 类用于创建固定宽度的响应式页面。 <div class="container"> <h1>我的第一个 Bootstrap 页面</h1> <p>这是一些文本。</p> </div> 100% 宽度 .container-fluid 类用于创建一个全屏幕尺
阅读全文
摘要:菜鸟教程链接 如何安装/使用 两种安装方式: 使用 Bootstrap5 CDN。 在index.html文件的head标签内,添加: <!-- 新 Bootstrap5 核心 CSS 文件 --> <link rel="stylesheet" href="https://cdn.staticfil
阅读全文
摘要:菜鸟教程链接 基本是阅读教程,记笔记大部分为直接复制 基础类型 any,number,string,boolean,数组(如let x:number[] = [1,2]或let x:Array<number> = [1,2]),元组(let x: [string, number]) enum enu
阅读全文
摘要:下载git git下载地址 配置秘钥到git 拉取项目git clone 安装npm 每次拉取项目前都有一次npm i 启动项目npm run dev 感谢同事教我
阅读全文
摘要:菜鸟教程链接 TypeScript简介 TypeScript 是 JavaScript 的超集,扩展了 JavaScript 的语法,因此现有的 JavaScript 代码可与 TypeScript 一起工作无需任何修改,TypeScript 通过类型注解提供编译时的静态类型检查。 TypeScri
阅读全文
摘要:尚硅谷视频教程 了解pinia 集中式状态(数据)管理的工具,主要管理各组件之间的共享数据 准备一个效果 学到的几个点 html下拉选择框,可以使用v-model双向绑定 v-modle获取的值为字符串,可以写为v-model.number,会尽量转为数字 <select name="num" v-
阅读全文
摘要:尚硅谷视频教程 路由简介 路由就是一组key-value的对应关系 多个路由,需要经过路由器的管理 怎样才能使用路由器 安装路由器 npm i vue-router 在src内新增文件夹router 在router文件夹新增文件index.ts,在其中创建路由器并暴露出去 // 创建一个路由 并暴露
阅读全文
摘要:代码 function changePage(news) { router.push({ name:'detail', // path:'news/detail', query:{ id:news.id, title:news.title, content:news.content, } }) }
阅读全文
摘要:安装vue-router npm i vue-router@next -S
阅读全文
摘要:官方教程链接 父组件还可以通过插槽 (slots) 将模板片段传递给子组件: App.vue <script setup> import { ref } from 'vue' import ChildComp from './ChildComp.vue' const msg = ref('from
阅读全文
摘要:尚硅谷视频教程 组件的生命周期 创建 挂载 更新 销毁 在特定的时期调用特定的函数,即生命周期 vue2的生命周期 4个周期,对应8个钩子(生命周期函数) 创建:创建前、创建完毕 挂载:挂载前、挂载完毕 更新:更新前、更新完毕 销毁:销毁前、销毁完毕 <script> export default
阅读全文
摘要:官方教程链接 子组件还可以向父组件触发事件 子组件声明触发的事件,并且带参数触发 <script lang="ts" setup> const emit = defineEmits(['res']) emit('res','hi thisismy msg') // 第一个参数是事件名称,其他参数都会
阅读全文
摘要:官方教程链接 子组件可以通过 props 从父组件接受动态数据 首先,需要声明它所接受的 props: const props = defineProps({ msg: String }) 在父组件中传数据 <template> <Props :msg="hiHi"/> </template> <s
阅读全文
摘要:官方教程链接 侦听器: import { ref, watch } from 'vue' const count = ref(0) watch(count, (newCount) => { console.log(`new count is: ${newCount}`) }) pre标签:识别jso
阅读全文
摘要:尚硅谷视频链接 axios 了解了一下axios的语法 import axios from 'axios' export default function () { let dogList = reactive( [ 'https://images.dog.ceo/breeds/pembroke/n
阅读全文
摘要:官方教程链接 ref标签(模板引用) 手动操作 DOM,使用模板引用,就是指向模板中一个 DOM 元素的 ref <p ref="pElementRef">hello</p> 要访问该引用,我们需要声明一个同名的 ref: const pElementRef = ref(null) 生命周期 详见前
阅读全文
摘要:官方教程链接 Class 与 Style 绑定 Vue 专门为 class 和 style 的 v-bind 用法提供了特殊的功能增强 <span :class="{done:item.done}">{{ item.text }}</span> 如果item.done是true,以上代码实际为 <s
阅读全文
摘要:创建了一个vue2的项目,在运行npm run serve的时候报错,检查了拼写也完全没有问题 最后找到的解决方案 将原来的 <script> import { Person } from './components/Person.vue' export default { name: 'App',
阅读全文
摘要:查看信息 npm config list 根据prefix路径,查看是否有'vue.cmd'文件 参考了这篇 感觉很整齐 如果没有就安装vue npm install -g vue 再安装脚手架vue-cli // 安装 npm install -g @vue/cli // 或者 cnpm inst
阅读全文
摘要:尚硅谷视频链接 defineProps-只接收 父:要有数据 let personList = reactive<personArr>( [ {id:'qqq1',name:'aaa',age:10,gender:'F'}, {id:'qqq2',name:'vvv',age:30,gender:'
阅读全文
摘要:报错内容 修改文件./tsconfig.app.json中的"noEmit": true为"noEmit": false ./tsconfig.node.json同理
阅读全文
摘要:尚硅谷视频链接 使用ts定义,可限制参数的类型 新建ts文件 // 定义接口限制对象属性 export interface personInter { name:string, age:number, gender:string } // 使用泛型 // export type personArr
阅读全文
摘要:尚硅谷视频教程 给标签增加ref属性,可以通过属性值取到标签内容 <template> <div class="person"> <h1>this</h1> <h2 ref="title">that</h2> <button @click="showLog">changeTemp</button>
阅读全文
摘要:尚硅谷视频链接 watch监视的5种情况 情况1 监视【ref】定义的【基本类型】数据 <template> <div class="person"> <h1>情况1:监视【ref】定义的【基本类型】数据</h1> <h2>求和:{{ sum }}</h2> <button @click="chan
阅读全文
摘要:尚硅谷视频链接 计算属性:算出一个ref定义的响应式数据 定义只读的计算属性 let fullName = computed(()=>{ return firstName.value.slice(0,1).toUpperCase() + firstName.value.slice(1) + '-'
阅读全文
摘要:尚硅谷视频教程 响应式数据 vue2中,写在data()里的数据自动成为响应式数据 vue3定义响应式数据,使用ref()或reactive() 什么是响应式数据:数据改变时。页面随之变化,即为响应式数据 ref() 创建基本类型的响应式数据 首先引入ref import { ref } from
阅读全文