前端
关注
分享
扫一扫
文章平均质量分 67
前端技术和框架
crystal---
心之所向，素履以往。
生如逆旅，一苇以航。
展开
-
react项目中遇到的小问题：
目录1、npm start后一直处于Starting the development server...状态2、引入less-loader文件后报错：1、npm start后一直处于Starting the development server...状态原因：杀毒软件（电脑管家等）拦截了脚本解决方法：将C:\WINDOws\System32\WindowsPowerShel\v1.0\powershell.exe添加到电脑管家的信任区中。再重新npm start，即可。2、引入l原创 2022-04-10 14:11:19 · 2555 阅读 · 0 评论 -
前端小知识
前端小知识原创 2022-03-26 15:59:32 · 837 阅读 · 0 评论 -
vue【获取用户列表并实现分页】
<template> <div> <!--面包屑导航--> <el-breadcrumb separator-class="el-icon-arrow-right"> <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item> <el-breadcrumb-item>活动管理</el-breadcrumb-ite.原创 2020-06-23 19:06:19 · 1030 阅读 · 0 评论 -
vue【退出登录功能】
原理：基于token实现退出登录功能，志需要销毁本地token即可。这样的话，后续请求就不会携带token，所以需要重新登录生成新的token才可以访问页面。<template> <div> <el-button type="info" @click="loginout">退出</el-button> </div></template><script> export default{ meth.原创 2020-06-21 14:03:21 · 3483 阅读 · 0 评论 -
vue【路由导航守卫控制访问主页前先登录】
在login.vue中的methods中login()方法中，如果登录成功，将token 保存到客户端的sessionStoarge中，因为该token只在当前网页打开期间有效，所以将token存储在sessionStoarge中。 //发送post请求const {data:res} = await this.$http.post("login",this.loginForm);//将token保存到sessionStoragewindow.sessionStorage.setItem("tok原创 2020-06-21 13:53:14 · 740 阅读 · 0 评论 -
vue【实现表单数据验证】
为el-form表单添加：rules 在data中定义规则 将定义的规则绑定在el-form-item代码如下：<!--登录表单区域--> <el-form :model="loginForm" label-width="0px" class="login_form" :rules="loginFormRules"> <!--用户名--> <el-form-item prop="username"> <原创 2020-06-20 15:59:31 · 1745 阅读 · 0 评论 -
vue学习笔记【九、组件通信】
props参数传递：适合父组件传值给子组件的情况子组件：<template> <div id="app"> <div> <h4>姓名：{{name}}</h4> <h4>年龄：{{age}}</h4> <p>{{person}}</p> <!--子组件中点击按钮，调用父组件中的方法--> <button @click="logPe原创 2020-06-09 17:25:38 · 133 阅读 · 0 评论 -
vue学习笔记【八、过渡动画】
<template> <div id="app"> <button @click="show=!show">切换</button> <transition name="fade"> <div class="box" v-if="show">lk</div> </transition> </div></template><script> expor.原创 2020-06-09 12:30:31 · 158 阅读 · 0 评论 -
vue学习笔记【七、实现用户信息的删除与添加】
<template> <div id="app"> <fieldset> <div> <span>姓名：</span> <!--数据双向绑定--> <input type="text" placeholder="姓名" v-model="newPerson.name"/> </div> <div> <span>年龄.原创 2020-06-08 16:34:21 · 985 阅读 · 0 评论 -
vue学习笔记【六、v-for遍历】
遍历数据并显示：<template> <div> <h3>遍历数组</h3> <ul> <li v-for="(person,index) in persons"> {{index}}==: 姓名：{{person.name}},年龄：{{person.age}},姓别：{{person.sex}} </li> </ul> <h3>遍历对象</原创 2020-06-07 17:47:26 · 194 阅读 · 0 评论 -
vue学习笔记【五、v-if与v-show】
1、v-if：会对DOM标签进行真实的添加与删除。2、v-show：会先创建所有标签，然后通过css进行标签的显示与隐藏。所以v-show适用于需要频繁切换的情况。如图所示：<template> <div> <div v-if="flag">上课</div> <div v-else="">不上课</div> <p></p> <!--<button @click="f原创 2020-06-07 17:15:20 · 190 阅读 · 0 评论 -
vue学习笔记【四、class与style的使用】
1、class的使用：样式类可以是字符串、json对象、数组。一般情况下使用数组。2、style的使用：使用style可以设置修改样式。具体使用方法如代码所示。<template> <div> <h3>class的使用</h3> <div :class="first">样式类可以是字符串</div> <div :class="{one:true, two:true}">样式类可以是对.原创 2020-06-07 16:50:18 · 269 阅读 · 0 评论 -
vue学习笔记【三、计算属性与监听】
1、set、get方法实现计算属性与普通属性之间的数据双向绑定<template> <div> <input type="text" placeholder="姓" v-model="first"/><p></p> <input type="text" placeholder="名" v-model="last"/> <p>=========================================原创 2020-06-06 21:21:50 · 136 阅读 · 0 评论 -
vue学习笔记【二、数据绑定、事件监听】
1、双括号表达式<h1>双括号表达式</h1><div>{{msg.toUpperCase()}}</div>2、数据绑定：<!--数据绑定--><h3>强制数据绑定</h3><a v-bind:href="site">baidu</a><!--简写--><a :href="site">baidu</a>3、事件监听：需要在metho.原创 2020-06-06 15:16:14 · 156 阅读 · 0 评论 -
vue学习笔记【一、理解MVVM】
1、理解MVVM：以.vue文件为例一个.vue文件就是一个组件，一个组件就是一个小的MVVM。<template> <div class="hello"> <h1>{{msg}}</h1> <label><input type="text" v-model="msg" /></label> </div></template><script>exp原创 2020-06-06 14:20:15 · 149 阅读 · 0 评论 -
onresize
//根据尺寸改变屏幕颜色 window.addEventListener('load',function(){ console.log(window.innerWidth); window.addEventListener('resize',function(){ if (window.innerWidth &g...原创 2020-02-03 14:01:47 · 250 阅读 · 0 评论 -
获取屏幕可视区域封装
client:function(){ if (window.innerWidth !== null) {//最高浏览器 return{ "width":window.innerWidth, "height":window.innerHeight } }else if (document.compatMode ==="CSS1Compat") {//W3C...原创 2020-02-03 13:49:41 · 106 阅读 · 0 评论 -
offset、scroll、client
1、offsetWidth与offsetHeight：boder+padding+内容的宽度和高度2、clientWidth与clientHeight：padding+内容的宽度和高度3、scrollWidth与scrollHeight：内容滚动的宽度和高度4、offsetLeft与offsetTop：当前元素距离由定位的父盒子左边（上边）的距离5、clientLeft与cl...原创 2020-02-03 13:30:09 · 91 阅读 · 0 评论 -
JS基础--数据在内存中的表现
1、基本数据类型在内存中的存储var str1 = 'aa';var str2 = str1;//在栈中另外开辟一个空间存储str2，并将str1中的内容复制到str2中str1 = 'bb';console.log(str1);//bbconsole.log(str2);//aa2、复杂数据类型在内存中的存储 //在堆区创建对象，在栈区分配空间并指向堆...原创 2020-01-28 16:38:32 · 158 阅读 · 0 评论 -
不使用中间变量，交换两个数值变量的值
var num1 = 6,num2 = 8; //1.使用中间变量 var temp; temp = num1; num1 = num2; num2 = temp; //2.不使用中间变量 num1 = num1+num2; num2 = num1-num2; num1 = num1-num2;...原创 2020-01-18 21:14:43 · 205 阅读 · 0 评论 -
JavaScript三种书写形式
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>index</title></head><body> <!--1、行内JS--> <button oncli...原创 2020-01-18 20:14:15 · 842 阅读 · 0 评论 -
JavaScript的组成
1、ECMAScriptECMA是一个组织，即：欧洲计算机制造联合会 ECMAScript是ECMA指定的脚本语言的标准，规定了脚本语言实现应该包含的基本内容 JavaScript是脚本语言，因此必须遵循ECMAScript标准中规定的基本内容2、BOM（浏览器对象模型）通过BOM可以操作浏览器窗口，比如：弹出框、放大缩小窗口、获取分辨率等3、DOM（文档对象模型）DOM可以...原创 2020-01-18 18:57:16 · 88 阅读 · 0 评论 -
什么是JavaScript
是一种编程语言，属于高级语言，是前端开发的一种脚本语言（解释型语言） 解释型语言：程序执行之前，无需编译就可直接运行，在运行时边解析边执行。如：PHP、Python、JavaScript 编译型语言：程序执行之前，需要一个专门的编译过程，把程序编译成机器语言的文件，只有编译成功了才能运行，比如：exe、jar文件。如：c/c++、Swift、Pascal语言 解释型语言跨平台性好；编译型语言...原创 2020-01-18 18:30:38 · 124 阅读 · 0 评论 -
JS中常用的输出方式
页面弹出框：alert("hello"); 控制台输出： console.log("hello");console.warn("hello");console.error("hello"); 光标定在输入框：prompt("hello"); 用于逻辑判断：confirm("hello");...原创 2018-10-18 20:54:34 · 228 阅读 · 0 评论 -
HTML拖动
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"><原创 2018-08-30 10:02:17 · 224 阅读 · 0 评论