- 博客(229)
- 资源 (2)
- 收藏
- 关注
RSS订阅原创 最近遇到的问题
2.uniapp上传到阿里云的视频，安卓正常展示，ios部分正常旋转90度，但是上传的图片安卓ios都好使。获取视频的第一帧为首图，加了ar_auto解决了部分苹果展示旋转90度的问题。1.在web端也要播放视频 直接用iframe内嵌另一个项目的链接。从阿里云获取的视频是正常的 并没有旋转。目前还没有发现什么bug。
2023-11-07 14:25:57
106
原创 NaN类型
NaN类型（not a number） console.log(Number('huandk')); //NaN console.log(1 / 'jfhdkd'); //NaN console.log(NaN == NaN); //false console.log(Number.isNaN(1 / 'jfhdkd')); //true console.log(Object.is(1 / 'jfhdkd',NaN)); /
2022-11-20 15:28:54
175
原创 input限制两位小数（包含iOS）
<input type="number" inputmode="decimal" class="common-form-text common-form-color" placeholder="请输入房屋面积" v-model="fwmj" @input="fwmj=fwmj.replace(/[^\d.]/g, '').replace(/\.{2,}/g, '.').replace('.', '$#$').replace(/\./g, '').replace('$#$', '.').repl
2021-11-29 13:50:31
1611
原创 sm4加密和sm3加密
sm4加密有32位key值加密和16位key值加密加粗样式sm4中32位加密：可以参考：https://www.npmjs.com/package/@haici/gmsm4sm4中16位加密：可以参考：https://blog.csdn.net/qq_34574204/article/details/107961807?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522162501640416780366595087%2522%252C%
2021-06-30 09:29:21
4593
2
原创 react-路由守卫和懒加载
路由守卫自己封装import React, { Component } from 'react'import {Route,Redirect} from 'react-router-dom'export default class MyRoute extends Component { render() { let user = sessionStorage.getItem('user'); return ( <div>
2021-05-12 14:57:49
139
原创 react-路由传参
路由传参:传参传递: <Route path="/movieDetail/:id" component={MovieDetail}></Route> {/* 方式二: 展示列表 Link*/} {movieList.map(item=>( <div key={item.id} style={{background:'hotpink'}}> <Link to={'/movieDetail/'+item.id}>电影名称:{item.
2021-05-12 14:57:13
94
原创 react-路由
路由1.路由模式HashRouter访问方式:http://localhost:3000/#/BrowserRouter访问方式:http://localhost:30002.路由规则路由出口import {Switch} from 'react-router-dom'//一级路由出口<Switch></Switch>路由规则import {Route} from 'react-router-dom'<Sw
2021-05-12 14:56:33
93
原创 react-ui框架(antd)
ui框架(antd)1.安装antdcnpm i antd --save2.使用图标,需要安装图标库cnpm i @ant-design/icons --save3.使用index.js// 引入antd样式import 'antd/dist/antd.css';import React, { Component } from 'react'import Banner from '../components/Banner'import { Button,Divider,Space
2021-05-12 14:54:21
272
原创 react-轮播图
轮播图https://www.npmjs.com/package/react-awesome-swiper1.下载npm install react-awesome-swiper --save2.使用components/Banner.jsximport React, { Component } from 'react'import AwesomeSwiper from 'react-awesome-swiper';export default class Banner extends
2021-05-12 14:53:49
198
原创 react中的ref
ref1.定义用来操作普通DOM元素和子组件2.操作普通DOM元素方式一{/* 方式一 */}<div ref="div"></div> <button className="btn btn-primary" onClick={()=>this.send()}>操作DOM元素</button> send(){ // console.log(this.refs.div); this.refs.div.
2021-05-12 14:53:11
161
原创 生命周期-react、
生命周期1.定义从创建到销毁的过程,就是一个生命周期钩子函数:在某事某刻自动被触发的函数称之为钩子函数2.创建阶段componentWillMount 组件将要挂载特点可以操作数据不能操作dom节点执行次数:1次render 渲染jsx模板特点可以操作数据不能操作DOM节点执行次数: 1次componentDidMount 组件挂载完成特点可以操作数据可以操作DOM节点执行次数: 1次3.更新阶段shouldComp
2021-05-12 14:52:14
80
原创 react数据的双向绑定
双向数据绑定双向数据绑定import React, { Component } from 'react'export default class Form extends Component { constructor(){ super() this.state = { name:'王一博' } } change(e){ // 实现数据的双向绑定 this.setState
2021-05-12 14:51:42
142
原创 react中父传子，子传父和非父子通信
一.父子组件之间通信1.父传子父组件: 通过自定义属性进行传值子组件: 通过this.props接收数据父组件import React, { Component } from 'react'import Child from './Child'export default class Parent extends Component { state = { name:'赵丽颖', age:30, } render() {
2021-05-12 14:51:03
279
原创 组件状态数据的定义和更新
组件状态数据的定义和更新setState(),异步处理函数import React, { Component } from 'react'export default class Login extends Component { name = '花花'; constructor(){ super() // 在state中专门存放状态数据 this.state = { newName:'张碧晨'
2021-04-26 14:28:38
262
原创 事件处理和事件对象
.事件处理1.事件注册on+首字母大写的事件名称={自定义事件}自定义事件名后面不能有(),如果()一旦存在.则该事件自动被触发import React, { Component } from 'react'export default class EventOn extends Component { fn(){ console.log('我被调用了'); } render() { return ( <d
2021-04-26 14:27:10
122
原创 react脚手架
脚手架7-1.全局安装脚手架全局安装: npm i create-react-app -g 查看版本: create-react-app -V7-2.使用脚手架创建项目1.create-react-app 项目名称2.cd demo3.npm start #项目启动 如果报错,如何解决 git add . #添加到暂存区 git commit -m 'tj' #提交代码至本地仓库 npm run eject #将项目全部依赖项导出 不可逆 npm start
2021-04-26 14:26:15
100
原创 react中的组件
组件函数组件 1.函数组件名首字母必须大写 2.函数组件中必须要有return 3.return的结果又是一个jsx模板内容父传子: 父组件: 通过自定义属性进行传值 子组件: 通过参数的形式接受数据,接收的结果是一个{}<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatib
2021-04-26 14:25:48
93
原创 jsx模板语法介绍
jsx模板语法介绍JSX(javascript xml)在javascript的基础上结合了xml语法jsx模板语法不能直接被浏览器解析jsx模板可以被babel进行解析jsx模板语法只针对于react所使用1.xml语法结构xml严格区分大小写xml中双标签必须要有开始和结束符xml中单标签必须要有结束符xml中有且只能有一个根节点2.jsx语法结构* 1.jsx模板严格遵循xml语法 * 2.jsx模板语法中双标签必须要有开始和结束 * 3
2021-04-26 14:25:11
759
原创 react介绍和安装+小案例
react介绍和安装一.介绍react是由Facebook公司前端开发团队进行开和维护定义.用于构建用户界面的 JavaScript 库特点:react是基于组件化进行开发react中由数据驱动和视图渲染来构建单页面应用react中没有基本的指令,计算属性,监听器.过滤器等等react中没有自动的数据双向绑定React 是react.js的核心.ReactDOM 是react-dom.js的核心二.下载安装方式一:<!-- 2.引入react
2021-04-26 14:23:49
82
原创 微信小程序--五星好评
wxml<!--pages/index1/index1.wxml--><view class="box"> <image wx:for="{{ [0,1,2,3,4] }}" src="{{ activeIndex > index ? starFull : star }}" bindtap="change" data-index="{{ index + 1 }}" ></im
2021-04-26 14:16:36
254
原创 微信小程序--选项卡
选项卡：wxml<view class="box"> <view class="{{ index == activeIndex ? 'active' : ''}}" wx:for="{{ info }}" bindtap="change" data-index="{{ index }}"> {{ item }} </view></view><view> {{ content[activeIndex] }}</v
2021-04-26 14:15:42
128
原创 插槽slot
插槽slot1.匿名槽口slot槽口中没有name属性为,匿名槽口.<template> <div> <!-- 开了一个槽口 --> <slot></slot> <div class="pink">你的眼睛很美,但是我发现我的眼睛更美,因为我的眼里只有你.</div> </div></template>2.具名槽口slot槽口中有name属性为,具名
2021-04-05 19:47:33
129
原创 jquery
jquery1.下载安装cnpm i jquery --save2.引入局部引入<script>// 局部引入jqueryimport $ from 'jquery'export default { mounted(){ $('.show').click(()=>{ $('.orange').slideDown(300) }) $('.hide').click(()=>{ $('.orange').slideU
2021-04-05 19:46:56
116
原创 is和ref
is作用:解决标签的固定搭配问题<template> <div> <ul> <li is="v-one"></li> </ul> </div></template><script>import vOne from './one.vue'export default { components:{ vOne, }}</scri
2021-04-05 19:46:14
101
原创 非父子通信
非父子通信1.非父子之间通信的方式eventBus A=>B A和B同时存在vuex(状态管理) 缺点:页面刷新之后数据立即消失本地存储: localStorage sessionStorage方式一在main.js// eventBus Vue.prototype.aa = 20,Vue.prototype.event = new Vue();a组件<template> <div class="box"> <h1&g
2021-04-05 19:45:32
113
原创 子传父
子传父1.子传父子组件: 通过自定义事件$emit（触发事件源）,来传递数据父组件: 通过触发自定义事件来接收参数.2.用法子组件<template> <div class="box"> <h1>子组件</h1> <input type="text" v-model="name" @change="change1"> <div>name的值为:{{name}}</div>
2021-04-05 19:45:00
164
原创 父传子
父传子分析:1.父传子,首先找到两个组件之间的关联.1.父传子父组件: 通过自定义属性传递数据子组件: 通过props选型接收传递的数据2.父传子注意事项1.父传子: 父变,子变,子变,父不变.并且报错2.父传子: 父变,子变.子变.父变,需要传递一个对象(因为对象是引入类型，公用一个地址，一个改全部改)3.父传子:父变.子不变.子变.父不变, 在子组件中将接收的数据存入到新的属性中3.props作用接收父组件传递的数据接收父组件传递的数据同时做校验常见的类型:Numbe
2021-04-05 19:44:27
794
原创 vue脚手架
脚手架1.安装webpack1.什么是webpack webpack就是一个打包工具2. npm i webpack -g npm i webpack-cli -g3.cli:command-line-interface(命令行接口)4. webpack -v 查看版本2.安装脚手架1.npm i vue-cli -g 全局安装脚手架2.vue -V 查看版本3.通过脚手架创建项目1.vue init webpack 项目名称2.cd 项目名称3.npm i 或者
2021-04-01 21:11:06
73
原创 缓存组件的生命周期钩子函数
缓存组件keep-alive 缓存标签组件缓存组件的生命周期钩子函数activated激活时状态deactivated 失活时状态注意:1.使用keep-alive包裹的组件就是缓存组件2.只有在缓存组件才会出现缓存组件的生命周期钩子函数<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Co
2021-04-01 21:10:33
1191
原创 动态组件
动态组件component标签组件作用:通过标签组件结合is属性来实现动态组件<component :is="isShow"></component>
2021-04-01 21:09:59
81
原创 组件嵌套
组件嵌套<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title&g
2021-04-01 21:09:26
107
原创 组件中的data
data * 1.在子组件中:data是一个函数,并且要有返回值 * 2.data为什么是函数: * a.data数据复用在任何地方,当一处数据修改时,不影响其他地方使用的data数据 * b.每复用一次data数据,可返回一个新的数据,不影响其他地方返回的data数据.<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-e
2021-04-01 21:09:02
390
原创 template(标签模板)
template(标签模板)作用:将组件的模板内容通过标签模板的形式展示出来,其目的为了书写简便.<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=devi
2021-04-01 21:08:18
329
原创 组件名称
组件名称* 1.不能使用现有标签作为组件的名称,eg:div p span img* 2.不能使用现有标签的大写作为组件的名称.eg:DIV diV dIV* 3.组件名称中使用小驼峰形式进行命名,在调用时,需要将大写转为 -小写* 4.定义组件时,建议使用小驼峰形式进行命名.方便书写* 5.如果组件模板内容非常多时,需要换行,一定要使用反引号.* 6.一个组件的模板只能对应一个根节点<!DOCTYPE html><html lang="en"><head&
2021-04-01 21:07:34
394
原创 组件介绍和注册
组件介绍和注册1.定义:组件就是组成完整页面常用的功能模块简言之:组件就是组成页面的零部件组件是可复用的vue实例2.组件的组成部分视图(html页面)样式(css)动画(js)3.作用提高代码的开发效率(提高代码的复用率)提高代码的可维护性4.注册组件全局注册组件书写格式 // 全局注册组件 /** * 参数一:组件的名称 * 参数二:要渲染到视图中的组件对应的内容 * template
2021-04-01 21:07:08
135
原创 动画
动画1.定义对元素进行添加,修改或者删除等操作时,需要使用动画2.使用系统提供了6个内置的类名.v-enter 进入之前.v-enter-active 进入过程.v-enter-to 进入结束.v-leave 离开之前.v-leave-active 离开过程.v-leave-to 离开结束需要结合标签transition来使用,如果没有设置name属性,默认.v- 如果设置了name属性,使用类名: .name属性值-3.使用animate.css实现动画官网:
2021-03-31 21:16:51
71
原创 过滤器
过滤器1.定义对部分数据进行特殊处理,显示在视图中2.使用全局过滤器 // 全局过滤器 /** * 参数一:过滤器的名称 * 参数二:回调函数,接收一个系统自动注入的参数:e(形参) * 形参e接收的是要过滤的对象 * 过滤器必有return */ Vue.filter('全局过滤器名称',(e)=>{ return 操作
2021-03-31 21:16:20
67
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人