实习记录(杂)

        杂自我记录 

实习记录(杂)_第1张图片終端修改成為git bash

yarn   下载 node_

運行是yarn dev

实习记录(杂)_第2张图片

每次改完路由要重新運行


 如果出錯了 ,看网络->点击相应的(一般是最下面那条最新),->响应(ta就会告诉你报错了什么)

而网络->()->请求会出现你给出去的东西


ref

首先要引入 import { ref } from "vue"

給標籤取一個名字,組件也是標籤的一種 ,所以一般給組件取名,取了名字之後,通過ref 來訪問組件下的所有東西


button標籤下有 shape="circle" 設置為圓形

实习记录(杂)_第3张图片

实习记录(杂)_第4张图片

slots 下的title 和#actiontitle 相同就可以显示

实习记录(杂)_第5张图片

 实习记录(杂)_第6张图片

const search_submit = () => {

  get_list();

};

方法的使用的一種(我認為)

表格修改:

一般來說

1.點擊表格中的编辑,

出现表格,表格上的内容 和此列内容绑定,即获取列表数据, 这就要查询了,

确定修改:把表格修改后的内容 上传到数据库,

表格更新.        

看报错

实习记录(杂)_第7张图片

 这报错说明没有传参,没有传id,name,content.

The id field is required 这个id 是必须的



ant :布局调节:Ant Design Vue (antdv.com)

:gutter="[左右,上下]" 


  
  
  
  

    

  
  
  
  

    


关于ref 和变量设置  事件:

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要关掉

這兩個用一個

实习记录(杂)_第8张图片

创建组件:(把文件变成组件)这是 

实习记录(杂)_第9张图片

按需加载

实习记录(杂)_第10张图片

实习记录(杂)_第11张图片

 加入这个

  "plugins": [
    ["import", { "libraryName": "ant-design-vue", "libraryDirectory": "es", "style": "css" }] // `style: true` 会加载 less 文件
  ]

使用

script

import { Button } from "ant-design-vue";

style:

一定要 加 lang="less"

可以不加scoper 因為你可以用id 下的class 来防止污染

图片问题:

require("")

4.6

1.
使用js  传字符
@click="select('Elite')"
加个单引号就是字符  不然会被认为是变量
之后在方法里面判断传进来的值和字符是否相等==  做到一个方法应多个要求
2.
使用onMounted
要引用vue
import { ref, onMounted } from "vue";

4.7

变成墨绿色才是组件

遇到ant 下拉菜單在這樣(我也不知道为什么我会这样==还有会挤在一起重叠的)

可以加个分割线 

实习记录(杂)_第12张图片

4.8

v-show  三元表達式  用法  (但是沒有用??不知道為什麼) 

大佬我這樣沒錯吧,,但是沒有用,想要ta

实习记录(杂)_第13张图片

页面的跳转 :

@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
  • 1
  • 2

3、然后我们把dev分支的代码合并到master上

git  merge dev

群友的不知真假

var console={};
console.log=function(){};//禁用所有控制台输出

如何评价Udemy? - 知乎 (zhihu.com)

(5条消息) JQuery中的鼠标事件_前端小君君的博客-CSDN博客

动画.css |CSS 动画的跨浏览器库。 (animate.style)

css 动画库的使用 ta 是用于字体出入的

  v-for="(item, index) in data"

            :key="index"

图文讲解vue3中ref和reactive的区别 (baidu.com)

mod 不是一个函数 

可能是没有引入什么

实习记录(杂)_第14张图片

用v- if 和v-for  一起使用

实习记录(杂)_第15张图片

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"),
  },
]);

实习记录(杂)_第16张图片

这是统计每一个字符 的个数 

    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 :可以多个文件引入组件文件 来实现 不同

子 文件(组件文件)

实习记录(杂)_第17张图片

父文件  引入上面文件之后 

实习记录(杂)_第18张图片

图片  放置  平铺 就是说 给一个圆 这个图只在这里面显示部分

 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

script ts setup

import { Row, Col, Button, Tabs } from "ant-design-vue";
const activeKey = ref("1");
const TabPane = Tabs.TabPane;

插槽的使用

修改menu 右边的图标

实习记录(杂)_第19张图片

ant 下拉菜单 控制属性

给 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;
}

实习记录(杂)_第20张图片

最近下载git项目

各式各样的问题 或者错误

其中一个在掘金 是要正确书写

Duplicate keys detected: ‘[object Object]’. This may cause an update error. - 掘金 (juejin.cn)

 v-for="(item, index) in data"

 key="index"

sass 的版本问题:

下载对应版本号 要清除  

(找不到原来的解决方法了)

格式化自动加逗号:

去设置里面这里注释掉这个

实习记录(杂)_第21张图片

vue

改页面的名字是这个 

实习记录(杂)_第22张图片

怎么把 这个i18n 的变量弄到字符串呢

实习记录(杂)_第23张图片

script 加这两条 

然后 $t 改成t 就好了 (如下图)

实习记录(杂)_第24张图片

 lang.value == 'zhTW' ? "繁体": "En"

数据里面直接写三元表达式

实习记录(杂)_第25张图片

 遇到 ant 表格 内容数据 没有key 的时候

  :row-key="(record) => record.id"

 实习记录(杂)_第26张图片

下載入會表格

这个可以跳转 到  新页面( target="_blank") 并且 打开pdf文件

設置全局token 

实习记录(杂)_第27张图片

 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
    })

你可能感兴趣的:(company,vue.js)