前端知识
关注
分享
扫一扫
文章平均质量分 65
前端
长不大的大灰狼
这个作者很懒，什么都没留下…
展开
-
VUE-插槽slot
插槽的分类以及基本使用转载 2022-06-12 09:39:46 · 364 阅读 · 1 评论 -
node-sass sass-loader报错问题处理
node-sass、sass-loader报错处理原创 2022-06-02 10:40:03 · 1738 阅读 · 0 评论 -
Vue前端项目自适应布局
Vue前端项目自适应布局一、单位尺寸二、基于rem实现自适应布局一、单位尺寸px%vw、vh: 窗口em: 针对父元素的font-sizerem：“root em”的缩写，是一个相对长度单位；rem单位作用于非根元素时，相对于根元素（html）字体大小，rem单位作用于根元素字体大小时，相对于其出初始字体大小。说明：谷歌浏览器，字体的默认大小是16px;如果父元素item1的font-size=50px，那么子元素item2的1em=50px。如果html的顶层font-size为原创 2022-05-30 21:38:37 · 7095 阅读 · 1 评论 -
VUE：防止按钮重复点击触发接口
VUE：防止按钮重复点击触发接口在el-button中添加disabled属性，进行动态控制<el-button type="primary" @click="handleSave" :disabled="disabled">保存</el-button>是在点击按钮后禁用两秒，两秒之后，按钮恢复启用状态 // 调用事件动态控制disabled属性 handleSave() { this.disabled = true; let p原创 2022-05-21 12:19:22 · 691 阅读 · 0 评论 -
elementUI el-tree remove方法删除节点失效的解决方案
elementUI el-tree remove节点失效的解决方案 <el-tree :data="data" show-checkbox node-key="id" default-expand-all :expand-on-click-node="false"> <span class="custom-tree-node" slot-scope="{ node, data }"> &l原创 2022-05-21 12:13:10 · 4387 阅读 · 0 评论 -
Element UI table 顺序拖动
Element UI table 顺序拖动使用Sortable.js插件。对element-ui中的el-table进行拖拽行排序。new Sortable(example1, { animation: 150, ghostClass: 'blue-background-class'});官网：[1] Sortable.js官网配置项说明等[2] Sortable更多使用示例一、基本使用1、安装npm install sortablejs --save2、引用im原创 2022-04-23 10:01:24 · 5042 阅读 · 0 评论 -
div、Flex、element-ui-layout页面布局
div页面布局一、页面布局标签属性二、定位属性三、盒子模型一、页面布局标签属性1、标签无意义块状标签<div></div无意义行内元素标签<span></span>段落标签<p></p>无序列表<ul></ul>列表项<li></li>超链接标签<a></a>图片标签<img/>斜体标签<i></i>粗体标签<原创 2022-04-15 21:25:03 · 6285 阅读 · 0 评论 -
VUE this.$set方法
VUE this.$set方法一、使用场景一、使用场景当给对象加了一个属性时，在控制台能打印出来，但是却没有更新到视图上，这个时候就需要用到this.$set（）方法。this.$set（）：向响应式对象中添加一个属性，并确保这个新属性同样是响应式的，且触发视图更新。this.$set( target, key, value )target：要更改的数据源(可以是对象或者数组)key：要更改的具体数据value ：重新赋的值说明：target为数组时，key一般指索引。target原创 2022-04-06 21:06:33 · 1522 阅读 · 0 评论 -
Element UI tree 递归删除、选中节点生成树
element UI tree 递归删除树节点演示：代码： deletedId(data, ids) { for (var m = 0, n = data.length; m < n; m++) { for (var i = 0, j = ids.length; i <j; i++) { if (data[m] && data[m].id === ids[i]) { data.splice(m,原创 2022-04-06 20:52:55 · 2055 阅读 · 1 评论 -
Element UI table 实现直接编辑、上下移动
Element UI table 直接编辑演示：代码示例：<!DOCTYPE html><html ><body> <div id="app"> <el-row> <el-col span="24"> <el-table size="mini" :data="master_user.data" border style="width: 10原创 2022-04-06 20:43:31 · 1678 阅读 · 0 评论 -
ES6语法
ES6语法1、let命令2、块级作用域1、let命令（1）基本用法let所声明的变量，只在let命令所在的代码块内有效。{ let a = 10; var b = 1;}a // ReferenceError: a is not defined.b // 1for循环很合适使用let命令，计数器i只在for循环体内有效，在循环体外引用就会报错。for (let i = 0; i < 10; i++) { // ...}console.log(i);// Refer原创 2022-04-04 16:48:30 · 1399 阅读 · 0 评论 -
Element UI 动态表单
Element UI 动态表单一、基本使用一、基本使用首先存在一排固定必填的姓名与手机号，点击增加后会新增一行，点击每行后面的删除图标则会删除该行。<el-form ref="form" :model="form" label-width="80px"> <!-- 固定项目 --> <el-form-item label="姓名" prop="name"> <el-input v-model="fo转载 2022-03-30 20:32:19 · 8779 阅读 · 8 评论 -
Element-UI 树形穿梭组件
Element-UI 树形穿梭组件一、基本使用二、参数设置一、基本使用npm install el-tree-transfer --save<template> <div> // 使用树形穿梭框组件 <tree-transfer :title="title" :from_data='fromData' :to_data='toData' :defaultProps="{label:'label'}" :mo转载 2022-03-30 20:15:08 · 1773 阅读 · 1 评论 -
跨域问题精选
跨域问题精选一、跨域问题概述二、解决跨域问题1、使用代理服务器2、CORS——跨域资源共享一、跨域问题概述同源： 两个URL的协议、域名和端口完全相同。浏览器的同源策略： 从一个域上加载的脚本不允许访问另外一个域的文档属性 ，是浏览器上为安全性考虑实施的非常重要的安全策略。比如一个恶意网站的页面通过iframe嵌入了银行的登录页面（二者不同源），如果没有同源限制，恶意网页上的javascript脚本就可以在用户登录银行的时候获取用户名和密码。在浏览器中，<script>、<img转载 2022-03-21 21:58:53 · 184 阅读 · 0 评论 -
Vue .sync修饰符、@click.stop与@click.prevent
Vue .sync修饰符一、.sync修饰符二、@click.stop与@click.prevent一、.sync修饰符<comp :foo.sync="bar"></comp>等价于<comp :foo="bar" @update:foo="val => bar = val"></comp>当子组件需要更新 foo 的值时，需要显式地触发一个更新事件：this.$emit('update:foo', newValue)示例：<原创 2022-03-08 21:22:16 · 1337 阅读 · 0 评论 -
VUE: 将Json数据转换为Excel文件
VUE: 将Json数据转换为Excel文件使用原生JS通过将json遍历进行字符串拼接，将字符串输出到csv文件。<script> function tableToExcel(){ //要导出的json数据 const jsonData = [ { name:'路人甲', phone:'123456789', email:'000@123456.com'原创 2022-02-24 22:01:47 · 1234 阅读 · 1 评论 -
VUE: Scope模式下，修改Element ui样式
VUE: Scope模式下，修改Element ui样式当一个style标签中有scoped属性时，它的CSS样式就只能作用于当前的组件。通过该属性，可以使得组件之间的样式不相互干扰。<style scoped> </style>但是当需要修改第三方库element ui的样式时，需要使用样式穿透才可以复写样式。深度选择器::v-deep在vue3.0及后使用，在不影响全局的情况下可以直接穿透scoped。::v-deep .el-input { width:原创 2022-02-17 20:08:29 · 1358 阅读 · 0 评论 -
Vue: computed和watch
Vue: computed和watch一、监听属性watch二、计算属性computed一、监听属性watch不支持缓存，监听的数据变，就会触发；支持异步；监听的函数接收两个参数，第一个参数是最新的值；第二个参数是输入之前的值；监听数据必须是data中声明过或者父组件传递过来的props中的数据<div> <p>FullName: {{fullName}}</p> <p>FirstName: <input type="text"原创 2022-02-07 20:50:41 · 296 阅读 · 0 评论 -
Vue提供的三种调试方式
Vue提供的三种调试方式一、在 VS Code 中配置调试二、debugger语句三、Vue Devtools一、在 VS Code 中配置调试使用 Vue CLI 2搭建项目时：更新 config/index.js 内的 devtool property：devtool: 'source-map',点击在 Activity Bar 里的 Debugger 图标来到 Debug 视图：选择 Chrome/Firefox：Launch 环境。将 launch.json 的内容替换为：{原创 2022-01-12 22:02:56 · 2749 阅读 · 0 评论 -
Vue项目中引入阿里icon图标
Vue项目中引入阿里icon图标一、创建Svglcon组件二、创建icons文件夹三、main.js中引入四、配置五、使用iconfont——国内功能很强大且图标内容很丰富的矢量图标库,提供矢量图标下载、在线存储、格式转换等功能。链接：iconfont官方地址一、创建Svglcon组件<template> <svg :class="svgClass" aria-hidden="true"> <use :xlink:href="iconName"><原创 2022-01-12 20:05:23 · 2027 阅读 · 1 评论 -
Axios、Promise、async、await、nextTick
Axios、Promise、async、await、nextTick一、Axios1、基本使用2、axios API3、请求方法的别名4、并发5、创建实例6、实例方法7、在Vue项目中进行全局配置二、ES6 Promise 对象三、async和await四、nextTick一、AxiosAxios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中。1、基本使用GET请求：// 为给定 ID 的 user 创建请求axios.get('/user?ID=12345原创 2022-01-09 13:38:32 · 1508 阅读 · 0 评论 -
搭建Vue项目
搭建Vue项目一、开发环境二、脚手架工具Vue-Cli三、安装vuex、axios、elemnet-ui、sass一、开发环境1、安装VScode下载地址：https://code.visualstudio.com/（1）安装中文插件Chinese (Simplified) Language Pack for Visual Studio Code（2）其它插件ESLint、Live Server、Node.js Modules Intellisense、Vetur、VueHelper注意：原创 2022-01-09 11:36:37 · 247 阅读 · 0 评论 -
Vue Router使用要点简介
Vue Router使用要点简介一、Vue Router的基本使用二、Vue Router的基础进阶1、动态路由匹配2、捕获所有路由或 404 Not found 路由3、命名路由4、 命名视图5、重定向6、别名7、路由组件传参8、HTML5 History模式一、Vue Router的基本使用1、安装vue-router插件npm install vue-router --save链接：Vue Router文档2、创建路由实例import Vue from 'vue'import Vue原创 2022-01-09 10:51:24 · 479 阅读 · 0 评论 -
VUE——组件通信
Vue——组件通信方式一、ref二、`$`parent/`$`children三、props四、插槽slot五、自定义事件event六、provide/inject七、自定义dispatch和broadcast方法八、找到任意组件实例九、VUEX组件间的通信一般有以下几种形式：一、refref: 给元素或组件注册引用信息用ref访问组件实例：//子组件component-aexport default{ data(){ return{ title: 'hello ref'原创 2022-01-03 13:03:43 · 550 阅读 · 0 评论 -
前端知识：jQuery的用法
jQueryⅠ jquery的加载使用jquery需要先引入jquery库：<script type="text/javascript" src="js/jquery-1.12.2.js"></script>写js代码需要，另开一个script,不可以在引入标签里面写。将获取元素的语句写到页面头部，会因为元素还没有加载而出错，jquery提供了ready方法解决这个问题，它的速度比原生的 window.onload 更快。1）ready的完整写法：<script原创 2020-05-19 12:37:16 · 456 阅读 · 0 评论 -
前端知识：原生JavaScript用法
原生JavaScript用法Ⅰ JavaScript嵌入页面的方式(1) 行间事件（主要用于事件）<input type="button" name="" onclick="alert('ok！');">(2) 页面script标签嵌入<script type="text/javascript"> alert('ok！');</script>(3) 外部引入（开发时用）<script type="text/javascri原创 2020-05-19 10:07:59 · 1229 阅读 · 0 评论 -
前端知识：ajax
ajaxajax技术的目的是让javascript发送http请求（实现局部刷新或无刷新的效果），与后台通信，获取数据和信息。ajax技术的原理是实例化xmlHttpRequest对象，使用此对象与后台通信。ajax通信的过程不会影响后续javascript的执行，从而实现异步。不刷新页面更新网页在页面加载后从服务器请求数据在页面加载后从服务器接收数据在后台向服务器发送数据1 同步和异步现实生活中，同步指的是同时做几件事情，异步指的是做完一件事后再做另外一件事，程序中的同步和异步是把现实生原创 2020-05-14 12:25:25 · 191 阅读 · 0 评论 -
前端知识：Javascript 和jquery
1 JavaScriptJavaScript是运行在浏览器端的脚本语言，JavaScript主要解决的是前端与用户交互的问题，包括使用交互与数据交互。 JavaScript是浏览器解释执行的，前端脚本语言还有JScript（微软，IE独有），ActionScript( Adobe公司，需要插件)等。前端三大块HTML：页面结构CSS：页面表现：元素大小、颜色、位置、隐藏或显示、部分动画效果JavaScript：页面行为：部分动画效果、页面与用户的交互、页面功能(1) JavaScript嵌入原创 2020-05-14 12:21:49 · 283 阅读 · 0 评论 -
前端知识：CSS（层叠样式表）简要介绍
CSS层叠样式表(Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。html只负责文档的结构和内容，表现形式完全交给CSS。1 css页面引入方法(1) 外联样式：通过link标签，链接到外部样式表到页面中。<link rel="stylesheet" type="text/css" href="css原创 2020-05-14 12:15:11 · 1302 阅读 · 0 评论 -
前端知识：HTML
HTMLHTML称为超文本标记语言，是一种标识性的语言。它包括一系列标签．通过这些标签可以将网络上的文档格式统一，使分散的Internet资源连接为一个逻辑整体。1 组成格式<html> <head> 这里是文档的头部... ... ... </head> <body> 这里是文档的主体... ... </body></html><html></html>称为根标签，所有的网页标签原创 2020-05-14 12:12:12 · 409 阅读 · 0 评论