![](https://img-blog.csdnimg.cn/20201014180756757.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
前端js
文章平均质量分 59
laufing
944582529@qq.com 邮箱,用于交流学习
展开
-
React框架----路由管理
react的路由管理原创 2023-04-22 17:02:14 · 493 阅读 · 0 评论 -
前端框架----taro4资源引入
import资源引入资源引入引入函数引入图片资源引入css样式条件渲染数组的遍历组件组合事件资源引入引入函数import 属于ES6语法如下目录:pages/index/index.tsx在index.tsx中引入js资源import { myFunc } from '../../test'pages同级目录下创建test.js:export function myFunc(){ console.log("my func");}export function test(){}//原创 2021-10-13 16:16:23 · 340 阅读 · 1 评论 -
前端框架----taro3 路由
路由配置路由配置路由在app.tsx入口文件的主组件中,//pages中配置路由,第一个为首页config: Config = { pages: [ 'pages/index/index', 'pages/test/test.tsx' ],Taro.navigateTo(Object) 跳转,有历史记录Taro.redirectTo(Object) 重定向,无历史记录Taro.switchTab(Object)pages/test/test.tsx:原创 2021-10-12 20:37:58 · 776 阅读 · 0 评论 -
前端框架----taro2
这里写目录标题组件组件生命周期定义类组件组件可以单标签,闭合也可以双标签,闭合组件生命周期componentWillMount(){ console.log("组件将要挂载,执行")}render(){ return ( <Component>xxx<Component/> )}componentDidMount () { console.log("组件完成挂载,执行")}componentDidShow () { console.log("组原创 2021-10-12 20:07:29 · 392 阅读 · 0 评论 -
前端技术----taro框架
taro框架优势支持的生态应用先修知识taro的安装运行微信小程序myApp目录应用说明遵循React语法规范的、多端开发的解决方案。开发一套代码------>taro编译工具------>多端运行的代码优势一套代码,多个终端运行的框架遵守React语法规范,可以使用jsx语法开发小程序应用组件化编码,支持TypeScript语言开发开发流程自动化。支持的生态应用微信小程序百度小程序支付宝小程序h5、reactNative等先修知识html/css/jsm原创 2021-10-12 18:40:10 · 1256 阅读 · 0 评论 -
js的事件
一般事件页面事件表单事件其他事件onbeforecopy 当页面当前的被选择内容将要复制到浏览者系统的剪贴板前触发此事件onbeforecut 当页面中的一部分或者全部的内容将被剪贴,并移动到浏览者的系统剪贴板时触发此事件onbeforeeditfocus 当前元素将要进入编辑状态onbeforepaste 内容将要从浏览者的系统剪贴板粘贴到页面时onbeforeupdate 当浏览者粘贴系统剪贴板中的内容时触发oncontextmenu 当按下鼠标右键出现菜单时或者通过键盘的按键原创 2021-10-07 12:35:21 · 136 阅读 · 0 评论 -
js框架----react.js 11 组件化编码流程
组件化编码流程案例流程界面—拆分组件实现静态组件,即静态页面实现动态组件,动态显示数据、事件交互案例待办事件列表注意事项:组件划分,Header、List/Item、Footer兄弟组件之间无法传递数据,目前不行 上一篇:js框架----react.js 10 React脚手架...原创 2021-10-07 09:56:39 · 110 阅读 · 0 评论 -
webpack版本太高
卸载后重新安装卸载重新安装卸载#卸载全局npm uninstall -g webpack-clinpm uninstall -g webpack#卸载局部npm uninstall webpack-clinpm uninstall webpack重新安装npm install -g --save-dev webpack@version#不指定版本,默认安装最新npm install -g --save-dev webpack-cli#查看webpack -v#若命令不存在,原创 2021-10-06 15:23:10 · 749 阅读 · 0 评论 -
nodejs包管理器----npm
npm的安装win10其他系统下载npmwin10选择windows 64版node(javascript运行环境)双击执行,下一步。。。。。这里的安装目录选择D:\nodejs,安装完成后 搜索cmd,打开终端窗口node -vnpm -v报错解决在nodejs安装目录下创建两个文件夹node_global、node_cache找到C:\用户\username.npmrc 文件,记事本打开编辑内容如下:prefix=D:\nodejs\node_global原创 2021-10-06 13:35:18 · 153 阅读 · 0 评论 -
js框架----react.js 10 React脚手架
脚手架定义环境配置定义react脚手架:帮助程序员,快速搭建一个基于React库的模板项目包含所有的配置、依赖,可以运行简单的效果创建脚手架的库create-react-app项目的整体技术架构:react + webpack + es6 + eslint脚手架开发的项目,特点:模块化、组件化、工程化环境配置打开终端预安装npm,了解webpacknpm install -g create-react-app创建项目进入到指定目录create-react-app p原创 2021-10-06 12:22:56 · 213 阅读 · 0 评论 -
js框架----react.js 9 React diffing算法
减少与真实DOM的交互对比VDOM使用案例面试题react/vue中的key有什么用?遍历列表时,为什么key不能为索引值?key值如何选择?练习对比VDOM每次生成的VDOM,会与之前的对比,最小对比单位为标签,已经存在的标签,不会改变!!使用案例<script type="text/babel"> class TimeComponent extends React.Component{ state = { da原创 2021-10-06 11:44:57 · 83 阅读 · 0 评论 -
js框架----react.js 8 React新版生命周期
新版生命周期16 vs 17getDerivedStateFromPropsgetSnapshotBeforeUpdatereact文档-CDN链接下载,访问地址,Ctrl+s保存16 vs 17废弃三个回调函数componentWillMountcomponentWillUpdatecomponentWillReceiveProps新版本加UNSAFE_前缀,并非指安全性新版增加两个getDerivedStateFromPropsgetSnapshotBeforeUpdate很少原创 2021-10-05 19:36:52 · 100 阅读 · 0 评论 -
js框架----react.js 7 React生命周期
组件的生命周期生命周期常用的钩子函数初始化阶段案例生命周期组件从创建------->到消亡,所经历的阶段,中间有特定的一些函数(生命周期回调函数/即钩子函数),在这些函数中去执行一些特定的操作。常用的钩子函数初始化阶段constructor 构造器componentWillMount;组件将要挂在时,由React调用render 第一次渲染虚拟DOM; 或者state改变;调用componentDidMount; 组件完成挂在,即显示时componentWillUnmount;组件原创 2021-10-05 18:38:11 · 99 阅读 · 0 评论 -
js框架----react.js 6 React事件
React 事件不同于原生的DOM事件案例受控组件非受控组件不同于原生的DOM事件自己封装的事件,提高兼容性委托于组件外层元素,提高效率onclick----->onClick,事件发生时,传入事件对象event; event.target触发事件的元素。通过event.target获取节点对象,避免过度使用refs案例表单提交数据受控组件用数据时,再去取<!DOCTYPE html><html lang="en"><head> &原创 2021-10-03 17:05:53 · 148 阅读 · 0 评论 -
js框架----react.js 5 类组件的实例属性refs
类组件 实例 属性refs实现功能react实现代码通过refs属性获取节点字符串形式回调函数形式类属性方式React.createRef实现功能输入框1中,输入内容,点击后面的按钮,弹框显示输入的值输入框2中,输入焦点则弹框显示输入的值react实现代码此处不使用refs<!-- 创建虚拟DOM --><script type="text/babel"> // 创建类组件,在类组件中返回虚拟DOM class Person extends Rea原创 2021-09-20 21:32:21 · 211 阅读 · 0 评论 -
js框架----react.js 4 类组件的实例属性props
类组件的实例属性propsprops的使用批量传入数据定义输入props的数据格式props简写构造器函数式组件,使用propsprops的使用<!-- 创建虚拟DOM --><script type="text/babel"> // 创建类组件 class Person extends React.Component{ render(){ const {name,age,sex} = this.prop原创 2021-09-20 18:38:10 · 355 阅读 · 0 评论 -
js框架----react.js 3 类组件的实例属性state
类组件实例的属性state添加事件,动态修改state原生js事件绑定更改this的指向点击设置state完整代码state的简写方式state属性总结propsrefsstate初始化状态<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge">原创 2021-09-20 15:41:22 · 207 阅读 · 0 评论 -
js框架----react.js 2 模块、组件
模块、组件概念组件化编程安装react开发者工具函数式 组件类 组件类知识的回顾类组件的定义复杂组件、简单组件概念模块:一个大的js文件,拆分成多个小的js文件,每个小文件完成一个功能。作用:简化js编写、复用js,提高js的运行效率应用的js以模块化的方式来编写,即模块化组件:完成局部功能的代码和资源的集合(html/css/js/images…)作用:复用组件、提高开发效率一个应用以多个组件来实现,就是组件化组件化编程安装react开发者工具点击右上角—更多工具----扩展程序-原创 2021-09-20 12:20:19 · 162 阅读 · 0 评论 -
js框架----react.js 1
具体使用案例核心库下载导入核心库使用案例三级目录核心库下载官网点击‘GitHub’–>整体包的下载历史版本浏览器开发下载如下:<script src="https://unpkg.com/react@16/umd/react.development.js"></script><script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>原创 2021-09-19 18:11:37 · 128 阅读 · 0 评论 -
js框架----react.js
认识reactreact.js用户构建用户界面的js框架原创 2021-09-09 20:52:08 · 134 阅读 · 0 评论 -
Canvas----与Image的转换
Canvas画布与ImageImage放入画布Canvas 转为ImageImage放入画布// Converts image to canvas; returns new canvas elementfunction imageToCanvas(image) { //image is img element object //create canvas object var canvas = document.createElement("canvas"); canvas.width = i原创 2021-08-22 11:19:47 · 700 阅读 · 0 评论 -
css----伪元素
::before::after均为创建伪元素的方法::before通过 content 属性来为一个元素添加修饰性的内容,行内元素如:<style> a::before{ /*超链接前面添加修饰, 修饰内容属于超链接的一部分*/ content: "♥"; }</style> <a href="#" target="_blank" rel="noopener noreferrer">超链接</a>语法:/* CSS原创 2021-07-02 17:21:13 · 135 阅读 · 0 评论 -
html之 object 标签
可视化技术1django + pyecharts + html后端渲染图形页面,交付前端可视化技术2django + echarts + html后端返回json数据,前端js动态生成图片原创 2021-06-02 18:28:06 · 347 阅读 · 0 评论 -
滚动文本标签marquee
marquee属性,direction,文本滚动方向up/down/right/leftbehavior,滚动方式scroll 循环滚动slide 滑到一端alternate来回滚动scrolldelay 滚动延时 “300”scrollmount 滚动的步长“10”loop 滚动多少次停止js实现滚动效果待更新...原创 2021-05-20 20:53:00 · 64 阅读 · 0 评论 -
css问题点
hover无效果鼠标放上去,无效果变化解决:首先hover是可以对任何的元素设置效果,但必须是最内层最内层最内层的元素:hover{ xxx}如下案例:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="vi原创 2021-05-17 21:15:33 · 67 阅读 · 0 评论 -
前端技术----javascript 3
方式一window.onload<script> window.onload = function(){ $("#login-button").click(doLogin) //页面加载完成 //绑定点击事件 }</script>方式二$(document).ready(function(){ $("#login-button").click(doLogin);})原创 2021-05-16 21:26:38 · 123 阅读 · 0 评论 -
jquery的操作
jquery一个javascript库w3school使用前先导入:<script src="/static/js/jquery.min.js" type="text/javascript"></script>操作元素属性<script> var v = $("#user").val() //获取value 值 var attr = $(".pw").attr("name")//获取name属性的值 var csrfToken = $("inpu原创 2021-05-15 22:20:33 · 90 阅读 · 0 评论 -
判断复选框是否选中
方式一var isChecked = $("#remember").prop("checked")console.log(isChecked)// false/true方式二var isChecked = $("#remember").is("checked")//返回true or false设置选框的大小<input type="checkbox" id="remember" style="zoom:150%;">记住我...原创 2021-05-15 16:20:26 · 200 阅读 · 0 评论 -
css问题点
table 样式问题设置tr/td 样式div container fixed后是否影响?原创 2021-05-14 18:47:07 · 75 阅读 · 0 评论 -
前端技术----javascript 2
方式一元素属性的方式<input type="button" value="登录" id="user-login-button" onclick="doLogin()">方式二jquery动态添加window.onload = function(){ $("#user-login-button").click(doLogin); //$("#user-login-button").on("click",doLogin);}...原创 2021-05-14 16:34:11 · 154 阅读 · 0 评论 -
web前后端技术栈
web技术栈前端python web后端数据分析 + 可视化AIpython爬虫前端htmlcssjavascriptjquery javascript 库vue,构建用户界面js框架vue 3jquery UInode.js 运行在服务端的jsAJAX 异步请求fetchecharts js开源可视化库python web后端djangomysql dbmongodbredis数据分析 + 可视化numpypandasmatplotlibpyechartsgg原创 2021-05-12 21:23:06 · 663 阅读 · 0 评论 -
前端技术----javascript 1
Number("5")//转为数值var a = 3.14;//var 没有块级的作用 let是本块内使用 const常量a.toFixed()//转为整数字符串原创 2021-05-11 17:50:34 · 245 阅读 · 0 评论 -
js---DOM
DOM获取页面元素操作元素对象的属性获取页面元素<script> var e = document.getElementById("id1"); var e1 = document.getElementsByClassName("class1")[0]; var e2 = document.getElementsByName("input")[0]; var phone = e.getAttribute("value");//获取的表单的默认值,新输入的值获取不到 </s原创 2021-05-05 12:15:16 · 57 阅读 · 0 评论 -
常用的js代码
获取时间戳//获取时间戳//并查看 返回类型typeof new Date().getTime()//number//数值-->字符串""+ 123//"123"时间戳 + salt"" + (new Date).getTime() + parseInt(Math.random()*10,10)//时间戳-->转为字符串-->连接一个十进制的随机数ajax异步请求<script src="/static/js/jquery.min.js" .原创 2021-04-26 23:12:40 · 90 阅读 · 0 评论 -
js实现定时器
倒计时按钮定时任务案例定时任务window.setTimeout(func,1000) 一秒后执行该func函数,无法传参需求,需要传参怎么办? 1.定义一个无名函数,在无名函数内部执行 func,可传参 function(){ func(params);} 2.使用闭包window.setInterval(func,1000)周期性的执行func,即每一秒执行一次func案例<!DOCTYPE html><html lang="en"><原创 2021-04-23 10:39:12 · 461 阅读 · 0 评论 -
html页面
页面背景设置方式1方式二方式1#bg{ background-image:url(''); width:100%; height:100%;}方式二.bg img{ position: fixed; top:0; width: 100%; height:100%; opacity: 0.6; z-index: -100;}原创 2021-04-20 00:28:16 · 1152 阅读 · 0 评论 -
前端学习网站
菜鸟教程htmlcss3javascriptjqueryvue3jquery easyUI…原创 2021-04-06 12:23:29 · 86 阅读 · 0 评论 -
前端问题汇总
html注释<!-- 注释的内容 -->css注释/* 内容 */js注释// 单行注释/* 多行注释 */原创 2021-04-04 18:10:04 · 156 阅读 · 0 评论 -
前端页面 显示地图
百度地图百度地图官方注册用户>控制台>认证用户>创建项目>获取ak密钥加载js,使用<head><script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=U3Qu8wyCLL427hlW23kwUQcsapPYkMkW"></script></head><body> <div id="contai原创 2021-03-19 17:52:22 · 1140 阅读 · 0 评论 -
前端js解析地址栏url
使用window.location对象解析地址栏地址1.获取地址栏的地址字符串window.location.href2.地址使用的协议window.location.protocol3.地址中的主机window.location.hostwindow.location.hostname4.地址中的访问路径,不包含?查询字符串window.location.pathname5.地址中的查询字符串window.location.search获取以?开头的内容,再对子串分割也可以对整体原创 2021-02-17 20:25:10 · 1144 阅读 · 0 评论