- 博客(32)
- 资源 (3)
- 收藏
- 关注
RSS订阅原创 数组的方法
/ 方法用来判断一个数组是否包含一个指定的值，如果是返回 true，否则false。// 判断数组里是否有符合条件的只要有一个满足就返回true否则就返回false。// 判断数组里是否有符合条件的全部满足返回true一个不满足就返回false。// 查找数组里第一个符合条件的下标。// 循环遍历数组会返回一个新的数组。// 查找数组里面第一个符合条件的。// 用来判断是否以xx开头。// 过滤掉不满足条件的。
2024-01-24 17:03:43
366
原创 webpack 打包时index白屏控制台报错
我们需要在vue.config.js如果没有就新建一个module.exports = {// 输出目录assetsDir: 'static',// 基本路径publicPath: './',};添加上面两行代码在从新打包就可以了
2022-05-19 13:16:43
246
原创 获取滚动条距离控制页面样式
<template> <h3 class="textChangee" :style="{ transform: translatechange }">xxx</h3> </template><script>export default { data() { return { translatechange: 'translateX(0%)' } }, methods: {...
2022-05-18 20:53:39
140
原创 导航守卫/vuex
导航守卫全局前置守卫导航跳转就会触达前置守卫fn回调接收三个参数，to将要访问的路由 from将要离开的地址 next()是放行的意思router.beforeEach((to,from,next)=>{to.path //将要访问的hash地址from.path //将要离开的hash地址next()})vuex 项目数据共享的技术方案数据存取一步到位，不需要层层传递数据流动清晰vuex数据都是响应式安装npm i vuex@3.6.2初始化vuex在src目录下.
2022-04-23 23:51:55
134
原创 自定义指令/路由/编程式导航
自定义指令私有自定义指令与data平级定义directivesdirectives: {// color: { // bind(el, obj) { // el.style.color = obj.value // } // }, // color: { // update(el, obj) { // el.style.color = obj.value // } // }, colo...
2022-04-23 23:50:45
102
原创 组件传值/动态组件/插槽
组件传值父-》子props在data数据里定义<子组件 :msg='message'></子组件>data(){return{message:'父组件中的值'}}子组件<p>{{msg}}</p>export default{props：['msg']}子-》父子组件<template> <div> <h4>count的值是：{{ count }}</h4>...
2022-04-23 23:47:20
1173
原创 vue全局注册与生命周期函数
全局注册在main.js中，new Vue之前进行全局注册语法：Vue.component("注册名称",需要注册的组件)私有组件导入组件-》在components里注册-》在页面使用props通过props选项声明自定义属性，让外界动态提供与data平级定义props：["属性名"] 最简单的定义方法，无法控制每个属性的类型props：{自定义属性名：数据类型（可以有多个类型[类型A,类型B]）}优化props：{自定义属性名：配置选项{type用来约束数据类型 t...
2022-04-23 23:45:31
1664
原创 复习-vue指令
内容渲染指令：插值表达式 {{}} 可以求值的式子，写js代码v-html 当渲染的数据包含HTML标签，此时就用v-html属性绑定指令：v-bind简写：v-bin：属性名="表达式"事件绑定指令：v-on:事件名="处理函数"简写 @事件名="处理函数"定义函数在methods用this访问data里的数据修饰符：事件修饰符： .prevent阻止默认行为， .stop阻止冒泡按键修饰符：@keyup.enter监听用户是否按下enter键双向数据绑定：v-mode
2022-04-23 23:42:51
1373
原创 React中间件、React路由
React中间件安装npm i redux-logger导入redux-logger在redux中导入applyMiddleware函数调用applyMiddleware()并传入logger 中间件redux-thunk 中间件可以处理函数形式的action，因此可以执行异步操作React路由：可以把路由理解为，基于浏览器URL地址的条件渲染window.location.hash(url地址栏/#后面的值).slice(1)切片从第几个开始两种常见Router：HashRouter..
2022-04-06 19:02:09
1431
原创 action，reducer，store与React-Redux
Reduxaction(动作)：描述要干的事{ type： 'increment', payload: 10 } // +10{ type： 'decrement', payload: 10 } // -10reducer（函数）：更新状态reducer 它是一个纯函数。接收两个参数：action（要干啥），和一个给定的状态计算出一个新的状态。这个新的状态作为 reducer 下次处理数据（接收到action通知）的输入。store（仓库）：配合action和reducer// 导入red
2022-04-06 18:54:23
1036
原创 Hooks
useState基本使用import { useState } from "react";export const Counter = () => { const [count, setCount] = useState(10) const [name, setName] = useState('wxq') const [books, setBook] = useState([ { id: 1, name: '大鱼海棠' }, { id: 2, name: '福尔摩斯...
2022-03-23 23:23:43
70
原创 children属性传值与生命周期函数
children属性传值在Hello.jsimport React, { Component } from 'react'export class Hello extends Component { render() { return ( <div> <h1>Hello:{this.props.name}</h1> <hr></hr> <h2>{this.p...
2022-03-23 02:06:58
848
原创 组件通信传递数据
组件通信父传子Parent.js文件里（父组件）import React from "react";import { Child } from './Child'export class Parent extends React.Component { state = { Name: 'zy' } render() { return ( <div> <div>我是父组件，我的名字：{this.state.Name}&l...
2022-03-22 00:52:11
1290
原创 箭头函数额外传参，控制表单元素值的显示与改变，其他受控组件
使用箭头函数额外传参{import ReactDOM from 'react-dom';import React from 'react';class Time extends React.Component { state = { Time: new Date().toLocaleTimeString(), stat: [ { id: '1', naem: 'xx' }, { id: '2', naem: 'yy' }, { id: '3', ...
2022-03-20 23:04:06
99
原创 封装vuex持有化插件与计算数据精度丢
npm i -S vuex-persistedstateimport persistedstate from 'vuex-persistedstate';export default createStore({plugins:[createpersistedstate({key:'xxxx-xxx-xxx-xxx', paths:['要持久化的名字']})]})...
2022-03-20 23:00:55
84
原创 React组件基础
函数组件{1.符合JS的函数定义（函数定义，函数表达式，箭头函数）2.函数名称必须以大写字母开头(为了区分标签和自定义组件)3.必须有返回值// 函数定义组件function Hollo(){return <div>我是函数定义组件</div>}//函数表达式组件const Button = function (){return <button>我是函数表达式组件</button>}//函数定义和函数表达式的区别（提升）//箭头..
2022-03-17 14:39:35
552
原创 React基础学习
react声明式：声明你想要的结果，过程不用操心 array.forEach array,命令式：for(let i =0 ; i<=arr.length; i++){ console.log(arr[i])}基于组件：就是封装，可复用 （结构：HTML，样式css，行为js）学习一次随处使用React开发环境（前端工程化，单页面应用）命令工具：create-reach-app使用React api 在页面上创建UI//导入import React from 'react'impo
2022-03-15 00:26:03
189
原创 封装一个通用的倒计时函数
import { ref } from 'vue'import { useIntervalFn } from '@vueuse/core'//封装一个函数useCountDownconst useCountDown = () =>{//time响应式数据 每隔一秒减1const time =ref(0)//pause停止 resume开始const { pause , resume } =useIntervalFn( () => {time.value --.
2022-03-11 01:06:59
252
1
原创 移动web
找到父子关系，设置display: flex 弹性布局确定主轴方向 flex-direction: row 水平 column 垂直使用flex设置主轴方向的大小 auto项目既可以放大也可以缩小 none 项目不可以缩小 默认值 不会放大，但会缩小 数字主轴对齐方式 justify-content侧轴对齐方式 align-items（单行） 默认stretch(不设置高，侧轴会被拉伸)display:flex布局· 给父盒子设置，父盒子就变成容器，子盒子就变成项目了flex布局..
2021-11-10 21:41:25
164
原创 2D 3D的运用
transform: translateX translateY 移动方向transform: rotate 旋转以deg为单位transform: scale 缩放 scaleX水平方向 scaleY垂直方向transform-origin 旋转点两个方向如果对一个元素同时使用多个2d效果，需要注意顺序，没有固定顺序transform：translateX() rotate() scaletransform:translantZ 3D效果animation-iterat..
2021-10-30 22:42:19
95
原创 水平居中的方法
<!-- 水平居中 -->文字，行内元素，行内块元素 给父元素设置text-align：center块元素给当前设置margin：0 auto浮动元素给外面标准流父元素设置margin：0 auto定位元素 left：50；margin-left：-自身盒子宽度一半或者left：50%；transformX(-50%);<!-- 垂直居中 -->文字在盒子中垂直居中 行高等于高盒子在盒子垂直居中通过测量给小盒子设置margin或者给大盒子设置padding
2021-10-23 21:16:38
90
原创 清除浮动与定位
清除浮动1.额外标签在浮动末尾添加空标签2.在父元素添overflow：hidden；3.伪元素清除浮动.clearfix:after{ content:""; display:block; clear:both; height:0; visibility:hidden}4.双伪元素静态定位 sttic{} 默认值 加了边移也没效果相对对定位 position: relative; 后面跟方向就可以了top left.....
2021-10-20 23:25:04
132
原创 浮动和伪类
li:last-child(找最后一个li)，li:first-child(找第一个li) li:nth-child()(根据自己写的值) li:nth-last-chid()偶数2n 奇数2n+1 找前五个-n+5 从第五个往后n+5浮动：1:浮动的元素找相邻浮动的元素顶部对齐，在同一行显示2：浮动的元素脱离标准流，在页面不占位置3.浮动的元素只影响下面元素不会影响上面的元素4.浮动的元素只能压住盒子，压不住盒子里面的内容5.浮动的元素可以设置宽高，默认宽度是内容的宽度6.
2021-10-19 23:10:27
54
原创 学习前端第六天
盒子的组成（内容content 边框border 内边距padding 外边距margin）border-width(边框粗细) border-style(solid实线 dashed虚线 dotted点线) border-color(边框颜色)连写形式：border：1px solid red盒子里定义width，height，是定义盒子的大小，加边框外边距内边距会撑大盒子（内边距）padding：10px（上下左右）10px 20px(上下10xp 左右20px) 10px 20px 3
2021-10-17 21:37:52
132
原创 学习前端第五天
后代选择器：空格（选择器 选择器 {css}）子代选择器：>并集选择器：,（选择器，选择器{css}）交集选择器：紧挨着hover伪类选择器 选择器：hover{css}background-color 背景颜色background-image 背景图片（背景图不经常替换，很大或很小的图片，常用背景来做）img（经常替换的产品类图片）background-repeat no-repeat不平铺background-position图片背景位置 水平垂直连写属性： b
2021-10-15 22:21:02
80
原创 学习前端第四天，第三天复习
内嵌式 在HTML里面写样式外联式 新建一个css文件在通过link连接行内式 在标签后面写color颜色rgba（0,0,0,0.5）最后一位是透明度font-size字体大小font-weight粗细 bold加粗 normal不加粗 lighead更细font-style设置倾斜 normal不倾斜 italic倾斜font-family设置字体font连写属性 style weight size family连写顺序text-indent文本缩进t
2021-10-14 21:57:24
41
原创 基础第二天
无序列表 ul li 有序列表 ol li 自定义列表 dl dt dd 表格 table tr td（table表格整体 tr表格的每一行 td表格的单元格 ）caption表格标题 th表头 thead表头 tbody表身体 tfoot表底部 border边框 width 宽 height 高 rowspan 跨行合并 colspan 跨列合并 input表单：text文本框（placeholder提示文字）password(密码) radio单...
2021-10-12 21:20:15
36
原创 基础第一天
Web标准中三个结构：结构（HTML）页面元素表现（css）页面样式行为（JavaScript）页面交互的动态效果标签由两部分组成分别是：单标签和双标签标签与标签的关系可分为：嵌套关系（父子关系），并列关系（兄弟关系）父子关系：<head> <title></title></head>兄弟关系:<head></head><body></body>标题标签：&..
2021-10-11 23:33:33
141
循环数组，创建新的数组
2022-11-14
TA创建的收藏夹 TA关注的收藏夹
TA关注的人