杂自我记录
yarn 下载 node_
運行是yarn dev
每次改完路由要重新運行
如果出錯了 ,看网络->点击相应的(一般是最下面那条最新),->响应(ta就会告诉你报错了什么)
而网络->()->请求会出现你给出去的东西
ref
首先要引入 import { ref } from "vue"
給標籤取一個名字,組件也是標籤的一種 ,所以一般給組件取名,取了名字之後,通過ref 來訪問組件下的所有東西
button標籤下有 shape="circle" 設置為圓形
slots 下的title 和#actiontitle 相同就可以显示
const search_submit = () => {
get_list();
};
方法的使用的一種(我認為)
表格修改:
一般來說
1.點擊表格中的编辑,
出现表格,表格上的内容 和此列内容绑定,即获取列表数据, 这就要查询了,
确定修改:把表格修改后的内容 上传到数据库,
表格更新.
看报错
这报错说明没有传参,没有传id,name,content.
The id field is required 这个id 是必须的
ant :布局调节:Ant Design Vue (antdv.com)
:gutter="[左右,上下]"
ref用来代替了储存变量
const disabled = ref(true);//储存数据 并设定为true //disabled.value = true //也可以这样写(如果上面没有加(true) 的话)) //下面为应用事件 const change = () => { disabled.value = false; }; const determine = () => { disabled.value = true; };
position:fixed;
width:100%
CSS問題 :
f12後 选择一个元素检查 Ctrl+shift+C
点击元素后 下面的样式 默认一般第一个就是你选择那个元素class
Volar要关掉
這兩個用一個
加入这个
"plugins": [
["import", { "libraryName": "ant-design-vue", "libraryDirectory": "es", "style": "css" }] // `style: true` 会加载 less 文件
]
使用
script
import { Button } from "ant-design-vue";
一定要 加 lang="less"
可以不加scoper 因為你可以用id 下的class 来防止污染
图片问题:
require("")
4.6
1.
使用js 传字符
@click="select('Elite')"
加个单引号就是字符 不然会被认为是变量
之后在方法里面判断传进来的值和字符是否相等== 做到一个方法应多个要求
2.
使用onMounted
要引用vue
import { ref, onMounted } from "vue";
4.7
变成墨绿色才是组件
遇到ant 下拉菜單在這樣(我也不知道为什么我会这样==还有会挤在一起重叠的)
可以加个分割线
4.8
v-show 三元表達式 用法 (但是沒有用??不知道為什麼)
大佬我這樣沒錯吧,,但是沒有用,想要ta
页面的跳转 :
@click
方法里面写这个
window.location.href="你想要去的地方此页面跳转可以是/";
window.history.go(-1); // 这是返回上一个页面
window.navigate("母鸡哪里")
self.location="母鸡哪里";
top.location="母鸡哪里"
叫你做什么 , 最好说清楚需求 , 别到时候自己乱想了一大堆东西
真的尴尬就冒大汗
挺有意思的属性:css 试了就知道了
mix-blend-mode:difference
裁剪头像的库:
PAG · Portable Animated Graphics
vue-img-cutter
vue-cropper
427
各类插件
(2条消息) html图片特效插件,20款jQuery & CSS文字特效插件(有图有真相)_爱可乐爱生活的博客-CSDN博客
svg转 html 比较醉了
Convertio — 文件转换器
很好的视频 讲滚轮事件 非常棒!
JS基础_滚轮的事件_哔哩哔哩_bilibili
此是我改变图片缩放
window.onload = function () {
var box1 = document.getElementById("box");
box1.onmousewheel = function () {
if (event.wheelDelta > 0 || event.detail < 0) {
box1.style.transform = `scale(${(i += 0.1)})`;
// alert("上滚了");
} else {
box1.style.transform = `scale(${(i -= 0.1)})`;
// alert("下滚了");
}
};
bind(box1, "DOMMouseScroll", box1.onmousewheel);
};
const bind = (obj, eventStr, callback) => {
if (obj.addEventListener) {
//大部分游览器兼容问题
obj.addEventListener(eventStr, callback, false);
} else {
/*
*this 是 谁由调用方法决定
* callback.call(obj)
*/
obj.attachEvent("on" + eventStr, function () {
//在匿名函数中调用回调函数
callback.call(obj);
});
}
};
Some contents...
Login / Sign up
TREBEL LOGO
Buy Sessions | Book Sessions
Demo NEWBIES GET THEIR FIRST SESSION FOR JUST £15.
发现了自己基础不扎实 需要系统的去学习一下
vue-router setup api 跳转路由
const router = useRouter();
const jump = (page) => {
router.push(`/${page}`);
// window.location.href = "#/" + page;
};
我要跳去哪里 careers 路由去 带单引号哦
监听滚动条:
const scrollTop = () => {
let scroll = document.documentElement.scrollTop || document.body.scrollTop;
console.log(scroll);
};
window.addEventListener("scroll", scrollTop, true);
响应式字体大小
font-size: calc(1.3rem + 0.6vw);
git 合并分支
想将dev分支合并到master分支,操作如下:
1、首先切换到master分支上
git checkout master
2、如果是多人开发的话 需要把远程master上的代码pull下来
git pull origin master
//如果是自己一个开发就没有必要了,为了保险期间还是pull
3、然后我们把dev分支的代码合并到master上
git merge dev
群友的不知真假
var console={};
console.log=function(){};//禁用所有控制台输出
如何评价Udemy? - 知乎 (zhihu.com)
(5条消息) JQuery中的鼠标事件_前端小君君的博客-CSDN博客
动画.css |CSS 动画的跨浏览器库。 (animate.style)
v-for="(item, index) in data"
:key="index"
图文讲解vue3中ref和reactive的区别 (baidu.com)
mod 不是一个函数
可能是没有引入什么
用v- if 和v-for 一起使用
const one = ref(true);
const two = ref(true);
const three = ref(true);
const four = ref(true);
const five = ref(true);
const hellodata = reactive([
{ name: "Reforer", if: one },
{ name: "Reforer", if: two },
{ name: "Reforer", if: three },
{ name: "Reforer", if: four },
{ name: "Reforer", if: five },
]);
Vue封装组件并发布到npm仓库(保姆级教程)_哔哩哔哩_bilibili
要会查文档
内置对象
冒泡排序
arr1.sort(function(a, b) {
// return a - b; 升序的顺序排列
return b - a; // 降序的顺序排列
});
swiper插件 获取下标 实现 某个区域 根据下标 来变换图片
主要点是那两个箭头
const maximg = ref(imgdata[0].img);
const onSwiper = (swiper) => {
console.log(swiper);
};
const onSlideChange = (e) => {
console.log("slide change");
console.log(e.activeIndex);
maximg.value = imgdata[e.activeIndex].img;
};
const imgdata = reactive([
{
img: require("@/assets/img/NIKE.jpg"),
},
{
img: require("@/assets/img/NIKE_Co.jpg"),
},
]);
这是统计每一个字符 的个数
var str = 'abcoefoxyozzopp';
var o = {};
for (var i = 0; i < str.length; i++) {
var chars = str.charAt(i); // chars 是 字符串的每一个字符
if (o[chars]) { // o[chars] 得到的是属性值
o[chars]++;
} else {
o[chars] = 1;
}
}
console.log(o);
接上面的 得到 字符出现最多次的是谁
// 2. 遍历对象
var max = 0;
var ch = '';
for (var k in o) {
// k 得到是 属性名
// o[k] 得到的是属性值
if (o[k] > max) {
max = o[k];
ch = k;
}
}
console.log(max);
console.log('最多的字符是' + ch);
props 的使用 : 我的使用方式
给组件文件 设定一个 由 父文件 来定义的变量 父文件给出值 来控制 组件的属性
ps :可以多个文件引入组件文件 来实现 不同
子 文件(组件文件)
父文件 引入上面文件之后
图片 放置 平铺 就是说 给一个圆 这个图只在这里面显示部分
width: 150px;
height: 150px;
object-fit: cover;
object-position: 0 0;
overflow: hidden;
border-radius: 50%;
(22条消息) img标签实现和背景图一样的显示效果——object-fit和object-position (实用)_chelen_jak的博客-CSDN博客_img object-
vue antd tabs 的使用
asdsadas
asdsadassdd
asdsadassdd
asdsadas
asdsadassdd
asdsadassdd
asdsadas
asdsadassdd
asdsadassdd
asdsadas
asdsadassdd
asdsadassdd
import { Row, Col, Button, Tabs } from "ant-design-vue";
const activeKey = ref("1");
const TabPane = Tabs.TabPane;
插槽的使用
修改menu 右边的图标
给 dropdown 标签 overlayClassName="drop-down" 增加这个属性 classname 可以自定义
li 代表 的是ta 的每一块
a标签代表着ta的字
.drop-down {
margin-top: 20px;
background: #000;
// li {
// background-color: blue;
// &:hover {
// background-color: red;
// }
// }
a {
color: black;
margin-top: 20px;
}
background-color: aqua;
}
最近下载git项目
各式各样的问题 或者错误
其中一个在掘金 是要正确书写
Duplicate keys detected: ‘[object Object]’. This may cause an update error. - 掘金 (juejin.cn)
v-for="(item, index) in data"
key="index"
sass 的版本问题:
下载对应版本号 要清除
(找不到原来的解决方法了)
格式化自动加逗号:
去设置里面这里注释掉这个
vue
改页面的名字是这个
怎么把 这个i18n 的变量弄到字符串呢
script 加这两条
然后 $t 改成t 就好了 (如下图)
lang.value == 'zhTW' ? "繁体": "En"
数据里面直接写三元表达式
遇到 ant 表格 内容数据 没有key 的时候
:row-key="(record) => record.id"
这个可以跳转 到 新页面( target="_blank") 并且 打开pdf文件
設置全局token
main.ts 放這裡 我自查
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
// import store from './store'
import i18n from "@/i18n"
import { createPinia } from 'pinia'
// 引入axios
import axios from 'axios'
// 服务端地址
axios.defaults.baseURL = ""
// 独立API
const app = createApp(App)
app.use(createPinia()).use(router).use(i18n).mount('#app')
// 全局提供属性
app.provide("axios", axios)
app.provide("server_url", axios.defaults.baseURL)
// createApp(App).use(i18n).use(store).use(router).mount('#app')
// axios拦截器
axios.interceptors.request.use(
(config) => {
if (config && config?.headers) {
const token = localStorage.getItem('ocrs-token') || '';
config.headers.token = token.replaceAll("\"", "");
}
return config
})