VUE.JS
关注
分享
扫一扫
文章平均质量分 65
bellediao
这个作者很懒，什么都没留下…
展开
专栏收录文章
- 默认排序
- 最新发布
- 最早发布
- 最多阅读
- 最少阅读
-
《前端》使用webpack+vue从零开始打造前端项目(2020最新版)八--todolist功能--bilibili-2021年2月16日
项目准备安装Vetur插件，并做配置、devtool等。组件拆分之目录结构与框架搭建mainheader组件实现1、页面显示2、样式3、原创 2021-02-16 12:05:48 · 190 阅读 · 0 评论 -
《前端》使用webpack+vue从零开始打造前端项目(2020最新版)八--解析ES6工具--bilibili-2021年2月9日
Babel 官网：https://www.babeljs.cn/webpack：https://www.babeljs.cn/setup#installation一、使用Babel安装：npm install --save-dev babel-loader @babel/core配置：{ module: { rules: [ { test: /\.m?js$/, exclude: /node_modules/, u原创 2021-02-09 09:59:56 · 147 阅读 · 0 评论 -
前端》使用webpack+vue从零开始打造前端项目(2020最新版)七--生产环境打包、提取公共代码--bilibili-2021年2月9日
一、原创 2021-02-07 09:39:26 · 332 阅读 · 0 评论 -
《前端》使用webpack+vue从零开始打造前端项目(2020最新版)六--热模块替换HMP、SourceMap--bilibili-2021年2月7日
休息休息原创 2021-01-29 18:36:38 · 180 阅读 · 0 评论 -
《前端》使用webpack+vue从零开始打造前端项目(2020最新版)五--开发环境的配置-devServer--bilibili-2021年1月27日
官网：https://www.webpackjs.com/guides/development/https://www.webpackjs.com/configuration/dev-server/watch mode（不常见）webpack-dev-server（常用）webpack-dev-middleware开发环境配置（一）devServer为我们提供了一个简单的服务器，并能够实时重新加载。1、安装npm install -D webpack-dev-...原创 2021-01-27 19:56:21 · 597 阅读 · 2 评论 -
开发环境配置--2021年1月23日
Watch Modedev-server原创 2021-01-23 16:51:52 · 182 阅读 · 0 评论 -
《前端》使用webpack+vue从零开始打造前端项目(2020最新版)四--插件的使用--bilibili-2021年1月27日
九、插件在某个时间点，自动执行的处理程序（一）html-webpack-plugin：打包结束时，在dist目录下自动生成index.html 文件，并把打包好的js文件引入到html中。1、安装：npm install -Dhtml-webpack-plugin2、配置插件：（1）在webpack.config.js中引入插件（2）在plugins:[],中添加配置内容。再次打包之后，只要npm run build，index.html 就自动打包到dist中。但是自.原创 2021-01-23 10:00:49 · 314 阅读 · 0 评论 -
《前端》使用webpack+vue从零开始打造前端项目(2020最新版)三--css、stylus打包及使用--bilibili--2021-01-22
七、css打包css文件是前端项目不可少的文件，webpack通过css-loader和style-loader来打包css文件。1、安装css-loader和style-loader安装file-loader时，css-loader已经安装好了，可以在package.json中查看。安装style-loader：npm install -D style-loader2、在webpack.config.js中添加规则书写顺序：按照从右到左，从下到上3、创建css文件在sr原创 2021-01-22 22:56:11 · 387 阅读 · 0 评论 -
《前端》使用webpack+vue从零开始打造前端项目(2020最新版)二之file-loader、url-loader----bilibili2021-01-18
五、file-loader 基本使用1、安装：npm install -D file-loader此时：2、接下来需要对webpack进行配置（设置打包规则）3、在src文件夹下，新建assets文件夹，用于存放资源文件。以导入1.png为例：在app.vue中，写入importimgfrom'./assets/images/1/png'怎么实现导入图片的过程的：（从配置文件开始看起）从打包入口main.js 开始，开始打包，就开始加载内容，当加载到a...原创 2021-01-20 21:30:39 · 383 阅读 · 1 评论 -
《前端》使用webpack+vue从零开始打造前端项目(2020最新版)一最基础的小demo学习--bilibili--2021-01-18
bilibili中找到一个讲的很好的webpack+vue教程：https://www.bilibili.com/video/BV157411V7Dh?from=search&seid=13060654339969180489代码见git：一、准备工作1、项目初始化： npm init -y 生成package.json2、安装webpack和webpack-cli npm install -D webpack webpack-cli （...原创 2021-01-18 20:20:22 · 344 阅读 · 0 评论 -
《前端》el-menu导航栏实现方法--2021年1月3日
项目场景和问题描述：之前做的全供应链看板，不同页面是用页签实现的。现在领导要求用导航栏的方式展现。我当时觉得手册有案例应该很简单，但是，把自己????了，做导航栏很简单，但不同页面怎么跳转呢？网上查别人博文都是用router，但是我怎么都不成功。原因分析：后来可利说，我这是在html文件中，不能使用vue-router。等今年我要学会webpack打包项目的那种方式。现在先使用html能支持的方式来实现。两种解决方案：我能实现到的地方-实现不了点击导航栏在右侧出页面内容<body>原创 2021-01-03 07:29:10 · 799 阅读 · 0 评论 -
《前端》webpack踩坑之 npm : 无法将“npm”项识别为 ~~~-用管理员打开vscode
项目场景：问题描述：运行vue项目 提示 npm : 无法将“npm”项识别为 cmdlet、函数、脚本文件或可运行程序的名称。请检查原因分析：解决方案：用管理员打开vscode原创 2020-12-28 20:14:26 · 523 阅读 · 0 评论 -
《前端》vue的el-form-item标签的label展示名称左右对齐
这里写自定义项目场景：问题描述：解决方案：功能快捷键合理的创建标题，有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能，丰富你的文章UML 图表FLowchart流程图导出与导入导出导入项目场景：外协pc端看板问题描述：vue的el-form-item标签的label展示名称左右对齐。vue的el-form-item原创 2020-12-21 10:36:12 · 31712 阅读 · 3 评论 -
《前端》element-ui分页功能各属性讲解
<el-paginationstyle="text-align:center;margin-top:14px;margin-bottom:16px"backgroundlayout="total,sizes,prev,pager,next,jumper"@current-change="changePage1":total="fieldData.pageLength"></el-pagination>elementu...原创 2020-12-20 21:01:07 · 5995 阅读 · 0 评论 -
《前端》bootstraptable中选中一行，获取该行某字段的值
原创 2020-12-14 10:32:45 · 2064 阅读 · 0 评论 -
《前端》Pagination 分页功能-2020-12-10
分页：设置layout，表示需要显示的内容，用逗号分隔，布局元素会依次显示。prev表示上一页，next为下一页，pager表示页码列表，除此以外还提供了jumper和total，size和特殊的布局符号->，->后的元素会靠右显示，jumper表示跳页元素，total表示显示页码总数，size用于设置每页显示的页码数量。https://cloud.tencent.com/developer/section/1489889...原创 2020-12-10 15:26:50 · 1957 阅读 · 0 评论 -
《前端》vue数据绑定学习记录--2020年12月2日
在使用vue做前端开发的时候，数据交互基本是在标签之间使用两个花括号。利用v-for循环数据，使用花括号往里面渲染数据。如：<div v-for="item in list">{{item.name}}</div>但是在标签里面的属性怎么渲染数据呢？<div v-for="item in list" > <p :timestamp="item.time"></p></div>...原创 2020-12-02 11:15:15 · 87 阅读 · 0 评论 -
《前端》vue element-ui 下拉框极其简单的回写方案-2020年11月7日
之前做的一个下拉框，是从element -ui手册上有代码，但是选了选项之后，选型内容不能回写。这有啥用！！找陶海伟帮忙，他写了个好麻烦的方式。转来转去的。。 我看懂了，但是也并没有完全吸收。李可利的一个代码我发现了原来如此简单。。解决方案：效果图：代码：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name.原创 2020-11-07 15:46:43 · 511 阅读 · 0 评论 -
《前端》element-ui 的table组件-点击某一行获取字段的值的方法：cell-click--2020年10月21日
组件 | Element https://element.eleme.cn/#/zh-CN/component/table(3条消息) element cell-click使用方法_weixin_43550562的博客-CSDN博客 https://blog.csdn.net/weixin_43550562/article/details/106824069原创 2020-10-21 15:57:48 · 2861 阅读 · 0 评论 -
《前端》使用element UI中的table的模糊搜索功能，出不来input搜索框
解决：vue版本低，将原本的2.4版本会按成2.6版本就好。代码：原创 2020-10-17 11:11:18 · 686 阅读 · 1 评论 -
《前端》elementUI的栅格布局--2020年10月12日
el-row代表行,里面嵌套el-col，el-row里面有gutter属性，属性为数字，则gutter前面加冒号,gutter属性代表el-col的间隔el-col里面有span属性，span为x，则分成24/x列（每列为x）el-col里必须有div，不然span分割无效例子：<template><div><el-row :gutter="20"> <el-col :span="6"><div class="test"&原创 2020-10-12 08:38:51 · 1882 阅读 · 0 评论 -
《前端》Vue el-date-picker 日期组件的使用-2020-09-28
Vue el-date-picker 日期组件的使用 - 孤单玻璃杯 - 博客园 https://www.cnblogs.com/zhoushuang0426/p/10606863.html原创 2020-10-05 15:56:50 · 708 阅读 · 0 评论 -
《前端》bootstrapTable-Vue使用记录--2020年9月27日
引入文件： <script src="./lib/js/jquery-1.11.0.min.js"></script> <script src="./lib/js/bootstrap-3.3.7.min.js"></script> <script src="./lib/js/bootstrap-table.min.js"></script> <script src="https://unpkg....原创 2020-09-27 20:10:55 · 1591 阅读 · 0 评论 -
《前端》vue实现表格列拖动-2020年9月23日--待处理
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>表格拖动</title> <link rel="stylesheet" href="https://cdn.bootcss.com/iview/3.5.0-rc.1/styles/iview.css"> <script src="js/jquery.min.js">&l...原创 2020-09-23 22:15:11 · 240 阅读 · 0 评论 -
《前端》获取标签上的属性值：getAttribute（）-2020年9月22日
在js里面获取标签的值，我只会通过dom的方式。下面这个方式其实也是js的原生方法，但是避免了id获取的方式，所以，可适用于vue。<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script><body> <div id='app'> <button data-num="100" @click="getData($event)">点我&l转载 2020-09-20 20:31:28 · 1555 阅读 · 0 评论 -
《前端》vue-element UI 步骤条--2020年9月20日--待完善
1、通过点击下一步 按钮：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>vue element 步骤条</title> <script src="原创 2020-09-20 20:25:04 · 524 阅读 · 0 评论 -
《前端》Vue实现关键词【实时搜索高亮显示】-待处理-2020年9月22日
实时搜索实时搜索通过触发input事件和定时器来实现。在每次输入框的值变化的时候都会执行handleQuery方法在handleQuery方法中有一个定时器，通过设置时间来控制搜索的执行，由于输入时input的框中的值总是变化的，所以每次变化都会执行一次handleQuery，我们通过clearTimer方法清除timer定时器，如果两次输入的间隔时间小于你设置的时间间隔（2s）的话第一个定期器将会被清除，同时执行第二个定时器。这样就实现了实施搜多的控制，而不是每次输入的时候就去请求数据。注意：原创 2020-09-16 15:18:16 · 683 阅读 · 0 评论 -
《前端》vue实现tab栏点击高亮效果-2020年9月22日
完整代码：<!DOCTYPE html><html><head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Vu...原创 2020-09-16 15:05:57 · 280 阅读 · 0 评论 -
《前端》vue中使用cookie记住用户上次选择的实例--2020年9月16日-没看
在vue中使用cookie记住用户上次选择的实例(本次例子中为下拉框)_vue.js_脚本之家 https://www.jb51.net/article/195468.htm原创 2020-09-16 14:02:34 · 306 阅读 · 0 评论 -
《前端》Vue--下拉列表--2020年9月16日
<!DOCTYPE html><html><head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Vue下拉菜单</ti.原创 2020-09-16 13:47:48 · 568 阅读 · 0 评论 -
《前端》vue动态新增input框--2020年9月29日
<!DOCTYPE html><html><!-- 思路：1、有一个数组counter,是空的2、在页面上循环遍历这个数组（当然页面上显示的肯定是什么都没有）3、点击按钮，就会添加元素进去 --><head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="v.原创 2020-09-15 18:38:00 · 503 阅读 · 0 评论 -
《前端》自定义的tab样式框--2020年8月5日
想要实现这种功能：demo献上：主要是css可以在用的时候复制上： .tab { display: flex; justify-content: space-between; text-align: center; margin-bottom: 10px; margin-top: 10px; flex-wrap: wrap; .原创 2020-08-04 16:28:31 · 272 阅读 · 0 评论 -
《前端》vue.js全览复习--2020年8月4日
Vue.js复习啦，前段时间学习的很匆忙。现在再看一本书《JavaScript+Vue+React》最后一章就是vue，所以拿来复习。vue基本框架格式 <!--1、 先引入 --> <script src="js/vue.js"></script> <!-- 2、定义一个div 定义一个id --> <div id="app"> <button>{{msg}}</butto原创 2020-08-01 19:49:36 · 257 阅读 · 1 评论 -
《前端》vue滚动条 happy scroll--开发者readme--2020年7月10日
<ahref="https://www.npmjs.com/package/vue-happy-scroll"><imgsrc="https://img.shields.io/npm/dm/vue-happy-scroll.svg"alt="Downloads"></a><ahref="https://www.npmjs.com/package/vue-happy-scroll"><imgsrc="https://img.shiel...原创 2020-07-10 22:54:54 · 668 阅读 · 0 评论 -
《前端》vue滚动条---2020年7月10日
1、介绍一个vue滚动条插件vue-happy-scroll当前版本不支持移动端1.1安装方法1.1.1 cdn引入<!-- 引入css，该链接始终为最新版的资源 --><link rel="stylesheet" href="https://unpkg.com/vue-happy-scroll/docs/happy-scroll.css"><!-- 引入vue --><script src="https://cdn.jsdelivr.ne.原创 2020-07-14 15:56:19 · 218 阅读 · 0 评论 -
《前端》vue小练习合集
1、效果别人代码示例：<!DOCTYPE html><html"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>2020年7月9日</title> <script src="./lib/vue-2.4.0.js"></...原创 2020-07-09 06:55:32 · 1644 阅读 · 0 评论 -
《前端》vue的自我修养（webpack版）--export ，export default 和 import 区别以及用法
1、export，import ，export default是什么?ES6模块主要有两个功能：export 和 importexport ：用于对外输出本模块（一个文件可以理解为一个模块）变量的接口。import ：用于在一个模块中加载另一个含有export接口的模块。也就是说使用export命令定义了模块的对外接口以后，其他JS文件就可以通过import命令加载这个模块（文件）。这几个都是ES6的语法。实例：1、一个a.js文件有如下代码：export var na.转载 2020-07-02 13:01:25 · 406 阅读 · 0 评论 -
《前端》vue学习（六）上--webpack
拿到一个项目先用init管理起来：npm init -y（会产生package.json文件）2、安装webpack-dev-server (实现自动打包js文件)3、本地安装webpack4、写配置文件：webpack.config.js (写打包的入口和出口文件)5、在package.json的script节点下添加 "dev":"webpack-dev-server --open --port 3000 --contentBase src --hot"6、安装html-webpac原创 2020-07-02 09:13:07 · 152 阅读 · 0 评论 -
《前端》使用vue建立购物车列表界面练习--2020年6月30日
最终效果图：当勾选行时，自动进行总和计算；可以进行单列删除，也可以使用复选框，进行多选批量删除；可以对商品数量进行更改，但商品数量为1时将不能进行减少。我的答案：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale...原创 2020-06-30 19:38:30 · 363 阅读 · 0 评论 -
《前端》vue中的butten小练习
<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title></title> <link rel="stylesheet" href="styles/demo.css" /></head><body> <div id="app"> <fieldset> ...原创 2020-06-29 13:42:26 · 182 阅读 · 0 评论